轻量封装WebGPU渲染系统示例＜12＞- 基础3D对象实体(源码)-Toy模板网

这篇具有很好参考价值的文章主要介绍了轻量封装WebGPU渲染系统示例＜12＞- 基础3D对象实体(源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

此混合渲染与计算系统中，用户侧可直接接触和操作可渲染(计算)实体(Entity)。这些实体可以用于呈现画面效果也可以仅用于计算。实体可以加入场景，可以加入渲染核心，也可以加入计算核心。如果使用rendering or computing pass node，也可以直接将渲染实体加入对应的pass node。

用于计算的实体使用请见: https://blog.csdn.net/vily_lei/article/details/134236068?spm=1001.2014.3001.5502

当前示例源码github地址:

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

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

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

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

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

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

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

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

6. 数据/语义驱动。

当前示例运行效果:

轻量封装WebGPU渲染系统示例＜12＞- 基础3D对象实体(源码),GPU/CPU,WebGL/WebGPU,3D引擎,3d,WebGPU

此示例基于此渲染系统实现，当前示例TypeScript源码如下：文章来源地址https://www.toymoban.com/news/detail-742684.html

export class PrimitiveEntityTest {
	private mRscene = new RendererScene();
	initialize(): void {

		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 axis = new AxisEntity();
		rc.addEntity( axis );

		let entities = [
			new SphereEntity(),
			new BoxEntity(),
			new CylinderEntity({alignYRatio : 0.0}),
			new CubeEntity({cubeSize: 130}),
			new TorusEntity({radius: 110, axisType: 1}),
			new PlaneEntity({axisType: 1, extent: [-80, -80, 160, 160], doubleFace: true}),
			new ConeEntity({alignYRatio : 0.0})
		];
		let ls = entities;
		entities = [];
		for (let i = 0, ln = ls.length; i < ln; ++i) {
			const k = Math.round(Math.random() * 888)%ls.length;
			const t = ls[k];
			entities.push(ls[k]);
			ls.splice(k,1);
		}
		let radius = 350.0;
		for (let i = 0; i < entities.length; ++i) {
			let rad = 2.0 * Math.PI * i / entities.length;

			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.setPosition( [radius * Math.cos(rad), 0, radius * Math.sin(rad)] );
			rc.addEntity(entity);
		}
	}

	run(): void {
		this.mRscene.run();
	}
}

到了这里，关于轻量封装WebGPU渲染系统示例＜12＞- 基础3D对象实体(源码)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！