当前示例源码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();
}
}