webgl(二)绘制两种颜色的竖条纹

绘制两种颜色的竖条纹的方式：

一、在webgl中通过坐标分界线分割颜色

在顶点着色器中将gl_PointSize的值加大，看到的效果会明显一些。

let vertexSource = /*glsl*/`
void main() {
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    gl_PointSize = 200.0;
}
`

首先，得知道绘制颜色是在着色器程序当中使用。片元着色器的代码如下所示

let fragmentShader = /*glsl*/ `
precision mediump float;
void main() {
//400 * 400对应的是canvas画布的尺寸
	float x = (gl_FragCoord.x / 400.0 - 0.5) * 2.0;
	if(x > 0.0) {
		gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);//红色
	} else {
		gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);//蓝色
	}
}
`

如上述代码所示，当x的坐标大于0的时候，显示红色；反之显示蓝色。这个判断很简单，但是如何去判断x的坐标的呢？也就是float x = (gl_FragCoord.x / 400.0 - 0.5) * 2.0;这行代码得好好解读一下。

1. gl_FragCoord.x：这是一个内建变量，用户获取当前片段（像素）的横坐标（x坐标）。
2. 400.0:这个数值代表的是canvas画布的宽度，所以要先检查下自己的画布的宽度是多少像素，默认是512px的哦。
3. gl_FragCoord.x / 400.0 - 0.5：这一部分将当前像素的横坐标值转换为介于[-0.5, 0.5]范围内的值。它通过将gl_FragCoord.x除以画布的宽度，并从结果中减去0.5来实现。（不难理解，gl_FragCoord.x / 400.0的值的范围在[0,1]）
4. *2：这一部分将前一步中计算得到的值缩放到[-1, 1]的范围内。将[-0.5, 0.5]的值乘以2.0，可以将其映射到[-1, 1]的范围内。

二、通过threejs中的自动UV 映射

UV映射（也称为纹理坐标）用于将二维纹理映射到三维物体表面。UV坐标定义了纹理图像上的位置，他们与三维模型的顶点一一对应。 通过在顶点着色器中使用UV坐标，并将它们传递给片元着色器，在片元着色器中可以使用这些坐标来从纹理图像中获取对应位置的颜色或其他纹理信息。这样，就可以在渲染过程中将纹理贴图应用于三维模型，实现更加真实和丰富的表面效果。

在threejs中自动生成的uv坐标是根据几何体的拓扑结构和顶点位置来计算的（讲人话就是：根据几何体的形状生成的）。如果要在webgl中实现这个计算，emmmm......应该还是蛮复杂的，需要进行一些遍历和插值等等，这难道是八青妹这种菜鸟能够理解的吗？

这个步骤分两步.

第一步，在顶点着色器中赋值uv

const vertexShader = /* GLSL */ `
	uniform float uTime;
	varying vec2 vUv;
	void main() {
		vUv = uv;//这里给vUv赋值默认的uv
		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
	}
`;

第二步，在片元着色器中接收uv

const fragmentShader = /* GLSL */ `
varying vec2 vUv;
void main() {
	gl_FragColor = vec4(vUv.y, 0.0, 0.0, 1.0);//下边黑，上边红
}
`

在这段代码中vUv.y是在渲染的时候，这个值从0.0→1.0 ，显示图为下边黑，上边红；

那么，如果将上述的vUv.y改为vUv.X，这个值也是从0.0→1.0 ，但是在图像是显示的是左边黑，右边红； UV坐标中，(0, 0)表示纹理的左下角，而(1, 1)表示右上角。为0的情况，结合后面的两个颜色通道都为0就是黑色，为1的时候，就是红色。

总结

如果已经使用了threejs库，第二种方式要优雅的多，甚至可以在shader上做出更多关于色彩渲染的效果。