11

影のある地形を生成するためのシェーダーの作成に取り組んでいます。

私の出発点は、ランバートシェーダーのクローンを作成し、ShaderMaterialを使用して、最終的に自分のスクリプトでカスタマイズすることです。

標準的な方法がうまく機能します：

var material = new MeshLambertMaterial({map:THREE.ImageUtils.loadTexture('images/texture.jpg')});

var mesh = new THREE.Mesh(geometry, material);

etc

結果： 標準のランバート素材での結果

ただし、ランバートマテリアルをベースとして使用し、その上で作業したいので、これを試しました。

var lambertShader = THREE.ShaderLib['lambert'];
var uniforms = THREE.UniformsUtils.clone(lambertShader.uniforms);

var texture = THREE.ImageUtils.loadTexture('images/texture.jpg');
uniforms['map'].texture = texture;

var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: lambertShader.vertexShader,
    fragmentShader: lambertShader.fragmentShader,
    lights:true,
    fog: true
});

var mesh = new THREE.Mesh(geometry, material);

これの結果： ランバートシェーダーのクローンを作成し、マップユニフォームを変更した結果

シェーダーが追加した新しいテクスチャを考慮していないように見えますが、ユニフォームをログに記録したときにインスペクターを見ると、マップオブジェクトは正しい値を持っています。

私は3人にかなり慣れていないので、根本的に間違ったことをしている可能性があります。誰かがここで私を正しい方向に向けることができれば、それは素晴らしいことです。

役立つ場合は、デモリンクを表示することもできますか？

ありがとう、ウィル

編集：

ここにいくつかのデモリンクがあります。

シェーダーマテリアルを使用したデモ：http：//dev.thinkjam.com/experiments/threejs/terrain/terrain-shader-material.html

ランバート素材を使用したデモ：http：//dev.thinkjam.com/experiments/threejs/terrain/terrain-lambert-material.html

4

1 に答える 1

8

これが機能しない理由は、デフォルトのThree.jsランバートシェーダーがプリプロセッサーマクロディレクティブ#ifdefを使用して、マップ、envmap、ライトマップなどを使用するかどうかを決定するためです。

Three.js WebGLRendererは、適切なプリプロセッサディレクティブ（#define）を設定して、マテリアルオブジェクトに特定のプロパティが存在するかどうかに基づいて、これらのシェーダーを有効にします。

デフォルトのシェーダーのクローン作成と変更のアプローチを採用する場合は、マテリアルに関連するプロパティを設定する必要があります。テクスチャマップの場合、Three.jsWebGLRenderer.jsには次の行があります。

parameters.map ? "#define USE_MAP" : ""

したがってmaterial.map = true;、シェーダーマテリアルを設定してみてください。

もちろん、独自のシェーダーを作成することがわかっていて、さまざまなシェーダースニペットを動的に含める必要がない場合は、シェーダーを明示的に作成するだけで、これについて心配する必要はありません。

于 2012-09-17T00:28:49.843 に答える