@driftengine/core 3.61.0

package/src/render/shaders/morph.ts

@@ -0,0 +1,62 @@
+import { MAX_MORPH_TARGETS } from '../skinPalette.ts';
+
+/**
+ * The vertex-stage morph prelude: the delta texture, the weights, and their weighted sum.
+ *
+ * Included by `flat/index.ts` inside `#if MORPHED`, so `resolveConditionals` cuts every line out of
+ * the variants that do not morph. **The same mechanism the joint palette established**, and that
+ * is why this row was affordable: eleven attribute locations were already spoken for and glTF
+ * morph wants up to twenty-four more, so an attribute per target was never going to fit. A vertex
+ * data texture has no such budget.
+ *
+ * Measured, which is what §3.2 of the plan asks for: the second vertex flag takes the shader from
+ * two variants to four for **1,674 gzipped bytes**, against 246,925 for one more *fragment* flag.
+ * The worry that four diverging variants would dedupe far worse than two was wrong — they cost
+ * about half again as much, not an order of magnitude.
+ *
+ * **Both pre-build estimates came in low, and by a similar factor.** The first flag was estimated
+ * at 357 and cost 1,118; this one was estimated at 230 and cost 1,674. Both estimates were made by
+ * splicing hand-written WGSL into a duplicated variant, which does not model what naga emits — its
+ * temporaries, its entry-point parameters, and the uniform block that grows with the flag. Simulate
+ * a permutation to learn its *order of magnitude* and regenerate to learn its cost.
+ *
+ * **Positions only.** A morph target that also moved normals would need a second delta set and a
+ * second fetch per target; what this gives up is correct shading on a strongly morphed surface,
+ * which shows as lighting that lags the shape. What would make it wrong is a face rig, where it
+ * would be the whole point — the fix is a second texture, not a different mechanism.
+ */
+export const MORPH_GLSL = `
+/**
+ * Every target's delta for every vertex, interleaved by vertex.
+ *
+ * A vertex's targets are adjacent because the shader reads all of them for one vertex and nothing
+ * reads one target across many vertices — one cache line rather than \`uMorphTargetCount\` of them.
+ * Wrapped onto rows, because a mesh times its targets passes WebGL2's guaranteed 2048 texels at
+ * 256 vertices with eight targets, which is a small mesh.
+ */
+uniform highp sampler2D uMorphDeltas;
+uniform float uMorphWeights[${MAX_MORPH_TARGETS}];
+uniform int uMorphTargetCount;
+/** The texture's width, so the shader can turn a texel index into a row and a column. */
+uniform int uMorphTextureWidth;
+
+/**
+ * The weighted sum of every active target's delta for this vertex.
+ *
+ * The loop bound is the compile-time maximum and the *break* is on the uniform, because GLSL ES
+ * 3.00 requires a constant bound. A mesh with two targets still costs two iterations rather than
+ * eight, which is the point of the break — and the branch is uniform across the draw, so nothing
+ * here falls foul of the 2026-08-07 rule even before the observation that a vertex stage computes
+ * no derivatives.
+ */
+vec3 morphOffset() {
+  vec3 offset = vec3(0.0);
+  for (int t = 0; t < ${MAX_MORPH_TARGETS}; t++) {
+    if (t >= uMorphTargetCount) break;
+    int texel = gl_VertexID * uMorphTargetCount + t;
+    ivec2 at = ivec2(texel % uMorphTextureWidth, texel / uMorphTextureWidth);
+    offset += texelFetch(uMorphDeltas, at, 0).xyz * uMorphWeights[t];
+  }
+  return offset;
+}
+`;

package/src/render/shaders/octahedral.ts

@@ -0,0 +1,170 @@
+import type { vec2, vec3 } from 'gl-matrix';
+
+/**
+ * Octahedral mapping: a direction to a point on the unit square, and back.
+ *
+ * **One projection over the whole sphere, which is the entire reason this exists.** A cube map
+ * stores six images rasterised under six separate 90 degree projections, and along a shared edge
+ * the two disagree by up to a texel of depth — so a filter tap that crosses the edge reads the
+ * other projection's answer, the comparison flips along that line, and the line draws as a
+ * straight ray from beneath the light. Seven separate reports pointed at those rays, and four
+ * attempts at widening the point-shadow filter failed against them. There is no second projection
+ * here for a tap to cross.
+ *
+ * **The algorithm is written twice, in two languages, and they must move together.** The GLSL is
+ * what runs, on both backends, since the WGSL is generated from it. The TypeScript exists so that
+ * a change to it has a test that needs no device, and `octahedral.test.ts` is that test. Nothing
+ * catches a divergence between the two, which is why they are in one file rather than one each.
+ */
+
+/**
+ * The chunk both the resolve pass and the lit pass include.
+ *
+ * **Not `sign()`, anywhere in here.** GLSL's `sign` returns 0 at 0, and a direction with an exact
+ * zero component is not a rarity in this engine — it is every axis-aligned wall in every scene it
+ * draws. `sign(0.0)` folds such a direction to the origin of the map, which reads as one light's
+ * shadow appearing on a surface it does not face. The ternaries below are that fix and are not
+ * style; a test asserts this text contains no `sign(` at all.
+ *
+ * **`octWrapUv` and the two inset helpers exist because a *filtered* octahedral map needs a
+ * gutter, and the point-shadow array never did.** That array is one storage level with `NEAREST`
+ * on both filters, so no tap ever crosses the map's outer border. A prefiltered environment is
+ * `LINEAR` with a mip chain, and there a tap does cross it — into whatever `CLAMP_TO_EDGE` last
+ * repeated, which is not the direction on the other side of the fold.
+ *
+ * The square's border is a fold rather than an edge: the point just past the right border at
+ * height `v` is the point just inside it at `1 - v`, and passing through a corner comes back in at
+ * the opposite corner, because all four corners are the same pole. Measured before it was written:
+ * a gutter texel filled by this rule matches the texel it is folded against to **3.3e-16**, and a
+ * border without one is wrong by **4.6e-2** in direction. The corner case is exact to 1.1e-16, and
+ * the direction gap across a corner falls linearly with the step, which is what a pole requires.
+ *
+ * `octInsetUv` and `octInsetDir` are the two ends of that: a sampler maps a direction into the
+ * inner `edge - 2` texels, and a generator asks which direction its own texel must hold — which in
+ * the gutter is a folded one. They are exact inverses on the interior.
+ */
+export const OCTAHEDRAL_GLSL = `vec2 octEncode(vec3 d) {
+  vec3 n = d / (abs(d.x) + abs(d.y) + abs(d.z));
+  vec2 p = n.z >= 0.0
+    ? n.xy
+    : (1.0 - abs(vec2(n.y, n.x))) * vec2(n.x >= 0.0 ? 1.0 : -1.0, n.y >= 0.0 ? 1.0 : -1.0);
+  return p * 0.5 + 0.5;
+}
+
+vec3 octDecode(vec2 uv) {
+  vec2 f = uv * 2.0 - 1.0;
+  vec3 n = vec3(f.x, f.y, 1.0 - abs(f.x) - abs(f.y));
+  float t = max(-n.z, 0.0);
+  n.x += n.x >= 0.0 ? -t : t;
+  n.y += n.y >= 0.0 ? -t : t;
+  return normalize(n);
+}
+
+vec2 octWrapUv(vec2 uv) {
+  vec2 f = uv * 2.0 - 1.0;
+  if (f.x < -1.0 || f.x > 1.0) {
+    f.x = (f.x > 0.0 ? 2.0 : -2.0) - f.x;
+    f.y = -f.y;
+  }
+  if (f.y < -1.0 || f.y > 1.0) {
+    f.y = (f.y > 0.0 ? 2.0 : -2.0) - f.y;
+    f.x = -f.x;
+  }
+  return f * 0.5 + 0.5;
+}
+
+vec2 octInsetUv(vec3 d, float edge) {
+  return (octEncode(d) * (edge - 2.0) + 1.0) / edge;
+}
+
+vec3 octInsetDir(vec2 uv, float edge) {
+  return octDecode(octWrapUv((uv * edge - 1.0) / (edge - 2.0)));
+}`;
+
+/**
+ * The GLSL above, in TypeScript, filling a target the caller owns.
+ *
+ * The direction need not be normalised: the L1 division below normalises it in the only sense this
+ * mapping cares about. Fills rather than returns a new vector because the callers that will exist
+ * are per-face rather than per-frame, and the rule is cheaper to keep than to reason about.
+ */
+export function octEncode(x: number, y: number, z: number, out: vec2): vec2 {
+  const l = Math.abs(x) + Math.abs(y) + Math.abs(z);
+  const nx = x / l;
+  const ny = y / l;
+  const nz = z / l;
+  let px = nx;
+  let py = ny;
+  if (nz < 0) {
+    px = (1 - Math.abs(ny)) * (nx >= 0 ? 1 : -1);
+    py = (1 - Math.abs(nx)) * (ny >= 0 ? 1 : -1);
+  }
+  out[0] = px * 0.5 + 0.5;
+  out[1] = py * 0.5 + 0.5;
+  return out;
+}
+
+/**
+ * A point outside the unit square, folded back to the point of the sphere it names.
+ *
+ * The GLSL above, in TypeScript, and the identity inside the square — a texel that is not in the
+ * gutter must not move, or every map would be resampled by a function meant to touch its border.
+ */
+export function octWrapUv(u: number, v: number, out: vec2): vec2 {
+  let fx = u * 2 - 1;
+  let fy = v * 2 - 1;
+  if (fx < -1 || fx > 1) {
+    fx = (fx > 0 ? 2 : -2) - fx;
+    fy = -fy;
+  }
+  if (fy < -1 || fy > 1) {
+    fy = (fy > 0 ? 2 : -2) - fy;
+    fx = -fx;
+  }
+  out[0] = fx * 0.5 + 0.5;
+  out[1] = fy * 0.5 + 0.5;
+  return out;
+}
+
+/**
+ * Where to sample a direction in a map `edge` texels across whose outer ring is a gutter.
+ *
+ * The inner region is `edge - 2` texels, offset by one, so a direction at the very border of the
+ * octahedral square lands on the last real texel and the tap that interpolates past it reads the
+ * gutter — which `octInsetDir` filled with the folded direction.
+ */
+export function octInsetUv(x: number, y: number, z: number, edge: number, out: vec2): vec2 {
+  octEncode(x, y, z, out);
+  out[0] = (out[0] * (edge - 2) + 1) / edge;
+  out[1] = (out[1] * (edge - 2) + 1) / edge;
+  return out;
+}
+
+/**
+ * The direction one texel of such a map must hold, gutter included.
+ *
+ * The exact inverse of `octInsetUv` on the interior. In the gutter the un-inset coordinate falls
+ * outside the square and the fold answers it, which is the whole point.
+ */
+export function octInsetDir(u: number, v: number, edge: number, out: vec3): vec3 {
+  const wrapped = octWrapUv((u * edge - 1) / (edge - 2), (v * edge - 1) / (edge - 2), insetScratch);
+  return octDecode(wrapped[0], wrapped[1], out);
+}
+
+/** Reused by `octInsetDir`, which the convolution calls once per texel of every level. */
+const insetScratch: vec2 = [0, 0] as unknown as vec2;
+
+/** The exact inverse, filling a target the caller owns. Returns a unit vector. */
+export function octDecode(u: number, v: number, out: vec3): vec3 {
+  const fx = u * 2 - 1;
+  const fy = v * 2 - 1;
+  const nz = 1 - Math.abs(fx) - Math.abs(fy);
+  const t = Math.max(-nz, 0);
+  const nx = fx + (fx >= 0 ? -t : t);
+  const ny = fy + (fy >= 0 ? -t : t);
+  const l = Math.hypot(nx, ny, nz);
+  out[0] = nx / l;
+  out[1] = ny / l;
+  out[2] = nz / l;
+  return out;
+}

package/src/render/shaders/octahedralResolve.ts

@@ -0,0 +1,83 @@
+import { OCTAHEDRAL_GLSL } from './octahedral.ts';
+
+/**
+ * A fullscreen triangle built from the vertex index, so the pass binds no buffer.
+ *
+ * Three vertices rather than a quad's six: a quad's diagonal is a seam every fragment on it is
+ * rasterised twice across, and this pass writes depth, so twice is not free.
+ */
+export const OCTAHEDRAL_RESOLVE_VERT = `#version 300 es
+void main() {
+  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+}`;
+
+/**
+ * One cube face into its region of an octahedral map, as linear radial distance.
+ *
+ * **Every octahedral texel has exactly one dominant axis, so the six regions are disjoint and
+ * together cover the map.** That is what makes one scratch texture enough for the whole engine
+ * rather than one cube per pool slot: a face is consumed the moment it is resolved, so a bake
+ * spread across frames — which is how bakes work here, a couple of faces at a time against
+ * `pointShadowBudget.ts` — never needs a second face to still exist.
+ *
+ * **The perspective decode happens here, once per texel, instead of twelve times per shaded
+ * fragment.** What lands in the layer is `radius / far`, linear, which at a far plane of 20 m
+ * quantises to about a micrometre in DEPTH_COMPONENT24 against a bias that starts at 4 cm. A cube
+ * spends most of its bits near the light instead, which is the wrong end for a shadow.
+ *
+ * The face index and the sampler are named apart on purpose: two uniforms called `uFace` is a
+ * redeclaration and GLSL rejects the whole shader.
+ */
+export const OCTAHEDRAL_RESOLVE_FRAG = `#version 300 es
+precision highp float;
+
+/** The face the bake just rendered, as a depth texture. */
+uniform highp sampler2D uFace;
+/** That face's world-to-face rotation. See pointShadowFaceRotation. */
+uniform mat3 uFaceRotation;
+/** Which of the six this pass is resolving. Every other texel discards. */
+uniform int uFaceIndex;
+uniform float uFar;
+uniform float uNear;
+/** The octahedral map's edge, so this needs no viewport query. */
+uniform float uEdge;
+
+${OCTAHEDRAL_GLSL}
+
+void main() {
+  vec3 d = octDecode(gl_FragCoord.xy / uEdge);
+
+  /*
+   * Which face owns this texel. The tie-breaking is x, then y, then z, and it has to match the
+   * CPU's exactly or a sliver of texels along a boundary belongs to two faces or to none.
+   */
+  vec3 a = abs(d);
+  int face;
+  if (a.x >= a.y && a.x >= a.z) face = d.x >= 0.0 ? 0 : 1;
+  else if (a.y >= a.z) face = d.y >= 0.0 ? 2 : 3;
+  else face = d.z >= 0.0 ? 4 : 5;
+  if (face != uFaceIndex) discard;
+
+  /* lookAt looks down -z, so a direction inside this face has a negative z here. */
+  vec3 v = uFaceRotation * d;
+  float forward = -v.z;
+  vec2 faceUv = (v.xy / forward) * 0.5 + 0.5;
+
+  /*
+   * textureLod at level zero rather than plain texture. The scratch carries one storage level and
+   * NEAREST filtering so the fetch is identical, and this call sits after a discard — which is
+   * non-uniform control flow, where an implicit derivative is undefined in GLSL and rejected
+   * outright in WGSL. AGENTS.md, 2026-08-07.
+   */
+  float stored = textureLod(uFace, faceUv, 0.0).r;
+  if (stored >= 0.9999) {
+    /* Nothing was rendered along this direction, so the stored radius is the far plane. */
+    gl_FragDepth = 1.0;
+    return;
+  }
+  float ndc = stored * 2.0 - 1.0;
+  float faceLocalZ = (2.0 * uFar * uNear) / (uFar + uNear - ndc * (uFar - uNear));
+  /* d is a unit vector, so forward is its cosine to the axis and this is the true radius. */
+  gl_FragDepth = clamp((faceLocalZ / forward) / uFar, 0.0, 1.0);
+}`;

package/src/render/shaders/oitResolve.ts

@@ -0,0 +1,42 @@
+/**
+ * The order-independent transparency resolve: two buffers composited over the finished scene.
+ *
+ * **The accumulation holds a weighted sum and the revealage a product.** Dividing the summed
+ * premultiplied colour by the summed weighted alpha gives the average colour the translucent
+ * layers make; the revealage says how much of what is behind them still shows through. For a
+ * single layer that reduces exactly to ordinary alpha blending, which is the anchor
+ * "orderIndependent.ts" asserts against numbers.
+ *
+ * **The composite is done by the blend state rather than by reading the scene.** Drawn with
+ * (ONE_MINUS_SRC_ALPHA, SRC_ALPHA) over the scene target, the hardware computes
+ * average * (1 - reveal) + scene * reveal, which is the resolve — so this pass never samples the
+ * colour it is compositing onto and cannot be caught reading a target it is also writing.
+ *
+ * The vertex stage is FULLSCREEN_VERT, shared with the occlusion pass, its blur and the rush.
+ */
+export const OIT_RESOLVE_FRAG = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+
+/** Weighted premultiplied colour in rgb, weighted alpha in a. Cleared to zero. */
+uniform sampler2D uOitAccum;
+/** What every layer let through, as a product. Cleared to one, so an untouched pixel is all scene. */
+uniform sampler2D uOitReveal;
+
+out vec4 fragColor;
+
+void main() {
+  vec4 accum = textureLod(uOitAccum, vUv, 0.0);
+  float reveal = textureLod(uOitReveal, vUv, 0.0).r;
+
+  /*
+   * Guarded because a pixel no fragment touched has a weighted alpha of zero. Its revealage is
+   * then one, so the blend discards whatever this produced anyway — but a division by zero would
+   * put a NaN into the target first, and a NaN blended against anything stays a NaN.
+   */
+  vec3 average = accum.rgb / max(accum.a, 1e-5);
+
+  fragColor = vec4(average, reveal);
+}
+`;

package/src/render/shaders/outputTransform.ts

@@ -0,0 +1,107 @@
+/**
+ * The grade every forward pass applies when it is the last one to touch the frame.
+ *
+ * **One GLSL string rather than a copy in each program**, for the reason `fog.ts` gives about
+ * itself and for a sharper one here: this is not a look, it is a *conversion*, and two passes
+ * converting differently is a scene where the smoke and the wall it drifts past disagree about
+ * what a colour means. That is exactly the state this engine was in until this file existed.
+ * `flat.ts` carried the whole thing privately, and `renderer.ts` said so in its own words at the
+ * mesh pass's upload site: *"full grading needs the composite. Without it the sky, the
+ * particles, the film and the water are still ungraded beside a world that is."*
+ *
+ * **What that costs a consumer with no composite, which is the case this closes.** A pass that
+ * writes linear values into an 8-bit target has them read back as if they were already display
+ * values, which is not a subtle shift: `#ff8d72` reaches the screen as `(255, 68, 43)` instead
+ * of `(213, 125, 97)`, a saturated red where the author asked for a warm salmon, and it clips.
+ * Found on a site port whose sparkle field went from additive and fogged, where it was too dim
+ * to show, to alpha blended and unfogged, where it was the brightest thing in the frame.
+ *
+ * **Blending happens after this, in display space, and that is the same thing three.js does.**
+ * three.js tone maps and converts inside every material's own fragment stage, so a blended draw
+ * there composites graded against graded too. It is a real difference from grading once at a
+ * composite, where blending happens in scene units, and it is the difference a consumer asks
+ * for when it turns the composite off.
+ *
+ * **A pass must apply this only when it is genuinely last.** With a scene target the resolve
+ * grades, so a pass that also graded would apply a curve to its own output; every upload site
+ * gates on the same `gradeHere` the mesh pass uses.
+ */
+
+/**
+ * `uOutputTransform` and `uOutputExposure`, the fit, and `applyOutputTransform`.
+ *
+ * Declares its own two uniforms, so including it is the whole of what a fragment stage has to
+ * do besides calling it. Both are ints and floats rather than defines because the choice is a
+ * caller's, per draw, and a permutation per output transform would double a pipeline count for
+ * a branch that costs one compare.
+ */
+export const OUTPUT_TRANSFORM_GLSL = `
+/** 0 none, 1 sRGB, 2 ACES then sRGB. See renderQuality.ts. */
+uniform int uOutputTransform;
+/** Scales the scene into the tone curve. 1 is the reference grade. See renderQuality.ts. */
+uniform float uOutputExposure;
+
+/*
+ * ACES: the reference fit, not the cheap one.
+ *
+ * This was Narkowicz's single rational function, on the argument that the difference from
+ * the reference curve is invisible next to the gain. That argument holds for a look and
+ * fails for a *match*, which is what this option is for — aces exists so a world ported
+ * from three.js reads the same, and three.js applies the full fit: into AP1 through
+ * ACESInputMat, the RRT and ODT together, then back out through ACESOutputMat.
+ *
+ * The two curves are not a shade apart. Narkowicz is markedly brighter through the
+ * midtones, which is exactly where an interior scene lives, and it is a large part of a
+ * measured ~1.7x that survived correcting the colour space and the missing Lambert pi.
+ * An approximation of a standard is the wrong thing to hold when the standard is the
+ * specification.
+ */
+vec3 rrtAndOdtFit(vec3 v) {
+  vec3 a = v * (v + 0.0245786) - 0.000090537;
+  vec3 b = v * (0.983729 * v + 0.4329510) + 0.238081;
+  return a / b;
+}
+
+vec3 acesFilmic(vec3 x) {
+  /*
+   * Exposure first, because a tone curve is only defined relative to one.
+   *
+   * The reference RRT and ODT are graded for a dark cinema. Every renderer that ships ACES
+   * scales its input to suit whatever it is actually shown on, and the factor each one
+   * picks is a *look*, not a standard - so this engine takes no position and reads it from
+   * the caller. Neutral by default, which is the reference grade unmodified. three.js's own
+   * pick is 1 / 0.6, for a consumer matching one.
+   */
+  x *= uOutputExposure;
+  // Columns, as GLSL reads them: sRGB -> XYZ -> D65_2_D60 -> AP1 -> RRT_SAT.
+  const mat3 ACES_INPUT = mat3(
+    0.59719, 0.07600, 0.02840,
+    0.35458, 0.90834, 0.13383,
+    0.04823, 0.01566, 0.83777
+  );
+  // ODT_SAT -> XYZ -> D60_2_D65 -> sRGB.
+  const mat3 ACES_OUTPUT = mat3(
+     1.60475, -0.10208, -0.00327,
+    -0.53108,  1.10813, -0.07276,
+    -0.07367, -0.00605,  1.07602
+  );
+  return clamp(ACES_OUTPUT * rrtAndOdtFit(ACES_INPUT * x), 0.0, 1.0);
+}
+
+/*
+ * Linear to sRGB. The piecewise form rather than a plain pow: the linear toe near black
+ * is where banding lives in an 8-bit buffer, and the cheap approximation puts it in the
+ * wrong place.
+ */
+vec3 linearToSrgb(vec3 c) {
+  vec3 low = c * 12.92;
+  vec3 high = 1.055 * pow(max(c, vec3(0.0)), vec3(1.0 / 2.4)) - 0.055;
+  return mix(high, low, step(c, vec3(0.0031308)));
+}
+
+vec3 applyOutputTransform(vec3 c) {
+  if (uOutputTransform == 0) return c;
+  if (uOutputTransform == 2) c = acesFilmic(c);
+  return linearToSrgb(c);
+}
+`;

package/src/render/shaders/panel.ts

@@ -0,0 +1,51 @@
+/**
+ * A flat, blended rectangle in screen space.
+ *
+ * The engine could draw a solid rectangle two ways before this and neither is one:
+ * `beginInset` clears a box to a colour, which is opaque by definition, and
+ * `TextRenderer.setPlate` builds the rectangle out of one lit *cube per cell* — right
+ * for a keycap two cells tall, and at panel size a grid of seams: a plate made that
+ * way reads as messy rather than as plain.
+ *
+ * So: two triangles, one colour, one alpha, no lighting and no geometry. What a caller
+ * wants when it needs somewhere to read type against.
+ *
+ * Coordinates are **CSS pixels with a top-left origin**, the same convention
+ * `InsetRect` uses and the same one a caller laying out an overlay already has.
+ */
+export const PANEL_VERT = `#version 300 es
+layout(location = 0) in vec2 aCorner;
+
+/** left, top, width, height, in CSS pixels from the top-left of the viewport. */
+uniform vec4 uRect;
+uniform vec2 uViewport;
+/**
+ * Clip space, as the backend drawing this defines it. Identity on WebGL2.
+ *
+ * Like the text pass, this builds its own clip position and never multiplies by a camera, so the
+ * correction every other draw carries in its view-projection cannot reach it. Without it the
+ * generated vertex shader's Y negation stands uncancelled and the panel lands mirrored about
+ * the middle of the frame — a bar drawn at 82% of the height appearing at 18% of it.
+ */
+uniform mat4 uClipCorrection;
+
+void main() {
+  vec2 px = uRect.xy + aCorner * uRect.zw;
+  // Into clip space, flipping y: the caller counts down from the top and GL counts up.
+  vec2 ndc = vec2(px.x / uViewport.x * 2.0 - 1.0, 1.0 - px.y / uViewport.y * 2.0);
+  gl_Position = uClipCorrection * vec4(ndc, 0.0, 1.0);
+}
+`;
+
+export const PANEL_FRAG = `#version 300 es
+precision highp float;
+
+uniform vec3 uColor;
+uniform float uAlpha;
+
+out vec4 outColor;
+
+void main() {
+  outColor = vec4(uColor, uAlpha);
+}
+`;