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

news2024/12/17 4:28:48

当前示例源码github地址:

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

当前示例运行效果:

主要的WGSL Shader代码:

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.coloradmin.cn/o/1299296.html

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

相关文章

12.8IEEE 2023 |SZ3:一种基于预测的误差有界有损压缩器的模块化框架——文档记录

IEEE 2023 |SZ3&#xff1a;一种基于预测的误差有界有损压缩器的模块化框架 作者&#xff1a;START团队-贾轲 随着在高精尖计算设备上不断进行的百万兆级计算实验的增加&#xff0c;由此产生的计算数据规模与大小越来越夸张与庞大。因此&#xff0c;数据压缩对科学研究的重要…

Matlab 点云收缩L1中值(Weiszfeld算法)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 对于之前的加权均值收缩方式,它存在一个很大的缺点,即容易受到噪声的影响,因此这里我们采用另一种统计学方案:L1中值。其形式如下所示: 其中 x i x_i

hdlbits系列verilog解答(mt2015_q4a)-52

文章目录 一、问题描述二、verilog源码三、仿真结果 一、问题描述 本次我们实现一个简单的组合逻辑输出。 z (x^y) & x 模块声明&#xff1a; module top_module (input x, input y, output z); 二、verilog源码 module top_module (input x, input y, output z);assig…

Unity打包EXE自定义(拖拽)窗口大小

代码 using System.Collections; using System.Collections.Generic; using UnityEngine; using System; using System.Runtime.InteropServices; public class MyWindow : MonoBehaviour {[DllImport("user32.dll")]private static extern IntPtr GetActiveWindow(…

记一次金额操作精度丢失问题与解决

Hi, I’m Shendi 记一次金额操作精度丢失问题与解决 前言 在之前做过几个涉及到金额的项目&#xff0c;因我最开始接触的支付是微信支付&#xff0c;对于微信的设计&#xff0c;是以分为单位&#xff0c;金额为整数形式。知晓精度丢失的问题&#xff0c;我也照着这样&#xff…

基于 Stereo R-CNN 的自动驾驶 3D 目标检测

论文地址&#xff1a;https://openaccess.thecvf.com/content_CVPR_2019/papers/Li_Stereo_R-CNN_Based_3D_Object_Detection_for_Autonomous_Driving_CVPR_2019_paper.pdf 论文代码&#xff1a;https://github.com/HKUST-Aerial-Robotics/Stereo-RCNN 论文背景 大多数 3D 物…

Kubernetes Service控制器详解以及切换为ipvs代理模式

文章目录 一、Service 存在的意义二、Pod与Service的关系三、Service定义与创建四、Service三种常用类型五、Service代理模式六、切换Service代理模式七、service总体工作流程八、kube-proxy ipvs和iptables的异同九、Service DNS名称 一、Service 存在的意义 service的引入主…

P11 Linux进程编程exec族函数

前言 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《Linux C应用编程&#xff08;概念类&#xff09;_ChenPi的博客-CSDN博客》✨✨✨ &#x1f525; 推荐专栏2: 《C_ChenPi的博客-CSDN博客》✨✨✨ &#x1f6f8;推荐专栏3: ​​​​​​《链表_C…

基于ssm人力资源管理系统论文

摘 要 随着企业员工人数的不断增多&#xff0c;企业在人力资源管理方面负担越来越重&#xff0c;因此&#xff0c;为提高企业人力资源管理效率&#xff0c;特开发了本人力资源管理系统。 本文重点阐述了人力资源管理系统的开发过程&#xff0c;以实际运用为开发背景&#xff0…

南京大学-软件分析-课程01-Introduction

1. PL and Static Analysis 程序语言和静态分析。 2. Why We Learn Static Analysis? 提高程序的可靠性&#xff08;空指针&#xff0c;内存泄漏&#xff09;提高程序的安全性 &#xff08;隐私泄露&#xff0c;注入攻击&#xff09;编译优化&#xff08;死代码删除&#x…

【Web】SCU新生赛个人wp及完赛感想

目录 一些碎碎念&#xff1a; Web Guideline 2048 ezupload hardupload ezphp ezweb ezsql webbuilder tarit tarit_revenge VipDinner simplespi 一些碎碎念&#xff1a; scu新生赛是我全心全力打的第二场比赛&#xff0c;历时七天&#xff0c;期间不免煎熬&…

Fabric链码部署-go语言

最近在搞Fabric&#xff0c;今天刚刚明白如何把自己的链码部署并能跑通 网上的中文教程完全不友好&#xff0c;上来直接开始写代码&#xff0c;我连新建什么文件夹都不知道啊&#xff01;&#xff01; 于是痛定思痛&#xff0c;爆肝了一周多的官方文档 准备自己写一个&#…

调用别人提供的接口无法通过try catch捕获异常(C#),见鬼了

前几天做CA签名这个需求时发现一个很诡异的事情&#xff0c;CA签名调用的接口是由另外一个开发部门的同事(比较难沟通的那种人)封装并提供到我们这边的。我们这边只需要把数据准备好&#xff0c;然后调他封装的接口即可完成签名操作。但在测试过程中&#xff0c;发现他提供的接…

用23种设计模式打造一个cocos creator的游戏框架----(五)工厂方法模式

1、模式标准 模式名称&#xff1a;工厂方法模式 模式分类&#xff1a;创建型 模式意图&#xff1a;定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。 结构图&#xff1a; 适用于&#xff1a; 1、当一个类不知道它…

探索开源游戏的乐趣与无限可能 | 开源专题 No.47

CleverRaven/Cataclysm-DDA Stars: 9.0k License: NOASSERTION Cataclysm&#xff1a;Dark Days Ahead 是一个回合制的生存游戏&#xff0c;设定在一个后启示录世界中。尽管有些人将其描述为 “僵尸游戏”&#xff0c;但 Cataclysm 远不止于此。在这个残酷、持久、程序生成的世…

RocketMq集成SpringBoot(待完善)

环境 jdk1.8, springboot2.7.3 Maven依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.3</version><relativePath/> <!-- lookup parent from…

Sprint Boot 3.0

1. 简介 视频教程特点&#xff1a; Spring Cloud带动了Spring BootSpring Boot成就了Spring Cloud

彻底解决org.gradle.api.artifacts.DependencySubstitutions

需求背景 最近在使用android studio导入hbuilder的HBuilder-Integrate-AS工程时候报错&#xff0c;错误消息如下两种。 错误描述 第一种 Failed to notify dependency resolution listener. void org.gradle.api.artifacts.DependencySubstitutions$Substitution.with(org.g…

【工具使用-JFlash】如何使用Jflash擦除和读取MCU内部指定扇区的数据

一&#xff0c;简介 在调试的过程中&#xff0c;特别是在调试向MCU内部flash写数据的时候&#xff0c;我们常常要擦除数据区的内容&#xff0c;而不想擦除程序取。那这种情况就需要擦除指定的扇区数据即可。本文介绍一种方法&#xff0c;可以擦除MCU内部Flash中指定扇区的数据…

【数据库】简单连接嵌套查询

目录 &#x1f387;简单查询 &#x1f387;连接查询 &#x1f387;嵌套查询 分析&思考 &#x1f387;简单查询 --练习简单查询 --select * from classes --select * from student --select * from scores --1.按Schedule表的结构要求用SQL语言创建Schedule表 --字段名…