textalive-app-babylonjs-text-sample

本リポジトリは Babylon.js および TextAlive App API を用いてミュージックビデオに合わせて歌詞の 3D オブジェクトを表示するサンプルアプリです。

サンプルアプリの概要

• アプリを起動し画面に「Setup OK!」と表示されたら、画面を押すことで曲が再生されます。
  

- 曲の再生に合わせてフレーズ単位で歌詞が画面中央に 3D オブジェクトとして表示されます。
- マウスやタップで画面をドラッグすることで歌詞周囲を回るよう視点変更します。

セットアップ方法

前準備

Node.js をインストールして下さい。
コマンドプロンプトや端末などで npm のコマンドを実行できればOKです。

パッケージのインストール

package.json のあるディレクトリにて下記コマンドを実行し、パッケージをインストールして下さい。

npm install

TextAlive App API トークンの設定

トークンを https://developer.textalive.jp/ から取得して下さい。
Player を生成時の引数で "your token” と書かれている箇所に設定して下さい。

Player の生成は src/SampleSequence.ts 内 TextAliveAppAPISampleSequence.initialize() で行っていますので、該当の箇所を書き換えてアプリを動作させて下さい。

this._textalivePlayer = new Player({
    app: {
        token: "your token"
    },
    valenceArousalEnabled: true,
    vocalAmplitudeEnabled: true,
    mediaElement: document.querySelector<HTMLElement>("#media"),
});

サーバの起動

下記コマンドを実行することで、サーバが起動します。

npm run build-dev

下記の出力が表示されていれば OK です。
その URL にアクセスすることでアプリを確認することができます。

Server running at http://localhost:**** (**** はデフォルト 1234 のポート番号)

ソースコード概要

index.ts

アプリ起動時のエントリーポイント。

BabylonjsText3DSample.ts

• class BabylonjsText3DSample
  • Babylonjs にて 3D シーンを構成、テキスト表示するための機能をまとめたクラス。
    

SampleSequence.ts

• class BabylonjsText3DSampleSequence
  • BabylonjsText3DSample を生成し、準備が完了したらテキストを表示するクラス。
    
• class TextAliveAppAPISampleSequence
  • BabylonjsText3DSampleSequence に TextAlive App API を使用し、楽曲再生に合わせた歌詞表示機能を実装したクラス。
    

Tips

再生楽曲の変更方法

TextAliveAppAPISampleSequence.onAppReady() で読み込む楽曲地図（ビート、コード、歌詞タイミング etc.）の設定を行っていますので、その箇所を書き換えることで別の楽曲でもアプリを再生することができます。

PlayerVideoOptions は特定バージョンの音楽地図を読み込む際に指定します。指定しない場合、最新の音楽地図の設定が読み込まれます。

ソースコードでは「Loading Memories / せきこみごはん feat. 初音ミク」の音楽地図を読み込む設定になっています。

const musicUrl = "https://piapro.jp/t/RoPB/20220122172830";
const options: PlayerVideoOptions = {
    video: {
        // 音楽地図訂正履歴: https://songle.jp/songs/2243651/history
        beatId: 4086301,
        chordId: 2221797,
        repetitiveSegmentId: 2247682,
        // 歌詞タイミング訂正履歴: https://textalive.jp/lyrics/piapro.jp%2Ft%2FRoPB%2F20220122172830
        lyricId: 53718,
        lyricDiffId: 7076,
    }
};
this._textalivePlayer.createFromSongUrl(musicUrl, options);

3D Text の生成時パラメータ

MeshBuilder.CreateText() にてテキストを生成する際、オプションプロパティにてテキストの形状やマテリアル関連の設定ができます。

参考資料：公式リファレンス
https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/set/text

下記は BabylonjsText3DSample.Disp3DText() のテキスト生成処理にオプションプロパティの説明コメントを追加したものになります。

this._textMesh = MeshBuilder.CreateText("SampleText", text, this._fontData,
{
    size: 4, // テキストのサイズ
    resolution: 8, // 曲線の滑らかさ
    depth: 1, // テキストの奥行幅

    // 1文字ごとの配色設定
    // @param index テキストにおいて何バイト目（何文字目）開始の文字か
    perLetterFaceColors: (index: number) => {
        return [
            new Color4(1, 1, 1, 1), // 前面の色
            new Color4(1, 0, 1, 1), // 側面の色
            new Color4(1, 1, 1, 1)  // 背面の色
        ];
    }
}, this._scene, earcut);

perLetterFaceColors: (index: number) は1文字ごとにテキストの色を設定できる関数です。
index はテキストにおいて何バイト目（何文字目）開始の文字かを示しており、例えばグラデーションをかけたい場合などに活用できます。

「何バイト目（何文字目）開始の文字か」と書いていますが、これは日本語のようなマルチバイト文字の場合「index == 何文字目」が成立しない為です。
マルチバイト文字テキストのバイト数（文字数）を取得するには、TextEncoder.encode(text).length などを用いるよう注意しましょう。

フォントデータの作成、変更方法

ttf ファイルを Facetype.js にて json に変換することで、3D Text 生成の為のフォントファイルを生成できます。

https://gero3.github.io/facetype.js/

生成したフォントの json ファイルは assets/fonts 以下に配置して下さい。

BabylonjsText3DSample.constructor() でフォントの json ファイルを読み込んでいますので、その個所を書き換えることで別のフォントを使用できます。

参考資料：公式リファレンス
https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/set/text

特定文字のみのフォントデータ差し替え方法

フォントの json ファイル内 "glyphs" 以下に文字の形状データが入っているので、それを変更することで差し替え可能です。

{
    "glyphs": {
        "0": { "0" の形状データ },
        "1": { "1" の形状データ },
    ...
        "*": { "*" の形状データ },
    ...
}

License

package

• babylonjs
  Apache License 2.0 http://www.apache.org/licenses/LICENSE-2.0
  https://github.com/BabylonJS/Babylon.js/blob/master/license.md
  
• earcut
  Copyright (c) 2016, Mapbox https://github.com/mapbox/earcut/blob/main/LICENSE
  
• textalive-app-api
  https://github.com/TextAliveJp/textalive-app-api/blob/master/LICENSE.md
  
• buffer
  Copyright (c) Feross Aboukhadijeh, and other contributors.
  https://github.com/feross/buffer/blob/master/LICENSE
  
• copy-files-from-to
  Copyright (c) 2017 webextensions.org
  https://github.com/webextensions/copy-files-from-to/blob/master/LICENSE
  
• del-cli
  Copyright (c) Sindre Sorhus sindresorhus@gmail.com (https://sindresorhus.com)
  https://github.com/sindresorhus/del-cli/blob/main/license
  
• parcel
  Copyright (c) 2017-present Devon Govett
  https://github.com/parcel-bundler/parcel/blob/v2/LICENSE
  
• process
  Copyright (c) 2013 Roman Shtylman shtylman@gmail.com
  https://github.com/defunctzombie/node-process/blob/master/LICENSE
  
• typescript
  Apache License 2.0 http://www.apache.org/licenses/LICENSE-2.0
  https://github.com/microsoft/TypeScript/blob/main/LICENSE.txt
  

Font

• Mplus 1 Code
  Copyright 2021 The M+ FONTS Project Authors
  https://github.com/coz-m/MPLUS_FONTS
  
• 自家製 Rounded M+
  自家製フォント工房
  http://jikasei.me/font/rounded-mplus/about.html