轻量封装WebGPU渲染系统示例<36>- 广告板(Billboard)(WGSL源码)

原理不再赘述,请见wgsl shader实现。

当前示例源码github地址:

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

当前示例运行效果:

WGSL顶点shader:

rust 复制代码
@group(0) @binding(0) var<uniform> objMat : mat4x4<f32>;
@group(0) @binding(1) var<uniform> viewMat : mat4x4<f32>;
@group(0) @binding(2) var<uniform> projMat : mat4x4<f32>;
@group(0) @binding(3) var<uniform> billParam: vec4<f32>;

struct VertexOutput {
	@builtin(position) Position : vec4<f32>,
	@location(0) uv : vec2<f32>
}

@vertex
fn main(
	@location(0) position : vec3<f32>,
	@location(1) uv : vec2<f32>
) -> VertexOutput {

    let cosv = cos(billParam.z);
    let sinv = sin(billParam.z);
    let vtx = position.xy * billParam.xy;
    let vtx_pos = vec2<f32>(vtx.x * cosv - vtx.y * sinv, vtx.x * sinv + vtx.y * cosv);
    var viewV = viewMat * objMat * vec4f(0.0,0.0,0.0,1.0);
    viewV = vec4<f32>(viewV.xy + vtx_pos.xy, viewV.zw);
    var projV =  projMat * viewV;
    projV.z = ((projV.z / projV.w) + billParam.w) * projV.w;
	var output : VertexOutput;
	output.Position = projV;
	output.uv = uv;
	return output;
}

WGSL片段shader:

rust 复制代码
@group(0) @binding(4) var<uniform> color: vec4f;
@group(0) @binding(5) var<uniform> uvScale: vec4f;
@group(0) @binding(6) var billSampler: sampler;
@group(0) @binding(7) var billTexture: texture_2d<f32>;

@fragment
fn main(
	@location(0) uv: vec2f
	) -> @location(0) vec4f {
    var c4 = textureSample(billTexture, billSampler, uv * uvScale.xy + uvScale.zw) * color;
    return c4;
}

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

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

	initialize(): void {

		this.mRscene.initialize();
		this.initScene();
		this.initEvent();
	}
	private initScene(): void {
		this.initEntities();
	}
	private initEntities(): void {
		let rc = this.mRscene;

		let diffuseTex0 = { diffuse: { url: "static/assets/flare_core_02.jpg" } };

		let entity = new FixScreenPlaneEntity({ extent: [-0.8, -0.8, 1.6, 1.6], textures: [diffuseTex0] });
		entity.color = [0.1, 0.3, 0.5];
		rc.addEntity(entity);

		rc.addEntity(new AxisEntity());

		for (let i = 0; i < 10; ++i) {

			let billboard = new BillboardEntity({ textures: [diffuseTex0] });
			billboard.color = [0.5, 0.5, 2];
			billboard.scale = Math.random() * 2 + 1;
			billboard.transform.setPosition([Math.random() * 1000 - 500, 0, 0]);
			rc.addEntity(billboard);

			let diffuseTex1 = { diffuse: { url: "static/assets/testEFT4_01.jpg", flipY: true } };

			billboard = new BillboardEntity({ textures: [diffuseTex1] });
			billboard.color = [1.8, 1.5, 0.5];
			// billboard.color = [0.8, 0.5, 0.5];
			billboard.scale = Math.random() * 2 + 1;
			billboard.uvScale = [0.5, 0.5];
			billboard.uvOffset = [1, 1];
			// billboard.uvOffset = [0.5, 1];
			billboard.transform.setPosition([0, Math.random() * 1000 - 500, 0]);
			rc.addEntity(billboard);
		}
	}
	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 => {};
	run(): void {
		this.mRscene.run();
	}
}
相关推荐
huoyingcg7 小时前
3D Mapping秀制作:沉浸式光影盛宴 3D mapping show
科技·3d·动画·虚拟现实
luoganttcc1 天前
FastPillars:一种易于部署的基于支柱的 3D 探测器
3d
工业3D_大熊1 天前
3D Web轻量化引擎HOOPS Communicator在装配件管理上的具体优势
3d·3d web轻量化·3d渲染·3d模型可视化·工业3d·web端3d可视化·3d复杂模型轻量化
在下胡三汉1 天前
3dmax批量转glb/gltf/fbx/osgb/stl/3ds/dae/obj/skp格式导出转换插件,无需一个个打开max,材质贴图在
3d·材质·贴图
xhload3d1 天前
智能网联汽车云控平台 | 图扑数字孪生
3d·gis·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·车联网·智慧交通·智能网联·汽车云控
木木黄木木1 天前
使用HTML5和CSS3实现炫酷的3D立方体动画
3d·css3·html5
lb29171 天前
CSS 3D变换,transform:translateZ()
前端·css·3d
淮北4942 天前
ros调试工具foxglove使用指南三:在3d空间写写画画(Panel->3D ->Scene entity)
python·学习·3d·机器人
大有数据可视化2 天前
为什么可视化大屏越来越多应用3D元素呢?
3d
千野竹之卫2 天前
2025最新云渲染网渲100渲染农场使用方法,渲染100邀请码1a12
开发语言·前端·javascript·数码相机·3d·3dsmax