轻量封装WebGPU渲染系统示例<7>-材质多pass(源码)

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/MultiMaterialPass.ts

此示例渲染系统实现的特性:

  1. 用户态与系统态隔离。

  2. 高频调用与低频调用隔离。

  3. 面向用户的易用性封装。

  4. 渲染数据和渲染机制分离。

  5. 用户操作和渲染系统调度并行机制。

当前示例运行效果:

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

javascript 复制代码
export class MultiMaterialPass {

	private mEntity: Entity3D;

	geomData = new GeomDataBuilder();
	renderer = new WGRenderer();

	initialize(): void {
		console.log("MultiMaterialPass::initialize() ...");

		const shdSrc = {
			vertShaderSrc: { code: vertWGSL, uuid: "vtxShdCode" },
			fragShaderSrc: { code: fragWGSL, uuid: "fragShdCode" }
		};
		let material0 = this.createMaterial(shdSrc, [new WGImage2DTextureData("static/assets/blueTransparent.png")], ["transparent"], "front");
		let material1 = this.createMaterial(shdSrc, [new WGImage2DTextureData("static/assets/blueTransparent.png")], ["transparent"], "back");
		this.mEntity = this.createEntity([material0, material1]);
	}

	private createMaterial(shdSrc: WGRShderSrcType, texDatas?: WGImage2DTextureData[], blendModes: string[] = [], faceCullMode = "back"): WGMaterial {
		let pipelineDefParam = {
			depthWriteEnabled: true,
			faceCullMode: faceCullMode,
			blendModes: [] as string[]
		};

		pipelineDefParam.blendModes = blendModes;

		const texTotal = texDatas ? texDatas.length : 0;

		const material = new WGMaterial({
			shadinguuid: "base-material-tex" + texTotal,
			shaderCodeSrc: shdSrc,
			pipelineDefParam
		});

		if (texTotal > 0) {

			const texWrappers: WGTextureWrapper[] = new Array(texTotal);
			for (let i = 0; i < texTotal; ++i) {
				texWrappers[i] = new WGTextureWrapper({ texture: { data: texDatas[i], shdVarName: "texture" + i } });
			}
			material.textures = texWrappers;
		}
		return material;
	}
	private createEntity(materials: WGMaterial[], pv?: Vector3): Entity3D {
		const renderer = this.renderer;

		const rgd = this.geomData.createSphere(150, 30, 30);
		const geometry = new WGGeometry()
			.addAttribute({ shdVarName: "position", data: rgd.vs, strides: [3] })
			.addAttribute({ shdVarName: "uv", data: rgd.uvs, strides: [2] })
			.setIndexBuffer({ name: "geomIndex", data: rgd.ivs });

		const entity = new Entity3D();
		entity.materials = materials;
		entity.geometry = geometry;
		entity.transform.setPosition(pv ? pv : new Vector3());

		renderer.addEntity(entity);
		return entity;
	}
	private mRotY = 0.0;
	run(): void {

		this.mRotY += 0.5;
		this.mEntity.transform.setRotationXYZ(0, this.mRotY, this.mRotY + 0.5);
		this.mEntity.update();
		
		this.renderer.run();
	}
}
相关推荐
工业3D_大熊7 小时前
HOOPS Web Platform:3D模型轻量化与可视化的高效解决方案
3d·3d web轻量化·3d建模·3d模型轻量化·3d数据格式转换·工业3d·几何建模
mirrornan13 小时前
3D数字化技术:重塑“人货场”,开启营销新纪元
3d·3d展示·3d数字化
视觉人机器视觉1 天前
机器视觉3D工业相机机器视觉检测的优缺点
数码相机·3d·视觉检测
CodeCraft Studio2 天前
轻量级CAD编辑器CADEditorX发布15.2新版本,新增3D模型爆炸视图新工具等
计算机视觉·3d·编辑器
视觉人机器视觉2 天前
什么是平面环形无影光源
人工智能·计算机视觉·平面·3d·c#·视觉检测
视觉人机器视觉2 天前
机器视觉中的3d和2d的区别
3d
杀生丸学AI3 天前
【三维重建】FeatureGS:特征值优化的几何精度和伪影减少3DGS的重构
人工智能·3d·aigc·三维重建·扩散模型·高斯泼溅
Orange--Lin3 天前
四元数如何用于 3D 旋转(代替欧拉角和旋转矩阵)【ESP32指向鼠标】
3d·矩阵·机器人
mirrornan3 天前
3D可视化定制:开启个性化消费新时代
大数据·人工智能·3d·3d模型·3d可视化
吃个糖糖3 天前
Halcon 3D 手眼标定
3d