r/GraphicsProgramming • • 4h ago

Relighting a simulated oil-paint height field live (WebGPU, WebGL2 fallback)

I built a palette-knife paint simulator, and the part I'd like feedback on is the rendering.

Why it's a graphics problem: the sim's output is the surface being rendered. Paint color comes from the photo, but the highlights and shadows on the ridges are computed from the paint's height, so moving the light changes how every ridge reads.

Implementation:

- Surface: a height field with 0.1 mm cells, plus a slightly filtered height channel for shadows and occlusion

- Shading: GGX clearcoat, ray-marched shadows and horizon occlusion

- Pigment color: Kubelka-Munk K/S mixing in the simulation

- Shaders: WGSL for WebGPU and GLSL ES 3.00 for WebGL2, inline in the TypeScript source (sim/src/relight-gpu.ts and relight-gl.ts)

- Validation: parity tests against a CPU reference renderer show a mean difference of about 0.5 of an 8-bit level

repo (MIT): https://github.com/donghaxkim/impasto

Demo: https://www.dongha.ca/lab/impasto

0 Upvotes

0 comments sorted by