LYRICS LIVE

Overview

「文字を魅せる」ことを主題にしたリリックアプリです。歌声と同期した歌詞が、ライブ会場の空間へ広がっていきます。

前回のプログラミングコンテストでは文字を思うように魅せることができず、時間をかけて作った初音ミクのモデルも活かしきれませんでした。その心残りから、改めて挑戦した作品です。

Direction

最もこだわったのは「カメラの焦点が歌詞と同期して回転する」演出です。ライブ会場そのものは動かさず、カメラの視点だけが歌唱中の歌詞を追って巡ります。歌い終えた歌詞もその場では消えず、球面の軌道に沿って流れ続けることで、会場全体にリリックが広がっていく演出を実現しています。

キャラクターの表現にもこだわりました。サビへ向かうにつれてパーツがだんだんと組み上がっていき、サビに入ると初音ミクがステージの上で踊り出します。ビートに合わせてペンライトやスポットライトも明滅し、ライブ会場の高揚感を表現しました。

Technical

Rust と WGSL で実装し、WebAssembly として動作します。歌詞の取得と再生位置の同期には TextAlive App API を使用しています。描画は WebGPU を優先し、非対応の環境では WebGL2 へ自動的にフォールバックします。Apple A9 世代のタブレットからスマートフォン、PC まで動作を確認しています。

頂点バッファを一切持たない構成が特徴で、初音ミク・ライブ会場・歌詞グリフのすべての頂点を、各頂点に自動で割り振られる通し番号（vertex_index）だけをもとに、頂点シェーダーが計算によって組み立てます。ジオメトリや歌詞データはテクスチャとして GPU へ転送し、フレーズ・ビート区間の二分探索、親子関係で回転が伝わる階層姿勢計算（FK: Forward Kinematics）、パーツの集合演出、文字アトラスの参照までを GPU 上で完結させています。

初音ミクのモデルは、三角形の頂点をひとつひとつ手作業でプロットして自作しました。ドームや客席のような規則的に並ぶ要素は、プロシージャルに生成しています。

Credits

本アプリは『初音ミク「マジカルミライ 2026」プログラミング・コンテスト』応募作品です。楽曲は『初音ミク「マジカルミライ 2026」楽曲コンテスト』の対象楽曲を使用し、ジャケット画像には各楽曲の MV サムネイル画像を使用しています。