轻量封装WebGPU渲染系统示例<12>- 基础3D对象实体(源码)

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/PrimitiveEntityTest.ts

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

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

细节请见:引擎系统设计思路 - 用户态与系统态隔离-CSDN博客

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

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

  3. 渲染数据(内外部相关资源)和渲染机制分离。

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

  5. 数据/语义驱动。

当前示例运行效果:

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

javascript 复制代码
export class PrimitiveEntityTest {
	private mRscene = new RendererScene();

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

		const rc = this.mRscene;
		rc.initialize();
		this.initEvent();
		this.initScene();
	}
	private initEvent(): void {
		const rc = this.mRscene;
		rc.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);
		new MouseInteraction().initialize(rc, 0, false).setAutoRunning(true);
	}
	private mouseDown = (evt: MouseEvent): void => {};
	private initScene(): void {
		const rc = this.mRscene;

		let entities: PrimitiveEntity[] = [
			new SphereEntity(),
			new BoxEntity(),
			new CylinderEntity(),
			new CubeEntity({cubeSize: 130}),
			new TorusEntity({radius: 110, axisType: 1}),
			new PlaneEntity({axisType: 1})
		];

		for (let i = 0; i < entities.length; ++i) {

			let entity = entities[i]
				.setAlbedo(new Color4().randomRGB(1.5, 0.1))
				.setARM(1.1, Math.random() * 0.95 + 0.05, Math.random() * 0.9 + 0.1);

			entity.transform.setXYZ(-600 + i * 200, 0, 0);
			rc.addEntity(entity);
		}
	}

	run(): void {
		this.mRscene.run();
	}
}
相关推荐
温轻舟9 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
在下胡三汉10 小时前
粗略地看一下 glTF 2.0 的所有标准属性(顺便说一下,还有 .glb 的结构)
3d
zhongqu_3dnest12 小时前
3D可视化:开启多维洞察新时代
3d·3d建模·空间计算·3d可视化·三维空间·沉浸式体验
试着1 天前
【数据标注师】3D标注
3d·数据标注师·3d标注
工业3D_大熊10 天前
3D模式格式转换工具HOOPS Exchange如何将3D PDF转换为STEP格式?
3d·pdf·3d格式转换·3d模型格式转换·cad格式转换·cad数据格式转换·3d模型可视化
广州华锐视点10 天前
浅议 3D 展示技术为线上车展新体验带来的助力
3d
大霸王龙12 天前
AR眼镜与3D建模社区建设
3d·ar
杀生丸学AI12 天前
【物理重建】SPLART:基于3D高斯泼溅的铰链估计与部件级重建
3d·aigc·三维重建·视觉大模型·世界模型·空间智能·动态重建
Love__Tay12 天前
【Python小练习】3D散点图
开发语言·python·3d