Raymarched fractal

A raymarched Sierpiński tetrahedron emerges from pure black under directional light and restrained HDR bloom, with drag-only orbit controls.

Open fullscreen

index.tsx renderer.ts pointer-input.ts fractal-math.ts fractal.wgsl bright-pass.wgsl blur.wgsl composite.wgsl

struct Composite {
  exposure: f32,
  bloomStrength: f32,
}
 
@group(0) @binding(0) var scene: texture_2d<f32>;
@group(0) @binding(1) var bloom: texture_2d<f32>;
@group(0) @binding(2) var samp: sampler;
@group(0) @binding(3) var<uniform> composite: Composite;
 
fn aces(x: vec3f) -> vec3f {
  let a = 2.51;
  let b = 0.03;
  let c = 2.43;
  let d = 0.59;
  let e = 0.14;
  return clamp((x * (a * x + vec3f(b))) / (x * (c * x + vec3f(d)) + vec3f(e)), vec3f(0.0), vec3f(1.0));
}
 
@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  let hdrScene = textureSampleLevel(scene, samp, uv, 0.0).rgb;
  let hdrBloom = textureSampleLevel(bloom, samp, uv, 0.0).rgb;
  var color = hdrScene + hdrBloom * composite.bloomStrength;
 
  color *= composite.exposure;
  color = aces(color);
 
  color = pow(color, vec3f(1.0 / 2.2));
  return vec4f(color, 1.0);
}