Behind the KAI Design Dept. Expertise: WebGL Line Blur, Video Scrubbing, and 3D Animation

This venture showcases the web site created for the design division of KAI Company, a Japanese firm with 117 years of workmanship rooted in blade-making. The location displays the refined aesthetic sensibility the model has cultivated over its lengthy historical past.

Quite than merely manufacturing merchandise, KAI additionally considers the actions of the individuals who use its instruments. From this concept got here the principle copy: “Slicing sharpness attracts our lives.” The visuals and interactions have been fastidiously formed round this idea. The strains surrounding the merchandise act as tips of movement—symbolizing how human gestures draw and form each day life. Via interactive video scrubbing, guests can expertise the tactile sensation of utilizing these instruments. The location presents KAI’s aesthetic as a “touchable video” expertise.

Study trendy net animation utilizing GSAP 3 with 34 hands-on video classes and sensible tasks — good for all talent ranges.

Test it out

Two Technical Challenges

There have been two main technical hurdles throughout improvement:

• Expressing naturally blurred strains with depth of subject (DoF)
• Implementing video scrubbing that responds easily to pull interactions

The next sections clarify how every problem was approached.

Pure DoF for the Strains

Typical depth-of-field implementations on the net typically go away a pointy core beneath stacked blur layers, creating an unnatural end result. For instance, right here’s a picture generated by Gemini that illustrates this frequent subject:

In contrast to the DoF strategies utilized in conventional 3DCG software program—which depend on a depth map—reaching a clear, pure blur purely in WebGL proved difficult. Consequently, I explored a special method (although I’d love to listen to if anybody is aware of a greater one):

1. Render crisp, unblurred strains into an FBO.
2. Render a second FBO that enlarges the strains by the blur radius and encodes extra knowledge in its RGB channels:
   • G = blur space
   • R = blur depth
3. Mix the 2 and apply a planar Gaussian blur utilizing a vertical and horizontal two-pass course of.

To deal with line intersections, the method is carried out twice—as soon as for the foreground and as soon as for the background—separated by the origin.

Video Scrubbing

On trendy Mac/Chrome environments, scrubbing will be applied as merely as:

video.currentTime = sec;

Nonetheless, for cross-browser compatibility, two extra steps have been required. First, every video was fastidiously re-encoded utilizing ffmpeg. Not each parameter is crucial, however an important issue is shortening the keyframe interval. Whereas -g 1 (All-Intra) turns each body into an I-frame, the ensuing file measurement wasn’t sensible, so I opted for half that worth as a substitute.

ffmpeg 
  -i INPUT.mov 
  -hide_banner 
  -c:v libx264 
  -crf 24 
  -y 
  -pix_fmt yuv420p 
  -an -sn -dn  # Take away audio, subtitle, and knowledge tracks
  -map 0:v:0   # Hold solely the principle video monitor
  -profile:v baseline   # Light-weight decoding profile
  -level 3.1   # Cell compatibility
  -g 12 -keyint_min 12 -sc_threshold 0   # Shorter keyframe interval for smoother scrubbing
  -bf 0 -refs 1 
  -tune fastdecode   # Scale back decoding value
  -x264-params "no-deblock=1:weightp=0:mbtree=0:rc-lookahead=0:aq-mode=0:subme=1:trellis=0:me=dia:partitions=none"   # Disable heavy decoding options
  -video_track_timescale 24000   # Repair tbn to 24000 for 24fps consistency
  -movflags +faststart   # Internet-optimized header
  OUTPUT.mp4

Even so, Firefox compatibility remained a problem, so I added a WebCodecs-based fallback. I initially thought of utilizing mp4box, however in the end selected mediabunny as a result of it’s actively maintained and simpler to work with.

import { ALL_FORMATS, BlobSource, Enter, VideoSampleSink } from 'mediabunny';

...

const blobForDecode = await loadVideo(title, suffix);
this._input = new Enter({
  supply: new BlobSource(blobForDecode),
  codecs: ALL_FORMATS,
});
const vtrack = await this._input.getPrimaryVideoTrack();
this._sink = new VideoSampleSink(vtrack);

this._canvas = doc.createElement('canvas');
this._ctx = this._canvas.getContext('second');
this._canvasTexture = new CanvasTexture(this._canvas);
this._canvas.width = vtrack.displayWidth;
this._canvas.peak = vtrack.displayHeight;

...

this._sink.getSample(sec).then((pattern) => {
  const vFrame = pattern.toVideoFrame();
  this._ctx.drawImage(vFrame, 0, 0, this._canvas.width, this._canvas.peak);
  vFrame.shut();
  pattern.shut();
  this._canvasTexture.needsUpdate = true;
});

Line Animation Synced with Video

To animate the strains in 3D and hold them synchronized with the video, Blender was used. On the identical timeline because the reference footage, the next components have been inbuilt Blender, and a light-weight JSON was exported through Python:

• Line trajectories
• Timing of look and disappearance (managed by shifting cubes alongside the strains)

About mount inc.

We at mount inc. plan and produce a variety of artistic work, primarily web sites—from marketing campaign and promotional websites that talk a product’s attraction to company info websites and on-line shops for trend manufacturers. We additionally work throughout movie, print, and different media. All through each venture, we attempt to make no compromises. We face every problem sincerely and intention to create one thing we will proudly present to anybody—one thing we ourselves really love. With that spirit at our core, we proceed to create work that brings significant worth to each our shoppers and the world.

Go to our firm web site to see extra of our tasks.