通过 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 内容,它们不仅看起来很锐利,而且运行起来也很有魅力。

相关推荐
破浪前行·吴2 分钟前
【初体验】【学习】Web Component
前端·javascript·css·学习·html
染指悲剧2 小时前
vue实现虚拟列表滚动
前端·javascript·vue.js
浩浩测试一下3 小时前
Web渗透测试之XSS跨站脚本之JS输出 以及 什么是闭合标签 一篇文章给你说明白
前端·javascript·安全·web安全·网络安全·html·系统安全
前端搬运工X4 小时前
Object.keys 的原生 JS 类型之困
javascript·typescript
肖老师xy5 小时前
h5使用better scroll实现左右列表联动
前端·javascript·html
一路向北North5 小时前
关于easyui select多选下拉框重置后多余显示了逗号
前端·javascript·easyui
Libby博仙5 小时前
.net core 为什么使用 null!
javascript·c#·asp.net·.netcore
一水鉴天5 小时前
为AI聊天工具添加一个知识系统 之26 资源存储库和资源管理器
前端·javascript·easyui
万物得其道者成5 小时前
在高德地图上加载3DTilesLayer图层模型/天地瓦片
前端·javascript·3d
你挚爱的强哥6 小时前
基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单
javascript·vue.js·elementui