轻量封装WebGPU渲染系统示例＜1＞-彩色三角形(源码)

当前示例源码github地址:

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

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

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

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

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

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

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

当前示例运行效果:

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

const vertWGSL =`
struct VSOut {
    @builtin(position) Position: vec4f,
    @location(0) color: vec3f,
};

@vertex
fn main(@location(0) inPos: vec3f,
        @location(1) inColor: vec3f) -> VSOut {
    var vsOut: VSOut;
    vsOut.Position = vec4(inPos, 1.0);
    vsOut.color = inColor;
    return vsOut;
}
`;
const fragWGSL = `
@fragment
fn main(@location(0) inColor: vec3f) -> @location(0) vec4f {
    return vec4f(inColor, 1.0);
}
`;

const position = new Float32Array([-1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 0.0, 1.0, 0.0]);
const color = new Float32Array([1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0]);

export class VertColorTriangle {

	renderer = new WGRenderer();
	initialize(): void {
		const renderer = this.renderer;
		renderer.initialize({camera:{enabled: false}});
		const shaderSrc = {
			vert: { code: vertWGSL },
			frag: { code: fragWGSL }
		};
		const materials = [new WGMaterial({shaderSrc})];
		const geometry = new WGGeometry().addAttributes([
			{ position},
			{ color }
		]);
		renderer.addEntity( new FixScreenEntity({geometry, materials}) );
	}
	run(): void {
		this.renderer.run();
	}
}