にび
Web Music Video Experience by monoton
Music, Visual Design, Web Development: monoton / Haruma Tasaki (Philtz)
2026年にリリースしたオリジナル楽曲「にび」のミュージックビデオである。楽曲、映像システム、Webアプリを制作した。
「にび」は灰色がかった暗い色を指す。本作ではインクのような着色を映像の原理にした。CMYK4色のパーティクルが3D空間を漂い、歌詞やモチーフの形へ集合と離散を繰り返すことで映像を構成する。色の重なりには減法混色の計算を用いており、パーティクルが密集するほど、インクが混ざるように暗く沈んでいく。ディスプレイ上の表現でありながら、紙の上で網点が躍る、動きのある印刷物のような質感になる。パーティクルは、平面やノイズ、振り子などの図形パターンから文字へ収束し、再び散る。映像の見どころは、文字が完成した姿よりも、集合と離散を行き来する遷移そのものにある。
本作の映像は全てWebアプリ上で一続きの動画としてレンダリングされており、MVの動画はカット編集なしのワンカットで書き出されたものである。歌詞の文字は3D空間上に配置されており、作者が設定したカメラアングルによって切り取られる。動画への書き出しでは、圧縮やフレームレートの制約により、リアルタイムレンダリングの情報が削ぎ落とされる。このWebアプリそのものをビューワーとして公開しているため、視聴者はその手前の状態を劣化なく体験でき、ブラウザ上でカメラを自由に動かして、MVとして選ばれた視点の外側を見て回れる。ソースコードもGitHubで公開している。
パーティクルの物理演算にはThree.js WebGPUのTSL compute shaderを使用し、大量のパーティクルをGPUでリアルタイムに処理している。WebGPU非対応環境ではWebGL 2にフォールバックし、スマートフォンでも動作する。
Music, Visual Design, Web Development: monoton / Haruma Tasaki (Philtz)
The music video for "にび" (nibi), an original song released in 2026. monoton made the song, the visual system, and the web app.
"にび" refers to a dark, grayish color, and the piece builds its visuals on ink-like coloring. Particles in the four CMYK colors drift through 3D space and repeatedly gather into, and scatter from, the shapes of lyrics and motifs to form the image. Overlapping colors are computed with subtractive color mixing, so the denser the particles, the darker they sink, as if inks were mixing. Although it lives on a screen, it takes on the texture of dynamic print, with halftone dots dancing across paper. The particles converge from geometric patterns such as planes, noise, and pendulums into letters, and scatter again. The highlight is not a sequence of finished letters but the transitions of gathering and scattering themselves.
All visuals are rendered in the web app as one continuous video, and the music video was exported as a single take with no cuts. The lyric letters are placed in 3D space and framed by camera angles set by the artist. Exporting to video strips information from the real-time rendering through compression and frame-rate limits. Because the web app itself is published as a viewer, the audience can experience the state before that loss without degradation, move the camera freely in the browser, and look around beyond the viewpoints chosen for the music video. The source code is also published on GitHub.
The particle physics runs on TSL compute shaders in Three.js WebGPU, processing a large number of particles on the GPU in real time. In environments without WebGPU it falls back to WebGL 2, and it also runs on smartphones.