Shader personalizado muy simple en Three.js: ¿cómo hacer que funcione?

Question

Estoy tratando de crear el sombreador personalizado más simple para Three.js que pueda, pero no he descubierto cómo hacerlo funcionar. El objeto para el que estoy usando el sombreador no aparece en absoluto.

En mi página HTML que tienen:

<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> 

Luego, en 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); 

Cuando el objeto debe ser, no hay nada. Funciona bien si reemplazo el material con un MeshLambertMaterial. ¿Qué me estoy perdiendo que necesito para que funcione?

Answer 1

solución fácil, el orden de la multiplicación de la matriz en el vertex shader tiene que ser cambiado a:

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