网络开发已经大大提高了它的游戏水平!有了我们现在拥有的所有这些很酷的新网络玩具,让那些人瞠目结舌,"这是真的吗?" 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 内容,它们不仅看起来很锐利,而且运行起来也很有魅力。