用 Canvas 绘制 3D 图形：通往虚拟世界的门户

前端

2023-12-31 00:00:19

在通往虚拟世界的道路上，Canvas API 是一块不可或缺的基石。它在浏览器中创建了一块画布，赋予开发者绘制 3D 图形的能力。我们将在本文中深入探索 Canvas 的 API，解锁绘制 3D 图形的奥秘。

Canvas API 简介

Canvas 是一块像素画布，类似于在画架上作画。它提供了各种函数和方法，用于绘制线条、形状、图像和文本。它的核心特性之一是它与 WebXR API 的无缝集成，为打造沉浸式虚拟现实和增强现实体验铺平了道路。

绘制 3D 图形的步骤

使用 Canvas 绘制 3D 图形需要三个主要步骤：

初始化画布： 创建一个 Canvas 元素，并使用 JavaScript 设置其宽高。
获取画布上下文： 获取 Canvas 的上下文对象，它提供绘制和操作画布内容的方法。
使用 WebGL： WebGL 是一种 JavaScript API，用于在 Canvas 中绘制 3D 图形。它允许访问图形处理单元 (GPU)，从而实现高效的 3D 渲染。

示例代码

以下是一个使用 WebGL 在 Canvas 中绘制立方体的简单示例：

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

// 定义立方体的顶点和索引
const vertices = [
  // 前面
  -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 indices = [
  0, 1, 2, 0, 2, 3,
];

// 创建并编译着色器程序
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);

// 创建缓冲区并加载数据
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);

// 启用顶点属性
const positionAttributeLocation = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 设置视口和清除颜色
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 使用着色器程序并绘制立方体
gl.useProgram(program);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);