Babylon.js で作成したメッシュの頂点毎に着色する

これはBabylon.js Advent Calendar 2023 の18日目の記事です。

この記事について

今回はメッシュの頂点を編集する方法について記載します。

立方体の頂点色を編集をする

CreateMeshをしたオブジェクトに対して、前回と同様にgetVerticesDataで色情報を取得します。
前回は、getVerticesDataの第一引数に、「BABYLON.VertexBuffer.PositionKind」を指定しましたが、色をコントロールする際は、「BABYLON.VertexBuffer.ColorKind」を指定します。

四角形の色情報を取得する

var box = BABYLON.MeshBuilder.CreateBox("box1",  scene);
var boxCol = box.getVerticesData(BABYLON.VertexBuffer.ColorKind);
alert(boxCol);

取得した変数を表示してみたところ、結果はnullでした。
頂点の色の初期値は設定されていないようです。

それでは、試しに立方体の1点の色を変更してみます。
CreateBoxで立方体を作成し、配列にRGBカラーを1つ用意。
最期に頂点編集の時と同じように、setVerticesDataで、色情報を渡します。

四角形の1点に色情報を指定する

    //立方体作成
    var box = BABYLON.MeshBuilder.CreateBox("box1",  scene);

    var colors = [];
    colors.push(1.0, 0.5, 0.0);
    box.setVerticesData(BABYLON.VertexBuffer.ColorKind, colors);

実行結果は下図のようになりました。

1つの頂点に橙色が着色され、他の頂点に向かってグラデーションで表示されていますが、指定した頂点以外の部分が全て黒になってしまいました。未指定の頂点は0（黒）になるようですね。(初期値もnullでしたし)

残りの各頂点に白色も指定します。
頂点データ（x,y,zの配列）を取得して、3で割って頂点数を収集して指定します。

四角形の1点を橙、他は白色を指定

    var boxPos = box.getVerticesData(BABYLON.VertexBuffer.PositionKind);

    var colors = [];
    colors.push(1.0, 0.5, 0.0);
    for(var p = 0; p < boxPos.length / 3; p++) {
        colors.push(1, 1, 1);
    }
    box.setVerticesData(BABYLON.VertexBuffer.ColorKind, colors);

実行結果は下図です。

Playgroundはこちら。
https://playground.babylonjs.com/#UY72D0#15

頂点間の色は、自動でグラデーションされますね。

もうすこし色の指定を増やしてみます。

四角形の9点に色を指定

    var boxPos = box.getVerticesData(BABYLON.VertexBuffer.PositionKind);

    var colors = [];
    colors.push(1.0, 0.5, 0.0,1);
    colors.push(1.0, 0.5, 0.0,1);
    colors.push(1.0, 0.5, 0.5,1);
    colors.push(0.0, 0.5, 0.5,1);

    colors.push(5.0, 0.5, 1.0,1);
    colors.push(5.0, 0.5, 1.0,1);
    colors.push(0.0, 0.5, 0.0,1);
    colors.push(0.0, 0.5, 0.0,1);

    colors.push(0.0, 0.0, 1.0,1);

    for(var p = 3; p < boxPos.length / 3; p++) {
         colors.push(1.0, 1.0, 1.0,1);
    }
    box.setVerticesData(BABYLON.VertexBuffer.ColorKind, colors);

面が変わると、別頂点として着色されました。
（右図の中央の頂点から右は緑色から橙へグラデーションが始まるが、左は白色から青へとグラデーションしている。）

最期に

今回は、立方体の頂点の色を指定してみました。

頂点の位置と色を指定できましたので、次回は少し冬らしいものを作成してみます。