Google codelab WebGPU入门教程源码<5> - 使用Storage类型对象给着色器传数据(源码)

news2025/1/21 9:19:33

对应的教程文章: 

https://codelabs.developers.google.com/your-first-webgpu-app?hl=zh-cn#5

对应的源码执行效果:

对应的教程源码: 

此处源码和教程本身提供的部分代码可能存在一点差异。运行的时候,点击画面可以切换效果。

class Color4 {

	r: number;
	g: number;
	b: number;
	a: number;

	constructor(pr = 1.0, pg = 1.0, pb = 1.0, pa = 1.0) {
		this.r = pr;
		this.g = pg;
		this.b = pb;
		this.a = pa;
	}
}

export class WGPURStorage2 {
	private mRVertices: Float32Array = null;
	private mRPipeline: any | null = null;
	private mVtxBuffer: any | null = null;
	private mCanvasFormat: any | null = null;
	private mWGPUDevice: any | null = null;
	private mWGPUContext: any | null = null;
	private mUniformBindGroups: any | null = null;
	private mGridSize = 32;
	constructor() {}
	initialize(): void {

		const canvas = document.createElement("canvas");
		canvas.width = 512;
		canvas.height = 512;
		document.body.appendChild(canvas);
		console.log("ready init webgpu ...");
		this.initWebGPU(canvas).then(() => {
			console.log("webgpu initialization finish ...");

			this.updateWGPUCanvas();
		});
		document.onmousedown = (evt):void => {
			this.updateWGPUCanvas( new Color4(0.05, 0.05, 0.1) );
		}
	}
	private mUniformObj: any = {uniformArray: null, uniformBuffer: null};

	private createStorage(device: any): any {
		// Create an array representing the active state of each cell.
		const cellStateArray = new Uint32Array(this.mGridSize * this.mGridSize);
		// Create two storage buffers to hold the cell state.
		const cellStateStorage = [
			device.createBuffer({
				label: "Cell State A",
				size: cellStateArray.byteLength,
				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
			}),
			device.createBuffer({
				label: "Cell State B",
				size: cellStateArray.byteLength,
				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
			})
		];
		// Mark every third cell of the first grid as active.
		for (let i = 0; i < cellStateArray.length; i+=3) {
			cellStateArray[i] = 1;
		}
		device.queue.writeBuffer(cellStateStorage[0], 0, cellStateArray);
		// Mark every other cell of the second grid as active.
		for (let i = 0; i < cellStateArray.length; i++) {
			cellStateArray[i] = i % 2;
		}
		device.queue.writeBuffer(cellStateStorage[1], 0, cellStateArray);

		return cellStateStorage;
	}

	private createUniform(device: any, pipeline: any): void {
		// Create a uniform buffer that describes the grid.
		const uniformArray = new Float32Array([this.mGridSize, this.mGridSize]);
		const uniformBuffer = device.createBuffer({
			label: "Grid Uniforms",
			size: uniformArray.byteLength,
			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
		});
		device.queue.writeBuffer(uniformBuffer, 0, uniformArray);


		const cellStateStorage = this.createStorage(device);

		const bindGroups = [
		device.createBindGroup({
			label: "Cell renderer bind group A",
			layout: pipeline.getBindGroupLayout(0),
			entries: [
				{
					binding: 0,
					resource: { buffer: uniformBuffer }
				}, {
					binding: 1,
					resource: { buffer: cellStateStorage[0] }
				}
			],
			}),
			device.createBindGroup({
			label: "Cell renderer bind group B",
			layout: pipeline.getBindGroupLayout(0),
			entries: [
				{
					binding: 0,
					resource: { buffer: uniformBuffer }
				}, {
					binding: 1,
					resource: { buffer: cellStateStorage[1] }
				}
			],
		})
		];
		this.mUniformBindGroups = bindGroups;
		const obj = this.mUniformObj;
		obj.uniformArray = uniformArray;
		obj.uniformBuffer = uniformBuffer;
	}
	private mStep = 0;
	private createRectGeometryData(device: any, pass: any): void {

		let vertices = this.mRVertices;
		let vertexBuffer = this.mVtxBuffer;
		let cellPipeline = this.mRPipeline;
		if(!cellPipeline) {
			let hsize = 0.8;
			vertices = new Float32Array([
			//   X,    Y,
				-hsize, -hsize, // Triangle 1 (Blue)
				 hsize, -hsize,
				 hsize,  hsize,

				-hsize, -hsize, // Triangle 2 (Red)
				 hsize,  hsize,
				-hsize,  hsize,
			]);

			vertexBuffer = device.createBuffer({
				label: "Cell vertices",
				size: vertices.byteLength,
				usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
			});
			device.queue.writeBuffer(vertexBuffer, /*bufferOffset=*/0, vertices);
			const vertexBufferLayout = {
				arrayStride: 8,
				attributes: [{
					format: "float32x2",
					offset: 0,
					shaderLocation: 0, // Position, see vertex shader
				}],
			};
			const shaderCodes = `
			struct VertexInput {
				@location(0) pos: vec2f,
				@builtin(instance_index) instance: u32,
			};

			struct VertexOutput {
				@builtin(position) pos: vec4f,
				@location(0) cell: vec2f,
			};

			@group(0) @binding(0) var<uniform> grid: vec2f;
			@group(0) @binding(1) var<storage> cellState: array<u32>;

			@vertex
			fn vertexMain(input: VertexInput) -> VertexOutput  {
				let i = f32(input.instance);
				let cell = vec2f(i % grid.x, floor(i / grid.x));
				let cellOffset = cell / grid * 2;

				let state = f32(cellState[input.instance]);
				let gridPos = (input.pos * state + 1) / grid - 1 + cellOffset;

				var output: VertexOutput;
				output.pos = vec4f(gridPos, 0, 1);
				output.cell = cell;
				return output;
			}

			@fragment
			fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
				// return vec4f(input.cell, 0, 1);
				let c = input.cell/grid;
				return vec4f(c, 1.0 - c.x, 1);
			}
			`;
			const cellShaderModule = device.createShaderModule({
				label: "Cell shader",
				code: shaderCodes
				});
			cellPipeline = device.createRenderPipeline({
				label: "Cell pipeline",
				layout: "auto",
				vertex: {
					module: cellShaderModule,
					entryPoint: "vertexMain",
					buffers: [vertexBufferLayout]
				},
				fragment: {
					module: cellShaderModule,
					entryPoint: "fragmentMain",
					targets: [{
						format: this.mCanvasFormat
					}]
				},
			});
			this.mRVertices = vertices;
			this.mVtxBuffer = vertexBuffer;
			this.mRPipeline = cellPipeline;

			this.createUniform(device, cellPipeline);
		}
		pass.setPipeline(cellPipeline);
		pass.setVertexBuffer(0, vertexBuffer);
		// pass.setBindGroup(0, this.mUniformBindGroup);
		pass.setBindGroup(0, this.mUniformBindGroups[this.mStep % 2]);
		pass.draw(vertices.length / 2, this.mGridSize * this.mGridSize);
		this.mStep ++;
	}

	private updateWGPUCanvas(clearColor: Color4 = null): void {

		clearColor = clearColor ? clearColor : new Color4(0.05, 0.05, 0.1);
		const device = this.mWGPUDevice;
		const context = this.mWGPUContext;
		const rpassParam = {
			colorAttachments: [
				{
					clearValue: clearColor,
					// clearValue: [0.3,0.7,0.5,1.0], // yes
					view: context.getCurrentTexture().createView(),
					loadOp: "clear",
					storeOp: "store"
				}
			]
		};

		const encoder = device.createCommandEncoder();
		const pass = encoder.beginRenderPass( rpassParam );

		this.createRectGeometryData(device, pass);
		pass.end();

		device.queue.submit([ encoder.finish() ]);
	}
	private async initWebGPU(canvas: HTMLCanvasElement) {

		const gpu = (navigator as any).gpu;
		if (gpu) {
			console.log("WebGPU supported on this browser.");

			const adapter = await gpu.requestAdapter();
			if (adapter) {
				console.log("Appropriate GPUAdapter found.");
				const device = await adapter.requestDevice();
				if (device) {
					this.mWGPUDevice = device;
					console.log("Appropriate GPUDevice found.");
					const context = canvas.getContext("webgpu") as any;
					const canvasFormat = gpu.getPreferredCanvasFormat();
					this.mWGPUContext = context;
					this.mCanvasFormat = canvasFormat;
					console.log("canvasFormat: ", canvasFormat);
					context.configure({
						device: device,
						format: canvasFormat,
						alphaMode: "premultiplied"
					});
				} else {
					throw new Error("No appropriate GPUDevice found.");
				}
			} else {
				throw new Error("No appropriate GPUAdapter found.");
			}
		} else {
			throw new Error("WebGPU not supported on this browser.");
		}
	}
	run(): void {}
}

切换后的效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1215079.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

英伟达真是赢麻了,深夜推出最强AI芯片霸场 | 百能云芯

10月14日凌晨&#xff0c;英伟达在2023年全球超算大会&#xff08;Supercomputing Conference&#xff0c;SC&#xff09;上正式宣布&#xff0c;升级旗舰AI芯片&#xff0c;推出全新的H200芯片&#xff0c;以处理更强大的人工智能系统。包括亚马逊的AWS、Alphabet的Google Clo…

完全随机设计的方差分析

一、说明 实验设计在科学研究中发挥着至关重要的作用&#xff0c;使研究人员能够从数据中得出有意义的结论。一种常见的实验设计是完全随机设计&#xff08;CRD&#xff09;&#xff0c;其特征是将实验单元随机分配到治疗组。CRD 的方差分析 (ANOVA) 是一种统计技术&#xff0c…

【C++高阶(二)】熟悉STL中的map和set --了解KV模型和pair结构

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; map和set 1. 前言2. map和set介绍3. pair结构介…

一个开源的汽修rbac后台管理系统项目,基于若依框架,实现了activiti工作流,附源码

文章目录 前言&源码项目参考图&#xff1a; e店邦O2O平台项目总结一、springboot1.1、springboot自动配置原理1.2、springboot优缺点1.3、springboot注解 二、rbac2.1、概括2.2、三个元素的理解 三、数据字典3.1、概括与作用3.2、怎么设计3.3、若依中使用字典 四、工作流—…

pytorch文本分类(一):文本预处理

pytorch文本分类&#xff08;一&#xff09;&#xff1a;文本预处理 本文为自己在鲸训练营答题总结&#xff0c;作业练习都在和鲸社区数据分析协作平台 ModelWhale 上。 &#x1f6a9;学习任务原链接在这里 相关数据链接&#xff1a;https://pan.baidu.com/s/1iwE3LdRv3uAkGGI…

企业工商四要素核验API的实现原理和功能介绍

引言 随着社会经济的不断发展&#xff0c;对企业信息的准确性和可信度要求也越来越高。为了有效防范企业信息不实和欺诈行为&#xff0c;企业工商四要素核验API应运而生。该API可以通过传入企业名称、社会统一信用代码、法人名称、法人身份证等信息&#xff0c;快速进行核验&a…

UFT On录制Web应用时无法识别Chrome浏览器对象

使用UFT的Object Spy 无法识别浏览器对象 成功加载Web插件后&#xff0c;使用UFT的对象间谍无法识别Chrome浏览器的对象 有三种情况可能导致这个问题&#xff1a; 浏览器比例没有设置为100%浏览器版本太低&#xff0c;无法与插件匹配浏览器没有添加UTF One的插件 我的是第三个…

单点车流量与饱和度的计算思考

sat&#xff1a;饱和度 v&#xff1a;平均车速 d(v)&#xff1a;车速为v情况下的安全车距&#xff08;车距车身长&#xff0c;平均值&#xff09; l&#xff1a;车道数 f&#xff1a;单位时间监测流量&#xff08;车/min&#xff09; 饱和度计算公式&#xff1a; 推导过程…

【git】git本地仓库命令操作详解

这篇文章主要是针对git的命令行操作进行讲解&#xff0c;工具操作的基础也是命令行&#xff0c;如果基本命令操作都不理解&#xff0c;就算是会工具操作&#xff0c;真正遇到问题还是一脸懵逼 如果想看远程仓库的操作&#xff0c;可以看另一篇文章&#xff1a; 【git】远程远…

编译智能合约以及前端交互工具库(Web3项目一实战之三)

我们已然在上一篇 Web3项目灵魂所在之智能合约编写(Web3项目一实战之二) ,为项目写好了智能合约代码。 但身为开发人员的我们,深知高级编程语言所编写出来的代码,都是需要经过编译,而后外部方能正常调用。很显然,使用solidity这门新的高级编程语言编写出来的智能合约,也…

服务网关实践

概述 微服务架构由很多个微小的服务&#xff08;微服务&#xff09;组成系统&#xff0c;每个微服务有自己的主机和端口号。如果直接让客户端与各个微服务通信&#xff0c;带来的问题有&#xff1a; 客户端需要维护多个请求地址&#xff08;主机和端口号&#xff09;每个微服…

解决requests库中UnicodeError异常的问题

摘要&#xff1a;本文介绍了使用requests库时可能遇到的UnicodeError异常&#xff0c;并提供了两种解决方法&#xff0c;以确保你的代码能够正常处理URL。 问题背景 在使用requests库时&#xff0c;当尝试获取类似’http://.example.com’这样的URL时&#xff0c;可能会遇到Un…

1、24 个常见的 Docker 疑难杂症处理技巧(一)

1Docker 迁移存储目录 默认情况系统会将 Docker 容器存放在 /var/lib/docker 目录下 [问题起因] 今天通过监控系统&#xff0c;发现公司其中一台服务器的磁盘快慢&#xff0c;随即上去看了下&#xff0c;发现 /var/lib/docker 这个目录特别大。由上述原因&#xff0c;我们都知…

草图一键生成静态网页,看看这个开源项目

借助GPT-4V视觉模型&#xff0c;可以轻松的将一张草图生成一个静态页面。现在这已经不是什么稀奇事了。主要是分享一下它的Prompt&#xff0c;很简单&#xff0c;用户画好草图后&#xff0c;将草图保存成png图片&#xff0c;传给GPT-4V&#xff0c;然后GPT返回一个标准的HTML&a…

解决 requests 2.28.x 版本 SSL 错误

最近&#xff0c;在使用requests 2.28.1版本进行HTTP post传输时&#xff0c;您可能遇到了一个问题&#xff0c;即SSL验证失败并显示错误消息(Caused by SSLError(SSLCertVerificationError(1, [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get loc…

了解七大经典排序算法,看这一篇就足够了!!!

✏️✏️✏️好&#xff0c;那么今天给大家分享一下七大经典排序算法&#xff01; 清风的CSDN博客 &#x1f61b;&#x1f61b;&#x1f61b;希望我的文章能对你有所帮助&#xff0c;有不足的地方还请各位看官多多指教&#xff0c;大家一起学习交流&#xff01; 动动你们发财的…

代码随想录算法训练营第五十五天 | LeetCode 583. 两个字符串的删除操作、72. 编辑距离、编辑距离总结

代码随想录算法训练营第五十五天 | LeetCode 583. 两个字符串的删除操作、72. 编辑距离、编辑距离总结 文章链接&#xff1a;两个字符串的删除操作、编辑距离、编辑距离总结 视频链接&#xff1a;两个字符串的删除操作、编辑距离 1. LeetCode 583. 两个字符串的删除操作 1.1 思…

算法通关村第九关-白银挑战二分查找与高频搜索树

大家好我是苏麟,今天看看二分查找相关的题目 . 大纲 二分查找拓展问题山脉数组的峰顶索引 中序与搜索树二叉搜索树中的搜索验证二叉搜索树 二分查找拓展问题 山脉数组的峰顶索引 描述 : 符合下列属性的数组 arr 称为 山脉数组 &#xff1a; arr.length > 3存在 i&#…

【halcon】外观检测总结之灰度操作

1 灰度操作之 滞后延时 *滞后阈值 hysteresis_threshold (ImageInvert, RegionHysteresis, 190, 220, 3)这句话的意思就是&#xff0c;逐个判断这个图片区域里像素的灰度值&#xff0c;如果这个值小于190就不考虑了pass掉&#xff0c;如果大于220就直接入选。值在190和220之间…

企业商标信息查询API的优势和应用实例分析

前言 企业商标是企业在市场中的重要标识和竞争力的体现&#xff0c;而商标信息查询API则成为了企业品牌管理的重要工具。那么&#xff0c;这篇文章将详细阐述企业商标信息查询API的优势和应用实例分析。 企业商标信息API的优势 企业商标信息查询API的优势在于它可以快速、准…