答案：通过WebGL在canvas中创建3D立方体需四步：1. 获取WebGL上下文；2. 编写并编译顶点和片段着色器；3. 定义立方体顶点与索引并上传至GPU缓冲区；4. 使用矩阵变换设置视角与动画，循环调用drawElements渲染旋转立方体。
要在网页中实现一个3D立方体渲染，WebGL 是一个强大且直接的方式。它允许你在浏览器中使用 JavaScript 调用 GPU 进行图形渲染，无需依赖第三方库（如 Three.js），虽然学习曲线稍陡，但能更深入理解图形管线的工作原理。
1. 创建 WebGL 上下文
首先需要在 HTML 中放置一个 canvas 元素，然后通过 JavaScript 获取 WebGL 上下文：
const canvas = document.getElementById('glCanvas');const gl = canvas.getContext('webgl');if (!gl) {alert('无法初始化 WebGL');}
确保上下文成功获取，否则浏览器不支持或禁用了 WebGL。
2. 编写着色器程序
WebGL 使用 GLSL（OpenGL 着色语言）编写顶点和片段着色器。你需要将它们作为字符串注入，然后编译链接成着色程序。
立即学习“Java免费学习笔记（深入）”；
顶点着色器：处理每个顶点的位置变换。
const vsSource = ` attribute vec4 aVertexPosition; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; }`;
片段着色器：决定像素颜色。
const fsSource = ` void main() { gl_FragColor = vec4(1.0, 0.5, 0.3, 1.0); // 橙色 }`;
接下来编译着色器并链接成程序：
function initShaderProgram(gl, vsSource, fsSource) { const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);const shaderProgram = gl.createProgram();gl.attachShader(shaderProgram, vertexShader);gl.attachShader(shaderProgram, fragmentShader);gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {alert('无法初始化着色器程序: ' + gl.getProgramInfoLog(shaderProgram));return null;}return shaderProgram;}
function loadShader(gl, type, source) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {console.error('着色器编译错误:', gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null;}return shader;}
3. 定义立方体的顶点与索引
一个立方体有 8 个顶点，我们可以定义其坐标，并使用索引绘制三角形面（共 6 个面，每个面由两个三角形组成）。
const positions = [ // 前面 -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, // 后面... // （其他面省略，完整需6个面）];const indices = [0, 1, 2, 0, 2, 3, // 前4, 5, 6, 4, 6, 7, // 后8, 9, 10, 8, 10, 11, // 左// ...其他面索引];
将顶点数据上传到 GPU 缓冲区：
const positionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);const indexBuffer = gl.createBuffer();gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
4. 设置矩阵与动画渲染
使用 mat4 矩阵进行模型、视图和投影变换。可以借助 gl-matrix 库简化操作。
import { mat4 } from 'gl-matrix';const modelViewMatrix = mat4.create();const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix,45 * Math.PI / 180, // 视野角度gl.canvas.clientWidth / gl.canvas.clientHeight,0.1, // 近裁剪面100.0 // 远裁剪面);
mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -6.0]);mat4.rotate(modelViewMatrix, modelViewMatrix, Date.now() * 0.001, [1, 1, 1]);
在渲染函数中绑定属性和 uniforms：
function render() { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);const programInfo = {program: shaderProgram,attribLocations: {vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),},uniformLocations: {projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),},};
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition,3, // 每个顶点3个值 (x, y, z)gl.FLOAT, // 类型false, // 不归一化0, // 步长0 // 偏移);gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.useProgram(programInfo.program);gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix);gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, modelViewMatrix);
const vertexCount = indices.length;gl.drawElements(gl.TRIANGLES, vertexCount, gl.UNSIGNED_SHORT, 0);
requestAnimationFrame(render); // 循环渲染}render();
这样就完成了一个基础的 3D 立方体旋转动画。
基本上就这些。核心是理解着色器、缓冲区、矩阵变换和绘制流程。虽然原生 WebGL 写起来繁琐，但对掌握图形底层机制非常有帮助。
以上就是使用WebGL实现3D立方体渲染_javascript技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538259.html
微信扫一扫 
支付宝扫一扫 
