メインコンテンツまでスキップ

頂点ステージ

gsplatModifyVS チャンクは、頂点ステージでスプラットをカスタマイズします。スプラットごとに一度実行されるため、スプラット全体の移動、回転、拡大縮小、非表示、色付けに適しています。

ライブサンプルを見る - アニメーションするスプラットで、シェーダーチャンクのカスタマイズを確認できます。

Multi Splat

オーバーライド可能な関数​

gsplatModifyVS チャンクでは、次の3つの関数をオーバーライドできます。

関数用途
modifySplatCenterスプラットの中心位置（モデル空間）を変換します
modifySplatRotationScaleスプラットの回転クォータニオンとスケールを調整します
modifySplatColorスプラットの色と不透明度を変換します
void modifySplatCenter(inout vec3 center);
void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale);
void modifySplatColor(vec3 center, inout vec4 color);

変更したい関数だけを実装すれば十分です。

サンプルの仕組み​

上のライブサンプルでは、すべてのスプラットを正弦波で変位させ、金色に明滅させます。これは3つのステップで構成されています。

1. シェーダーチャンクを作成し、必要な関数をオーバーライドします。このサンプルでは uTime ユニフォームを使ってアニメーションします。

uniform float uTime;

void modifySplatCenter(inout vec3 center) {
    float heightIntensity = center.y * 0.2;
    center.x += sin(uTime * 5.0 + center.y) * 0.3 * heightIntensity;
}

void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {
    // no modification
}

void modifySplatColor(vec3 center, inout vec4 clr) {
    float sineValue = abs(sin(uTime * 5.0 + center.y));
    vec3 gold = vec3(1.0, 0.85, 0.0);
    float blend = smoothstep(0.9, 1.0, sineValue);
    clr.xyz = mix(clr.xyz, gold, blend);
}

2. チャンクをシーンの gsplat マテリアルに適用し、再コンパイルされるようにマテリアルを更新します。GLSL と WGSL の両方のチャンクを設定することで、WebGL と WebGPU の両方のデバイスに対応できます。

const sceneMat = app.scene.gsplat.material;

sceneMat.getShaderChunks('glsl').set('gsplatModifyVS', glslVertShader);
sceneMat.getShaderChunks('wgsl').set('gsplatModifyVS', wgslVertShader);
sceneMat.update();

3. ユニフォームを毎フレーム更新します:

let currentTime = 0;
app.on('update', (dt) => {
    currentTime += dt;
    sceneMat.setParameter('uTime', currentTime);
    sceneMat.update();
});

チャンクが使用するすべてのユニフォームとテクスチャは、マテリアルに設定してください。グラフィックスデバイスのスコープにグローバルに設定した値は、これらのチャンクではサポートされていません。

関連項目​