# にび

- **Type**: Work / Product
- **Date**: 2026/02/20
- **Tags**: Music, Video Production, Web Development
- **Tools**: Three.js, WebGPU, WebGL, Compute Shader
- **Canonical URL**: https://monotonmusic.com/works/nibi/

Web Music Video Experience by monoton

## Details

Music, Visual Design and Web Development by monoton / Haruma Tasaki (Philtz)

2026年にリリースしたオリジナル楽曲「にび」のミュージックビデオである。楽曲、映像システム、Webアプリを制作した。
「にび」は灰色がかった暗い色を指す。本作ではインクのような着色を映像の原理に据えた。CMYK4色のパーティクルが3D空間を漂い、歌詞やモチーフの形へ集合と離散を繰り返すことで映像を構成する。色の重なりには減法混色の計算を用いており、粒が密集するほどインクが混ざるように暗く沈んでいく。ディスプレイ上の表現でありながら、紙の上の網点が躍る、ダイナミックな印刷物のような質感が立ち現れる。パーティクルは、平面やノイズ、振り子などの図形パターンから文字へ収束し、再び散る。完成した文字の連続ではなく、集合と離散の遷移そのものが映像の見どころである。
本作の映像はすべてWebアプリ上で一続きの動画としてレンダリングされており、MVの動画はカット編集なしのワンカットで書き出されたものである。歌詞の文字は3D空間上に配置されており、作者が設定したカメラアングルによって切り取られる。動画への書き出しでは、圧縮やフレームレートの制約により、リアルタイムレンダリングの情報が削ぎ落とされる。このWebアプリそのものをビューワーとして公開することで、視聴者はその手前の状態を劣化なく体験し、ブラウザ上でカメラを自由に動かして、MVとして選び取られた視点の外側を探索できる。映像作品の制作プロセスと、作者の視点の選択そのものを体験として開放する試みである。ソースコードもGitHubで公開している。
パーティクルの物理演算にはThree.js WebGPUのTSL compute shaderを使用し、GPUによる大量の粒子のリアルタイム処理を実現した。WebGPU非対応環境ではWebGL 2にフォールバックし、スマートフォンでも動作する。

## Shop

Single by monoton

## Purchase

- [Stream](https://linkco.re/yadAHtVf)

## Links

- [Web Executable MV](https://monotonmusic.com/nibi/)
- [Article](https://note.com/monoton_music/n/nd0b2f03ad1e9)
- [Source](https://github.com/monoton-music/nibi)
- [niconico](https://www.nicovideo.jp/watch/sm45971593)
- [YouTube](https://youtu.be/VFeW3y_3rv0?si=zDNYnOXqd2QPmiH0)
- [BiliBili](https://www.bilibili.com/video/BV1irfMBYEFZ)
- [Stream](https://linkco.re/yadAHtVf)

## Images

- ![にび](https://monotonmusic.com/images/nibi-jacket.webp)