5

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?

Bo Persson
  • 90,663
  • 31
  • 146
  • 203
user1495743
  • 96
  • 1
  • 5

2 Answers2

4

Tried adding this?

geometry.computeTangents();
mrdoob
  • 19,334
  • 4
  • 63
  • 62
  • May it be possible - if not even logical - that a shader like this will never work on an ImmediateRenderObject? This seems plausible to me, because the only information you can feed into the buffers - in dev branch - are vertex positions, normals, UVs and colors, but no vertex tangents. But those seem to be necessary for correct normal map rendering. Is that correct or is there a way to apply the "normal" shader to an ImmediateRenderObject? :) – user1495743 Jul 03 '12 at 20:39
0

Update:

<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/BufferGeometryUtils.js"></script>

THREE.BufferGeometryUtils.computeTangents( geometry )

where geometry has to be indexed

Atul Mourya
  • 191
  • 1
  • 10