轻量封装WebGPU渲染系统示例＜48＞- 多种光源的多种组合(源码)

含影

已于 2023-12-25 22:41:09 修改

阅读量446

点赞数 8

分类专栏： GPU/CPU WebGL/WebGPU 3D引擎文章标签： WebGPU 3d

于 2023-12-13 08:00:01 首次发布

本文链接：https://blog.csdn.net/vily_lei/article/details/134962546

版权

实现方式:

1. 全局的灯光和阴影。

2. 球体和矩形平面使用了相同的材质对象。

3. 通过材质自动关联和组装对应的渲染材质功能节点。

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/MultiLightsShading2.ts

当前示例运行效果:

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

export class MultiLightsShading2 {
	private mRscene = new RendererScene();
	initialize(): void {
		this.loadImg();
	}
	initSys(): void {

		this.mRscene.initialize({
			canvasWith: 512,
			canvasHeight: 512,
			mtplEnabled: true,
			rpassparam:
			{
				multisampled: true
			}
		});
		this.initScene();
		this.initEvent();
	}
	private mPixels: Uint8ClampedArray;
	private mPixelsW = 128;
	private mPixelsH = 128;
	getRandomColor(s?: number): ColorDataType {
		if (s === undefined) {
			s = 1.0;
		}
		let i = 5;
		let j = Math.floor(Math.random() * this.mPixelsW);
		let k = i * this.mPixelsW + j;
		let vs = this.mPixels;
		k *= 4;
		let cs = [s * vs[k] / 255.0, s * vs[k + 1] / 255.0, s * vs[k + 2] / 255.0];