三個js--克隆着色器並更改統一值

我的出發點是克隆lambert着色器並使用ShaderMaterial最終用我自己的腳本對其進行定製。

的標準方法效果很好：

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

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

etc

結果： Result with standard lambert material

不過，我想使用蘭伯特材料爲基礎，工作在它的上面，所以我想這：

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);

這一個結果： Result for cloning lambert shader and changing map uniforms

看起來好像着色器沒有考慮到我添加的新紋理，但是在記錄制服時查看檢查器，地圖對象具有正確的值。

我很新，所以我可能會做一些根本性的錯誤，如果有人能指出我在正確的方向在這裏，那將是偉大的。

我也可以把演示鏈接，如果這將有所幫助？

感謝，威爾

編輯：

下面是一些演示鏈接。

演示與着色材料：http://dev.thinkjam.com/experiments/threejs/terrain/terrain-shader-material.html

演示與工作蘭伯特材料：http://dev.thinkjam.com/experiments/threejs/terrain/terrain-lambert-material.html

來源

2012-08-23 WillDonohoe

是的，演示鏈接確實會有幫助。 – mrdoob

嗨mrdoob，爲快速回復歡呼。我添加了該帖子的演示鏈接。如果你可以擺脫這種情況，那將是驚人的 – WillDonohoe

我注意到了特定於三種的webgl渲染器中的一些功能。MeshLambertMaterial不會與THREE.ShaderMaterial發生。特別是清爽的制服。 https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L4858 這只是一個在黑暗中刺傷，但是這是可能導致問題的東西？ – WillDonohoe

這不工作的原因是默認three.js所朗貝爾着色器使用預處理宏指令#ifdef，以確定是否使用地圖，env地圖，光照貼圖等。

Three.js WebGLRenderer根據資源上是否存在某些屬性來設置相應的預處理器指令（#define）以啓用這些着色器片段目的。

如果您採取克隆方法&修改默認着色器，則必須在材質上設置相關屬性。對於紋理貼圖的three.js所WebGLRenderer.js有這樣一行：

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

因此，嘗試爲您的着色材料設置material.map = true;。

當然，如果您知道自己將要編寫自己的着色器，並且不需要動態包含各種着色器片段，則可以明確編寫着色器，而不必擔心這個。

來源

2012-09-17 00:28:49 fuzic

謝謝@fuzic！ – WillDonohoe

三個js--克隆着色器並更改統一值

回答

相關問題