JavaScript|JavaScript WebGL 设置颜色 JavaScriptWebGL设置颜色

引子 JavaScript WebGL 绘制一个面之后想着可以尝试复杂一点的了，没想到设置颜色的时候又出现问题了。

Origin
My GitHub

设置颜色在之前的示例中，都是设置单一的颜色，但每个顶点都可以拥有各自的颜色信息。
基于绘制三角形主要有下面几方面变化：

数据
顶点着色器
片元着色器
缓冲颜色数据

数据
颜色数据有 4 个分量：R、G、B、A 。

let colors = [ 1.0, 0.0, 0.0, 1.0, // red 0.0, 1.0, 0.0, 1.0, // green 0.0, 0.0, 1.0, 1.0, // blue ];

顶点着色器
之前都是只提供了位置变量，对于颜色需要提供额外的颜色变量进行存储。此外还需要输出对应的颜色到下一个阶段。

const source = ` attribute vec3 vertexPos; attribute vec4 vertexColor; varying vec4 vColor; void main(void){ gl_Position = vec4(vertexPos, 1); vColor = vertexColor; } `;

【JavaScript|JavaScript WebGL 设置颜色】这里面多了一个 varying 类型的变量，这是一种顶点着色器给片断着色器传值的方式。
片元着色器
片元着色器接受对应的变量也要进行声明。

const fragmentSource = ` precision highp float; varying vec4 vColor; void main(void){ gl_FragColor = vColor; } `;

这里出现了变量，需要用 precision highp float 设置片元着色器的浮点数精度。顶点着色器有默认的精度可以不用显式设置。
缓冲颜色数据
顶点位置数据进行了缓冲，颜色数据也要进行缓冲。

/** * 缓冲颜色数据 * @param {*} gl WebGL 上下文 * @param {*} shaderProgram 着色器程序 * @param {*} colorData 颜色数据 */ function setColorBuffers(gl, shaderProgram, colorData) { // 创建空白的缓冲对象 const buffer = gl.createBuffer(); // 绑定目标 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // WebGL 不支持直接使用 JavaScript 原始数组类型，需要转换 const dataFormat = new Float32Array(colorData); // 初始化数据存储 gl.bufferData(gl.ARRAY_BUFFER, dataFormat, gl.DYNAMIC_DRAW); // 获取对应数据索引，变量跟顶点着色器里面对应 const vertexPos = gl.getAttribLocation(shaderProgram, "vertexColor"); // 解析顶点数据 gl.vertexAttribPointer(vertexPos, 4, gl.FLOAT, false, 0, 0); // 启用顶点属性，顶点属性默认是禁用的。 gl.enableVertexAttribArray(vertexPos); }

效果这是示例，效果如下：

文章图片

发现颜色渐变发散开来了，这个是因为在光栅化过程中，转变为像素时对颜色进行了插值。
在程序中只定义了三个顶点的颜色，它们之间像素的颜色会随着像素位置变化，相邻像素之间同一种单色的差值是定值。如果不想要这样的效果，可以在片元着色器中自定义。
动态自定义示例这是示例，片元着色器主要变化：

const fragmentSource = ` precision highp float; varying vec4 vColor; int findMax(float r, float g, float b) { if (r > g && r > b) { return 0; } if (g > r && g > b) { return 1; } return 2; }void main(void){ float red = vColor.r; float green = vColor.g; float blue = vColor.b; int max = findMax(red, green, blue); vec4 finalColor = vColor; if (max == 0) { finalColor = vec4(1.0, 0.0, 0.0, 1.0); } else if (max == 1) { finalColor = vec4(0.0, 1.0, 0.0, 1.0); } else if (max == 2) { finalColor = vec4(0.0, 0.0, 1.0, 1.0); } gl_FragColor = finalColor; } `;

findMax 方法会对每个像素的颜色的分量进行比较，将最终颜色设置为最大的一个分量。下面是效果：