通过 Three.js 释放 WebGPU 的力量，实现尖端 3D Web 开发(译文)

原文

网络开发已经大大提高了它的游戏水平！有了我们现在拥有的所有这些很酷的新网络玩具，让那些人瞠目结舌，"这是真的吗？" Web 上的 3D 时刻不再只是一个梦想。在3D Web 开发中掀起波澜的两项关键技术是 WebGPU 和 Three.js。

在这篇文章中，我们将直接进入这些技术瑰宝的本质------WebGPU 和 Three.js。准备好了解如何将它们混合起来并为网络制作一些更高级别的 3D 内容了吗？来吧！

了解 WebGPU 基础知识

WebGPU 是一种现代的低级图形 API，可以在 Web 浏览器中与用户设备的 GPU（图形处理单元）进行交互。它非常光滑。可以将其想象为在当今的 GPU 上解锁野兽模式。因此，对于构建东西的人来说，这意味着他们的图形和网络应用程序运行得非常快，而且看起来非常好。

了解 Three.js 基础知识

它在 WebGL 之上提供了高级抽象，WebGL 是用于在 Web 上渲染 3D 图形的标准 API。它使创建和操作 3D 场景、渲染 3D 对象、应用纹理和材质、处理灯光和阴影以及简单地执行动画和交互变得简单。

为什么将 WebGPU 与 Three.js 结合使用？

WebGPU 和 Three.js 在很多方面相辅相成，一起使用它们可以释放 3D Web 开发的全部潜力。让我们看看为什么您可以考虑将 WebGPU 与 Three.js 一起用于 3D Web 项目。

性能：WebGPU 提供对 GPU 的低级访问，允许您优化图形和计算代码以获得最大性能。Three.js 进一步使渲染具有详细动画的 3D 图形变得更加容易。
灵活性：WebGPU 使您可以更好地控制渲染管道，并允许您自定义图形管道以满足您的需求。Three.js 提供了用于创建 3D 场景的灵活框架，并支持许多功能，例如几何、材质、纹理、光照、阴影和动画。
面向未来：WebGPU 是一项前瞻性技术，旨在成为下一代网络图形 API。主要浏览器供应商正在积极开发和改进它，预计将在未来几年成为网络上 3D 图形的事实上的标准。

设置开发环境

在深入了解将 WebGPU 与 Three.js 结合使用的细节之前，是时候设置开发环境了。以下是您需要遵循的基本步骤：

第 1 步：安装现代 Web 浏览器

要使用 WebGPU，您需要支持 WebGPU 的 Web 浏览器。截至撰写本文时，WebGPU 保留在最新版本的 Chrome、Firefox 和 Safari 浏览器中。

第 2 步：安装代码编辑器

您将需要一个代码编辑器来编写和编辑代码。选择您喜欢的代码编辑器，或者尝试不同的编辑器以查看哪一种适合您的工作流程。

第 3 步：设置本地开发服务器

要运行 Three.js 应用程序，您必须通过 Web 服务器提供该应用程序。使用 Node.js with Express、Python 的 SimpleHTTPServer 或您选择的任何其他 Web 服务器设置本地服务器。

第 4 步：安装 Three.js 和 WebGPU Polyfill

接下来，您需要安装 Three.js 和 WebGPU polyfill。Three.js 可以使用 npm 或通过在 HTML 文件中包含 Three.js 脚本来安装。WebGPU polyfill 是一个 JavaScript 库，它提供了一个兼容层，以便在尚未原生支持 WebGPU 的浏览器中使用 WebGPU。您可以通过 npm 安装它或将其包含在 HTML 文件中。

在 Three.js 中创建 WebGPU 渲染器

要将 WebGPU 与 Three.js 结合使用，您必须创建一个利用 WebGPU API 的自定义渲染器。以下是最基本的步骤。

第 1 步：创建 WebGPU 上下文

第一步是创建一个 WebGPU 上下文，它代表 JavaScript 代码和 GPU 之间的连接。您可以使用 navigator.gpu.requestAdapter() 方法创建 WebGPU 上下文，该方法返回解析为 WebGPU 适配器的承诺。该适配器代表用户设备上的物理 GPU，用于创建其他 WebGPU 对象。

第 2 步：创建 Three.js 渲染器

接下来，您必须使用 WebGPU 上下文在 Three.js 中创建自定义渲染器。您可以扩展Three.js提供的WebGLRenderer类并重写其方法来实现WebGPU渲染逻辑。让我们看一个例子。

js 复制代码

import { WebGLRenderer } from 'three';

export class WebGPURenderer extends WebGLRenderer {
    constructor() {
        super();
        this.context = null;
    }

    async init() {
        // Create a WebGPU context
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();
        this.context = this.getContext();
        this.context.gpu = device;
    }

    // Override WebGLRenderer methods to implement WebGPU rendering logic
}

第 3 步：初始化 WebGPU 渲染器

如果您通过调用 WebGPU 渲染器的 init() 方法来初始化它，将会有所帮助。此方法创建 WebGPU 上下文并将其设置为渲染。您可以在创建 WebGPURenderer 类的实例后调用此方法。

js 复制代码

const renderer = new WebGPURenderer();
renderer.init();

使用 Three.js 和 WebGPU 创建和渲染 3D 场景

现在您已经在 Three.js 中设置了 WebGPU 渲染器，您可以开始使用 WebGPU 和 Three.js 的组合功能来创建和渲染 3D 场景。以下是渲染 3D 场景的基本步骤。

第 1 步：创建场景

在 Three.js 中，场景是一个容器，其中包含要渲染的所有 3D 对象。您可以使用 Three.js 提供的 Scene 类创建场景。

js 复制代码

import { Scene } from 'three';

const scene = new Scene();

第 2 步：创建相机

Three.js 中的相机决定 3D 场景如何在屏幕上渲染。您可以使用 Three.js 提供的 PerspectiveCamera 或 OrthographicCamera 类创建相机。

js 复制代码

import { PerspectiveCamera } from 'three';

const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

第 3 步：创建几何图形和材质

要在 Three.js 中创建 3D 对象，您必须定义它们的几何形状（形状）和材质（外观）。Three.js 提供了各种内置几何图形和材质，您可以使用或创建自定义几何图形和材质。以下是如何使用基本材质创建简单立方体的示例：

js 复制代码

import { BoxGeometry, MeshBasicMaterial, Mesh } from 'three';

const geometry = new BoxGeometry();
const material = new MeshBasicMaterial({ color: 0x00ff00 });
const cube = new Mesh(geometry, material);

scene.add(cube);

第 4 步：创建渲染循环

渲染循环是在屏幕上渲染 3D 场景的连续循环。您可以使用浏览器提供的 requestAnimationFrame 函数创建渲染循环。

第 5 步：处理调整大小事件

当窗口大小发生变化时，您还必须处理调整大小事件以更新相机宽高比和渲染器大小。您可以使用 window.addEventListener 函数来监听调整大小事件并相应地更新相机和渲染器。

js 复制代码

function onWindowResize() {
    // Update the camera aspect ratio
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    
    // Update the renderer size
    renderer.setSize(window.innerWidth, window.innerHeight);
}

// Add a resize event listener
window.addEventListener('resize', onWindowResize);

● 向 Three.js 场景添加 WebGPU 功能

WebGPU 提供了各种可以增强 3D 场景的视觉质量和性能的功能。以下是如何将 WebGPU 功能与 Three.js 结合使用的一些示例：

● 使用WebGPU 着色器：

WebGPU 允许您编写在 GPU 上运行的自定义着色器，这可以显着提高 3D 场景的渲染性能。要将 WebGPU 着色器与 Three.js 一起使用，您可以定义使用 WebGPU 着色器作为其片段着色器的自定义材质。

● 使用WebGPU 纹理：

WebGPU 允许您直接在 GPU 上创建和操作纹理，可用于将纹理应用到 Three.js 中的 3D 对象以实现逼真的渲染。要将 WebGPU 纹理与 Three.js 一起使用，您可以使用 WebGPURenderer 创建自定义纹理并将其设置为材质的贴图属性。

● 使用WebGPU 缓冲区：

WebGPU 允许您直接在 GPU 上创建和操作缓冲区，该缓冲区可用于将数据传递到着色器以进行高效处理。要将 WebGPU 缓冲区与 Three.js 一起使用，您可以创建自定义缓冲区并将其设置为材质的统一属性。以下是如何创建 WebGPU 缓冲区并将其传递给材质的示例：

● 使用WebGPU 计算着色器：

WebGPU 允许您编写在 GPU 上运行并可用于通用计算的计算着色器。要将 WebGPU 计算着色器与 Three.js 结合使用，您可以定义自定义计算着色器并更新 3D 对象的状态。

最后一点

有没有偶然发现过 WebGPU？就像这个出色的工具一样，它可以让您充分利用计算机的功能，使网络上的 3D 内容运行起来超级流畅，看起来也很漂亮。与 Three.js（这个每个人都在谈论的很棒的 3D 库）混合使用，您就可以制作一些令人瞠目结舌的 3D Web 内容，它们不仅看起来很锐利，而且运行起来也很有魅力。