当前位置: 首页 > news >正文

轻量封装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();}
}

相关文章:

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

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/BasePbrMaterialTest.ts 当前示例运行效果: 微调参数之后的效果: 此示例基于此渲染系统实现&#xff0c;当前示例TypeScript源码如下: export class BasePbrMateri…...

春秋云境靶场CVE-2022-28512漏洞复现(sql手工注入)

文章目录 前言一、CVE-2022-28512靶场简述二、找注入点三、CVE-2022-28512漏洞复现1、判断注入点2、爆显位个数3、爆显位位置4 、爆数据库名5、爆数据库表名6、爆数据库列名7、爆数据库数据 总结 前言 此文章只用于学习和反思巩固sql注入知识&#xff0c;禁止用于做非法攻击。…...

数字化文化的守护之星:十八数藏的非遗创新之道

在数字时代的浪潮中&#xff0c;十八数藏犹如一颗璀璨的守护之星&#xff0c;为传统文化注入了新的生命力。这个非遗创新项目以数字化为工具&#xff0c;以守护为使命&#xff0c;开辟了文化传承的新航道。 十八数藏是文化数字守护的引领者&#xff0c;通过数字技术&#xff0…...

[机缘参悟-119] :反者道之动与阴阳太极

目录 一、阴阳对立、二元对立的规律 1.1 二元对立 1.2 矛盾的对立与统一 二、阴阳互转、阴阳变化、变化无常 》无序变化和有序趋势的规律 三、阴阳合一、佛魔一体、善恶同源 四、看到积极的一面 五、反者道之动 5.1 概述 5.2 "否极泰来" 5.3 “乐极生悲”…...

Docker搭建Redis集群

Docker搭建Redis集群 创建一个专属redis的网络 docker network create redis --subnet 172.38.0.0/16通过shell脚本创建并启动6个redis服务 #通过脚本一次创建6个redis配置 for port in $(seq 1 6); \ do \ mkdir -p /mydata/redis/node-${port}/conf touch /mydata/redis/n…...

学习Opencv(蝴蝶书/C++)代码——2.OpenCV初探

文章目录 0. 图像读取与显示1. 视频文件读取与操作1.1 示例代码1.1 OpenCV支持的视频格式2. 加入滑动条2.1 示例代码2.2 报错/Warning2.3 关于toolbar3. 简易视频播放器3.1 OpenCV检测方向键被按下3.1.1 Windows下3.1.2 linux下3.1 方向键控制视频变化4. 简单的变换5. 写视频5.…...

基于AVR单片机的便携式心电监测设备设计与实现

基于AVR单片机的便携式心电监测设备是一种常用的医疗设备&#xff0c;用于随时监测和记录人体的心电信号。本文将介绍便携式心电监测设备的设计原理和实现步骤&#xff0c;并提供相应的代码示例。 1. 设计概述 便携式心电监测设备是一种小巧、方便携带的设备&#xff0c;能够…...

微机原理_14

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案。&#xff09; 1,下面寻址方式的操作数不在存储器中的是(&#xff09; A. 堆栈寻址 B. 寄存器间址 C.寄存器寻址 D. 直接寻址 2,条件转移指令JNE的条件是(&#xff09; A. CF…...

【Flink】核心概念:并行度与算子链

并行度&#xff08;Parallelism&#xff09; 当要处理的数据量非常大时&#xff0c;我们可以把一个算子操作&#xff0c;“复制”多份到多个节点&#xff0c;数据来了之后就可以到其中任意一个执行。这样一来&#xff0c;一个算子任务就被拆分成了多个并行的“子任务”&#x…...

milvus采坑一:启动服务就会挂掉

原因一 硬盘满了&#xff0c;Eric数据文件存储在硬盘上&#xff0c;当硬盘不足&#xff0c;它就会启动后就挂掉。 此时pymilvus连接一直是timeout。 解决方法&#xff1a;更换存储路径。...

WPF Visual, UIElement, FrameworkElement, Control这些类的区别

在WPF (Windows Presentation Foundation) 中&#xff0c;Visual, UIElement, FrameworkElement, 和 Control 这些类是一个类层次结构&#xff0c;它们分别在 WPF 的 UI 元素和控件模型中提供了不同级别的功能。下面是这些类的详细介绍&#xff1a; Visual&#xff1a;这是所有…...

Python-----PyInstaller的简单使用

PyInstaller简介 PyInstaller是一个Python库&#xff0c;可以将Python应用程序转换为独立的可执行文件。PyInstaller支持跨平台&#xff0c;可以在Windows、Linux和MacOS上生成可执行文件。 PyInstaller会分析Python程序&#xff0c;并将程序打包成一个完整的可执行文件&…...

8 Redis与Lua

LUA脚本语言是C开发的&#xff0c;类似存储过程,是为了实现完整的原子性操作&#xff0c;可以用来补充redis弱事务的缺点. 1、LUA脚本的好处 2、Lua脚本限流实战 支持分布式 import org.springframework.core.io.ClassPathResource; import org.springframework.data.redis…...

10个令人惊叹的Go语言技巧,让你的代码更加优雅

关注公众号【爱发白日梦的后端】分享技术干货、读书笔记、开源项目、实战经验、高效开发工具等&#xff0c;您的关注将是我的更新动力&#xff01; 在开发生产项目的过程中&#xff0c;我注意到经常会发现自己在重复编写代码&#xff0c;使用某些技巧时没有意识到&#xff0c;直…...

vue3 setup展示数据

效果图 1.创建数据 content.js import { reactive } from vueconst data reactive({color:red,title: 二十四节气,subTitle: 节气&#xff0c;是干支历中表示自然节律变化以及确立“十二月建”&#xff08;月令&#xff09;的特定节令。,list: [{name: "立春",con…...

原理Redis-Dict字典

Dict 1) Dict组成2) Dict的扩容3) Dict的收缩4) Dict的rehash5) 总结 1) Dict组成 Redis是一个键值型&#xff08;Key-Value Pair&#xff09;的数据库&#xff0c;可以根据键实现快速的增删改查。而键与值的映射关系正是通过Dict来实现的。 Dict由三部分组成&#xff0c;分别…...

卷积神经网络(VGG-19)灵笼人物识别

文章目录 前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;我的环境&#xff1a; 2. 导入数据3. 查看数据 二、数据预处理1. 加载数据2. 可视化数据3. 再次检查数据4. 配置数据集5. 归一化 三、构建VGG-19网络1. 官方模型&#xff08;已打包好&#xff…...

MQTT协议详解

前言 MQTT是一个即时通讯协议&#xff0c;它工作在TCP/IP协议族上&#xff0c;是为硬件性能低下的远程设备以及网络状况糟糕的情况下而设计的发布/订阅型消息协议。它使用发布/订阅消息模式&#xff0c;提供一对多的消息发布&#xff0c;解除应用程序耦合。MQTT是轻量、简单、…...

WordPress画廊插件Envira Gallery v1.9.7河蟹版下载

Envira Gallery是一款功能强大的WordPress画廊插件。通过使用这个插件&#xff0c;你可以在WordPress的前台页面上创建出令人赏心悦目的图片画廊展示形式。 拖放生成器&#xff1a;轻松创建精美照片和视频画廊 自定义主题&#xff0c;打造独特外观 使用预设模板&#xff0c;为…...

认识前端包常用包管理工具(npm、cnpm、pnpm、nvm、yarn)

随着前端的快速发展,前端的框架越来越趋向于工程化,所以对于包的使用也越来越多,为了优化性能和后期的维护更新,对于前端包的管理也尤为重要,本文主要阐述对node中包管理工具的理解和简单的使用方法。也欢迎各位大佬和同行们多多指教。😁😁😁 👉1. npm 安装npm 通…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...