本系列仅作为本人学习《WebGL编程指南》这本书的笔记所用
将三个点变为三角形后，光栅化的内插过程会导致颜色渐变
image.jpeg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>18绘制彩色三角形</title>
<script src="./lib/cuon-matrix.js"></script>
<script src="./lib/cuon-utils.js"></script>
<script src="./lib/webgl-debug.js"></script>
<script src="./lib/webgl-utils.js"></script>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
不支持canvas的浏览器会展示这段文字
</canvas>
<script>
// 顶点着色器程序
let VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute vec4 a_Color;
varying vec4 v_Color; // varying变量
void main() {
gl_Position = a_Position;
gl_PointSize = 10.0;
v_Color = a_Color; // 将数据传给片元着色器
}
`;
// 片元着色器程序
let FSHADER_SOURCE = `
precision mediump float; // 精度限定词-来指定变量的范围和精度，这里是中等精度
varying vec4 v_Color;
void main() {
gl_FragColor = v_Color; // 从顶点着色器接收数据
}
`;
// 主程序
function main() {
let canvas = document.getElementById("webgl");
// 获取WebGL绘图上下文
let gl = getWebGLContext(canvas);
if (!gl) {
console.error("无法使用WebGL");
return;
}
// 初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.error("无法使用着色器");
return;
}
// 设置顶点坐标
let n = initVertexColorBuffers(gl);
if (n < 0) {
console.log("无法设置点的位置");
return;
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// =====================👇
gl.drawArrays(gl.TRIANGLES, 0, n); // 一个彩色的三角形
// =====================👆
}
function initVertexColorBuffers(gl) {
// 定义顶点坐标和颜色
let verticesColors = new Float32Array([
0.0, 0.5, 1.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 1.0, 0.0,
0.5, -0.5, 0.0, 0.0, 1.0,
]);
// 5个元素代表1个点，共3个点。坐标占2个元素，间隔0开始算。颜色占3个元素，间隔2个开始算。
// 参数1：类型。 参数2：占几个元素。 参数3：单位类型。 参数4：固定。 参数5：5个元素代表1个点。 参数6：间隔2个元素开始算
// gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*5, 0);
// gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*5, FSIZE*2);
let n = 3; // 顶点数量
// 1.创建缓冲区对象
let vertexColorBuffer = gl.createBuffer();
if (!vertexColorBuffer) {
console.log("不能创建缓冲区对象");
return -1;
}
// 2.将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
// 3.向缓冲区对象写入数据,不能直接向缓冲区写入数据，只能向绑定的目标输入数据
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
let FSIZE = verticesColors.BYTES_PER_ELEMENT;
// 获取a_Position变量的存储位置，分配缓冲区并开启
let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log("无法获取 a_Position");
return -1;
}
// 4.将缓冲区对象分配给attribute变量--所有点数据一次性传入
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*5, 0);
// 5.连接a_Position变量与分配给它的缓冲区对象,开启attribute变量
gl.enableVertexAttribArray(a_Position); // 开启缓冲区分配
// 获取a_Color的存储位置，分配缓冲区并开启
let a_Color = gl.getAttribLocation(gl.program, 'a_Color');
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*5, FSIZE*2);
gl.enableVertexAttribArray(a_Color); // 开启缓冲区分配
return n; // 返回待绘制顶点的数量， 函数内部发生错误后返回-1
}
</script>
</body>
</html>
