TECH CATEGORY

WebGPU & Graphics

WGSL compute shaders, ten-million-particle fluid simulation, in-browser ray tracing and high-performance pipeline topology

WebGPU & Graphics

Difficulty: Advanced 13 min

The React 19 Overhaul: Server Components, Actions and the React Compiler

A deep look at what actually changed in React 19: how the React Compiler performs fine-grained dependency memoization at build time, how React Server Components and Client Components talk to each other over the Flight wire format, and how to put streaming Suspense to work in Next.js 15.

#Next.js 15 #React 19 #React Compiler

rsc_server_action.tsxtypescript

'use server';

// A React 19 Server Action running the database update directly on the server
export async function updateArticleReaction(articleId: string, type: 'clap' | 'bookmark') {
  const result = await db.query(
    `UPDATE articles SET ${type}s = ${type}s + 1 WHERE id = $1 RETURNING *`,
    [articleId]
  );
  return { success: true, updatedCount: result.rows[0][`${type}s`] };
}

Seraphina Lin 2025-02-12

Read

WebGPU & Graphics

Difficulty: Advanced 11 min

WebGPU and WGSL in Practice: Ten Million Particles of Real-Time Fluid, Ray Tracing and Neural Rendering in the Browser

Build a complete modern WebGPU graphics pipeline from scratch, dig into parallel compute-shader algorithms in WGSL (WebGPU Shading Language), and hold a steady 60 FPS in the browser while simulating 10,000,000 particles of SPH fluid dynamics.

#Compute Shader #Fluid Dynamics #Ray Tracing

sph_particle_compute.wgslwgsl

// WGSL Compute Shader for 10M Fluid Particles SPH Simulation
struct Particle {
    pos: vec3<f32>,
    density: f32,
    vel: vec3<f32>,
    pressure: f32,
};

@group(0) @binding(0) var<storage, read_write> particles: array<Particle>;
@group(0) @binding(1) var<uniform> simParams: SimParameters;

// One workgroup is 256 threads
@compute @workgroup_size(256, 1, 1)
fn main(@builtin(global_invocation

Seraphina Lin 2025-02-08

Read