轻量封装WebGPU渲染系统示例<35>- HDR环境数据应用到PBR渲染材质

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/BasePbrMaterialTest.ts

当前示例运行效果:

微调参数之后的效果:

此示例基于此渲染系统实现,当前示例TypeScript源码如下:

export class BasePbrMaterialTest {private mRscene = new RendererScene();initialize(): void {this.mRscene.initialize({ canvasWith: 1024, canvasHeight: 1024, rpassparam: { multisampleEnabled: true } });this.initScene();this.initEvent();}private hdrEnvtex = new SpecularEnvBrnTexture();private createTextures(ns: string): WGTextureDataDescriptor[] {const albedoTex = { albedo: { url: `static/assets/pbr/${ns}/albedo.jpg` } };const normalTex = { normal: { url: `static/assets/pbr/${ns}/normal.jpg` } };const aoTex = { ao: { url: `static/assets/pbr/${ns}/ao.jpg` } };const roughnessTex = { roughness: { url: `static/assets/pbr/${ns}/roughness.jpg` } };const metallicTex = { metallic: { url: `static/assets/pbr/${ns}/metallic.jpg` } };let textures = [this.hdrEnvtex, albedoTex, normalTex, aoTex, roughnessTex, metallicTex];return textures;}private initScene(): void {this.initEntities();}private initEntities(): void {let rc = this.mRscene;let monkeySrc = new ModelEntity({modelUrl: "static/assets/draco/monkey.drc"});let sphSrc = new SphereEntity({radius: 100,latitudeNumSegments: 30,longitudeNumSegments: 30});let lightData = this.createLightData();let startV = new Vector3(-500, 0, -500);for (let i = 0; i < 3; ++i) {for (let j = 0; j < 5; ++j) {let pos = new Vector3(j * 300 + startV.x, 0, i * 600 + startV.z);let roughness = 1.0 - (0.05 + 0.95 * j/(5-1));let roughnessBase = i/(3-1);let material = new BasePBRMaterial();let property = material.property;property.setLightData(lightData.lightsData, lightData.lightColorsData);property.ambient.value = new Color4().randomRGB(0.3, 0.1);property.albedo.value = new Color4().randomRGB(1.0, 0.2);property.arms.value = [1, roughness, 1];property.armsBase.value = [0, roughnessBase ,0];material.addTextures(this.createTextures("gold"));let sph = new SphereEntity({materials: [material],geometry: sphSrc.geometry});sph.transform.setPosition(pos);rc.addEntity(sph);material = new BasePBRMaterial();property = material.property;property.setLightData(lightData.lightsData, lightData.lightColorsData);property.ambient.value = new Color4().randomRGB(0.3, 0.1).ceil();property.albedo.value = new Color4().randomRGB(1.0, 0.2);property.arms.value = [1, roughness, 1];property.armsBase.value = [0, roughnessBase ,0];property.uvParam.value = [2,2];material.addTextures(this.createTextures("rusted_iron"));let monkey = new ModelEntity({materials: [material],geometry: monkeySrc.geometry,transform: { position: pos.clone().subtractBy(new Vector3(0, 0, 270)), scale: [100, 100, 100], rotation: [0, 90, 0] }});rc.addEntity(monkey);}}}private createLightData(): { lightsData: Float32Array; lightColorsData: Float32Array } {let lightsData = new Float32Array([0.0, 300.0, 0, 0.000001]);let lightColorsData = new Float32Array([5.0, 5.0, 5.0, 0.000005]);return { lightsData, lightColorsData };}private initEvent(): void {const rc = this.mRscene;rc.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);new MouseInteraction().initialize(rc, 0, false).setAutoRunning(true);}private mouseDown = (evt: MouseEvent): void => {};run(): void {this.mRscene.run();}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/151948.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sentinel 熔断规则 (DegradeRule)

Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 SpringbootDubboNacos 集成 Sentinel&…

【Linux】21、软中断、网络小包、SYN FLOOD 攻击、sar tcpdump

文章目录 一、通俗理解&#xff1a;从“取外卖”看中断二、软中断2.1 网卡收发数据包2.2 查看软中断和内核线程2.3 案例2.3.1 案例&#xff1a;动态库 sleep 导致软中断2.3.2 Nginx 进程的不可中断状态是系统的一种保护机制&#xff0c;可以保证硬件的交互过程不被意外打断。所…

cloud的初级使用方法

初学者可以通过以下步骤开始使用云计算服务。在这里&#xff0c;我将以Amazon Web Services&#xff08;AWS&#xff09;为例&#xff0c;因为它是一个领先的云服务提供商&#xff0c;但其他云平台的流程也有相似之处。 步骤1&#xff1a;创建 AWS 账户 访问 AWS 主页&#xf…

QT自定义信号,信号emit,信号参数注册

qt如何自定义信号 使用signals声明返回值是void在需要发送信号的地方使用 emit 信号名字(参数)进行发送 在需要链接的地方使用connect进行链接 ct进行链接

无需云盘,不限流量实现Zotero跨平台同步:内网穿透+私有WebDAV服务器

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 无需云盘&#xff0c;不限流量实现Zotero跨平台同步&#xff1a;内网穿透私有WebDAV服务器 文章目…

系列十一、你平时工作用过的JVM常用基本配置参数有哪些?

一、常用参数 1.1、-Xms 功能&#xff1a;初始内存大小&#xff0c;默认为物理内存的1/64&#xff0c;等价于 -XX:InitialHeapSize 1.2、-Xmx 功能&#xff1a;最大分配内存&#xff0c;默认为物理内存的1/4&#xff0c;等价于 -XX:MaxHeapSize 1.3、-Xss 功能&#xff1a;设置…

Vue:从本地加载json文件

作者&#xff1a;CSDN _乐多_ 本文记录了使用vue框架从本地加载json文件的代码。 文章目录 import axios from axios;try {const response await axios.get(./Apps/output.json);// this.jsonData response.data.section_list;// console.log(response, response)// consol…

Cloud 微服务

架构 一 单体架构 1 概念 将项⽬所有模块&#xff08;功能&#xff09;打成jar或者war&#xff0c;然后部署⼀个进程。 互联网早期&#xff0c;一般的网站应用流量较小&#xff0c;只需一个应用&#xff0c;将所有功能代码都部署在一起就可以&#xff0c;这样可以减少开发、…

RoCE、IB和TCP等网络的基本知识及差异对比

目前有三种RDMA网络&#xff0c;分别是Infiniband、RoCE(RDMA over Converged Ethernet)、iWARP。 其中&#xff0c;Infiniband是一种专为RDMA设计的网络&#xff0c;从硬件级别保证可靠传输 &#xff0c;技术先进&#xff0c;但是成本高昂。 而RoCE 和 iWARP都是基于以太网的…

接口自动化和UI自动化的区别

接口自动化和UI自动化的区别 目录 1 自动化概念1.1 接口自动化1.1.1 接口概念1.1.2 接口自动化概念1.2 UI自动化概念1.2.1 UI测试概念1.2.2 UI自动化测试概念2 自动化结构2.1 接口自动化结构2.2 UI自动化结构3 自动化差别3.1 相同3.1.1 设计思想3.1.2 框架搭建3.1.3 持续集成3…

9.docker镜像Tag为none的原因

1.现象 使用docker images命令查看镜像列表&#xff0c;会发现存在许多标签为none的镜像&#xff1a; 2. 原因 docker镜像标签为none的原因如下&#xff1a; &#xff08;1&#xff09;构建或重新拉取同名同Tag的新镜像&#xff1a;构建或重新拉取同名同Tag的新镜像后&…

vue统一登录

说明&#xff1a; 统一登录其实就是前端去判断Url地址的token 之后如果有token未过期就直接跳转到首页。 说到浏览器输入url地址&#xff0c;那从浏览器输入地址一共发生了几件事大致如下&#xff1a; DNS解析域名&#xff0c;获取IP地址 --》 建立TCP连接&#xff08;三次握…

什么是单域名SSL安全证书?

单域名证书是什么&#xff1f; 单域名证书是指只包含一个具体域名的SSL/TLS证书&#xff0c;它可以用于保护单个主机名的HTTPS通信。例如&#xff0c;如果您有一个网站http://www.example.com&#xff0c;则单域名证书将仅为该域名颁发。 这种证书在保护单个域的安全方面很有…

open3d ICP 配准

文章目录 Three common registration techniquesPoint-to-point techniquePoint-to-plane registration ICP registrationHelper visualization functionInputGlobal registrationExtract geometric featureInputRANSAC Point-to-point ICPPoint-to-plane ICP References Three…

webSocket基于面向对象二次封装

今天不睡,熬夜赶了个WebSocket 二次封装,也对这几天文章摸鱼感到抱歉,所以我出了一个注释非常非常全的代码 思路如下 首先&#xff0c;需要通过调用connect方法来建立WebSocket连接。当连接成功时&#xff0c;会调用我提供的回调函数&#xff0c;并将连接成功的消息帧作为参数…

【Java 进阶篇】Ajax 入门:打开前端异步交互的大门

欢迎来到前端异步交互的世界&#xff01;在这篇博客中&#xff0c;我们将深入探讨 Ajax&#xff08;Asynchronous JavaScript and XML&#xff09;&#xff0c;这是一项能够让你的网页在不刷新的情况下与服务器进行数据交互的技术。无论你是刚刚踏入前端开发的小白&#xff0c;…

多视图聚类论文阅读(二)

Deep multi-view semi-supervised clustering with sample pairwise constraints Neuro Compucting 基于样本对约束的深度多视图半监督聚类 1.1 聚类的相关工作 典型相关分析(CCA)[13]寻求两个投影&#xff0c;将两个视图映射到一个低维公共子空间&#xff0c;其中两个视图…

pycharm2023 实现鼠标点击某行,调试时代码运行至相应行

按下图取消 Breakpoints Over Line Numbers即可&#xff0c;然后调试时点击某行&#xff0c;代码就会运行至某行

图的基础知识(数据结构)

&#xff08;1&#xff09;已知无向图G各边的权值均为1&#xff0c;下列算法中一定能够求出G中从某个顶点到其余各个顶点的最短路径的是&#xff08;III&#xff09; I 普利姆算法 II 克鲁斯卡尔算法 III 图的广度优先搜索 &#xff08;2&#xff09;已知无向图中含有16…

【鸿蒙应用ArkTS开发系列】- 云开发入门简介

目录 概述开发流程工程概览工程模板工程结构 工程创建与配置 概述 HarmonyOS云开发是DevEco Studio新推出的功能&#xff0c;可以让您在一个项目工程中&#xff0c;使用一种语言完成端侧和云侧功能的开发。 基于AppGallery Connect Serverless构建的云侧能力&#xff0c;开发…