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

threejs交流群511163089

顶点着色器

这个是决定你那个点最后画在屏幕哪个位置的，最后xyz都是[-1,1]这么一个区间的值 z用来处理遮挡关系

点的位置怎么传入呐 有VAO，VBO这些东西 但是我们基于threejs，emm，threejs给你封装了一下 叫attribute

attribute下有position字段normal字段uv字段等等，里面会装很多float像这样[0.0, 0.1, 0.2, 0.3, 0.4, 0.5......]

三维空间一个点 xyz三个坐标 所以0.0 0.1 0.2对应了第一个点的x y z后面依次类推第二个第三个点的xyz

你还可以自己加别的属性 如果你有用途的时候

之前提到模型是三角面构成的

这里有些顶点会重复，那么有index字段，直接指定第几个顶点，写索引[0,1,2,2,3,0]取到下标0 1 2的点画第一个三角形

在threejs里

只要你创建buffer类型的BufferGeometry那attribute就是给你配好了的

如果你要自定义他没有的几何体形状 就需要自己配置了

你可以F12看看这个球的buffergeometry的attribute和index理解一下

var geometry = new THREE.SphereBufferGeometry(10);
var material=new THREE.ShaderMaterial({
   vertexShader:`//这 顶点着色器
   // attribute vec3 position; 这句不用写 three里有
   void main()
   {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }`,
   fragmentShader:`
   void main()
    {
        gl_FragColor=vec4(1.0);
    }
   `,
   })
var mesh=new THREE.Mesh(geometry,material);