WebGL新手入门：开启你的3D图形编程之旅

2023-01-28 19:16:44

拥抱WebGL，开启3D图形编程的新境界

WebGL：跨平台3D图形的革命

作为现代网页开发的基石，WebGL 正迅速成为 3D 图形编程领域的领先技术。它是一个基于 OpenGL ES 2.0 的 JavaScript API，专门针对在移动设备上运行 3D 图形而设计。

WebGL 的跨平台兼容性是其最大优势之一。它可以在任何支持 WebGL 的现代 Web 浏览器中使用，包括 Chrome、Firefox、Edge 和 Safari。这意味着您可以轻松地将您的 WebGL 应用程序部署到各种设备上，从台式机和笔记本电脑到平板电脑和智能手机。

硬件加速：无缝的视觉体验

与传统 2D 画布 API 不同，WebGL 采用硬件加速来渲染图形。通过利用图形处理器的强大功能，WebGL 能够创建更加复杂、逼真的图形，同时保持平滑流畅的性能。

易于学习：初学者的理想选择

WebGL 拥有相对简单的 API，即使没有图形编程经验，您也能快速上手。借助丰富的文档和教程，您可以轻松掌握基础知识并开始构建自己的 3D 图形。

广泛的应用：解锁无限可能性

WebGL 在各种应用中大放异彩，包括：

游戏： 为跨平台游戏带来身临其境且引人入胜的 3D 体验。
可视化： 创建交互式 3D 可视化，以直观且引人入胜的方式展示数据。
交互式应用程序： 构建引人入胜的 3D 应用程序，用于教育、培训和营销。

WebGL 的未来：无限潜力

WebGL 的未来一片光明。随着该技术的不断发展，我们将看到更多令人惊叹的 WebGL 应用程序和游戏。此外，WebGL 有望在元宇宙中发挥至关重要的作用，提供逼真的 3D 图形来增强身临其境的体验。

常见问题解答

WebGL 和 Canvas 2D 有什么区别？ WebGL 使用硬件加速来渲染 3D 图形，而 Canvas 2D 仅用于 2D 图形。
WebGL 是否支持所有浏览器？ WebGL 在所有支持 WebGL 的现代 Web 浏览器中均可使用，包括 Chrome、Firefox、Edge 和 Safari。
WebGL 适用于哪些设备？ WebGL 可用于台式机、笔记本电脑、平板电脑和智能手机等各种设备。
WebGL 是否难学？ WebGL 拥有相对简单的 API，对于初学者来说很容易学习。
WebGL 可以做什么？ WebGL 可以用于各种应用，包括游戏、可视化、交互式应用程序和元宇宙体验。

代码示例：旋转立方体

const canvas = document.getElementById("webgl-canvas");
const gl = canvas.getContext("webgl");

// 顶点着色器
const vertexShaderSource = `
    attribute vec3 a_position;
    uniform mat4 u_modelViewProjectionMatrix;
    void main() {
        gl_Position = u_modelViewProjectionMatrix * vec4(a_position, 1.0);
    }
`;

// 片段着色器
const fragmentShaderSource = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

// 编译顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 编译片段着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建着色器程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 启用着色器程序
gl.useProgram(program);

// 创建立方体顶点数据
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,
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,
];

// 创建顶点缓冲区对象
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 获取顶点着色器的 a_position 属性的存储位置
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");

// 将顶点缓冲区对象绑定到 a_position 属性
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 创建模型视图投影矩阵
const modelViewProjectionMatrix = mat4.create();
mat4.perspective(modelViewProjectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100.0);
mat4.translate(modelViewProjectionMatrix, modelViewProjectionMatrix, [0.0, 0.0, -5.0]);

// 获取着色器程序中的 u_modelViewProjectionMatrix 统一变量的位置
const modelViewProjectionMatrixUniformLocation = gl.getUniformLocation(program, "u_modelViewProjectionMatrix");

// 将模型视图投影矩阵传递给着色器程序
gl.uniformMatrix4fv(modelViewProjectionMatrixUniformLocation, false, modelViewProjectionMatrix);

// 设置清除颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);

// 开始渲染循环
const renderLoop = () => {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // 旋转立方体
    mat4.rotateY(modelViewProjectionMatrix, modelViewProjectionMatrix, 0.01);

    // 更新着色器程序中的 u_modelViewProjectionMatrix 统一变量
    gl.uniformMatrix4fv(modelViewProjectionMatrixUniformLocation, false, modelViewProjectionMatrix);

    // 绘制立方体
    gl.drawArrays(gl.LINES, 0, 24);

    requestAnimationFrame(renderLoop);
};

renderLoop();