轻量封装WebGPU渲染系统示例<46>- 材质组装管线(MaterialPipeline)灯光、阴影、雾以及多Pass(源码)

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/MaterialPipelineMultiPasses.ts

当前示例运行效果:

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

export class MaterialPipelineMultiPasses {private mRscene = new RendererScene();initialize(): void {this.mRscene.initialize({canvasWith: 512,canvasHeight: 512,mtplEnabled: true,rpassparam:{multisampled: true}});this.initScene();this.initEvent();}private hdrEnvtex = new SpecularEnvBrnTexture();private createMaskTextures(ns: string, maskns = 'displacement_01.jpg'): 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` } };// mask textureconst opacityTex = { opacity: { url: `static/assets/${maskns}` } };let textures = [this.hdrEnvtex,albedoTex,normalTex,aoTex,roughnessTex,metallicTex,opacityTex] as WGTextureDataDescriptor[];return textures;}private createBaseTextures(): WGTextureDataDescriptor[] {const albedoTex = { albedo: { url: `static/assets/pbrtex/rough_plaster_broken_diff_1k.jpg` } };const normalTex = { normal: { url: `static/assets/pbrtex/rough_plaster_broken_nor_1k.jpg` } };const armTex = { arm: { url: `static/assets/pbrtex/rough_plaster_broken_arm_1k.jpg` } };let textures = [this.hdrEnvtex,albedoTex,normalTex,armTex] as WGTextureDataDescriptor[];return textures;}private initScene(): void {let rc = this.mRscene;let mtpl = rc.renderer.mtpl;mtpl.light.data = createLightData([0, 300, 0], 600, 5.0);mtpl.shadow.param.intensity = 0.7;mtpl.fog.fogColor.value = [0.3, 0.7, 0.2];let position = [0, 50, 180];let materials = this.createMaterials(true);let sphere = new SphereEntity({radius: 150.0,materials,transform: { position }});rc.addEntity(sphere);position =  [0, 50, -180];materials = this.createMaterials(true, true, 'back', [4, 1]);let torus = new TorusEntity({axisType: 1,materials,transform: { position }});rc.addEntity(torus);position = [0, -110, 0];materials = this.createMaterials(true, false, 'back',[3,3]);let plane = new PlaneEntity({axisType: 1,materials,extent: [-600, -600, 1200, 1200],transform: { position }});rc.addEntity(plane);position = [0, 0, 0];materials = this.createMaterials(false, false, 'front', [2, 2]);let envBox = new CubeEntity({cubeSize: 2050.0,normalScale: -1.0,materials,transform: { position }});rc.addEntity(envBox);}private createMaterials(shadowReceived = false, shadow = true, faceCullMode = 'back', uvParam?: number[]): BaseMaterial[] {let textures0 = this.createBaseTextures();let textures1 = this.createMaskTextures("plastic");let textures2 = this.createMaskTextures("wall", 'circleWave_disp.png');let material0 = this.createMaterial(textures0, ["solid"], 'less', faceCullMode);this.applyMaterialPPt(material0, shadowReceived, shadow);let material1 = this.createMaterial(textures1, ["transparent"], 'less-equal', faceCullMode);material1.property.inverseMask = false;this.applyMaterialPPt(material1, shadowReceived, shadow);let material2 = this.createMaterial(textures2, ["transparent"], 'less-equal', faceCullMode);material2.property.inverseMask = true;this.applyMaterialPPt(material2, shadowReceived, shadow);let list = [material0, material1, material2];// let list = [material0, material1];if (uvParam) {for (let i = 0; i < list.length; ++i) {list[i].property.uvParam.value = uvParam;}}return list;}private applyMaterialPPt(material: BaseMaterial, shadowReceived = false, shadow = true): void {let ppt = material.property;ppt.ambient.value = [0.0, 0.2, 0.2];ppt.albedo.value = [0.7, 0.7, 0.3];ppt.arms.roughness = 0.8;ppt.armsBase.value = [0, 0, 0];ppt.param.scatterIntensity = 32;ppt.shadow = shadow;ppt.lighting = true;ppt.shadowReceived = shadowReceived;ppt.exp2Fogging = true;}private createMaterial(textures: WGTextureDataDescriptor[], blendModes: string[], depthCompare = 'less', faceCullMode = 'back' ): BaseMaterial {let pipelineDefParam = {depthWriteEnabled: true,faceCullMode,blendModes,depthCompare};let material = new BaseMaterial({ pipelineDefParam });material.addTextures(textures);return material;}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/212990.shtml

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

相关文章

Python----内置模块

1、什么是Python模块 Python 模块(Module)&#xff0c;是一个Python 文件&#xff0c;以 .py 结尾&#xff0c;包含了 Python 对象定义和Python语句。模块能定义函数&#xff0c;类和变量&#xff0c;模块里也能包含可执行的代码。 2、模块的分类 在Python中&#xff0c;模块…

[ffmpeg] AVFrame 功能整理

背景 AVFrame 主要用来存储编码前的原始数据。 AVFrame 结构体 在 frame.h 文件中 主要变量 uint8_t *data[AV_NUM_DATA_POINTERS]; // 存储每个 planes 的数据 int linesize[AV_NUM_DATA_POINTERS]; // 每一行的音视频数据 uint8_t **extended_data; // 视频&#xff0c;…

java实现网络聊天

网络聊天实现步骤&#xff08;从功能谈论方法&#xff09;&#xff1a; 客户端&#xff1a; 1.登录面板&#xff1a;注册提醒用户注册格式&#xff0c;登录账号密码不为空&#xff0c;点击登录的时候需要连接服务器端&#xff0c;启动聊天面板。&#xff08;监听用户点击登录…

Windows下nginx的启动,重启,关闭等功能bat脚本

echo off rem 提供Windows下nginx的启动&#xff0c;重启&#xff0c;关闭功能echo begincls ::ngxin 所在的盘符 set NGINX_PATHG:::nginx 所在目录 set NGINX_DIRG:\projects\nginx-1.24.0\ color 0a TITLE Nginx 管理程序增强版CLSecho. echo. ** Nginx 管理程序 *** echo.…

JAVA使用HTTP代码示例

你好&#xff0c;Java开发者们&#xff01;今天&#xff0c;我要给你们带来一场硬核的盛宴&#xff0c;那就是在Java中使用HTTP协议进行网络通信的代码示例。准备好接受挑战了吗&#xff1f;Lets go&#xff01; 首先&#xff0c;我们需要导入一些必要的库&#xff0c;它们将成…

C++枚举类

枚举 C11有作用域枚举和无作用域枚举 无作用域枚举 特点 全局作用域&#xff1a;无作用域枚举的成员&#xff08;枚举值&#xff09;在包含它们的作用域内是直接可见的&#xff0c;不需要使用枚举类型名称作为前缀。 隐式类型转换&#xff1a;无作用域枚举的成员可以隐式地转换…

鸿蒙开发组件之ForEach列表

一、ForEach函数 ForEach函数是一个迭代函数&#xff0c;需要传递两个必须参数和一个可选参数。主要通过迭代来获取参数arr中的数据不断的生成单个Item来生成鸿蒙中的列表样式 二、先创建单个的Item的UI 通过嵌套Row与Column来实现单个Item的UI。例如图中没有折扣的可以看成一…

用23种设计模式打造一个cocos creator的游戏框架----(八)适配器模式

1、模式标准 模式名称&#xff1a;适配器模式 模式分类&#xff1a;结构型 模式意图&#xff1a;适配器模式的意图是将一个类的接口转换成客户端期望的另一个接口。适配器模式使原本接口不兼容的类可以一起工作。 结构图&#xff1a; 适用于&#xff1a; 系统需要使用现有的…

309. 买卖股票的最佳时机含冷冻期(leetcode) 动态规划思想

文章目录 前言一、题目分析二、算法原理1.状态表示2.状态转移方程3.初始化边界条件4.填表顺序5.返回值是什么 三、代码实现总结 前言 在本文章中&#xff0c;我们将要详细介绍一下Leetcode中买卖股票的最佳时机含冷冻期相关的内容&#xff0c;本题采用动态规划的思想解决 一、…

uniapp蓝牙传输中文乱码问题

uniapp蓝牙传输中文乱码问题 0 现状 传输数字和字母的json字符串都可以解析&#xff0c;有个中文的硬件那边就解析不了&#xff0c;替换一下发数据的处理函数即可 1 原先字符串转化函数 const stringToBytes (msg) > {const buffer new ArrayBuffer(msg.length)const …

eclipse中一些文件的作用

.idea文件夹 .idea和.settings文件夹是IntelliJ IDEA的配置文件夹&#xff0c;用于存储项目的配置信息。这些文件夹中包含了许多XML文件&#xff0c;这些XML文件包含了项目的各种配置信息&#xff0c;例如编译选项、运行配置、代码样式、版本控制等等。 包含了一些名为modules.…

PyQt6 QDateEdit日期控件

​锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计39条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话…

多数元素算法(leetcode第169题)

题目描述&#xff1a; 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。示例 1&#xff1a;输入&#xff1a;nums [3,2,3] 输出&am…

Python:可以做什么?

简介 Python是一种高级编程语言&#xff0c;因其简单易学、代码可读性强和拥有丰富的标准库而广受欢迎。Python可以用于许多不同领域&#xff0c;主要包括&#xff1a; 数据分析与数据科学&#xff1a;Python有强大的数据处理和分析库&#xff0c;如Pandas、NumPy和SciPy&…

空中消防员:无人机森林防火应用全面升级

森林是生态系统的重要组成部分&#xff0c;也是人类得以生存的关键。我国森林面积广大&#xff0c;存在火灾频发的困境。提升森林火灾防控能力是维护生态平衡、保护资源和保障人民生命安全的必要步骤。随着无人机技术的发展&#xff0c;其在无人机森林防火中的应用为传统巡查工…

Linux PSI-----Pressure Stall information

PSI——压力阻塞信息 当CPU、memory或IO设备处于竞争状态&#xff0c;业务负载会遭受时延毛刺、吞吐量降低&#xff0c; 及面临OOM的风险。 如果没有一种准确的方法度量系统竞争程度&#xff0c;则有两种后果&#xff1a;一种是用户过于节制&#xff0c; 未充分利用系统资源&…

Mybatis与Spring结合深探——MapperFactoryBean的奥秘

文章目录 前言MapperFactoryBean的工作原理底层实现剖析MapperFactoryBean的checkDaoConfig()方法总结 MapperFactoryBean的getObject()方法 思考联想后续 系列相关相关文章究竟FactoryBean是什么&#xff1f;深入理解Spring的工厂神器超硬核解析Mybatis动态代理原理&#xff0…

lv12 开发板启动过程

1 开发板启动过程 1.1 回顾芯片手册第三章内存映射 对于arm来说&#xff0c;不是给它多大的内存都能读。寻址空间&#xff08;地址空间&#xff09;读写范围是有限的&#xff0c;寻址空间的大小与地址总线宽度有关&#xff0c;如32位&#xff0c;地址空间4G&#xff08;2^32)…

NVMe over Fabrics with SPDK with iRDMA总结 - 3

6.0 Configure and Test NVMe over Fabrics Host(s) to Connect to SPDK Target配置和测试 NVMe over Fabrics 主机以连接 SPDK 目标机 The SPDK NVMe-oF target system is spec compliant, which allows for the use of either an SPDK host or Linux Kernel host to co…

【C语言基础】嵌入式面试经典题(C语言篇)----有新的内容会及时补充、更新!

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…