Jak poprawnie utworzyć normalną mapę w THREE.js?

Question

Właśnie próbował zastosować Normal map Ninja demo do sześcianu w moim sceny z następującym kodem - za pomocą nowego najnowszą wersję Three.js z dev oddziału:

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

Ja jednak otrzymuję następujący błąd WebGL w Chrome :

GL_INVALID_OPERATION : glDrawXXX: attempt to access out of range vertices 

W Firefoksie, nie otrzymuję takiego błędu, ale kostka również się nie wyświetli. Używając standardowego, kolorowego MeshLambertMaterial, wszystko działa dobrze. Tak więc musi wystąpić konflikt z ShaderMaterial. Jeśli używam najnowszej wersji Three.js z gałęzi MASTER, nie poprawia to sytuacji - pojawia się ten sam błąd.

Każdy pomysł, dlaczego tak się dzieje i co muszę zmienić, aby działało?

Answer 1

Próbowałeś to dodać?

geometry.computeTangents();