Custom shader - Three.js

Question

I am trying to use a custom shader with Three.js. I tried to do it like the many examples, but it doesn't work. My code is:

var vertex = "void main(){vec4 mvPosition = modelViewMatrix * vec4( position, 1.0    );gl_Position = projectionMatrix * mvPosition;}";
var fragment = "precision highp float;void main(void){gl_FragColor = vec4(0.0,1.0,0.0,1.0);}";
material = new THREE.ShaderMaterial({
                vertexShader: vertex,
                fragmentShader: fragment
        });
var mesh = new THREE.Mesh(geometry,material);

…and everything is blank. But if I use this material :

material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

…everything works perfectly. What's wrong?

It works fine for me. It must be some other piece of code you aren't showing. — Anton
– Anton, Commented Oct 8, 2012 at 0:24
Couldbe there some problem with geometry? I am loading that like array of vertices and indices, but with MeshBasic material it works great..i will try to find it deeper in my code.. — Xrew
– Xrew, Commented Oct 8, 2012 at 7:05

meetar · Accepted Answer · 2013-05-29 17:20:44Z

3

I found the problem: I had to use:

 renderer = new THREE.WebGLRenderer();

instead of :

 renderer = new THREE.CanvasRenderer();

edited May 29, 2013 at 17:20

meetar

7,6318 gold badges44 silver badges74 bronze badges

answered Oct 8, 2012 at 9:17

Xrew

17313 bronze badges

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

Collectives™ on Stack Overflow

Custom shader - Three.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related