@remotion/effects 4.0.475 → 4.0.477

package/dist/esm/lines.mjs

@@ -117,6 +117,17 @@ var DEFAULT_ANGLE = 0;
 var DEFAULT_OFFSET = 0;
 var DEFAULT_MASK_TO_SOURCE_ALPHA = false;
 var linesSchema = {
+  colors: {
+    type: "array",
+    item: {
+      type: "color"
+    },
+    default: DEFAULT_COLORS,
+    minLength: 2,
+    newItemDefault: "#ff0000",
+    description: "Colors",
+    keyframable: false
+  },
   direction: {
     type: "enum",
     variants: {

package/dist/esm/pattern.mjs

@@ -0,0 +1,575 @@
+// src/pattern.ts
+import { Internals } from "remotion";
+
+// src/validate-effect-param.ts
+var assertEffectParamsObject = (params, effectLabel) => {
+  if (params === null || typeof params !== "object") {
+    throw new TypeError(`${effectLabel} effect requires a parameters object, but got ${JSON.stringify(params)}`);
+  }
+};
+var assertRequiredFiniteNumber = (value, name) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new TypeError(`"${name}" must be a finite number, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertRequiredColor = (value, name) => {
+  if (typeof value !== "string" || value.length === 0) {
+    throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredColor(value, name);
+};
+var assertOptionalBoolean = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "boolean") {
+    throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
+  }
+};
+
+// src/color-utils.ts
+var DEFAULT_AMOUNT = 1;
+var DEFAULT_BRIGHTNESS_AMOUNT = 0;
+var DEFAULT_HUE_DEGREES = 0;
+var colorAmountSchema = {
+  type: "number",
+  min: 0,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var colorMultiplierSchema = {
+  type: "number",
+  min: 0,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var brightnessAmountSchema = {
+  type: "number",
+  min: -1,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_BRIGHTNESS_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var hueDegreesSchema = {
+  type: "rotation-degrees",
+  step: 1,
+  default: DEFAULT_HUE_DEGREES,
+  description: "Degrees"
+};
+var assertOptionalFiniteNumber = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredFiniteNumber(value, name);
+};
+var validateUnitInterval = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateNonNegative = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateSignedUnitInterval = (value, name) => {
+  if (value < -1) {
+    throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var clampColorChannel = (value) => {
+  return Math.max(0, Math.min(255, value));
+};
+var parseColorRgba = (ctx, color) => {
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const { data } = ctx.getImageData(0, 0, 1, 1);
+  return [data[0], data[1], data[2], data[3]];
+};
+
+// src/pattern.ts
+var { createEffect, createWebGL2ContextError } = Internals;
+var DEFAULT_SCALE = 0.1;
+var DEFAULT_CROP = 0;
+var DEFAULT_GAP = 0;
+var DEFAULT_OFFSET = 0;
+var DEFAULT_OFFSET_EVERY = 0;
+var DEFAULT_ORIGIN = [0, 0];
+var DEFAULT_WRAP = true;
+var patternSchema = {
+  scale: {
+    type: "number",
+    min: 0.001,
+    max: 2,
+    step: 0.01,
+    default: DEFAULT_SCALE,
+    description: "Scale",
+    hiddenFromList: false
+  },
+  cropLeft: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_CROP,
+    description: "Crop left",
+    hiddenFromList: false
+  },
+  cropTop: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_CROP,
+    description: "Crop top",
+    hiddenFromList: false
+  },
+  cropRight: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_CROP,
+    description: "Crop right",
+    hiddenFromList: false
+  },
+  cropBottom: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_CROP,
+    description: "Crop bottom",
+    hiddenFromList: false
+  },
+  gapX: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_GAP,
+    description: "Gap X",
+    hiddenFromList: false
+  },
+  gapY: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_GAP,
+    description: "Gap Y",
+    hiddenFromList: false
+  },
+  offsetU: {
+    type: "number",
+    step: 0.01,
+    default: DEFAULT_OFFSET,
+    description: "Offset U",
+    hiddenFromList: false
+  },
+  offsetV: {
+    type: "number",
+    step: 0.01,
+    default: DEFAULT_OFFSET,
+    description: "Offset V",
+    hiddenFromList: false
+  },
+  rowOffset: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_OFFSET,
+    description: "Row offset",
+    hiddenFromList: false
+  },
+  rowOffsetEvery: {
+    type: "number",
+    min: 0,
+    step: 1,
+    default: DEFAULT_OFFSET_EVERY,
+    description: "Row offset every",
+    hiddenFromList: false
+  },
+  columnOffset: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_OFFSET,
+    description: "Column offset",
+    hiddenFromList: false
+  },
+  columnOffsetEvery: {
+    type: "number",
+    min: 0,
+    step: 1,
+    default: DEFAULT_OFFSET_EVERY,
+    description: "Column offset every",
+    hiddenFromList: false
+  },
+  origin: {
+    type: "uv-coordinate",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_ORIGIN,
+    description: "Origin"
+  },
+  wrap: {
+    type: "boolean",
+    default: DEFAULT_WRAP,
+    description: "Wrap"
+  }
+};
+var resolve = (p) => ({
+  scale: p.scale ?? DEFAULT_SCALE,
+  cropLeft: p.cropLeft ?? DEFAULT_CROP,
+  cropTop: p.cropTop ?? DEFAULT_CROP,
+  cropRight: p.cropRight ?? DEFAULT_CROP,
+  cropBottom: p.cropBottom ?? DEFAULT_CROP,
+  gapX: p.gapX ?? DEFAULT_GAP,
+  gapY: p.gapY ?? DEFAULT_GAP,
+  offsetU: p.offsetU ?? DEFAULT_OFFSET,
+  offsetV: p.offsetV ?? DEFAULT_OFFSET,
+  rowOffset: p.rowOffset ?? DEFAULT_OFFSET,
+  rowOffsetEvery: p.rowOffsetEvery ?? DEFAULT_OFFSET_EVERY,
+  columnOffset: p.columnOffset ?? DEFAULT_OFFSET,
+  columnOffsetEvery: p.columnOffsetEvery ?? DEFAULT_OFFSET_EVERY,
+  origin: [...p.origin ?? DEFAULT_ORIGIN],
+  wrap: p.wrap ?? DEFAULT_WRAP
+});
+var assertOptionalUvCoordinate = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
+    throw new TypeError(`"${name}" must be a [number, number] tuple`);
+  }
+};
+var assertOptionalInteger = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (!Number.isInteger(value)) {
+    throw new TypeError(`"${name}" must be an integer, but got ${JSON.stringify(value)}`);
+  }
+};
+var validatePositive = (value, name) => {
+  if (value <= 0) {
+    throw new TypeError(`"${name}" must be > 0`);
+  }
+};
+var validateAtLeast = (value, min, name) => {
+  if (value < min) {
+    throw new TypeError(`"${name}" must be >= ${min}, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateNonNegative2 = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+};
+var validatePatternParams = (params) => {
+  assertEffectParamsObject(params, "Pattern");
+  assertOptionalFiniteNumber(params.scale, "scale");
+  assertOptionalFiniteNumber(params.cropLeft, "cropLeft");
+  assertOptionalFiniteNumber(params.cropTop, "cropTop");
+  assertOptionalFiniteNumber(params.cropRight, "cropRight");
+  assertOptionalFiniteNumber(params.cropBottom, "cropBottom");
+  assertOptionalFiniteNumber(params.gapX, "gapX");
+  assertOptionalFiniteNumber(params.gapY, "gapY");
+  assertOptionalFiniteNumber(params.offsetU, "offsetU");
+  assertOptionalFiniteNumber(params.offsetV, "offsetV");
+  assertOptionalFiniteNumber(params.rowOffset, "rowOffset");
+  assertOptionalFiniteNumber(params.rowOffsetEvery, "rowOffsetEvery");
+  assertOptionalFiniteNumber(params.columnOffset, "columnOffset");
+  assertOptionalFiniteNumber(params.columnOffsetEvery, "columnOffsetEvery");
+  assertOptionalUvCoordinate(params.origin, "origin");
+  assertOptionalBoolean(params.wrap, "wrap");
+  assertOptionalInteger(params.rowOffsetEvery, "rowOffsetEvery");
+  assertOptionalInteger(params.columnOffsetEvery, "columnOffsetEvery");
+  const r = resolve(params);
+  validatePositive(r.scale, "scale");
+  validateNonNegative2(r.gapX, "gapX");
+  validateNonNegative2(r.gapY, "gapY");
+  validateAtLeast(r.rowOffsetEvery, 0, "rowOffsetEvery");
+  validateAtLeast(r.columnOffsetEvery, 0, "columnOffsetEvery");
+  validateUnitInterval(r.origin[0], "origin[0]");
+  validateUnitInterval(r.origin[1], "origin[1]");
+};
+var PATTERN_VS = `#version 300 es
+in vec2 aPos;
+in vec2 aUv;
+out vec2 vUv;
+
+void main() {
+	vUv = aUv;
+	gl_Position = vec4(aPos, 0.0, 1.0);
+}
+`;
+var PATTERN_FS = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D uSource;
+uniform vec2 uResolution;
+uniform float uScale;
+uniform vec4 uCrop;
+uniform vec2 uGap;
+uniform vec2 uOffset;
+uniform vec2 uRowOffset;
+uniform vec2 uColumnOffset;
+uniform vec2 uOrigin;
+uniform bool uWrap;
+
+float positiveModulo(float value, float modulo) {
+	return mod(mod(value, modulo) + modulo, modulo);
+}
+
+float getPhase(float index, float every) {
+	if (every == 0.0) {
+		return index;
+	}
+
+	return positiveModulo(index, every);
+}
+
+bool sampleCell(vec2 cell, vec2 fragPx, vec2 cropStart, vec2 tileSize, vec2 pitch, vec2 originPx, out vec4 color) {
+	if (!uWrap && (cell.x < 0.0 || cell.y < 0.0)) {
+		return false;
+	}
+
+	float rowPhase = getPhase(cell.y, uRowOffset.y);
+	float columnPhase = getPhase(cell.x, uColumnOffset.y);
+	vec2 stagger = vec2(rowPhase * uRowOffset.x, columnPhase * uColumnOffset.x);
+	vec2 localPx = fragPx - originPx - stagger - cell * pitch;
+
+	if (localPx.x < 0.0 || localPx.y < 0.0 || localPx.x >= tileSize.x || localPx.y >= tileSize.y) {
+		return false;
+	}
+
+	vec2 sourcePx = cropStart + localPx / uScale;
+	vec2 sourceUv = vec2(sourcePx.x / uResolution.x, 1.0 - sourcePx.y / uResolution.y);
+
+	if (sourceUv.x < 0.0 || sourceUv.y < 0.0 || sourceUv.x > 1.0 || sourceUv.y > 1.0) {
+		return false;
+	}
+
+	color = texture(uSource, sourceUv);
+	return true;
+}
+
+void main() {
+	vec2 cropStart = uCrop.xy;
+	vec2 cropEnd = uResolution - uCrop.zw;
+	vec2 cropSize = max(cropEnd - cropStart, vec2(0.001));
+	vec2 tileSize = max(cropSize * uScale, vec2(0.001));
+	vec2 pitch = max(tileSize + uGap, vec2(0.001));
+	vec2 patternUv = vec2(vUv.x, 1.0 - vUv.y);
+	vec2 originPx = (uOrigin + uOffset) * uResolution;
+	vec2 fragPx = patternUv * uResolution;
+
+	vec2 gridPx = fragPx - originPx;
+	vec2 cell = floor(gridPx / pitch);
+
+	for (int i = 0; i < 4; i++) {
+		float rowPhase = getPhase(cell.y, uRowOffset.y);
+		float columnPhase = getPhase(cell.x, uColumnOffset.y);
+		vec2 stagger = vec2(rowPhase * uRowOffset.x, columnPhase * uColumnOffset.x);
+		vec2 adjustedGridPx = fragPx - originPx - stagger;
+		vec2 nextCell = floor(adjustedGridPx / pitch);
+
+		if (all(equal(nextCell, cell))) {
+			break;
+		}
+
+		cell = nextCell;
+	}
+
+	vec4 color = vec4(0.0);
+	for (int y = -4; y <= 4; y++) {
+		for (int x = -4; x <= 4; x++) {
+			if (sampleCell(cell + vec2(float(x), float(y)), fragPx, cropStart, tileSize, pitch, originPx, color)) {
+				fragColor = color;
+				return;
+			}
+		}
+	}
+
+	fragColor = vec4(0.0);
+}
+`;
+var compileShader = (gl, type, source) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error("Failed to create WebGL shader");
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    throw new Error(`Pattern shader compile failed: ${log ?? "(no log)"}`);
+  }
+  return shader;
+};
+var linkProgram = (gl, vs, fs) => {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Pattern program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var pattern = createEffect({
+  type: "remotion/pattern",
+  label: "pattern()",
+  documentationLink: "https://www.remotion.dev/docs/effects/pattern",
+  backend: "webgl2",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `pattern-${r.scale}-${r.cropLeft}-${r.cropTop}-${r.cropRight}-${r.cropBottom}-${r.gapX}-${r.gapY}-${r.offsetU}-${r.offsetV}-${r.rowOffset}-${r.rowOffsetEvery}-${r.columnOffset}-${r.columnOffsetEvery}-${r.origin[0]}-${r.origin[1]}-${r.wrap ? 1 : 0}`;
+  },
+  setup: (target) => {
+    const gl = target.getContext("webgl2", {
+      premultipliedAlpha: true,
+      alpha: true,
+      preserveDrawingBuffer: true
+    });
+    if (!gl) {
+      throw createWebGL2ContextError("pattern effect");
+    }
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    const vs = compileShader(gl, gl.VERTEX_SHADER, PATTERN_VS);
+    const fs = compileShader(gl, gl.FRAGMENT_SHADER, PATTERN_FS);
+    const program = linkProgram(gl, vs, fs);
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+    const vao = gl.createVertexArray();
+    if (!vao) {
+      throw new Error("Failed to create WebGL vertex array");
+    }
+    gl.bindVertexArray(vao);
+    const data = new Float32Array([
+      -1,
+      -1,
+      0,
+      0,
+      1,
+      -1,
+      1,
+      0,
+      -1,
+      1,
+      0,
+      1,
+      1,
+      1,
+      1,
+      1
+    ]);
+    const vbo = gl.createBuffer();
+    if (!vbo) {
+      throw new Error("Failed to create WebGL buffer");
+    }
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    const aPos = gl.getAttribLocation(program, "aPos");
+    const aUv = gl.getAttribLocation(program, "aUv");
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+    gl.enableVertexAttribArray(aUv);
+    gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
+    gl.bindVertexArray(null);
+    const texture = gl.createTexture();
+    if (!texture) {
+      throw new Error("Failed to create WebGL texture");
+    }
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return {
+      gl,
+      program,
+      vao,
+      vbo,
+      texture,
+      uniforms: {
+        uSource: gl.getUniformLocation(program, "uSource"),
+        uResolution: gl.getUniformLocation(program, "uResolution"),
+        uScale: gl.getUniformLocation(program, "uScale"),
+        uCrop: gl.getUniformLocation(program, "uCrop"),
+        uGap: gl.getUniformLocation(program, "uGap"),
+        uOffset: gl.getUniformLocation(program, "uOffset"),
+        uRowOffset: gl.getUniformLocation(program, "uRowOffset"),
+        uColumnOffset: gl.getUniformLocation(program, "uColumnOffset"),
+        uOrigin: gl.getUniformLocation(program, "uOrigin"),
+        uWrap: gl.getUniformLocation(program, "uWrap")
+      }
+    };
+  },
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const r = resolve(params);
+    const { gl, program, vao, texture, uniforms } = state;
+    gl.viewport(0, 0, width, height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    gl.bindVertexArray(vao);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    if (uniforms.uSource)
+      gl.uniform1i(uniforms.uSource, 0);
+    if (uniforms.uResolution)
+      gl.uniform2f(uniforms.uResolution, width, height);
+    if (uniforms.uScale)
+      gl.uniform1f(uniforms.uScale, r.scale);
+    if (uniforms.uCrop)
+      gl.uniform4f(uniforms.uCrop, r.cropLeft, r.cropTop, r.cropRight, r.cropBottom);
+    if (uniforms.uGap)
+      gl.uniform2f(uniforms.uGap, r.gapX, r.gapY);
+    if (uniforms.uOffset)
+      gl.uniform2f(uniforms.uOffset, r.offsetU, r.offsetV);
+    if (uniforms.uRowOffset)
+      gl.uniform2f(uniforms.uRowOffset, r.rowOffset, r.rowOffsetEvery);
+    if (uniforms.uColumnOffset)
+      gl.uniform2f(uniforms.uColumnOffset, r.columnOffset, r.columnOffsetEvery);
+    if (uniforms.uOrigin)
+      gl.uniform2f(uniforms.uOrigin, r.origin[0], r.origin[1]);
+    if (uniforms.uWrap)
+      gl.uniform1i(uniforms.uWrap, r.wrap ? 1 : 0);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.bindVertexArray(null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.useProgram(null);
+  },
+  cleanup: ({ gl, program, vao, vbo, texture }) => {
+    gl.deleteBuffer(vbo);
+    gl.deleteProgram(program);
+    gl.deleteVertexArray(vao);
+    gl.deleteTexture(texture);
+  },
+  schema: patternSchema,
+  validateParams: validatePatternParams
+});
+export {
+  pattern
+};

package/dist/esm/rings.mjs

@@ -106,6 +106,11 @@ var parseColorRgba = (ctx, color) => {
   return [data[0], data[1], data[2], data[3]];
 };
 
+// src/uv-coordinate.ts
+var publicUvToShaderUv = (uv) => {
+  return [uv[0], 1 - uv[1]];
+};
+
 // src/rings.ts
 var { createEffect, createWebGL2ContextError } = Internals;
 var DEFAULT_COLORS = ["#dff4ff", "#7cc6ff"];
@@ -115,6 +120,17 @@ var DEFAULT_GAP = 0;
 var DEFAULT_OFFSET = 0;
 var DEFAULT_MASK_TO_SOURCE_ALPHA = false;
 var ringsSchema = {
+  colors: {
+    type: "array",
+    item: {
+      type: "color"
+    },
+    default: DEFAULT_COLORS,
+    minLength: 2,
+    newItemDefault: "#ff0000",
+    description: "Colors",
+    keyframable: false
+  },
   center: {
     type: "uv-coordinate",
     min: 0,
@@ -464,8 +480,10 @@ var rings = createEffect({
       gl.uniform2f(uniforms.uResolution, width, height);
     if (uniforms.uNumColors)
       gl.uniform1f(uniforms.uNumColors, r.colors.length);
-    if (uniforms.uCenter)
-      gl.uniform2f(uniforms.uCenter, r.center[0], r.center[1]);
+    if (uniforms.uCenter) {
+      const shaderCenter = publicUvToShaderUv(r.center);
+      gl.uniform2f(uniforms.uCenter, shaderCenter[0], shaderCenter[1]);
+    }
     if (uniforms.uThickness)
       gl.uniform1f(uniforms.uThickness, r.thickness);
     if (uniforms.uSpacing)