顶点着色器

• 介绍
  • 接收三维点坐标，处理为二维坐标并输出
  • THREE.ShaderMaterial用来定义着色器，着色器材质用着色器程序去控制几何体的顶点和颜色
• 内置变量
  • gl_Position
• three.js注入变量
  • postion
    • gl_Position = vec4(position, 1.0);
  • uv
• 使用

  • <script id="vertexShader" type="x-shader/x-vertex">
        # type只是通用标记为顶点着色器, 不起作用
        void main(){
                # 类似c语言, 着色器有一个main函数
                ## 每个顶点在计算时，都会执行main函数
                gl_Position = vec4(position, 1.0);
                        # 将计算顶点最终位置的结果放在gl_Position中
                        ## 这个位置被称为设备归一化坐标
                        ## gl_Position是默认变量，不必声明就可用，gl_Position一定要赋值
                        ## 顶点着色器最主要作用就是给gl_Position赋值
                        # 作用:
                        ## gl_Position 是相机投影之后的坐标
                        ## 顶点的位置传给position, 通过我们变换, 再赋值给gl_Position
                        ## position中的值来源如mesh.vertices.push(new THREE.Vector3(x, -y, 0))
        }
    </script>

• 例子

  • void main(){
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }