double the space

Author: Sheraff

src/pages/particle-life-gpu/draw.wgsl

@@ -7,7 +7,7 @@ struct Config {
 @group(1) @binding(0) var<storage, read> particlePositions: array<vec2f>;
 @group(1) @binding(1) var<storage, read> particleColors: array<u32>;
 
-const size = 1.0;
+const size = 2.0;
 const positions = array<vec2f, 6>(
 	vec2f(-1, -1),
 	vec2f( 1, -1),
@@ -33,26 +33,35 @@ struct VertexOutput {
 	@builtin(position) position: vec4f,
 	// color of the particle
 	@location(1) color: vec4f,
+	// offset from center (for fragment shader)
+	@location(0) offset: vec2f,
 }
 
 
 // for each particle, draw a square centered at its position (i.e. 6 vertices per particle to make a square)
 @vertex fn vs(
+	@builtin(vertex_index) vertexID: u32,
 	@builtin(instance_index) instanceID: u32
 ) -> VertexOutput {
 	let pos = particlePositions[instanceID]; // screen space
-	let vertex_pos = pos; // screen space
+	let offset = positions[vertexID];
+	let vertex_pos = pos + offset * size; // screen space
 	let clip_vertex_pos = vec4f(
 		(vertex_pos.x / (config.width / 2.0)) - 1.0,
 		-((vertex_pos.y / (config.height / 2.0)) - 1.0),
 		0.0,
 		1.0
 	);
 	let color = colors[particleColors[instanceID]];
-	return VertexOutput(clip_vertex_pos, color);
+	return VertexOutput(clip_vertex_pos, color, offset);
 }
 
 // paint a circle centered at offset
 @fragment fn fs(data: VertexOutput) -> @location(0) vec4f {
-	return data.color;
+	let dist = length(data.offset);
+	if (dist > 1.0) {
+		discard;
+	}
+	let alpha = 1.0 - smoothstep(0.6, 1.0, dist);
+	return vec4f(data.color.rgb, data.color.a * alpha);
 }

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

@@ -29,8 +29,8 @@ export default function ParticleLifeGPUPage() {
 		const canvas = canvasRef.current!
 		const controller = new AbortController()
 
-		canvas.width = window.innerWidth * devicePixelRatio
-		canvas.height = window.innerHeight * devicePixelRatio
+		canvas.width = window.innerWidth * devicePixelRatio * 2
+		canvas.height = window.innerHeight * devicePixelRatio * 2
 
 		const randomizeButton = randomizeRef.current!
 
@@ -633,11 +633,25 @@ async function start({
 		fragment: {
 			module: drawModule,
 			entryPoint: 'fs',
-			targets: [{ format }],
-		},
-		primitive: {
-			topology: 'point-list',
+			targets: [{
+				format,
+				blend: {
+					color: {
+						srcFactor: 'src-alpha',
+						dstFactor: 'one-minus-src-alpha',
+						operation: 'add'
+					},
+					alpha: {
+						srcFactor: 'one',
+						dstFactor: 'one-minus-src-alpha',
+						operation: 'add'
+					}
+				}
+			}],
 		},
+		// primitive: {
+		// 	topology: 'point-list',
+		// },
 	})
 	const renderPassDescriptor = {
 		label: 'draw render pass descriptor',
@@ -659,7 +673,7 @@ async function start({
 		pass.setPipeline(drawPipeline)
 		pass.setBindGroup(0, drawConfigBindGroup)
 		pass.setBindGroup(1, drawParticlesBindGroup)
-		pass.draw(1, particleCount)
+		pass.draw(6, particleCount)
 		pass.end()
 		const commandBuffer = encoder.finish()
 		device.queue.submit([commandBuffer])

src/router.ts

@@ -236,7 +236,7 @@ export const ROUTES = {
 			image: particle_life_gpu_image
 		},
 		git: {
-			lastModified: 1762626646000,
+			lastModified: 1762630501000,
 			firstAdded: 1762551884000
 		},
 	},