示例16：彩色立方体
2021-07-06 本文已影响0人
WebGiser
效果
image.png
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./cuon-matrix.js"></script>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="border: 1px solid #ff0000;"></canvas>
<script>
let canvas = document.getElementById('canvas');
let gl = canvas.getContext('webgl');
// 顶点着色器
let VSHADER_SOURCE =
"attribute vec4 a_Position;\n" +
"attribute vec4 a_Color;\n" +
"uniform mat4 u_MvpMatrix;\n" +
"varying vec4 v_Color;\n" +
"void main(){\n" +
"gl_Position = u_MvpMatrix * a_Position;\n" +
"v_Color = a_Color;\n" +
"}\n";
// 片元着色器
let FSHADER_SOURCE =
"#ifdef GL_ES\n" +
"precision mediump float;\n" +
"#endif\n" +
"varying vec4 v_Color;\n" +
"void main(){\n" +
" gl_FragColor = v_Color;\n" +
"}\n";
// 初始化着色器
function initShaders(gl, vSource, fSource) {
let vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vSource);
gl.compileShader(vShader);
let fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fSource);
gl.compileShader(fShader);
let program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;
}
// 设置定点位置-缓冲区对象
function initVertexBuffers(gl) {
// v6----- v5
// /| /|
// v1------v0|
// | | | |
// | |v7---|-|v4
// |/ |/
// v2------v3
let vertices = new Float32Array([
1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // v0 White
-1.0, 1.0, 1.0, 1.0, 0.0, 1.0, // v1 Magenta
-1.0, -1.0, 1.0, 1.0, 0.0, 0.0, // v2 Red
1.0, -1.0, 1.0, 1.0, 1.0, 0.0, // v3 Yellow
1.0, -1.0, -1.0, 0.0, 1.0, 0.0, // v4 Green
1.0, 1.0, -1.0, 0.0, 1.0, 1.0, // v5 Cyan
-1.0, 1.0, -1.0, 0.0, 0.0, 1.0, // v6 Blue
-1.0, -1.0, -1.0, 0.0, 0.0, 0.0 // v7 Black
]);
let indices = new Uint8Array([
0, 1, 2, 0, 2, 3, // front
0, 3, 4, 0, 4, 5, // right
0, 5, 6, 0, 6, 1, // up
1, 6, 7, 1, 7, 2, // left
7, 4, 3, 7, 3, 2, // down
4, 7, 6, 4, 6, 5 // back
]);
// 创建顶点位置大小颜色缓冲区对象
let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
let fsize = vertices.BYTES_PER_ELEMENT;
let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, fsize * 6, fsize * 0);
gl.enableVertexAttribArray(a_Position);
let a_Color = gl.getAttribLocation(gl.program, 'a_Color');
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, fsize * 6, fsize * 3);
gl.enableVertexAttribArray(a_Color);
// 创建顶点索引缓冲区
let indicesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
return indices.length;
}
initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
let n = initVertexBuffers(gl);
gl.clearColor(0, 0, 0, 1);
// 开启隐藏面消除（深度检测）
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// 设置mvp矩阵：模型矩阵、视图矩阵、投影矩阵
let modelMatrix = new Matrix4();
//modelMatrix.setTranslate(0.75, 0, 0);
let viewMatrix = new Matrix4();
viewMatrix.setLookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
let projectMatrix = new Matrix4();
projectMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);
let mvpMatrix = new Matrix4();
mvpMatrix.set(projectMatrix).multiply(viewMatrix).multiply(modelMatrix);
let u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
</script>
</body>
</html>
