react-native-webrtc-kaleidoscope 1.0.0 → 2.0.0

package/android/src/main/java/com/simiancraft/kaleidoscope/gpu/FramePipeline.kt

@@ -0,0 +1,158 @@
+// One-frame GPU pipeline + fence handoff, shared by all GLES effect factories.
+//
+// THE PROBLEM IT SOLVES (R3 frame-pipelining):
+// The effect factories used to call glFinish() at the end of process(),
+// a full CPU<->GPU sync that blocks the capture thread until every draw call
+// for THIS frame has completed on the GPU, serializing CPU and GPU. At 720p
+// with a multi-pass blur that stall is the dominant cost on the capture
+// thread.
+//
+// THE FIX:
+// Defer the handoff by exactly one frame. Each process() call:
+//   1. Renders frame N into a fresh output texture (caller's job).
+//   2. Hands that texture + a GL fence to enqueue().
+//   3. enqueue() returns frame N-1's texture, whose fence it first waits on.
+//      Because frame N-1's GPU work had a whole frame interval to finish, the
+//      wait is almost always a no-op (GL_ALREADY_SIGNALED); the capture thread
+//      no longer blocks on the just-submitted frame's GPU work.
+// The very first frame has no predecessor, so enqueue() returns null and the
+// caller forwards the original frame for exactly one frame.
+//
+// One frame of latency is acceptable for this use case (matches the existing
+// one-frame latency on mask updates; see Mask.kt).
+//
+// FENCE LIFECYCLE:
+// One fence per in-flight frame. At steady state the pipeline holds exactly
+// one PendingFrame (one texture, one fence). enqueue() waits on and deletes
+// the predecessor's fence, then stores the successor's. dispose() drains the
+// last pending frame (deleting its texture + fence) for processors that ever
+// get a teardown hook.
+//
+// glFenceSync / glClientWaitSync / glDeleteSync and the GL_SYNC_* /
+// GL_ALREADY_SIGNALED / GL_CONDITION_SATISFIED constants are all core GLES 3.0
+// (android.opengl.GLES30), so this needs no extension probing.
+
+package com.simiancraft.kaleidoscope.gpu
+
+import android.opengl.GLES30
+import android.util.Log
+
+internal class FramePipeline {
+  /**
+   * A rendered-but-not-yet-handed-off output texture and the fence that
+   * signals when its GPU work has completed. The caller has already detached
+   * and freed the FBO; only the color texture survives here.
+   */
+  private class PendingFrame(
+    val textureId: Int,
+    val width: Int,
+    val height: Int,
+    val rotation: Int,
+    val timestampNs: Long,
+    val fence: Long,
+    // Wall-clock at the moment this frame's GPU work was submitted (the
+    // enqueue() call that fenced it). Used only when debug timing is on, to
+    // report GPU-completion latency a frame late without adding a blocking
+    // wait of its own.
+    val submitNanos: Long,
+  )
+
+  private var pending: PendingFrame? = null
+
+  /**
+   * Insert a sync fence into the GL command stream right after the caller's
+   * final draw, then enqueue the freshly rendered texture and return the
+   * PREVIOUS frame's texture (now GPU-complete) for handoff downstream.
+   *
+   * Must be called on the GL thread after the output FBO has been detached
+   * and deleted (so only `textureId` remains live).
+   *
+   * @return a [Ready] describing the previous frame to wrap in a
+   *   TextureBufferImpl, or null on the first frame (caller forwards original).
+   */
+  fun enqueue(
+    textureId: Int,
+    width: Int,
+    height: Int,
+    rotation: Int,
+    timestampNs: Long,
+    debugTiming: Boolean = false,
+    timingLabel: String = "",
+  ): Ready? {
+    // Fence the current frame's GPU work. glFlush guarantees the fence is
+    // actually in the command queue so a later glClientWaitSync without the
+    // flush-commands bit can still observe it.
+    val fence = GLES30.glFenceSync(GLES30.GL_SYNC_GPU_COMMANDS_COMPLETE, 0)
+    GLES30.glFlush()
+
+    val submitNanos = if (debugTiming) System.nanoTime() else 0L
+    val prev = pending
+    pending = PendingFrame(textureId, width, height, rotation, timestampNs, fence, submitNanos)
+
+    if (prev == null) return null
+
+    // Wait on the PREVIOUS frame's fence. It has had a full frame interval to
+    // complete, so this is almost always GL_ALREADY_SIGNALED. The timeout is a
+    // backstop against a stalled GPU; we still hand the texture off afterward
+    // because the consumer's EGL context shares ours and would otherwise read
+    // a torn texture. Pass the flush-commands bit defensively in case the
+    // predecessor's flush has not yet been issued on this context.
+    val waitResult = GLES30.glClientWaitSync(
+      prev.fence,
+      GLES30.GL_SYNC_FLUSH_COMMANDS_BIT,
+      FENCE_TIMEOUT_NS,
+    )
+    if (waitResult == GLES30.GL_TIMEOUT_EXPIRED || waitResult == GLES30.GL_WAIT_FAILED) {
+      Log.w(TAG, "fence wait returned 0x${waitResult.toString(16)}; handing off anyway")
+    }
+    GLES30.glDeleteSync(prev.fence)
+
+    if (debugTiming && prev.submitNanos != 0L) {
+      // CPU-observed latency from the predecessor's GPU submit to the point
+      // its fence resolved (now). EXT_disjoint_timer_query (GL_TIME_ELAPSED_EXT
+      // + glGetQueryObjectui64v) has no android.opengl Java binding, so this
+      // wall-clock delta is the fallback; it measures submit->complete latency
+      // rather than pure on-GPU time, but reads a frame late exactly as a timer
+      // query would and adds no extra blocking wait.
+      val elapsedMs = (System.nanoTime() - prev.submitNanos) / 1_000_000.0
+      Log.d(PERF_TAG, "$timingLabel gpu submit->complete ~%.2f ms (nanoTime fallback)".format(elapsedMs))
+    }
+
+    return Ready(prev.textureId, prev.width, prev.height, prev.rotation, prev.timestampNs)
+  }
+
+  /**
+   * Free the last un-handed-off frame's texture and fence. Call on the GL
+   * thread from a processor teardown path. (No VideoFrameProcessor teardown
+   * hook exists today, mirroring Mask.release; provided for correctness.)
+   */
+  fun dispose() {
+    val p = pending ?: return
+    pending = null
+    try {
+      GLES30.glDeleteSync(p.fence)
+      GLES30.glDeleteTextures(1, intArrayOf(p.textureId), 0)
+    } catch (t: Throwable) {
+      Log.w(TAG, "dispose encountered an error; resources may leak", t)
+    }
+  }
+
+  /** The previous frame's texture + metadata, ready to wrap downstream. */
+  class Ready(
+    val textureId: Int,
+    val width: Int,
+    val height: Int,
+    val rotation: Int,
+    val timestampNs: Long,
+  )
+
+  companion object {
+    private const val TAG = "Kaleidoscope.Pipeline"
+    private const val PERF_TAG = "Perf"
+
+    // 2 ms. A signaled fence returns immediately; this only bounds the
+    // pathological case where the predecessor's GPU work has not finished a
+    // full frame later. glClientWaitSync takes nanoseconds.
+    private const val FENCE_TIMEOUT_NS = 2_000_000L
+  }
+}

package/android/src/main/java/com/simiancraft/kaleidoscope/gpu/GlProgram.kt

@@ -48,6 +48,11 @@ internal class GlProgram(vertexSource: String, fragmentSource: String) {
     GLES30.glUniform2f(uniformLocation(name), x, y)
   }
 
+  /** Upload a column-major 2x2 (4 floats) to a mat2 uniform. */
+  fun setMat2(name: String, columnMajor: FloatArray) {
+    GLES30.glUniformMatrix2fv(uniformLocation(name), 1, false, columnMajor, 0)
+  }
+
   fun delete() {
     GLES30.glDeleteProgram(id)
   }

package/android/src/main/java/com/simiancraft/kaleidoscope/gpu/Ingest.kt

@@ -0,0 +1,123 @@
+// Ingest: the ONE place camera orientation is normalized.
+//
+// ===== Why this exists (read before "fixing" any effect's orientation) =====
+//
+// The camera hands us an OES external texture plus a 3x3 `transformMatrix`. That
+// matrix bakes in sensor-correction, the selfie mirror, and crop, but it does
+// NOT apply the display rotation: on a portrait phone the OES->2D passthrough,
+// fed only `transformMatrix`, still lands a RAW LANDSCAPE frame in the FBO
+// (device-confirmed 2026-05-24). Every effect then had to re-correct that
+// rotation itself (transform ops conjugated in buffer space, the background
+// composited pre-rotated). That per-effect cascade is what this module removes.
+//
+// `composedTexMatrix` folds the display rotation INTO the texture matrix, so the
+// single OES->2D pass that BlurFactory, BackgroundImageFactory, and
+// TransformFactory each run now lands a DISPLAY-UPRIGHT frame in the FBO. The
+// FBO is sized with `displayWidth` / `displayHeight` (buffer dims swapped on a
+// 90/270 frame), so the upright image fills it without clamping.
+//
+// After ingest the "original 2D" FBO is canonical: every downstream pass
+// (transform mat2, background cover-fit, blur, the mask downsample/MediaPipe) reads
+// an already-upright square [0,1] UV space and applies NO further orientation
+// correction. Each factory therefore returns the frame with rotation 0; the
+// pixels are already where the encoder/renderer expects an upright frame.
+//
+// ===== The composition =====
+//
+// The OES frag samples `uv = (uTexMatrix * vec4(vUv, 0, 1)).xy`, where `vUv`
+// runs [0,1] across the destination (now display-upright) quad. We compose
+//   M' = transformMatrix * Rot(theta about 0.5)
+// so a destination display-UV is first rotated back into the pre-rotation space
+// `transformMatrix` was authored against, then mapped to buffer UV. theta is
+// `frame.rotation` scaled by ROTATION_DIRECTION.
+//
+// ===== Calibration (device verifies; may need one literal edit) =====
+//
+// ROTATION_DIRECTION below is the single sign that decides whether the display
+// rotation is applied as +R or -R. If the person/background comes out rotated
+// the wrong way (e.g. 90 off, or upside down on a 180 device), flip this sign.
+// Nothing else in the orientation story should ever need touching.
+
+package com.simiancraft.kaleidoscope.gpu
+
+internal object Ingest {
+  // The ONE orientation calibration knob. +1f applies the display rotation as
+  // -frame.rotation about center (the geometric inverse, which is what maps a
+  // display-upright destination UV back into the camera's pre-rotation UV
+  // space); -1f applies +frame.rotation. Flip this sign if a portrait-device
+  // screenshot shows the whole frame rotated the wrong way. This is the only
+  // place orientation direction is decided.
+  private const val ROTATION_DIRECTION = 1f
+
+  /** Display width for a buffer of [bufferWidth] x [bufferHeight] at [frameRotation]. */
+  fun displayWidth(bufferWidth: Int, bufferHeight: Int, frameRotation: Int): Int =
+    if (swaps(frameRotation)) bufferHeight else bufferWidth
+
+  /** Display height for a buffer of [bufferWidth] x [bufferHeight] at [frameRotation]. */
+  fun displayHeight(bufferWidth: Int, bufferHeight: Int, frameRotation: Int): Int =
+    if (swaps(frameRotation)) bufferWidth else bufferHeight
+
+  /** Does this frame rotation swap buffer dims into display dims? */
+  private fun swaps(frameRotation: Int): Boolean {
+    val r = normalize(frameRotation)
+    return r == 90 || r == 270
+  }
+
+  /**
+   * Column-major 4x4 for the OES->2D pass's `uTexMatrix`, composing the camera
+   * [transformMatrix] with the display rotation derived from [frameRotation].
+   * Feed the result straight to glUniformMatrix4fv (already flat, length 16).
+   *
+   * M' = transformMatrix4 * Rot(theta about 0.5), where
+   * theta = ROTATION_DIRECTION * frameRotation degrees.
+   */
+  fun composedTexMatrix(
+    transformMatrix: android.graphics.Matrix,
+    frameRotation: Int,
+  ): FloatArray {
+    val base = Egl.matrixToGl(transformMatrix)
+    val rot = rotationAboutCenter(ROTATION_DIRECTION * normalize(frameRotation).toFloat())
+    return multiplyColumnMajor4(base, rot)
+  }
+
+  /**
+   * Column-major 4x4 that rotates the xy UV plane by [degrees] about (0.5, 0.5),
+   * leaving z and w untouched. Translate-to-center, rotate, translate-back.
+   */
+  private fun rotationAboutCenter(degrees: Float): FloatArray {
+    val rad = Math.toRadians(degrees.toDouble())
+    val c = Math.cos(rad).toFloat()
+    val s = Math.sin(rad).toFloat()
+    // 2D rotation about 0.5 in (x, y):
+    //   x' = c*(x-0.5) - s*(y-0.5) + 0.5
+    //   y' = s*(x-0.5) + c*(y-0.5) + 0.5
+    // As an affine 4x4 (column-major): linear block in the upper-left 2x2,
+    // translation in the last column.
+    val tx = 0.5f - 0.5f * c + 0.5f * s
+    val ty = 0.5f - 0.5f * s - 0.5f * c
+    return floatArrayOf(
+      c, s, 0f, 0f,
+      -s, c, 0f, 0f,
+      0f, 0f, 1f, 0f,
+      tx, ty, 0f, 1f,
+    )
+  }
+
+  /** a * b, both column-major 4x4 flat arrays (length 16). Returns a*b. */
+  private fun multiplyColumnMajor4(a: FloatArray, b: FloatArray): FloatArray {
+    val out = FloatArray(16)
+    for (col in 0 until 4) {
+      for (row in 0 until 4) {
+        var sum = 0f
+        for (k in 0 until 4) {
+          // column-major index: element(row, k) = a[k*4 + row]
+          sum += a[k * 4 + row] * b[col * 4 + k]
+        }
+        out[col * 4 + row] = sum
+      }
+    }
+    return out
+  }
+
+  private fun normalize(deg: Int): Int = ((deg % 360) + 360) % 360
+}

package/android/src/main/java/com/simiancraft/kaleidoscope/gpu/Orientation.kt

@@ -0,0 +1,58 @@
+// Orientation: maps a screen-space reorientation op to a column-major 2x2 (the
+// `uUvTransform` mat2 transform.frag multiplies into UV about the 0.5 center).
+// All four transform ops (flip-x, flip-y, rotate-cw, rotate-ccw) call mat2For;
+// none re-derive anything.
+//
+// ===== Pure screen space (read before "fixing") =====
+//
+// Camera orientation is normalized ONCE upstream, in Ingest: the OES->2D
+// passthrough folds the display rotation into the texture matrix, so by the
+// time TRANSFORM_FRAG samples the "original 2D" FBO it is already
+// DISPLAY-UPRIGHT. The op matrices are therefore pure SCREEN SPACE and do NOT
+// depend on frame.rotation:
+//   flip-x (screen-horizontal mirror, head stays up) -> negate U
+//   flip-y (screen-vertical flip, upside down)        -> negate V
+//   rotate-cw / rotate-ccw                            -> swap axes (+ a sign)
+//
+// There is no per-effect rotation/flip compensation anywhere; if a screenshot
+// shows the WHOLE frame rotated wrong, that is an ingest problem — flip
+// Ingest.ROTATION_DIRECTION, do not add a correction here.
+//
+// mat2 column-major convention: floatArrayOf(a, b, c, d) builds the GLSL mat2
+// whose columns are (a,b) and (c,d), i.e. M * v = (a*v.x + c*v.y, b*v.x +
+// d*v.y). UV is taken about 0.5, so a sign flip on a column negates that output
+// axis; swapping the columns' nonzero entries transposes (rotates) the axes.
+
+package com.simiancraft.kaleidoscope.gpu
+
+// Public (not internal) because TransformFactory is a public registered factory
+// and takes an Op in its constructor; an internal Op would leak through a public
+// signature.
+object Orientation {
+  /** Screen-space reorientation operations the transform effect exposes. */
+  enum class Op { FLIP_X, FLIP_Y, ROTATE_CW, ROTATE_CCW }
+
+  /** Does the op swap output dimensions (w x h -> h x w)? True for rotations. */
+  fun swapsDimensions(op: Op): Boolean = op == Op.ROTATE_CW || op == Op.ROTATE_CCW
+
+  /**
+   * Column-major 2x2 for glUniformMatrix2fv. The input frame is already
+   * display-upright (see Ingest), so this is rotation-independent.
+   *
+   * flip-x: negate U -> column 0 = (-1, 0), column 1 = (0, 1).
+   * flip-y: negate V -> column 0 = ( 1, 0), column 1 = (0, -1).
+   * rotate-cw / rotate-ccw: screen 90-degree rotations. Device-confirmed on the
+   *   clean sampled space (both flips correct on both platforms, so the matrix->
+   *   screen map is axis-aligned and orientation-preserving): columns (0,-1),(1,0)
+   *   rendered COUNTER-clockwise, so clockwise is the inverse, columns (0,1),(-1,0).
+   */
+  fun mat2For(op: Op): FloatArray =
+    when (op) {
+      Op.FLIP_X -> floatArrayOf(-1f, 0f, 0f, 1f)
+      Op.FLIP_Y -> floatArrayOf(1f, 0f, 0f, -1f)
+      // Device-confirmed: columns (0,-1),(1,0) rendered CCW on the clean space,
+      // so clockwise is its inverse, columns (0,1),(-1,0).
+      Op.ROTATE_CW -> floatArrayOf(0f, 1f, -1f, 0f)
+      Op.ROTATE_CCW -> floatArrayOf(0f, -1f, 1f, 0f)
+    }
+}

package/android/src/main/java/com/simiancraft/kaleidoscope/gpu/Shaders.kt

@@ -15,15 +15,10 @@ internal object Shaders {
   //   1 -> (2,0) -> ( 1,-1), uv (1,0)
   //   2 -> (0,2) -> (-1, 1), uv (0,1)
   //   3 -> (2,2) -> ( 1, 1), uv (1,1)
-  const val PASSTHROUGH_VERT = """#version 300 es
-precision highp float;
-out vec2 vUv;
-void main() {
-  vec2 p = vec2(float((gl_VertexID & 1) << 1), float(gl_VertexID & 2));
-  vUv = p * 0.5;
-  gl_Position = vec4(p - 1.0, 0.0, 1.0);
-}
-"""
+  // Canonical source: shaders/passthrough.vert. Generated into
+  // ShadersGenerated by `bun run build:shaders`; delegated here so call sites
+  // keep using Shaders.PASSTHROUGH_VERT.
+  val PASSTHROUGH_VERT = ShadersGenerated.PASSTHROUGH_VERT
 
   // Sample the OES external camera texture and emit as 2D RGBA. The first
   // pass of every effect runs this so subsequent passes can use sampler2D.
@@ -56,24 +51,10 @@ void main() {
   // uAxis is (1/width, 0) for the horizontal pass and (0, 1/height) for the
   // vertical pass. uOffsets[0] is the center tap (zero); offsets are in
   // pixel units, so the shader multiplies by uAxis to convert to UV space.
-  const val BLUR_FRAG = """#version 300 es
-precision mediump float;
-uniform sampler2D uTex;
-uniform vec2 uAxis;
-uniform float uWeights[9];
-uniform float uOffsets[9];
-in highp vec2 vUv;
-out vec4 oColor;
-void main() {
-  vec4 color = texture(uTex, vUv) * uWeights[0];
-  for (int i = 1; i < 9; i++) {
-    vec2 off = uAxis * uOffsets[i];
-    color += texture(uTex, vUv + off) * uWeights[i];
-    color += texture(uTex, vUv - off) * uWeights[i];
-  }
-  oColor = color;
-}
-"""
+  // Canonical source: shaders/blur.frag. Generated into ShadersGenerated by
+  // `bun run build:shaders`; delegated here. BlurFactory computes the 9 weights
+  // and offsets from sigma on the CPU and uploads the arrays each program use.
+  val BLUR_FRAG = ShadersGenerated.BLUR_FRAG
 
   // Composite: mix(background, original, mask). One shader, byte-identical
   // to src/web/shaders.ts's COMPOSITE_FRAG_SRC.
@@ -102,28 +83,19 @@ void main() {
   // blurred copy. For background-image, the caller computes them to perform
   // a cover-fit center crop so an arbitrarily-shaped image fills the output
   // without distortion.
-  const val COMPOSITE_FRAG = """#version 300 es
-precision mediump float;
-uniform sampler2D uOriginal;
-uniform sampler2D uBackground;
-uniform sampler2D uMask;
-uniform vec2 uBgUvScale;
-uniform vec2 uBgUvOffset;
-uniform vec2 uMaskUvScale;
-uniform vec2 uMaskUvOffset;
-uniform float uMaskLo;
-uniform float uMaskHi;
-in highp vec2 vUv;
-out vec4 oColor;
-void main() {
-  vec2 maskUv = vUv * uMaskUvScale + uMaskUvOffset;
-  float raw = texture(uMask, maskUv).r;
-  float safeHi = max(uMaskHi, uMaskLo + 0.001);
-  float m = smoothstep(uMaskLo, safeHi, raw);
-  vec3 orig = texture(uOriginal, vUv).rgb;
-  vec2 bgUv = clamp(vUv * uBgUvScale + uBgUvOffset, 0.0, 1.0);
-  vec3 bg = texture(uBackground, bgUv).rgb;
-  oColor = vec4(mix(bg, orig, m), 1.0);
-}
-"""
+  // Canonical source: shaders/composite.frag. Generated into ShadersGenerated
+  // by `bun run build:shaders`; delegated here. The per-platform mask/bg
+  // orientation differences live in the uniforms the host sets (see above),
+  // not in the shader, so the same generated body serves every runtime.
+  val COMPOSITE_FRAG = ShadersGenerated.COMPOSITE_FRAG
+
+  // Transform: a single-pass geometric reorientation (axis flip or 90-degree
+  // rotation) driven by the uUvTransform mat2 the host computes from a pure
+  // screen-space op via Orientation.mat2For. One shader serves all four ops
+  // (flip-x, flip-y, rotate-cw, rotate-ccw); the input is already
+  // display-upright (camera orientation is normalized once in Ingest), so no
+  // rotation correction happens here.
+  // Canonical source: shaders/transform.frag. Generated into ShadersGenerated
+  // by `bun run build:shaders`; delegated here.
+  val TRANSFORM_FRAG = ShadersGenerated.TRANSFORM_FRAG
 }

package/android/src/main/java/com/simiancraft/kaleidoscope/gpu/ShadersGenerated.kt

@@ -0,0 +1,76 @@
+// @generated by scripts/build-shaders.ts from shaders/. DO NOT EDIT.
+// Run `bun run build:shaders` to regenerate.
+//
+// Cross-runtime shared shaders. Platform-local shaders (OES external texture,
+// 2D passthrough) stay hand-written in Shaders.kt, which delegates the consts
+// below.
+
+package com.simiancraft.kaleidoscope.gpu
+
+internal object ShadersGenerated {
+  const val PASSTHROUGH_VERT = """#version 300 es
+precision highp float;
+out highp vec2 vUv;
+void main() {
+  vec2 p = vec2(float((gl_VertexID & 1) << 1), float(gl_VertexID & 2));
+  vUv = p * 0.5;
+  gl_Position = vec4(p - 1.0, 0.0, 1.0);
+}
+"""
+
+  const val COMPOSITE_FRAG = """#version 300 es
+precision mediump float;
+uniform sampler2D uOriginal;
+uniform sampler2D uBackground;
+uniform sampler2D uMask;
+uniform vec2 uBgUvScale;
+uniform vec2 uBgUvOffset;
+uniform vec2 uMaskUvScale;
+uniform vec2 uMaskUvOffset;
+uniform float uMaskLo;
+uniform float uMaskHi;
+in highp vec2 vUv;
+out vec4 oColor;
+void main() {
+  vec2 maskUv = vUv * uMaskUvScale + uMaskUvOffset;
+  float raw = texture(uMask, maskUv).r;
+  float safeHi = max(uMaskHi, uMaskLo + 0.001);
+  float m = smoothstep(uMaskLo, safeHi, raw);
+  vec3 orig = texture(uOriginal, vUv).rgb;
+  vec2 bgUv = clamp(vUv * uBgUvScale + uBgUvOffset, 0.0, 1.0);
+  vec3 bg = texture(uBackground, bgUv).rgb;
+  oColor = vec4(mix(bg, orig, m), 1.0);
+}
+"""
+
+  const val BLUR_FRAG = """#version 300 es
+precision mediump float;
+uniform sampler2D uTex;
+uniform vec2 uAxis;
+uniform float uWeights[5];
+uniform float uOffsets[5];
+in highp vec2 vUv;
+out vec4 oColor;
+void main() {
+  vec4 color = texture(uTex, vUv) * uWeights[0];
+  for (int i = 1; i < 5; i++) {
+    vec2 off = uAxis * uOffsets[i];
+    color += texture(uTex, vUv + off) * uWeights[i];
+    color += texture(uTex, vUv - off) * uWeights[i];
+  }
+  oColor = color;
+}
+"""
+
+  const val TRANSFORM_FRAG = """#version 300 es
+precision mediump float;
+uniform sampler2D uTex;
+uniform mat2 uUvTransform;
+in highp vec2 vUv;
+out vec4 oColor;
+void main() {
+  vec2 uv = uUvTransform * (vUv - 0.5) + 0.5;
+  oColor = texture(uTex, uv);
+}
+"""
+}