3つのjs - シェーダのクローニングと一様な値の変更

Question

私は影付きの地形を生成するシェーダの作成に取り組んでいます。

私の出発点は、lambertシェーダをクローンし、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人にかなり新しいので、誰かがここで正しい方向に向けることができれば、根本的に何かをしているかもしれません。

デモリンクが役に立つ場合は、デモリンクを作成することもできます。

おかげで、 ウィル

EDIT：

はここにいくつかのデモリンクです。シェーダ材料と

デモ：作業ランバート材料とhttp://dev.thinkjam.com/experiments/threejs/terrain/terrain-shader-material.html

デモ：http://dev.thinkjam.com/experiments/threejs/terrain/terrain-lambert-material.html

Answer 1

これが動作しない理由は、デフォルトThree.jsランバートシェーダがあるがするかどうかを判断するために、プリプロセッサマクロ指示#ifdefを使用しています

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

&をデフォルトのシェーダーに変更するクローンを作成するように設定されている場合は、その素材に関連するプロパティを設定する必要があります。テクスチャマップの場合は、Three.js WebGLRenderer.jsは、この行をしていますので、あなたのシェーダ材料にmaterial.map = true;を設定してみてください

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

。

もちろん、独自のシェーダを作成する予定であり、さまざまなシェーダスニペットを動的に組み込む必要がない場合は、シェーダを明示的に書くだけで済みます。心配する必要はありませんこの。