轻量封装WebGPU渲染系统示例<44>- 材质组装流水线(MaterialPipeline)之灯光和阴影(源码)

目标:  数据化,模块化,自动化

备注: 从这个节点开始整体设计往系统规范的方向靠拢。之前的都算作是若干准备。所以会和之前的版本实现有些差异。

当前示例源码github地址:

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

当前示例运行效果:

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

export class MaterialPipelineTest {private mRscene = new RendererScene();initialize(): void {this.mRscene.initialize({canvasWith: 512,canvasHeight: 512,mtplEnabled: true,rpassparam: { multisampled: true }});this.initScene();this.initEvent();}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;let position = [-230.0, 100.0, -200.0];let materials = this.createMaterials(true);let sph = new SphereEntity({radius: 80,transform: {position},materials});rc.addEntity(sph);position = [10.0, 100.0, -180.0];materials = this.createMaterials(true);let box = new BoxEntity({minPos: [-30, -30, -30],maxPos: [130, 230, 80],transform: {position,rotation: [50, 130, 80]},materials});rc.addEntity(box);position = [160.0, 100.0, 210.0];materials = this.createMaterials(true);let torus = new TorusEntity({transform: {position,rotation: [50, 30, 80]},materials});rc.addEntity(torus);position = [130.0, 220.0, 180.0];materials = this.createMaterials(true);torus = new TorusEntity({transform: {position,rotation: [50, 30, 80]},materials});rc.addEntity(torus);position = [0, -1, 0];materials = this.createMaterials(true, false);let plane = new PlaneEntity({axisType: 1,materials,extent: [-600, -600, 1200, 1200],transform: { position }});rc.addEntity(plane);}private initEvent(): void {const rc = this.mRscene;rc.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);new MouseInteraction().initialize(rc, 0, false).setAutoRunning(true);}private hdrEnvtex = new SpecularEnvBrnTexture();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 createMaterials(shadowReceived = false, shadow = true, uvParam?: number[]): BaseMaterial[] {let textures0 = this.createBaseTextures();let material0 = this.createMaterial(textures0);this.applyMaterialPPt(material0, shadowReceived, shadow);let list = [material0];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 property = material.property;property.ambient.value = [0.0, 0.2, 0.2];property.albedo.value = [0.7, 0.7, 0.3];property.arms.roughness = 0.8;property.armsBase.value = [0, 0, 0];property.param.scatterIntensity = 32;property.shadow = shadow;property.lighting = true;property.shadowReceived = shadowReceived;}private createMaterial(textures: WGTextureDataDescriptor[]): BaseMaterial {let pipelineDefParam = {depthWriteEnabled: true};let material = new BaseMaterial({ pipelineDefParam });material.addTextures(textures);return material;}private mouseDown = (evt: MouseEvent): void => {}run(): void {this.mRscene.run();}
}

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

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

相关文章

apt-get update失败

一、先验证是否有网络 rootlocalhost:~# ping www.baidu.com ping: www.baidu.com: Temporary failure in name resolution rootlocalhost:~# 说明没有网&#xff0c;参考&#xff1a;https://blog.csdn.net/qq_43445867/article/details/132384031 sudo vim /etc/resolv.con…

代码随想录二刷 | 二叉树 |404.左叶子之和

代码随想录二刷 &#xff5c; 二叉树 &#xff5c;404.左叶子之和 题目描述解题思路递归法迭代法 代码实现递归法迭代法 题目描述 404.左叶子之和 给定二叉树的根节点 root &#xff0c;返回所有左叶子之和。 示例 1&#xff1a; 输入: root [3,9,20,null,null,15,7] 输出…

使用node实现链接数据库并对数据库进行增删改查的后端接口

环境 node npm 编辑器 vscode 项目配置 新建目录 用vscode打开 终端输入 npm init -y npm install mysql npm install express 代码 安装好之后的代码页面 新建 在根目录新建api.js文件 const express require(express); const db require(./db/index); const app…

el-tree包含下级回显半选状态一些问题

上一篇文章如何在el-tree懒加载并且包含下级的情况下进行数据回显-02 说了一下在包含下级的时候&#xff0c;数据的回显&#xff0c;通过nodesMap进行赋值&#xff0c;这次说一下在做这个需求的过程中遇到的一些问题&#xff1a; loadNode(node, resolve) {// 处理回显主要是通…

13、RockerMQ消息类型之广播与集群消息

RocketMq中提供两种消费模式&#xff1a;集群模式和广播模式。 集群模式 集群模式表示同一个消息会被同一个消费组中的消费者消费一次&#xff0c;消息被负载均衡分配到同一个消费者上的多个实例上。 还有另外一种平均的算法是AllocateMessageQueueAveragelyByCircle&#xff…

CSS 的背景属性(开发中常用)

目录 1 内容预览 背景颜色 背景图片 背景平铺 背景图片位置(常用) 背景图像固定 背景复合写法 背景色半透明 实现案例 1 内容预览 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 注意&#xff1a; 把表格中的五个属背下来&#xff0c…

约数性质以及辗转相除法

文章目录 AcWing 869. 试除法求约数题目链接思路CODE AcWing 870. 约数个数题目链接思路CODE AcWing 871. 约数之和题目链接思路CODE AcWing 872. 最大公约数题目链接思路CODE AcWing 869. 试除法求约数 题目链接 https://www.acwing.com/activity/content/problem/content/9…

go集成nacos

1,go集成nacos 注册实例与注销实例 package mainimport ("fmt""github.com/nacos-group/nacos-sdk-go/clients""github.com/nacos-group/nacos-sdk-go/clients/naming_client""github.com/nacos-group/nacos-sdk-go/common/constant"…

【LuatOS】简单案例网页点灯

材料 硬件&#xff1a;合宙ESP32C3简约版&#xff0c;BH1750光照度模块&#xff0c;0.96寸OLED(4P_IIC)&#xff0c;杜邦线若干 接线&#xff1a; ESP32C3.GND — OLED.GND — BH1750.GND ESP32C3.3.3V — OLED.VCC — BH1750.VCC ESP32C3.GPIO5 — OLED.SCL — BH1750.SCL E…

AOP跨模块捕获异常遭CGLIB拦截而继续向上抛出异常

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、BUG详情 1.1 报错信息 1.2 接口响应信息 1.3 全局异常处理器的定义 二、排查过程 三、解决方案 四、总结 前言 最近&…

数据科学工作的20个Pandas函数(备忘)

Pandas 是数据科学社区中使用最广泛的库之一&#xff0c;它是一个强大的工具&#xff0c;可以进行数据操作、清理和分析。 本文将提供最常用的 Pandas 函数以及如何实际使用它们的样例。我们将涵盖从基本数据操作到高级数据分析技术的所有内容&#xff0c;到本文结束时&#xf…

Ubuntu 20.04安装禅道开源版

## Ubuntu 20.04安装禅道开源版 ## jerry 20231208 # 下载解压 cd /opt wget https://dl.cnezsoft.com/zentao/18.9/ZenTaoPMS-18.9-zbox_amd64.tar.gz tar xvzf ZenTaoPMS-18.9-zbox_amd64.tar.gz # 配置&#xff08;没啥可配的&#xff09; # 启动 启动所…

并发编程中的ConcurrentHashMap

对于ConcurrentHashMap相信大家很多的应用中都有用到&#xff0c;它的一些详细介绍各大博主都已经讲的详细的不能再详细了&#xff0c;接下来我们主要看下他的一些实现方法。 下面这个是我的应用中用到的&#xff0c;大家可以借鉴操作(可以做到即办即用) 目录 CSDN给的优缺点 …

攻防世界题目练习——Web引导模式(五)(持续更新)

题目目录 1. FlatScience2. bug3. Confusion1 1. FlatScience 参考博客&#xff1a; 攻防世界web进阶区FlatScience详解 题目点进去如图&#xff0c;点击链接只能看到一些论文pdf 用dirsearch和御剑扫描出一些隐藏文件&#xff1a; robots.txt: admin.php: login.php: f…

配电站房智慧化改造

随着科技的发展和工业化自动化的不断提高&#xff0c;传统的配电室已经不能满足现代工业的需求。配电站房的智慧化改造可以提高电力系统的运行效率和安全性&#xff0c;依托电易云-智慧电力物联网实现配电房无人值守。以下是配电站房智慧化改造的一些主要方面&#xff1a; 设备…

数据分享 I 全国市级商品房屋销售数据,shp/excel格式,2005-2020年数据

基本信息. 数据名称: 全国市级商品房屋销售数据 数据格式: Shp、excel 数据时间: 2005-2020年 数据几何类型: 面 数据坐标系: WGS84坐标系 数据来源&#xff1a;网络公开数据 数据字段&#xff1a; 序号字段名称字段说明1spxse商品房销售额&#xff08;亿元&#xf…

css 表示具有特定类或者其他属性的某种标签类型的元素

需求 通过 css 选择器获取某种标签&#xff08;如&#xff1a;div、input 等&#xff09;具有某个属性&#xff08;如&#xff1a;class、id 等&#xff09;的元素&#xff0c;从而修改其样式。 代码 通过 [标签].[属性] 的方式来获取 <div class"test">&l…

合封芯片开发就找宇凡微,提供合封芯片技术支持与资讯

一、引言 随着科技的迅速发展&#xff0c;芯片在各种电子设备中的地位日益凸显&#xff0c;其中越来越受关注的合封芯片给芯片和pcb厂商带来惊喜 合封芯片是指将多个芯片&#xff08;或其他电子元件&#xff09;封装在一个芯片封装体中的芯片。这种封装方式可以实现多个芯片的…

APP自动化测试工具大全

一、UI自动化测试工具 1. uiautomator2 openatx开源的ui自动化工具&#xff0c;支持Android和iOS。主要面向的编程语言是Python&#xff0c;API设计简洁易用&#xff0c;在开源社区也是很受欢迎。 安装&#xff1a; pip install --upgrade --pre uiautomator2# Or you can …

ArcGIS无法绘制一个或多个图层

背景&#xff1a;在导入一份数据时候&#xff0c;arcmap出现无法绘制一个或多个图层的错误&#xff0c;...点数少于要素所要求的的数量&#xff0c;查阅了半天资料发现是制作数据时候拓扑关系错误造成&#xff0c;现将处理方法详细记录如下&#xff1a; 1.原数据&#xff1a; …