基于three.js的shader入门教程 三

threejs交流群511163089

片源着色器

前面提了，点会三个三个的构造成三角面，这个就是给三角面上色了。

有varying这种开头的变量

有uniform开头的变量

varying vec3 a;这种变量 是从顶点着色器传来的

你需要在顶点着色器也写一句

var geometry = new THREE.SphereBufferGeometry(10);
var material=new THREE.ShaderMaterial({
    vertexShader:`
    varying vec3 a; 
    void main()
    {
        a=position;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }`,
    fragmentShader:`
    varying vec3 a; 
    void main()
    {
        gl_FragColor=vec4(1.0);
    }
    `,
    })
var mesh=new THREE.Mesh(geometry,material);

这样你在顶点着色器赋值 就带到了片源着色器 webgl2.0之后可以不用varying 换成in out 

你可以把position.xyz赋值给color的rgb试一试 或者赋值其他的东西