webgl工作步骤

每一个像素点都将执行这两个着色器
我理解为这两个着色器，顶点着色器决定渲染位置 ，片元着色器决定颜色

顶点着色器

编写一个简单的着色器 暂不指定片元着色器 发现默认颜色是红色
顶点着色器需要一个内置变量gl_Position 供three使用 我们对其的修改就会作用在模型上
另外需要一个入口main函数 如果不写main就会报错 如果main中不写内容 则模型不会显示

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

 const vertexShader = `
        void main () {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
        }
    `;
    const fragmentShader = ``;

    const box = new THREE.Mesh(
        new THREE.BoxGeometry(5, 6, 10),
        new THREE.ShaderMaterial({
            vertexShader,
            // fragmentShader,
        })
    );

posiiton
将模型缩小一倍

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

变化就是 vec4(position,1.0) => vec4(position * 0.5,1.0)
模型就会缩小一半
放大即

vec4(position / 0.5,1.0)

片元着色器

添加颜色 如果 main函数内容为空 同样不会显示模型

 const fragmentShader = `
        void main () {
            gl_FragColor = vec4(0,0,1,1);
        }
    `;

片元着色器需要 内置变量gl_FragColor
颜色vec4(0,0,1,1)四个参数对应rgba
不过最大值为1 1即是十六进制的255

案例

一个蓝色的盒子

const box = () => {
    const vertexShader = `
        void main () {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
        }
    `;
    const fragmentShader = `
        void main () {
            gl_FragColor = vec4(0,0,1,1);
        }
    `;

    const box = new THREE.Mesh(
        new THREE.BoxGeometry(5, 6, 10),
        new THREE.ShaderMaterial({
            vertexShader,
            fragmentShader,
        })
    );
    return box;
};