Error with Three.js shader – ERROR :GL_INVALID_OPERATION – fix

[tweetmeme source=”neoRiley” only_single=false] I was just in the process of trying to narrow down what does and doesn’t work in IE11 with Three.js’ shaders and ran into this error message while working with the normalmap shader:

ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

The fix is to simply call computeTangents() on your mesh’s geometry object, and bingo, we’re in business:

model.geometry.computeTangents();

Here’s the block for context:

var shader = THREE.ShaderLib[ "normalmap" ];</pre>
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

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

uniforms[ "tDiffuse" ].value = fdo.colorMap;
uniforms[ "tNormal" ].value = fdo.normalMap;
uniforms[ "tSpecular" ].value = fdo.specularMap;

uniforms[ "diffuse" ].value.setHex( 0xFFFFFF );
uniforms[ "specular" ].value.setHex( 0xFFFFFF );
uniforms[ "ambient" ].value.setHex( 0x222222 );

uniforms[ "shininess" ].value = 10;
parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
mat = new THREE.ShaderMaterial( parameters );

model.geometry.computeTangents();
model.material = mat;

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s