Trình tạo tùy chỉnh thực sự đơn giản trong Three.js - cách làm cho nó hoạt động?

Question

Tôi đang cố gắng tạo ra trình đổ bóng tùy chỉnh đơn giản nhất cho Three.js mà tôi có thể, nhưng tôi đã không tìm ra cách làm cho nó hoạt động. Đối tượng mà tôi đang sử dụng trình đổ bóng không xuất hiện chút nào.

Trong html trang của tôi, tôi có:

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

Sau đó, trong 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); 

Trường hợp đối tượng nên, không có gì là. Nó hoạt động tốt nếu tôi thay thế vật liệu bằng MeshLambertMaterial. Tôi đang thiếu gì mà tôi cần phải làm cho nó hoạt động?

Answer 1

Giải pháp dễ dàng, thứ tự của các phép nhân ma trận trong vertex shader cần phải được thay đổi để:

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