Prove it works, then ship and explain it

1. Check contracts before screenshots

Run Rust unit tests for parsing, layout and ordering, then compile native examples and the WASM target. Run the site checks to catch broken links, missing bilingual content and formula rendering failures. These checks are complementary: successful compilation does not prove the shader produces the intended pixels.

2. Read back pixels for focused claims

workshop_pixels renders stages to an offscreen GPU target. It checks a black clear, triangle coverage, solid quad, Gaussian falloff, order-dependent center color, camera change and time change. It saves PNGs and a JSON report. native_smoke separately tests the real model under known cameras/times; the hidden-window workshop smoke exercises acquire, submit and present.

Offscreen output checks do not prove resize, keyboard, touch or readability. Open the browser lab, change stages, reverse alpha order, scrub time, orbit, change language and inspect a narrow screen. A device/backend should be marked tested only when actual runtime evidence exists for it.

3. Ship code and assets as one compatible version

Build the WASM binary after Rust/WGSL changes, generate the blog and code snapshots, run checks, inspect the deployment bundle, then deploy. The JS glue and WASM binary must use the same versioned URL suffix because the package directory is cached. A stale glue module can make a correct new binary fail to load.

After deployment, open the public build series and lab, not just the deployment log. Preserve the commit identifier and validation report so another person can reproduce the exact state. Deploying a page is not evidence that macOS or Linux has been tested.

4. Give a five-minute engineering walkthrough

Minute 1: draw browser/native → shared pass → pixels. Minute 2: decode one model record and explain activations. Minute 3: project one Gaussian and compose two overlaps. Minute 4: explain normalized time, sorting and the training/runtime boundary. Minute 5: show a failure you can diagnose, a measured bottleneck and a platform still unverified.

For the final exercise, integrate StgPass into your engine’s existing frame graph. Document coordinate and color conventions, show mesh occlusion with depth writes disabled for splats, and produce the same camera/time screenshot in browser and native. Treat unsupported models and device loss as explicit follow-up work.

IDEA → IMPLEMENTATION

Follow the running code

Excerpts are extracted from the repository at site build time. Expand only the part you are studying; full files include context and line numbers.

    pub fn render(&mut self, input: Frame) -> Result<Option<u32>, String> {
        let frame = match self.surface.get_current_texture() {
            wgpu::CurrentSurfaceTexture::Success(frame)
            | wgpu::CurrentSurfaceTexture::Suboptimal(frame) => frame,
            wgpu::CurrentSurfaceTexture::Outdated | wgpu::CurrentSurfaceTexture::Lost => {
                self.surface.configure(&self.device, &self.config);
                return Ok(None);
            }
            wgpu::CurrentSurfaceTexture::Timeout | wgpu::CurrentSurfaceTexture::Occluded => {
                return Ok(None)
            }
            wgpu::CurrentSurfaceTexture::Validation => {
                return Err(
                    "Surface validation failed; reload to recreate the GPU resources".into(),
                )
            }
        };
        let count =
            self.pass
                .prepare(&self.queue, input, [self.config.width, self.config.height])?;
        let target = frame.texture.create_view(&Default::default());
        let mut encoder = self.device.create_command_encoder(&Default::default());
        {
            let mut pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
                label: Some("workshop-frame"),
                color_attachments: &[Some(wgpu::RenderPassColorAttachment {
                    view: &target,
                    resolve_target: None,
                    depth_slice: None,
                    ops: wgpu::Operations {
                        load: wgpu::LoadOp::Clear(wgpu::Color::BLACK),
                        store: wgpu::StoreOp::Store,
                    },
                })],
                depth_stencil_attachment: None,
                timestamp_writes: None,
                occlusion_query_set: None,
                multiview_mask: None,
            });
            self.pass.draw(&mut pass);
        }
        self.queue.submit([encoder.finish()]);
        self.queue.present(frame);
        Ok(Some(count))
    }

Real-model render pass ↗ · Real-model shader ↗

Keep the theory beside the code

Open the related derivation or lab ↗

wgpu 30 · API and backend model ↗

WebGPU · pipeline, buffers and validation ↗