Really simple custom shader in Three.js - how to make it work?

Question

I'm trying to make the simplest custom shader for Three.js that I can, but I haven't figured out how to make it work. The object the I'm using the shader for doesn't appear at all.

In my page html I have:

<script id="simplefs" type="x-shader/x-fragment">

    void main(void) {
        gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
    }
</script>

<script id="simplevs" type="x-shader/x-vertex">

    void main(void) {
        gl_Position = modelViewMatrix * projectionMatrix * vec4(position, 1.0);
    }
</script>

Then in javascript:

var vertShader = document.getElementById("simplevs").innerHTML;
var fragShader = document.getElementById("simplefs").innerHTML;

var myMaterial = new THREE.ShaderMaterial({
    vertexShader : vertShader,
    fragmentShader: fragShader
});

var baseBevel = new THREE.Mesh(new THREE.CylinderGeometry(BaseRadius - BaseBevel, BaseRadius, BaseBevel, 100, 100, false),
                               myMaterial )
baseBevel.position.x = x;
baseBevel.position.y = y;
baseBevel.position.z = BaseHeight - (BaseBevel / 2.0);
baseBevel.rotation.x = Math.PI / 2.0;

scene.add(baseBevel);

Where the object should be, there is nothing. It works fine if I replace the material with a MeshLambertMaterial. What am I missing that I need to make it work?

Curyous · Accepted Answer · 2012-01-18 00:36:39Z

7

Easy solution, the order of the matrix multiplication in the vertex shader needs to be changed to:

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

answered Jan 18, 2012 at 0:36

Curyous

8,89615 gold badges63 silver badges84 bronze badges

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

Collectives™ on Stack Overflow

Really simple custom shader in Three.js - how to make it work?

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