用WebGPU实现基于物理的渲染

这篇具有很好参考价值的文章主要介绍了用WebGPU实现基于物理的渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

用WebGPU实现基于物理的渲染,webgpu

推荐:用 NSDT编辑器 快速搭建可编程3D场景

最近,我花了相当多的时间在 WebGPU 中使用 IBL(基于图像的照明)编写 PBR(基于物理的渲染)渲染器。 PBR 本身并没有什么新奇之处。 这是一项自 2014 年以来就存在的技术,所有现代图形引擎都使用它。 但我还没有看到任何在 WebGPU ThreeJS 中执行此操作的教程,其他人已经实现了它,但阅读这些源代码并不容易。

我很想创建一个完整的 PBR 指南,并提供适当的理论解释,但互联网上已经有很多相关材料,我需要花费几个月的时间才能重新创建它。 我决定只写下与目前互联网上可用的内容相比我必须找出的缺失部分。 因此,对于我们为什么要做这个问题,请参考互联网上可用的丰富资源。 我将回答有关 WebGPU 的问题。
用WebGPU实现基于物理的渲染,webgpu

top:金属表面 bottom:介电表面(塑料)

要记住一件事:我不确定自己在做什么。 我对使用 GPU API 有了很好的掌握,但我对 WebGPU 很陌生,也不是计算机图形编程方面的专家,所以我所做的一些事情可能并没有真正意义。 但这似乎有效!

我这里的所有工作都是基于优秀的 Learn OpenGL 教程。 我已经使用兰伯特漫反射、GGX 高光和 Fresnel Schlick 近似实现了基本的 PBR 着色。 我使用预过滤的环境贴图和辐照度贴图实现了 IBL。

1、什么是PBR?

基于物理的渲染(PBR: Physically Based Rendering)是计算机图形学中最现代的渲染方法。 自 2010 年代以来,它一直是一个研究课题,并且自 2010 年代左右开始变得足够有效,可用于实时游戏引擎。 关于它的两本著名出版物是 Brian Karis 的《虚幻引擎 4 中的真实着色》和 Sébastien Lagarde 和 Charles de Rousiers 的《Moving Frostbite to PBR》。

基本思想是使用光的精确物理特性了,这与之前非常粗略的近似不同。 为了实现实时性能,仍然需要近似和缓存大量计算,但结果比以前更加真实。

PBR 将材料分为两类:金属和电介质。 金属是像镜子一样反射光的材料,电介质是像玻璃一样反射光的材料。 不同之处在于,金属具有大量可以移动并反射光的自由电子,而电介质则没有。 最重要的结果是金属具有镜面反射,而电介质则没有。

2、什么是 IBL?

基于图像的照明(IBL: Image Based Lighting)是一种允许使用环境贴图来照亮场景的技术。 它近似于从所有周围反射并来自各个方向的光,以稍微照亮场景。 它经常用作 PBR 的一部分。

3、什么是WebGPU?

简而言之,WebGPU是 WebGL 的继承者。 它反映了计算机图形 API 的演变,并遵循 Vulkan、Metal 和 DirectX 12 的方法及其较低级别和更明确的设计。

如果你对图形 API 的历史感到好奇,并想了解更多 WebGPU 的诞生方式以及其中采取的妥协措施,请查看这篇精彩的文章:我想谈谈 WebGPU。

4、面临的挑战

有几件事对于刚接触 WebGPU 的人来说可能并不明显,对我来说当然也不明显。 当从 OpenGL 翻译代码时,我遇到了以下问题:

  • 解析 HDR 纹理 – 与 WebGPU 无关,但我以前从未这样做过,事实证明确实存在与 WebGPU 相关的问题。
  • 渲染立方体贴图 - 立方体贴图在 WebGL 中有些特定,因此如何在 WebGPU 中执行它们并不简单。
  • 渲染到立方体贴图 - 在 WebGL/OpenGL 中我们将使用帧缓冲区。 相当于什么?
  • 渲染到 mip 级别并读取特定的 mip 级别 - 要么有一个特定的 API,要么我就注定失败(剧透:API 就在那里)。

5、解析 HDR 纹理

为了解析 HDR 纹理,我使用了 Marcin Ignac 的简单但优秀的 parse-hdr 库。 我只需要处理一个问题:我的平台拒绝处理 rgba32float,但parse-hdr库依赖于 Float32Array。

我发现库 @petamoriken/float16 实现了 Float16Array,并且我成功地使用了它。所以我只是修补了parse-hdr库,然后就可以开始了。

6、渲染立方体贴图

我使用了 WebGPU 示例中的 Cubemap。 那里没有什么特别令人惊讶的。

7、渲染到立方体贴图

我忘了是如何找到它的,但诀窍是在创建视图时传递 baseArrayLayer和 arrayLayerCount。

除此之外,它需要与相应的 OpenGL 解决方案类似的数学运算,例如准备 6 个视图矩阵,一个用于立方体贴图的每个面。

const passEncoder = commandEncoder.beginRenderPass({
  colorAttachments: [
    {
      view: cubemapTexture.createView({
        baseArrayLayer: i,
        arrayLayerCount: 1,
      }),
      loadOp: "load",
      storeOp: "store",
    },
  ],
  // ...
});

8、渲染到 mip 级别

我使用了 WebGPU 基础教程,特别是在 GPU 上生成 mip 的指南。 诀窍是仅指定与之前的 baseMipLevel 和 mipLevelCount 不同的值。

const passEncoder = commandEncoder.beginRenderPass({
  colorAttachments: [
    {
      view: prefilterTexture.createView({
        baseArrayLayer: i,
        arrayLayerCount: 1,
        baseMipLevel: mip,
        mipLevelCount: 1,
      }),
      clearValue: [0.3, 0.3, 0.3, 1],
      loadOp: "load",
      storeOp: "store",
    },
  ],
  // ...
});

事实证明,可以使用 textureSampleLevel函数读取特定的mip级别。 这是最令人担忧的部分,因为我知道如果它不能直接在 API 中使用,就没有任何办法解决这个问题。 幸运的是,WebGPU 现在是一个成熟且严肃的 API,可以处理类似的事情。

let prefilteredColor = textureSampleLevel(
  prefilterMap, // texture
  ourSampler, // sampler
  r, // texture coordinate
  roughness * MAX_REFLECTION_LOD, // mip level
).rgb;

9、结束语

点击这里查看完整源代码。

关于渲染技术、优化、妥协等还有很多要补充的,但我不是谈论这些的最佳人选。


原文链接:WebGPU物理渲染实现 — BimAnt文章来源地址https://www.toymoban.com/news/detail-686171.html

到了这里,关于用WebGPU实现基于物理的渲染的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Orillusion引擎正式开源!AIGC时代下的WebGPU轻量级3D渲染引擎!

    开源生态的建设根植于社区,开发者在社区共享、共创、共赢,将会激发出无限的创造力,这就是开源最大的魅力! 选择开源,源于我们坚信,“独行快,众行远”! WebGPU经过六年的时间,终于在2023年4月6日,由Chrome团队发布。5月2号,在Chrome113版本上,WebGPU被默认启动。

    2024年02月11日
    浏览(48)
  • 初识 WebGPU 以及遇到 WebGPU not supported 错误的解决方法

    因公司需求,开始接触 WebGPU,偶然遇到问题,网上搜索无效,后来通过逐步判断,终于定位到问题,这里记录一下,为其他遇到此问题的网友提供解决思路。 本包含 WebGPU学习资源、初识WebGPU、遇到并解决问题、在线示例 四部分。 1. 学习API WebGPU_API 。 3. 基础学习 WebGPU 理论

    2024年02月03日
    浏览(83)
  • 10. WebGPU 旋转变换

    单位圆是半径为 1.0 的圆。 下图是一个单位圆。 [ 注释1 ] 在上图中,当围绕圆拖动蓝色手柄时,X 和 Y 位置会发生变化,代表该点在圆上的位置。且在顶部,Y 为 1,X 为 0。在右侧,X 为 1,Y 为 0。 如果你还记得三年级的基础数学,将某个东西乘以 1,它会保持不变。所以 1

    2024年02月09日
    浏览(79)
  • webgpu之旅04

    继续继续 首先准备好绘制到屏幕所需的这个descriptor if rendertarget this._textures.initRenderTarget( renderTarget ); 来看一下这个函数里面会做什么 renderTargetProperties是这个target的properties 创建一个color texture,然后如果depth需要,也会创建一个depth texture renderTargetProperties.colorTextureGPU = color

    2024年02月09日
    浏览(43)
  • WebGPT VS WebGPU

    推荐:使用 NSDT编辑器 快速搭建3D应用场景 随着WebGPU的引入,Web开发发生了有趣的转变,WebGPU是一种新的API,允许Web应用程序直接访问设备的图形处理单元(GPU)。这种发展意义重大,因为 GPU 擅长复杂的计算。 一个说明WebGPU潜力的项目是WebGPT。这是一个用JavaScript和HTML编写

    2024年02月10日
    浏览(45)
  • WebGPU开发详解

    WebGPU 是即将推出的 Web API,提供了一组访问 GPU的低级通用API。 我对图形学不是很有经验。我通过阅读有关如何使用 OpenGL 构建游戏引擎的教程来学习 WebGL 的知识点,并通过观看Inigo Quilez在ShaderToy上仅使用着色器(不使用任何 3D 网格或模型)做令人惊奇的事情来了解有关着色

    2024年02月05日
    浏览(26)
  • webgpu 入门

    本文介绍了如何运行webgpu的官方demo webgpu是一种新的web API,它公开了现代计算机图形功能,特别是Direct3D 12、Metal和Vulkan,用于在图形处理单元(GPU)上执行渲染和计算操作。 https://nodejs.org/en/ 请确保node.js版本 = 18.12 https://github.com/austinEng/webgpu-samples 代码如下(示例): http

    2024年02月04日
    浏览(24)
  • WebGPU实战3D电商

    在过去的几年里,我们一直在为 WebGPU 编写新版本的 Babylon.js 引擎。 随着下一代 Web 3D 即将在Chrome 102~103版本上公开WebGPU 1.0 ,人们的兴奋情绪与日俱增。 在这篇博文中,我将快速概述这个新的 Babylon.js WebGPU 引擎,并将研究它可以为 Web 上的 3D 商务体验带来的一些性能改进。

    2024年02月16日
    浏览(39)
  • 12. WebGPU 矩阵数学

    在最近的 3 篇文章中,介绍了如何平移、旋转和缩放顶点位置。平移、旋转和缩放都被认为是一种变换。这些变换中的每一个都需要对着色器进行修改,并且 3 个转换中的每一个都依赖于顺序。 在之前的示例中,先缩放,然后旋转,最后平移。如果以不同的顺序应用它们,会

    2024年02月09日
    浏览(34)
  • WebGPU开发简明教程【2023】

    WebGPU 是一种全新的现代 API,用于在 Web 应用程序中访问 GPU 的功能。 在 WebGPU 之前,有 WebGL,它提供了 WebGPU 功能的子集。 它启用了新一类丰富的网络内容,开发人员用它构建了令人惊叹的东西。 然而,它基于 2007 年发布的 OpenGL ES 2.0 API,而该 API 又基于更旧的 OpenGL API。

    2024年02月16日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包