返回

WebGL 学习笔记：开启三维世界的旅程

前端

WebGL 学习笔记（一）

WebGL 简介

WebGL（Web Graphics Library）是一种强大的技术，允许开发人员在网页上绘制和渲染三维图形。与传统的二维技术（如 CSS 和 Canvas 2D）不同，WebGL 能够创建完全交互式的三维体验，让用户可以与虚拟世界进行互动。

WebGL 的优势

WebGL 拥有诸多优势，包括：

  • 交互性： WebGL 对象可以响应用户的输入，例如鼠标移动和键盘敲击，从而实现动态和交互式的体验。
  • 真实感： WebGL 能够渲染具有逼真光照、阴影和纹理的三维模型，提供令人惊叹的视觉效果。
  • 跨平台兼容性： WebGL 是一种基于 Web 标准的技术，几乎可以在任何现代浏览器上运行，无需安装任何插件或应用程序。
  • 性能优化： WebGL 利用图形处理单元 (GPU) 的强大功能来加速渲染过程，确保流畅的性能。

入门 WebGL

要开始使用 WebGL，开发人员需要了解以下基本概念：

  • WebGL 上下文： 这是与 WebGL 接口交互的桥梁。
  • 着色器： 这些是编写在 WebGL 特定语言中、用于定义如何渲染对象的程序。
  • 缓冲区： 这些用于存储对象的顶点和索引数据。
  • 纹理： 这些是用于为对象提供表面外观的图像。

动手实践

让我们用一个简单的例子来动手实践：

创建 WebGL 上下文：

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

定义着色器：

const vertexShaderSource = ...;
const fragmentShaderSource = ...;

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 vertices = ...;
const indices = ...;

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), 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);

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

下一步

掌握了这些基础知识后，就可以继续探索 WebGL 的更多高级功能，例如纹理映射、光照和动画。通过实践和探索，您将能够创建引人入胜的交互式三维体验。

延伸阅读