当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptWebGL实现3D渲染方法解析

JavaScriptWebGL实现3D渲染方法解析

2025-12-31 11:09:31 0浏览收藏

理解 WebGL 渲染流程

WebGL 基于 OpenGL ES，采用可编程渲染管线。主要步骤包括：

准备顶点数据：定义 3D 模型的顶点坐标、颜色、法线等，传入 GPU 缓冲区（ArrayBuffer）
编写着色器程序：用 GLSL 语言编写顶点着色器和片元着色器，控制每个顶点的位置和像素颜色
链接程序并启用属性：将着色器编译后链接成程序，绑定缓冲区到着色器变量（如 attribute）
设置视图和投影矩阵：通过数学变换将 3D 坐标映射到屏幕空间
执行绘制调用：调用 drawArrays 或 drawElements 启动 GPU 渲染

创建基本的 3D 立方体示例

以下是一个简化流程，展示如何绘制一个旋转的立方体：

// 获取上下文
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
// 定义顶点和索引
const vertices = new Float32Array([
// 前面四个顶点...
]);
const indices = new Uint16Array([...]);
// 创建缓冲区
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
// 编写着色器（简化）
const vsSource =  attribute vec3 aPosition; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0); } ;
const fsSource =  precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.5, 0.3, 1.0); } ;
// 编译着色器并链接程序
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 获取 attribute 和 uniform 位置
const positionLocation = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
const projectionMatrix = mat4.perspective(mat4.create(), Math.PI / 4, canvas.width/canvas.height, 0.1, 100);
const modelViewMatrix = mat4.translate(mat4.create(), mat4.identity([]), [0, 0, -5]);
// 动画循环
function render(time) {
time *= 0.001; // 转为秒
mat4.rotateY(modelViewMatrix, modelViewMatrix, 0.01);
gl.clearColor(0.1, 0.1, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniformMatrix4fv(gl.getUniformLocation(program, 'uProjectionMatrix'), false, projectionMatrix);
gl.uniformMatrix4fv(gl.getUniformLocation(program, 'uModelViewMatrix'), false, modelViewMatrix);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
requestAnimationFrame(render);
}
requestAnimationFrame(render);