Three Js simple Shader not working

Question

I am trying to run the following simple shader with three.js

mat = new THREE.ShaderMaterial({
  uniforms: {
    color: { type: 'v3', value: new THREE.Color(0xcccccc) }
  },
  vertexShader: 'attribute vec3 vert;\n'
              + 'void main() {\n' 
              + '  gl_Position = vec4(vert, 1.0);\n'
              + '}',
  fragmentShader: 'uniform vec3 color;\n'
                + 'void main() {\n'
                + '  gl_FragColor = vec4(color,1);\n'
                + '}'
})

The shaders compile but the object that has this material is invisible.

This should display the object in a constant light grey color.

When I run this with kick.js shader editor it works as expected.

Predefined materials all work great.

Am I missing something?

what is this shader supposed to do? what is the expected result? — gaitat
– gaitat, Commented Apr 11, 2015 at 17:58
probably to do with settings the gl_Position with the vert attribute. Are you sure it has a value? Take a look at some of the three.js shader experiments I have been doing. — 2pha
– 2pha, Commented Apr 11, 2015 at 18:04

gaitat · Accepted Answer · 2015-04-11 18:08:36Z

3

Your vertex shader should be:

// Multiply each vertex by the model-view matrix and the projection matrix
// (both provided by Three.js) to get a final vertex position. 
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

edited Apr 11, 2015 at 18:08

answered Apr 11, 2015 at 18:03

gaitat

12.7k5 gold badges57 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Three Js simple Shader not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related