more setup

Author: Sheraff

src/pages/particle-life-gpu/index.tsx

@@ -26,7 +26,7 @@ export default function ParticleLifeGPUPage() {
 		canvas.height = window.innerHeight * devicePixelRatio
 
 		const frameCounter = makeFrameCounter(60)
-		start(controller.signal, canvas, (dt) => setFps(Math.round(frameCounter(dt / 1000))))
+		start(controller, canvas, (dt) => setFps(Math.round(frameCounter(dt / 1000))))
 
 		return () => {
 			controller.abort()
@@ -46,37 +46,40 @@ export default function ParticleLifeGPUPage() {
 }
 
 async function start(
-	signal: AbortSignal,
+	controller: AbortController,
 	canvas: HTMLCanvasElement,
 	onFrame: (dt: number) => void,
 ) {
 	const adapter = await navigator.gpu.requestAdapter({ powerPreference: 'high-performance' })
 	if (!adapter) throw new Error('No GPU adapter found')
-	if (signal.aborted) return
+	if (controller.signal.aborted) return
 
 	const device = await adapter.requestDevice()
 	if (!device) throw new Error('No GPU device found')
-	if (signal.aborted) return
-	signal.addEventListener('abort', () => device.destroy(), { once: true })
+	if (controller.signal.aborted) return
+	controller.signal.addEventListener('abort', () => device.destroy(), { once: true })
+	device.lost.then((info) => info.reason !== 'destroyed' && controller.abort())
+	if (canvas.width > device.limits.maxTextureDimension2D || canvas.height > device.limits.maxTextureDimension2D)
+		throw new Error(`Canvas size exceeds device limits: ${canvas.width}x${canvas.height} > ${device.limits.maxTextureDimension2D}`)
 
 	const ctx = canvas.getContext('webgpu')!
 	if (!ctx) throw new Error('No WebGPU context found')
 	const format = navigator.gpu.getPreferredCanvasFormat()
 	ctx.configure({ device, format, alphaMode: 'opaque' })
-	signal.addEventListener('abort', () => ctx.unconfigure(), { once: true })
+	controller.signal.addEventListener('abort', () => ctx.unconfigure(), { once: true })
 
-	const module = device.createShaderModule({ code: shader, label: 'our hardcoded red triangle shaders' })
+	const renderModule = device.createShaderModule({ code: shader, label: 'our hardcoded red triangle shaders' })
 
-	const pipeline = device.createRenderPipeline({
+	const renderPipeline = device.createRenderPipeline({
 		label: 'our hardcoded red triangle pipeline',
 		layout: 'auto',
 		vertex: {
 			entryPoint: 'vs',
-			module,
+			module: renderModule,
 		},
 		fragment: {
 			entryPoint: 'fs',
-			module,
+			module: renderModule,
 			targets: [{ format }],
 		},
 	})
@@ -102,7 +105,7 @@ async function start(
 
 		const encoder = device.createCommandEncoder({ label: 'our encoder' })
 		const pass = encoder.beginRenderPass(renderPassDescriptor)
-		pass.setPipeline(pipeline)
+		pass.setPipeline(renderPipeline)
 		pass.draw(3)
 		pass.end()
 
@@ -112,15 +115,79 @@ async function start(
 
 	let lastTime = performance.now()
 	let rafId = requestAnimationFrame(function frame(time) {
-		if (signal.aborted) return
+		if (controller.signal.aborted) return
 		rafId = requestAnimationFrame(frame)
 		const dt = time - lastTime
 		lastTime = time
 		onFrame(dt)
 		render()
 	})
-	signal.addEventListener('abort', () => cancelAnimationFrame(rafId), { once: true })
+	controller.signal.addEventListener('abort', () => cancelAnimationFrame(rafId), { once: true })
 
-	const width = ctx.canvas.width
-	const height = ctx.canvas.height
+	// const width = ctx.canvas.width
+	// const height = ctx.canvas.height
+
+	const computeModule = device.createShaderModule({
+		label: 'doubling compute module',
+		code: compute,
+	})
+
+	const computePipeline = device.createComputePipeline({
+		label: 'doubling compute pipeline',
+		layout: 'auto',
+		compute: {
+			module: computeModule,
+		},
+	})
+
+	const input = new Float32Array([1, 3, 5])
+	const workBuffer = device.createBuffer({
+		label: 'work buffer',
+		size: input.byteLength,
+		usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
+	})
+	device.queue.writeBuffer(workBuffer, 0, input)
+	controller.signal.addEventListener('abort', () => workBuffer.destroy(), { once: true })
+
+	const resultBuffer = device.createBuffer({
+		label: 'result buffer',
+		size: input.byteLength,
+		usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
+	})
+	controller.signal.addEventListener('abort', () => resultBuffer.destroy(), { once: true })
+
+	const bindGroup = device.createBindGroup({
+		label: 'bindGroup for work buffer',
+		layout: computePipeline.getBindGroupLayout(0),
+		entries: [
+			{ binding: 0, resource: { buffer: workBuffer } },
+		],
+	})
+
+	exec: {
+		const encoder = device.createCommandEncoder({
+			label: 'doubling encoder',
+		})
+
+		const pass = encoder.beginComputePass({
+			label: 'doubling compute pass',
+		})
+		pass.setPipeline(computePipeline)
+		pass.setBindGroup(0, bindGroup)
+		pass.dispatchWorkgroups(input.length)
+		pass.end()
+
+		encoder.copyBufferToBuffer(workBuffer, 0, resultBuffer, 0, resultBuffer.size)
+
+		const commandBuffer = encoder.finish()
+		device.queue.submit([commandBuffer])
+	}
+
+	await resultBuffer.mapAsync(GPUMapMode.READ)
+	const result = new Float32Array(resultBuffer.getMappedRange())
+
+	console.log('input', input)
+	console.log('result', result)
+
+	resultBuffer.unmap()
 }

src/router.ts

@@ -234,8 +234,8 @@ export const ROUTES = {
 			tags: ['simulation', 'webgpu', 'particles', 'wip'],
 		},
 		git: {
-			lastModified: 0,
-			firstAdded: 0
+			lastModified: 1762551884000,
+			firstAdded: 1762551884000
 		},
 	},
 	"particle-life": {