@luma.gl/effects 7.4.0-alpha.2 → 9.1.0-beta.3

package/src/passes/postprocessing/image-warp-filters/bulgepinch.ts

@@ -0,0 +1,72 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+import {warp} from './warp';
+
+const fs = /* glsl */ `\
+uniform bulgePinchUniforms {
+  float radius;
+  float strength;
+  vec2 center;
+} bulgePinch;
+
+vec2 bulgePinch_warp(vec2 coord, vec2 texCenter) {
+  coord -= texCenter;
+  float distance = length(coord);
+  if (distance < bulgePinch.radius) {
+    float percent = distance / bulgePinch.radius;
+    if (bulgePinch.strength > 0.0) {
+      coord *= mix(1.0, smoothstep(0.0, bulgePinch.radius / distance, percent), bulgePinch.strength * 0.75);
+    } else {
+      coord *= mix(1.0, pow(percent, 1.0 + bulgePinch.strength * 0.75) * bulgePinch.radius / distance, 1.0 - percent);
+    }
+  }
+  coord += texCenter;
+  return coord;
+}
+
+vec4 bulgePinch_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  vec2 coord = texCoord * texSize;
+  coord = bulgePinch_warp(coord, bulgePinch.center * texSize);
+
+  return warp_sampleColor(source, texSize, coord);
+}
+`;
+
+/** Bulges or pinches the image in a circle. */
+export type BulgePinchProps = {
+  /** The [x, y] coordinates of the center of the circle of effect. */
+  center?: [number, number];
+  /** The radius of the circle of effect. */
+  radius?: number;
+  /** strength -1 to 1 (-1 is strong pinch, 0 is no effect, 1 is strong bulge) */
+  strength?: number;
+};
+
+export type BulgePinchUniforms = BulgePinchProps;
+
+/**
+ * Bulge / Pinch -
+ * Bulges or pinches the image in a circle.
+ */
+export const bulgePinch = {
+  props: {} as BulgePinchProps,
+  uniforms: {} as BulgePinchUniforms,
+
+  name: 'bulgePinch',
+  dependencies: [warp],
+  fs,
+  uniformTypes: {
+    center: 'vec2<f32>',
+    radius: 'f32',
+    strength: 'f32'
+  },
+  propTypes: {
+    center: {value: [0.5, 0.5]},
+    radius: {value: 200, min: 1, softMax: 600},
+    strength: {value: 0.5, min: -1, max: 1}
+  },
+  passes: [{sampler: true}]
+} as const satisfies ShaderPass<BulgePinchProps, BulgePinchProps>;

package/src/passes/postprocessing/image-warp-filters/swirl.ts

@@ -0,0 +1,77 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+import {warp} from './warp';
+
+const fs = /* glsl */ `\
+uniform swirlUniforms {
+  float radius;
+  float angle;
+  vec2 center;
+} swirl;
+
+vec2 swirl_warp(vec2 coord, vec2 texCenter) {
+  coord -= texCenter;
+  float distance = length(coord);
+  if (distance < swirl.radius) {
+    float percent = (swirl.radius - distance) / swirl.radius;
+    float theta = percent * percent * swirl.angle;
+    float s = sin(theta);
+    float c = cos(theta);
+    coord = vec2(
+      coord.x * c - coord.y * s,
+      coord.x * s + coord.y * c
+    );
+  }
+  coord += texCenter;
+  return coord;
+}
+
+vec4 swirl_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  vec2 coord = texCoord * texSize;
+  coord = swirl_warp(coord, swirl.center * texSize);
+
+  return warp_sampleColor(source, texSize, coord);
+}
+`;
+
+/**
+ * Warps a circular region of the image in a swirl.
+ */
+export type SwirlProps = {
+  /** [x, y] coordinates of the center of the circle of effect. default: [0.5, 0.5] */
+  center?: [number, number];
+  /**  The radius of the circular region. */
+  radius?: number;
+  /** The angle in radians that the pixels in the center of the circular region will be rotated by. */
+  angle?: number;
+};
+
+export type SwirlUniforms = SwirlProps;
+
+/**
+ * Warps a circular region of the image in a swirl.
+ */
+export const swirl = {
+  props: {} as SwirlProps,
+  uniforms: {} as SwirlProps,
+
+  name: 'swirl',
+  dependencies: [warp],
+  fs,
+
+  uniformTypes: {
+    center: 'vec2<f32>',
+    radius: 'f32',
+    angle: 'f32'
+  },
+  propTypes: {
+    center: {value: [0.5, 0.5]},
+    radius: {value: 200, min: 1, softMax: 600},
+    angle: {value: 3, softMin: -25, softMax: 25}
+  },
+
+  passes: [{sampler: true}]
+} as const satisfies ShaderPass<SwirlProps, SwirlProps>;

package/src/passes/postprocessing/image-warp-filters/warp.ts

@@ -0,0 +1,28 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderPass} from '@luma.gl/shadertools';
+
+const fs = /* glsl */ `\
+vec4 warp_sampleColor(sampler2D source, vec2 texSize, vec2 coord) {
+  vec4 color = texture(source, coord / texSize);
+  vec2 clampedCoord = clamp(coord, vec2(0.0), texSize);
+  if (coord != clampedCoord) {
+    /* fade to transparent if we are outside the image */
+    color.a *= max(0.0, 1.0 - length(coord - clampedCoord));
+  }
+
+  return color;
+}
+`;
+
+export type WarpProps = {};
+
+export type WarpUniforms = WarpProps;
+
+export const warp = {
+  name: 'warp',
+  passes: [],
+  fs
+} as const satisfies ShaderPass<WarpProps, WarpProps>;