分享

shader01

 看见就非常 2020-01-19

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


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多