如何正確地在THREE.js中製作正常的地圖？

我只是想給Normal map Ninja demo用下面的代碼應用到立方體在我的場景 - 使用新的最新版本three.js所從Dev分支：如何正確地在THREE.js中製作正常的地圖？

// common material parameters 

var ambient = 0x050505, diffuse = 0x331100, specular = 0xffffff, shininess = 10, scale = 23; 

// normal map shader 

var shader = THREE.ShaderUtils.lib[ "normal" ]; 
var uniforms = THREE.UniformsUtils.clone(shader.uniforms); 

uniforms[ "enableAO" ].value = true; 
uniforms[ "enableDiffuse" ].value = false; 
uniforms[ "enableSpecular" ].value = false; 
uniforms[ "enableReflection" ].value = true; 

uniforms[ "tNormal" ].texture = THREE.ImageUtils.loadTexture("normal.jpg"); 
uniforms[ "tAO" ].texture = THREE.ImageUtils.loadTexture("ao.jpg"); 

uniforms[ "tDisplacement" ].texture = THREE.ImageUtils.loadTexture("displacement.jpg"); 
uniforms[ "uDisplacementBias" ].value = - 0.428408 * scale; 
uniforms[ "uDisplacementScale" ].value = 2.436143 * scale; 

uniforms[ "uDiffuseColor" ].value.setHex(diffuse); 
uniforms[ "uSpecularColor" ].value.setHex(specular); 
uniforms[ "uAmbientColor" ].value.setHex(ambient); 

uniforms[ "uShininess" ].value = shininess; 

uniforms[ "tCube" ].texture = reflectionCube; 
uniforms[ "uReflectivity" ].value = 0.1; 

uniforms[ "uDiffuseColor" ].value.convertGammaToLinear(); 
uniforms[ "uSpecularColor" ].value.convertGammaToLinear(); 
uniforms[ "uAmbientColor" ].value.convertGammaToLinear(); 


var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, fog: false }; 
var displacementMaterial = new THREE.ShaderMaterial(parameters); 

/* 
var diamond = new THREE.Diamond({ 
    material: bumpmapMaterial 
}); 
*/ 

var diamond = new THREE.Mesh(
    new THREE.CubeGeometry(50, 50, 50), 
    displacementMaterial 
);

我，但是，讓在Chrome以下WebGL的錯誤：

GL_INVALID_OPERATION : glDrawXXX: attempt to access out of range vertices

在Firefox中，我沒有收到像這樣的錯誤，但立方體也不會顯示出來。使用標準顏色MeshLambertMaterial，一切工作正常。所以，需要與ShaderMaterial發生衝突。如果我使用MASTER分支的最新Three.js版本，它不會改善這種情況 - 同樣的錯誤發生。

任何想法，爲什麼這可能是這種情況，我需要改變以使其工作？

來源

2012-07-02 user1495743

試過添加這個？

geometry.computeTangents();

來源

2012-07-03 10:50:52 mrdoob

是否有可能 - 如果不是邏輯上的話 - 這樣的着色器將永遠不會在ImmediateRenderObject上工作？這似乎對我來說是合理的，因爲你可以將信息輸入緩衝區 - 在dev分支中 - 是頂點位置，法線，UV和顏色，但是沒有頂點切線。但是這些對於正確的法線貼圖渲染來說似乎是必需的。這是正確的還是有辦法將「正常」着色器應用於ImmediateRenderObject？ :) – user1495743

如何正確地在THREE.js中製作正常的地圖？

回答

相關問題