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

当前示例源码github地址:

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

当前示例运行效果:

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

javascript 复制代码
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();
	}
}
相关推荐
huoyingcg7 小时前
3D Mapping秀制作:沉浸式光影盛宴 3D mapping show
科技·3d·动画·虚拟现实
luoganttcc1 天前
FastPillars:一种易于部署的基于支柱的 3D 探测器
3d
工业3D_大熊1 天前
3D Web轻量化引擎HOOPS Communicator在装配件管理上的具体优势
3d·3d web轻量化·3d渲染·3d模型可视化·工业3d·web端3d可视化·3d复杂模型轻量化
在下胡三汉1 天前
3dmax批量转glb/gltf/fbx/osgb/stl/3ds/dae/obj/skp格式导出转换插件,无需一个个打开max,材质贴图在
3d·材质·贴图
xhload3d1 天前
智能网联汽车云控平台 | 图扑数字孪生
3d·gis·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·车联网·智慧交通·智能网联·汽车云控
木木黄木木1 天前
使用HTML5和CSS3实现炫酷的3D立方体动画
3d·css3·html5
lb29171 天前
CSS 3D变换,transform:translateZ()
前端·css·3d
淮北4942 天前
ros调试工具foxglove使用指南三:在3d空间写写画画(Panel->3D ->Scene entity)
python·学习·3d·机器人
大有数据可视化2 天前
为什么可视化大屏越来越多应用3D元素呢?
3d
千野竹之卫2 天前
2025最新云渲染网渲100渲染农场使用方法,渲染100邀请码1a12
开发语言·前端·javascript·数码相机·3d·3dsmax