Backdrop

1// Fullscreen studio backdrop: a single soft radial bloom from the top-centre falling to near-black,
2// rendered directly as `scene.backgroundNode` with dithering so it never bands.
3import { tsl } from "../tsl/t";
4const {
5  Fn,
6  vec2,
7  vec3,
8  vec4,
9  float,
10  uniform,
11  screenUV,
12  screenSize,
13  mix,
14  pow,
15  smoothstep,
16  fract,
17  sin,
18  dot,
19  length,
20  max,
21} = tsl;
22import * as THREE from "three/webgpu";
23import { hash31 } from "../tsl/noise";
24
25export type BackdropUniforms = {
26  uTop: any;
27  uMid: any;
28  uBottom: any;
29  uCenter: any;
30  uRadius: any;
31  uFalloff: any;
32  uNoise: any;
33  uTime: any;
34};
35
36/** The studio gradient colour at a screen uv (shared by the background and the translucent grains). */
37export function backdropColorAt(u: BackdropUniforms, uv: any) {
38  const aspect = screenSize.x.div(screenSize.y);
39  const d = vec2(uv.x.sub(u.uCenter.x).mul(aspect), uv.y.sub(u.uCenter.y));
40  const r = length(d).div(u.uRadius);
41  const t = pow(smoothstep(0.0, 1.0, r), u.uFalloff);
42  const vert = smoothstep(0.0, 1.0, uv.y.oneMinus().mul(1.15));
43  const corner = smoothstep(0.35, 1.3, length(vec2(uv.x.sub(0.5).mul(aspect), uv.y.sub(0.5))));
44  const col = mix(u.uTop, u.uMid, t);
45  return mix(col, u.uBottom, vert.mul(corner).mul(0.85));
46}
47
48export function createBackdrop() {
49  const uTop = uniform(new THREE.Color("#2a2a2a"));
50  const uMid = uniform(new THREE.Color("#050505"));
51  const uBottom = uniform(new THREE.Color("#030303"));
52  const uCenter = uniform(new THREE.Vector2(0.5, 1.02));
53  const uRadius = uniform(0.55);
54  const uFalloff = uniform(1.6);
55  const uNoise = uniform(1.0);
56  const uTime = uniform(0);
57
58  const uniforms = { uTop, uMid, uBottom, uCenter, uRadius, uFalloff, uNoise, uTime };
59  const node = Fn(() => {
60    const col = backdropColorAt(uniforms, screenUV).toVar();
61    // barely-visible large-scale noise (±1 grey level) plus a hash dither to break banding
62    const uv = screenUV;
63    const n = hash31(vec3(uv.mul(vec2(37.0, 21.0)), uTime.mul(0.37)));
64    const big = sin(dot(uv, vec2(5.3, 7.1)).add(uTime.mul(0.05)))
65      .mul(0.5)
66      .add(0.5);
67    const grey = big
68      .sub(0.5)
69      .mul(1.0 / 255.0)
70      .mul(uNoise)
71      .add(
72        n
73          .sub(0.5)
74          .mul(1.0 / 255.0)
75          .mul(uNoise),
76      );
77    return vec4(max(col.add(vec3(grey)), 0.0), 1.0);
78  })();
79
80  return { node, uniforms };
81}
82void fract;
83void float;