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

当前示例源码github地址:

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

当前示例运行效果:

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

export class MaterialPipelineFog {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;mtpl.fog.fogColor.value = [0.3, 0.7, 0.2];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);position = [0, 0, 0];materials = this.createMaterials(false, false, 'front');let envBox = new CubeEntity({cubeSize: 2050.0,normalScale: -1.0,materials,transform: { position }});rc.addEntity(envBox);}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, faceCullMode = 'back', uvParam?: number[]): BaseMaterial[] {let textures0 = this.createBaseTextures();let material0 = this.createMaterial(textures0, faceCullMode);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 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[], faceCullMode = 'back'): BaseMaterial {let pipelineDefParam = {depthWriteEnabled: true,faceCullMode,};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/212838.shtml

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

相关文章

数组创建方法

数组的创建 1.let a[] 2.let anew Array(5) 3.let anew Array(1,2,3) 4.let a[1,2,3] 创建数组是空还是有值是以上四种写法。但是如果没给值的变量是undefined&#xff0c;再a[0]找不到这种变量的。所以当找某一个数需要已经是数组内存。不想给值可以给空数组。只要是数组…

MEMS制造的基本工艺介绍——晶圆键合

晶圆键合是一种晶圆级封装技术&#xff0c;用于制造微机电系统 (MEMS)、纳米机电系统 (NEMS)、微电子学和光电子学&#xff0c;确保机械稳定和气密密封。用于 MEMS/NEMS 的晶圆直径范围为 100 毫米至 200 毫米&#xff08;4 英寸至 8 英寸&#xff09;&#xff0c;用于生产微电…

【重点】【环链表入口】142. 环形链表 II

题目 public class Solution {public ListNode detectCycle(ListNode head) {if (head null || head.next null) {return null;}ListNode slow head, fast head;while (fast ! null && fast.next ! null) {slow slow.next;fast fast.next.next;if (slow fast) …

SQL语句---更新数据

介绍 使用sql语句更新数据。 命令 update 表名 set 字段1值1[,字段2值2] [where 条件表达式];[]&#xff08;方括号&#xff09;内的表是表示可选。 例子 将a表id值等于1的数据的名称改为666 update a set name666 where id1;

2023-12-05 Qt学习总结7

点击 <C 语言编程核心突破> 快速C语言入门 Qt学习总结 前言二十 QTcpSocket QTcpServer网络库服务端代码:客户端代码 二十一 QProcess进程类二十二 QThread线程总结 前言 要解决问题: 学习qt最核心知识, 多一个都不学. 二十 QTcpSocket QTcpServer网络库 QTcpSocket和…

持续集成交付CICD:Jenkins流水线实现Nexus制品晋级策略

目录 一、理论 1.开发测试运维环境 二、实验 1.Nexus制品晋级策略 一、理论 1.开发测试运维环境 &#xff08;1&#xff09;环境 1&#xff09;持续集成开发环境&#xff08;DEV: Development Environment&#xff09; 直接通过源代码编译打包&#xff0c;其会跑单元测试…

python 笔记 :trajectory_distance包(如何可以正确使用)【debug篇】

包的地址&#xff1a;maikol-solis/trajectory_distance (github.com) 1 模块介绍 用Cython实现的Python模块&#xff0c;用于计算二维轨迹之间的距离 trajectory_distance包提供了9种轨迹间的距离计算方法&#xff1a; SSPD&#xff08;对称线段路径距离&#xff09;OWD&a…

机器学习算法(9)——集成技术(Bagging——随机森林分类器和回归)

一、说明 在这篇文章&#xff0c;我将向您解释集成技术和著名的集成技术之一&#xff0c;它属于装袋技术&#xff0c;称为随机森林分类器和回归。 集成技术是机器学习技术&#xff0c;它结合多个基本模块和模型来创建最佳预测模型。为了更好地理解这个定义&#xff0c;我们需要…

WLAN配置实验

本文记录了WLAN配置实践的过程&#xff0c;该操作在华为HCIA中属于相对较复杂的实验&#xff0c;记录过程备忘。这里不就WLAN原理解释&#xff0c;仅进行配置实践&#xff0c;可以作为学习原理时候的参考。本文使用华为ENSP进行仿真。实验拓扑图如下&#xff1a; 1.WLAN工作流程…

【electron】外语函数接口 FFI

▒ 目录 ▒ &#x1f6eb; 导读需求开发环境 1️⃣ FFI概念优点注意事项 2️⃣ 【废弃】node-ffi3️⃣ node-ffi-napi安装&#xff08;windows系统下&#xff09;示例&#xff1a;MessageBoxA、NtSuspendProcess 4️⃣ node-win32-api安装示例&#xff1a;查找窗口并设置窗口标…

UE5数据传递-纹理贴图

期待结果&#xff1a; 流程 1. 通过C写入数据到纹理贴图 2. 在材质中通过采样能正确读取写入的数值 踩坑&#xff1a; 1. UE5之后&#xff0c;需要设置采样类型&#xff0c;才能达到上图效果&#xff0c;默认采样类型做了插值计算 FColor中写入 PF_B8G8R8A8 UTexture2D* Conve…

第四题:憧憬(JavaPythonC++实现)【第六届传智杯-新增场次-程序设计挑战赛解题分析详解复盘】

本文仅为【2023传智杯-第二场】第六届传智杯程序设计挑战赛-题目解题分析详解的解题个人笔记,个人解题分析记录。 本文包含:第六届传智杯程序设计挑战赛题目、解题思路分析、解题代码、解题代码详解(Java&Python&C++实现) 文章目录 更新进度记录第四题:憧憬(Java…

AI 绘画 | Stable Diffusion 艺术二维码制作

前言 这篇文章教会你如果用Stable Diffusion WEB UI制作艺术二维码,什么是艺术二维码呢?就是普通二维码和艺术图片融合后的二维码图片,如下图所示。主要原理还是使用controlNet的control_v1p_sd15_qrcode_monster模型和光影模型control_v1p_sd15_brightness。 教程 准备…

【论文阅读笔记】NeRF+Mip-NeRF+Instant-NGP

目录 前言NeRF神经辐射场体渲染连续体渲染体渲染离散化 方法位置编码分层采样体渲染推导公式&#xff08;1&#xff09;到公式&#xff08;2&#xff09;部分代码解读相机变换&#xff08;重要&#xff01;&#xff09; Mip-NerfTo do Instant-NGPTo do 前言 NeRF是NeRF系列的…

DIP——边缘提取与分割

1.使用canny算法进行边缘提取 本实验比较简单&#xff0c;基本思路是对原图像进行一个高斯模糊处理&#xff0c;用于去噪&#xff0c;之后转换为灰度图&#xff0c;直接调用cv库中的canny记性边缘提取。若想直接得到彩色边缘&#xff0c;则通过按位与操作&#xff0c;将原始彩色…

SQLMap进阶使用

预计更新SQL注入概述 1.1 SQL注入攻击概述 1.2 SQL注入漏洞分类 1.3 SQL注入攻击的危害 SQLMap介绍 2.1 SQLMap简介 2.2 SQLMap安装与配置 2.3 SQLMap基本用法 SQLMap进阶使用 3.1 SQLMap高级用法 3.2 SQLMap配置文件详解 3.3 SQLMap插件的使用 SQL注入漏洞检测 4.1 SQL注入…

ingress介绍和ingress通过LoadBalancer暴露服务配置

目录 一.ingress基本原理介绍 1.将原有用于暴露服务和负载均衡的服务的三四层负载均衡变为一个七层负载均衡 2.controller和ingress 3.通过下面这个图可能会有更直观的理解 二.为什么会出现ingress 1.NodePort存在缺点 2.LoadBalancer存在缺点 三.ingress三种暴露服务的…

7-6 通讯录排序

输入n个朋友的信息&#xff0c;包括姓名、生日、电话号码&#xff0c;本题要求编写程序&#xff0c;按照年龄从大到小的顺序依次输出通讯录。题目保证所有人的生日均不相同。 输入格式: 输入第一行给出正整数n&#xff08;<10&#xff09;。随后n行&#xff0c;每行按照“…

基于JavaWeb+SSM+Vue微信小程序的科创微应用平台系统的设计和实现

基于JavaWebSSMVue微信小程序的科创微应用平台系统的设计和实现 源码获取入口Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码获取入口 Lun文目录 1系统概述 1 1.1 研究背景 1 1.2研究目的 1 1.3系统设计思想 1 2相关技术…

Linux Component概述和高通component的使用

1 Linux为什么要引入Component框架&#xff1f; 为了让subsystem按照一定顺序初始化设备才提出来的。 subsystem中由很多设备模块&#xff0c;内核加载这些模块的时间不确定。子系统内有些模块是需要依赖其它模块先初始化才能进行自己初始化工作(例如v4l2 subdev和v4l2 video …