@swf2es/render 0.0.0-stage → 0.1.0

package/src/geometry.ts

@@ -0,0 +1,143 @@
+import { type Handle, Registry } from "./registry.js";
+
+/**
+ * How many frames a geometry may go undrawn before it is let go of: a
+ * pool's object or a loop's rarer frame comes back within a few seconds.
+ */
+export const IDLE_FRAMES = 300;
+
+/** Floats a vertex of advanced text's glyph quads (GeometryData.glyphs). */
+export const GLYPH_FLOATS = 18;
+
+/** A geometry as its owner holds it: its id, and the generation the id had, which a reused id moves on. */
+export type GeometryHandle = Handle;
+
+/**
+ * Triangles to draw under a row's transform: positions on the stage in
+ * pixels, two floats a vertex; each vertex' straight colour, its bytes red,
+ * green, blue and alpha from the lowest; where it samples a texture, where
+ * in texels, two floats a vertex, which a draw divides by the texture's
+ * size; and indices into the vertices, three a triangle. The backend copies
+ * them into its atlas once.
+ */
+export interface GeometryData {
+  positions: Float32Array;
+  /** None for a mesh, whose depths take their place. */
+  colors: Uint32Array;
+  /** A mesh's (MESH) are its u and v from 0 to 1, which its program reads as they are. */
+  texels?: Float32Array;
+  /** A mesh's depth at each vertex, its t, in place of its colour. */
+  depths?: Float32Array;
+  /**
+   * Advanced text's glyph quads: GLYPH_FLOATS floats a vertex, its position
+   * first, as its positions have it, then its glyph's pen and tables,
+   * outline bounds and corner, segments and size, and colour; and the
+   * text's mode and cutoff tables, which its draw takes as uniforms. Drawn
+   * by the glyph program (webgl/programs.ts, glyphsVertex), each pixel of a
+   * quad covered by its distance to the glyph's outline, in the outlines'
+   * segments (WebGLBackend.uploadOutlines), as adl covers it.
+   */
+  glyphs?: { vertices: Float32Array; mode: Float32Array; table: Float32Array };
+  indices: Uint32Array;
+  /**
+   * No part of it over another: a bitmap's quad, or one fill's triangles.
+   * Alone in a blend mode's layer, such a geometry is drawn straight onto
+   * what is below it, as blending it pixel by pixel blends each pixel once.
+   */
+  flat?: boolean;
+}
+
+/**
+ * Every geometry a scene list may name, by id. What goes undrawn for
+ * IDLE_FRAMES is let go of; its owner finds it gone by its handle and adds
+ * it again. The backend takes what was added and removed since it last
+ * looked (taken), and keeps its own copies.
+ */
+export class Geometries extends Registry {
+  /** Changes only when a handle can have become stale, including expiry and context loss. */
+  removalVersion = 0;
+  private readonly data: (GeometryData | null)[] = [];
+  /** Each geometry's box: its positions' least x and y, then their greatest. */
+  private boxes = new Float32Array(1024);
+  /** Added since the backend last took them. */
+  added: number[] = [];
+  /** Changed in place since the backend last took them (update). */
+  updated: number[] = [];
+
+  add(data: GeometryData): GeometryHandle {
+    const handle = this.hold(IDLE_FRAMES);
+    const id = handle.id;
+    this.data[id] = data;
+    this.added.push(id);
+    this.measure(id);
+    return handle;
+  }
+
+  /**
+   * Geometry `id`'s arrays changed in place, their lengths as they were: its
+   * box measured again, and its vertices copied again where they lie.
+   */
+  update(id: number): void {
+    if (this.data[id]) {
+      this.measure(id);
+      this.updated.push(id);
+    }
+  }
+
+  private measure(id: number): void {
+    const data = this.data[id] as GeometryData;
+    if (id * 4 >= this.boxes.length) {
+      const grown = new Float32Array(Math.max(this.boxes.length * 2, id * 4 + 4));
+      grown.set(this.boxes);
+      this.boxes = grown;
+    }
+
+    const p = data.positions;
+    let x0 = Number.POSITIVE_INFINITY;
+    let y0 = Number.POSITIVE_INFINITY;
+    let x1 = Number.NEGATIVE_INFINITY;
+    let y1 = Number.NEGATIVE_INFINITY;
+    for (let i = 0; i < p.length; i += 2) {
+      x0 = Math.min(x0, p[i]);
+      y0 = Math.min(y0, p[i + 1]);
+      x1 = Math.max(x1, p[i]);
+      y1 = Math.max(y1, p[i + 1]);
+    }
+
+    const box = this.boxes;
+    box[id * 4] = x0;
+    box[id * 4 + 1] = y0;
+    box[id * 4 + 2] = x1;
+    box[id * 4 + 3] = y1;
+  }
+
+  /**
+   * The boxes of every geometry, four floats from `id * 4`: least x and y,
+   * greatest x and y; a geometry of no vertices has its least past its
+   * greatest.
+   */
+  get box(): Float32Array {
+    return this.boxes;
+  }
+
+  get(id: number): GeometryData | null {
+    return this.data[id] ?? null;
+  }
+
+  /** The ids of every geometry held, in order. */
+  live(): number[] {
+    const ids: number[] = [];
+    for (let id = 0; id < this.data.length; id++) {
+      if (this.data[id]) {
+        ids.push(id);
+      }
+    }
+
+    return ids;
+  }
+
+  protected override dropped(id: number): void {
+    this.removalVersion++;
+    this.data[id] = null;
+  }
+}

package/src/index.ts

@@ -0,0 +1,87 @@
+// The renderer's core (docs/renderer.md): what a frame draws, as typed
+// arrays, and the planner that turns it into commands. No GPU, no DOM.
+export {
+  CLEAR,
+  COMPOSITE,
+  Commands,
+  FILTER,
+  HELD,
+  HOLD_POP,
+  HOLD_PUSH,
+  LAYER_POP,
+  LAYER_PUSH,
+  RUN,
+  STENCIL_POP,
+  STENCIL_PUSH,
+} from "./commands.js";
+export * as filterShaders from "./filter-shaders.js";
+export {
+  BEVEL,
+  BLEND,
+  BLUR,
+  blurShrink,
+  COLOR_MATRIX,
+  CONVOLUTION,
+  DISPLACEMENT,
+  FILL_SHADER,
+  Filters,
+  GLOW,
+  GRADIENT,
+  SHADER,
+} from "./filters.js";
+export {
+  Geometries,
+  type GeometryData,
+  type GeometryHandle,
+  GLYPH_FLOATS,
+  IDLE_FRAMES,
+} from "./geometry.js";
+export { KEEP_IDLE_FRAMES, type KeepHandle, Keeps } from "./keeps.js";
+export {
+  drawnArea,
+  filteredRect,
+  type MeasureTarget,
+  measureLayers,
+  wholeBitmap,
+} from "./measure.js";
+export { plan } from "./plan.js";
+export { type ColorRow, ROW_FLOATS, ROWS_A_LINE, Rows } from "./rows.js";
+export {
+  ADD,
+  ALPHA,
+  ALPHA_MASK,
+  BLEND_NAMES,
+  CLAMP,
+  DARKEN,
+  DIFFERENCE,
+  DRAW,
+  ERASE,
+  HARDLIGHT,
+  INVERT,
+  KEPT,
+  KERNEL,
+  LAYER,
+  LAYER_BEGIN,
+  LAYER_END,
+  LIGHTEN,
+  MASK_BEGIN,
+  MASK_POP,
+  MASK_USE,
+  MESH,
+  MIRROR,
+  MULTIPLY,
+  NO_WHOLE,
+  NORMAL,
+  OVERLAY,
+  PLANE,
+  REPEAT,
+  SCREEN,
+  SceneList,
+  SHADED,
+  SMOOTH,
+  SNAP,
+  SUBTRACT,
+  WHOLE_ALIASED,
+  WHOLE_SMOOTH,
+} from "./scene.js";
+export { KEEP_FRAMES, type TextureData, type TextureHandle, Textures } from "./textures.js";

package/src/keeps.ts

@@ -0,0 +1,21 @@
+import { type Handle, Registry } from "./registry.js";
+
+/** A kept output as its owner holds it: its id, and the generation the id had. */
+export type KeepHandle = Handle;
+
+/** Frames a kept output may go undrawn before it is let go of, unless its owner says otherwise. */
+export const KEEP_IDLE_FRAMES = 60;
+
+/**
+ * The layers kept from one frame to the next, as Flash keeps a filtered
+ * object's bitmap while nothing in it changed: an owner adds one, names it
+ * on the layer whose output it keeps, and composites it again while it
+ * stands (SceneList.keptLayer). The backend holds their targets, and lets
+ * go of those removed; what goes undrawn for KEEP_IDLE_FRAMES is removed.
+ */
+export class Keeps extends Registry {
+  /** A kept output's id, let go of once undrawn for `idle` frames. */
+  add(idle = KEEP_IDLE_FRAMES): KeepHandle {
+    return this.hold(idle);
+  }
+}

package/src/kernel-shaders.ts

@@ -0,0 +1,375 @@
+// Pixel Bender kernels where Flash draws with them, as fragment shaders
+// around a kernel's GLSL (the player's scene/pixel-bender-glsl.ts, which
+// defines `vec4 pbKernel(vec2 outCoord)` and calls `pbNearest<t>` and
+// `pbLinear<t>` for each texture `t` it samples). What is here is how
+// each use reads its images and writes what the kernel gives, as adl
+// does (docs/architecture/bitmaps.md, "Pixel Bender"): an image read as
+// its premultiplied bytes times the float nearest 1/255, linearly in
+// 256ths with each step's byte cut down; floats as they are, linearly in
+// the same 256ths; as the CPU interpreter reads them. GLSL ES 3, each a
+// whole fragment shader.
+
+/** A byte's float as adl samples one: times the float nearest 1/255, not divided. */
+const BYTE = "0.003921568859368563";
+
+/** Each fragment shader's first lines, so that one is the whole source a program cache keys by. */
+const HEADER = "#version 300 es\nprecision highp float;\n";
+
+/** The most images a kernel's program binds besides its layer's: one with more is not drawn. */
+export const KERNEL_IMAGES = 8;
+
+/**
+ * An image a kernel samples: its texture number; whether it is the
+ * filtered layer, else a texture of its own; and whether its texels are
+ * floats (RGBA32F), else bytes. For a blend, a layer's image is what is
+ * below where `back`, else the layer blended.
+ */
+export interface KernelImage {
+  texture: number;
+  layer: boolean;
+  float: boolean;
+  back?: boolean;
+}
+
+/** Whether `images` bind no more textures of their own than a program takes (KERNEL_IMAGES). */
+export function kernelImagesFit(images: readonly KernelImage[]): boolean {
+  let own = 0;
+  for (let k = 0; k < images.length; k++) {
+    if (!images[k].layer) {
+      own++;
+    }
+  }
+
+  return own <= KERNEL_IMAGES;
+}
+
+/**
+ * Precision, as ints default to mediump in a fragment shader; a texel
+ * coordinate as a texel's index, NaN as 0 and far past the edges kept in
+ * int's range; a texel's bytes from 0 to 255, read exactly from the 8-bit
+ * texture; and a kernel's output as adl writes it into a bitmap: clamped,
+ * NaN as 0, rounded to a byte a half to the even, each colour at most its
+ * alpha.
+ */
+const PRELUDE = `precision highp int;
+precision highp sampler2D;
+ivec2 pbFloor(vec2 x) {
+  x = mix(x, vec2(0.0), isnan(x));
+  return ivec2(clamp(floor(x), -1.0e9, 1.0e9));
+}
+vec4 pbBytes(vec4 v) {
+  return floor(v * 255.0 + 0.5);
+}
+vec4 pbOutput(vec4 c) {
+  c = mix(vec4(0.0), min(c, 1.0), greaterThan(c, vec4(0.0)));
+  c = roundEven(c * 255.0) / 255.0;
+  return vec4(min(c.rgb, c.a), c.a);
+}
+`;
+
+/**
+ * Image `t`'s sampling from `pbTexel<t>`, its texel at an index (bytes from
+ * 0 to 255, or floats), at the texel coordinates `at` gives for a kernel's.
+ */
+function sampling(t: number, at: string, float: boolean): string {
+  if (float) {
+    // The interpreter's floats: their texels as they are, linearly in 256ths, nothing cut.
+    return `vec4 pbNearest${t}(vec2 p) {
+  return pbTexel${t}(pbFloor(${at}));
+}
+vec4 pbLinear${t}(vec2 p) {
+  vec2 f = ${at} - 0.5;
+  vec2 below = floor(f);
+  vec2 w = floor((f - below) * 256.0 + 0.5) / 256.0;
+  w = mix(w, vec2(0.0), isnan(w));
+  ivec2 a = pbFloor(below);
+  vec4 row0 = pbTexel${t}(a) * (1.0 - w.x) + pbTexel${t}(a + ivec2(1, 0)) * w.x;
+  vec4 row1 = pbTexel${t}(a + ivec2(0, 1)) * (1.0 - w.x) + pbTexel${t}(a + 1) * w.x;
+  return row0 * (1.0 - w.y) + row1 * w.y;
+}
+`;
+  }
+
+  return `vec4 pbNearest${t}(vec2 p) {
+  return pbTexel${t}(pbFloor(${at})) * ${BYTE};
+}
+vec4 pbLinear${t}(vec2 p) {
+  vec2 f = ${at} - 0.5;
+  vec2 below = floor(f);
+  vec2 w = floor((f - below) * 256.0 + 0.5);
+  w = mix(w, vec2(0.0), isnan(w));
+  ivec2 a = pbFloor(below);
+  vec4 row0 = floor((pbTexel${t}(a) * (256.0 - w.x) + pbTexel${t}(a + ivec2(1, 0)) * w.x) / 256.0);
+  vec4 row1 = floor((pbTexel${t}(a + ivec2(0, 1)) * (256.0 - w.x) + pbTexel${t}(a + 1) * w.x) / 256.0);
+  return floor((row0 * (256.0 - w.y) + row1 * w.y) / 256.0) * ${BYTE};
+}
+`;
+}
+
+/**
+ * Image `t`, a texture of its own (`pbImage<t>`), clamped to its edges as
+ * adl clamps a kernel's input: its sampler, its texels and its sampling, in
+ * its own pixels.
+ */
+function ownImage(t: number, float: boolean): string {
+  const texel = `texelFetch(pbImage${t}, clamp(at, ivec2(0), size - 1), 0)`;
+  return `uniform sampler2D pbImage${t};
+vec4 pbTexel${t}(ivec2 at) {
+  ivec2 size = textureSize(pbImage${t}, 0);
+  return ${float ? texel : `pbBytes(${texel})`};
+}
+${sampling(t, "p", float)}`;
+}
+
+/**
+ * The kernel's GLSL with what every use puts round it: PRELUDE, then each
+ * image, by `layerTexel` for the layer's, its texel at an index, and
+ * ownImage for the others; `layerAt` takes a kernel's coordinate to the
+ * layer's texels.
+ */
+export function withImages(
+  kernel: string,
+  images: readonly KernelImage[],
+  layerTexel: (t: number, back: boolean) => string,
+  layerAt: string,
+): string {
+  const parts = [PRELUDE];
+  for (const { texture: t, layer, float, back } of images) {
+    parts.push(
+      layer
+        ? `${layerTexel(t, back ?? false)}\n${sampling(t, layerAt, false)}`
+        : ownImage(t, float),
+    );
+  }
+
+  parts.push(kernel);
+  return parts.join("\n");
+}
+
+/** The most kernels whose shaders a use keeps made (madeOnce), emptied when more come. */
+const MADE = 64;
+
+/** A kernel's shader for its images, made once: a frame asks for it again on each of its uses. */
+export function madeOnce(
+  made: Map<string, Map<string, string>>,
+  kernel: string,
+  images: readonly KernelImage[],
+  make: () => string,
+): string {
+  let key = "";
+  for (let k = 0; k < images.length; k++) {
+    const i = images[k];
+    key += `${i.texture}${i.layer ? (i.back ? "B" : "L") : ""}${i.float ? "F" : ""},`;
+  }
+
+  let byImages = made.get(kernel);
+  if (!byImages) {
+    if (made.size >= MADE) {
+      made.clear();
+    }
+
+    byImages = new Map();
+    made.set(kernel, byImages);
+  }
+
+  let source = byImages.get(key);
+  if (source === undefined) {
+    source = make();
+    byImages.set(key, source);
+  }
+
+  return source;
+}
+
+const madeFilters = new Map<string, Map<string, string>>();
+
+/**
+ * A ShaderFilter's pass (filter-plan.ts, KERNEL_PASS), run as the
+ * filters' other passes are (webgl/filters.ts): the kernel's output over
+ * the input's frame, `outCoord` its pixel's centre in stage pixels from
+ * the corner of the bitmap the filter reads, `uKernelAt.xy` texels in from
+ * the frame's, which starts at `uOutputAt` in the target drawn into, at
+ * `uKernelAt.z` texels a stage pixel. The layer's image is the input
+ * (uTexture, within uTextureRect), transparent past the frame,
+ * `uKernelFrame` texels, as adl reads a filter's source; the others clamp
+ * to their edges. The output is as adl writes it (pbOutput), and
+ * transparent outside `uKernelRegion`, that bitmap grown by the filter's
+ * extensions, in stage pixels.
+ */
+export function filterKernel(kernel: string, images: readonly KernelImage[]): string {
+  return madeOnce(madeFilters, kernel, images, () => filterSource(kernel, images));
+}
+
+function filterSource(kernel: string, images: readonly KernelImage[]): string {
+  const layer = (t: number) => `vec4 pbTexel${t}(ivec2 at) {
+  if (any(lessThan(at, ivec2(0))) || any(greaterThanEqual(at, ivec2(uKernelFrame)))) {
+    return vec4(0.0);
+  }
+  return pbBytes(texelFetch(uTexture, ivec2(uTextureRect.xy) + at, 0));
+}`;
+  return `${HEADER}in vec2 vTextureCoord;
+out vec4 finalColor;
+uniform sampler2D uTexture;
+uniform highp vec4 uInputPixel;
+uniform vec4 uTextureRect;
+uniform vec3 uKernelAt;
+uniform vec2 uKernelFrame;
+uniform vec4 uKernelRegion;
+uniform vec2 uOutputAt;
+${withImages(kernel, images, layer, "p * uKernelAt.z + uKernelAt.xy")}
+void main(void) {
+  // From the fragment's centre, exact, where an interpolated coordinate is a hair off a half.
+  vec2 outCoord = (gl_FragCoord.xy - uOutputAt - uKernelAt.xy) / uKernelAt.z;
+  if (any(lessThan(outCoord, uKernelRegion.xy)) || any(greaterThanEqual(outCoord, uKernelRegion.zw))) {
+    finalColor = vec4(0.0);
+    return;
+  }
+  finalColor = pbOutput(pbKernel(outCoord));
+}
+`;
+}
+
+const madeBlends = new Map<string, Map<string, string>>();
+
+/**
+ * A blend shader's composite (webgl/composite.ts), drawn as the composite
+ * program is (programs.ts, compositeFragment), its uniforms the same: as
+ * adl runs one, a pixel at a time, each where the layer covers anything
+ * and nothing where it does not, or over its whole rectangle (uWhole),
+ * the kernel's coordinate (0.5, 0.5) and its first two inputs that pixel
+ * of what is below and of the layer, coloured, whatever coordinate it
+ * samples them at; its result in place of what was below, as adl writes
+ * it (pbOutput). `rows` is the colour transform's reading of uRows
+ * (programs.ts, LAYER_COLOR).
+ */
+export function blendKernel(kernel: string, images: readonly KernelImage[], rows: string): string {
+  return madeOnce(madeBlends, kernel, images, () => blendSource(kernel, images, rows));
+}
+
+function blendSource(kernel: string, images: readonly KernelImage[], rows: string): string {
+  const pixel = (t: number, back: boolean) => `vec4 pbTexel${t}(ivec2 at) {
+  return pbBytes(${back ? "pbBack" : "pbFront"});
+}`;
+  return `${HEADER}uniform sampler2D uLayer;
+uniform sampler2D uBack;
+uniform highp sampler2D uRows;
+uniform int uRow;
+uniform ivec2 uOffset;
+uniform bool uFlip;
+uniform ivec2 uBackOffset;
+uniform bool uWhole;
+out vec4 finalColor;
+vec4 pbFront;
+vec4 pbBack;
+${withImages(kernel, images, pixel, "p")}
+void main(void) {
+  ivec2 frag = ivec2(gl_FragCoord.xy);
+  ivec2 at = ivec2(frag.x - uOffset.x, uFlip ? uOffset.y - frag.y : frag.y - uOffset.y);
+  vec4 front = texelFetch(uLayer, at, 0);
+${rows}
+  pbBack = texelFetch(uBack, frag - uBackOffset, 0);
+  if (!uWhole && pbBytes(front).a == 0.0) {
+    finalColor = pbBack;
+    return;
+  }
+  pbFront = front;
+  finalColor = pbOutput(pbKernel(vec2(0.5)));
+}
+`;
+}
+
+/**
+ * The layer shrunk to a texel a stage pixel for a kernel run once a pixel
+ * (filter-plan.ts): each output texel the mean of the `uDown.x` by
+ * `uDown.x` texels of the pixel it stands for, the grid from `uDown.yz`
+ * texels past the input's corner, which may be less than 0; the texels of
+ * a pixel past the frame, `uKernelFrame`, left out of the mean.
+ */
+export const PIXELS_DOWN = `${HEADER}precision highp int;
+in vec2 vTextureCoord;
+out vec4 finalColor;
+uniform sampler2D uTexture;
+uniform vec4 uTextureRect;
+uniform vec3 uDown;
+uniform vec2 uKernelFrame;
+uniform vec2 uOutputAt;
+void main(void) {
+  int n = int(uDown.x);
+  ivec2 from = ivec2(gl_FragCoord.xy - uOutputAt) * n + ivec2(uDown.yz);
+  ivec2 frame = ivec2(uKernelFrame);
+  vec4 sum = vec4(0.0);
+  float count = 0.0;
+  for (int j = 0; j < 16; j++) {
+    if (j >= n) { break; }
+    for (int i = 0; i < 16; i++) {
+      if (i >= n) { break; }
+      ivec2 at = from + ivec2(i, j);
+      if (all(greaterThanEqual(at, ivec2(0))) && all(lessThan(at, frame))) {
+        sum += texelFetch(uTexture, ivec2(uTextureRect.xy) + at, 0);
+        count += 1.0;
+      }
+    }
+  }
+  finalColor = count > 0.0 ? sum / count : vec4(0.0);
+}
+`;
+
+/**
+ * A kernel's output, run a texel a stage pixel, drawn back over the
+ * layer's frame: each texel its pixel's, the grid as PIXELS_DOWN had it.
+ */
+export const PIXELS_BACK = `${HEADER}precision highp int;
+in vec2 vTextureCoord;
+out vec4 finalColor;
+uniform sampler2D uTexture;
+uniform vec4 uTextureRect;
+uniform vec3 uDown;
+uniform vec2 uOutputAt;
+void main(void) {
+  ivec2 at = (ivec2(gl_FragCoord.xy - uOutputAt) - ivec2(uDown.yz)) / int(uDown.x);
+  at = clamp(at, ivec2(0), ivec2(uTextureRect.zw) - 1);
+  finalColor = texelFetch(uTexture, ivec2(uTextureRect.xy) + at, 0);
+}
+`;
+
+const madeFills = new Map<string, Map<string, string>>();
+
+/**
+ * A shader fill's program, after the mesh's vertex shader (programs.ts,
+ * meshVertex), which carries the kernel's coordinates in vUVT with a depth
+ * of 1: the kernel run once a pixel of Flash's, at its centre (uFrag as the
+ * mesh's has it), its images clamped to their edges; its colours left
+ * past its alpha, as adl composites them, but under a colour transform,
+ * which takes them straight.
+ */
+export function fillKernel(kernel: string, images: readonly KernelImage[]): string {
+  return madeOnce(madeFills, kernel, images, () => fillSource(kernel, images));
+}
+
+function fillSource(kernel: string, images: readonly KernelImage[]): string {
+  return `${HEADER}in vec3 vUVT;
+flat in vec4 vMul;
+flat in vec4 vAdd;
+uniform vec4 uFrag;
+out vec4 finalColor;
+${withImages(kernel, images, () => "", "p")}
+void main(void) {
+  float pixel = uFrag.w;
+  vec2 f = vec2(gl_FragCoord.x + uFrag.x, uFrag.y + uFrag.z * gl_FragCoord.y);
+  vec2 centre = (floor(f / pixel) + 0.5) * pixel;
+  vec3 at = vUVT + dFdx(vUVT) * (centre.x - f.x) + dFdy(vUVT) * ((centre.y - f.y) * uFrag.z);
+  vec4 c = pbKernel(at.xy / at.z);
+  c = mix(vec4(0.0), min(c, 1.0), greaterThan(c, vec4(0.0)));
+  if (vMul == vec4(1.0) && vAdd == vec4(0.0)) {
+    finalColor = c;
+    return;
+  }
+  if (c.a == 0.0) {
+    finalColor = vec4(0.0);
+    return;
+  }
+  vec4 s = clamp(vec4(c.rgb / c.a, c.a) * vMul + vAdd, 0.0, 1.0);
+  finalColor = vec4(s.rgb * s.a, s.a);
+}
+`;
+}