shader01-基础练习

shader，说白了就是可以自己写材质，官方给定了一些特定的材质BasicMaterial  PhongMaterial 等等，但是有的时候，用户需要一些奇奇怪怪的效果。这些材质是不够用的。效果满足不了。

那么那些吊炸天的效果，就需要自己去实现了。靠的就是shader！

顶点着色器——》片段着色器——》光栅化显示

前面2个阶段，我们可以自己来通过程序编写。OK，开始吧：

首先，物体的材质需要设定是 ShaderMaterial.

这里是定义的顶点和片段着色器 代码

<script type="x-shader/x-vertex" id="v">     
        varying vec2 vUv;  
        void main() {
            vUv = uv;         
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }
    </script>
 
    <script type="x-shader/x-vertex" id="fragmentShader">
    varying vec2 vUv; 
    uniform sampler2D t;   
    void main() {
        vec4 color = texture2D( t ,vUv);
        gl_FragColor = vec4(vUv,0, 1.0 );
    }
    </script>

var g = new THREE.IcosahedronGeometry(20,4);

///这里是Shader材质
        m = new THREE.ShaderMaterial({  
            vertexShader:document.getElementById('v').textContent,
            fragmentShader:document.getElementById('fragmentShader').textContent
        });


        obj=new THREE.Mesh(g,m);
        scene.add(obj);