How to make a normal map in THREE.js correctly?
javascript, shader, three.js, webgl
Solution
Tried adding this?
geometry.computeTangents();
Problem
I just tried to apply the Normal map Ninja demo to a cube in my scene with the following code - using new latest Three.js version from dev branch: ``` // 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 ); ``` I am, however, getting the following WebGL error in Chrome: ``` GL_INVALID_OPERATION : glDrawXXX: attempt to access out of range vertices ``` In Firefox, I am not getting an error like this, but the cube wouldn't show up either. Using a standard colored `MeshLambertMaterial`, everything's working fine. So, there needs to be a conflict with the `ShaderMaterial`. If I use the latest Three.js version from MASTER branch, it doesn't improve the situation - same error occurs. Any idea why this may be the case and what I need to change to get it working?