3

私は現在THREE.ShaderMaterial、THREE js のベース チャンクとカスタマイズされたフラグメント シェーダー チャンクのほとんどを使用してマテリアルを再構築し、ベースの phong マテリアルをカスタマイズしています。私が抱えている問題は#define's、three.js の多くの部分にあり、それらを設定する適切な方法を見つけようとしています。

実際のプログラムでは、このようになります

// Clone the uniforms
var uniforms = THREE.UniformsUtils.clone(shader['uniforms']);

// Set uniform values
uniforms["map"].value = texture;
uniforms["diffuse"].value = new THREE.Color( 0xff0000 );
uniforms["envMap"].value = envMapt;
uniforms["reflectivity"].value = 0.7;

// Create material using shader
var material = new THREE.ShaderMaterial( {
  vertexShader: shader['vertexShader'],
  fragmentShader: shader['fragmentShader'],
  uniforms: uniforms,
  lights: true,
  //map: true, // These don't  seem to do anything
  //envMap: true // These don't  seem to do anything
} );

このように構築されたカスタムシェーダーを使用して

    fragmentShader: [

        "#define USE_MAP",
        //"#define USE_ENVMAP",
        "uniform vec3 diffuse;",
        "uniform float opacity;",

.......
        "void main() {",

            THREE.ShaderChunk[ "alphatest_fragment" ],
            THREE.ShaderChunk[ "specularmap_fragment" ],
......

            // NDJ - Using custom frag shader
            //THREE.ShaderChunk[ "lights_phong_fragment" ],
            CustomShaderChunk[ "lights_phong_fragment" ],
......

            THREE.ShaderChunk[ "fog_fragment" ],

        "}"

    ].join("\n")

シェーダーの開始時に必要な #defines を手動で追加することで、必要な処理を実行できます。ただし、これは適切な設定方法とは思えず、あまり柔軟ではありません。

これに似たものですが、基本定義のみが必要です。これらを設定する方法を見つけるために API と例を調べてみましたが、うまく動作しないようです。

4

1 に答える 1

2

説明したとおりに正確に実行してください。以下にサンプルを示します。

ph = new THREE.MeshPhongMaterial( { ambient: 0x000000,
                    color: 0x0020ff,
                    specular: 0x2040ff,
                    shininess: 30,
                    map: theMap,
                    side: THREE.DoubleSide } );
ph.defines = {waldo_waldo_three: '(dx+3)', wonke: 7};

慎重である場合は、既存の「定義」オブジェクトを上書きすることに注意してください

于 2012-12-06T00:58:09.467 に答える