tokimeki-image-editor 0.1.13 → 0.2.1

package/dist/shaders/composite.wgsl

@@ -1,46 +0,0 @@
-struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
-  @location(0) uv: vec2<f32>,
-};
-
-struct CompositeUniforms {
-  // Blur area bounds in normalized coordinates (0-1)
-  minX: f32,
-  minY: f32,
-  maxX: f32,
-  maxY: f32,
-};
-
-@group(0) @binding(0) var mySampler: sampler;
-@group(0) @binding(1) var blurredTexture: texture_2d<f32>;
-@group(0) @binding(2) var baseTexture: texture_2d<f32>;
-@group(0) @binding(3) var<uniform> composite: CompositeUniforms;
-
-@vertex
-fn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
-  var pos = array<vec2<f32>, 3>(
-    vec2<f32>(-1.0, -1.0),
-    vec2<f32>( 3.0, -1.0),
-    vec2<f32>(-1.0,  3.0)
-  );
-  var output: VertexOutput;
-  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
-  // Convert NDC to UV with Y-flip (NDC bottom-left maps to UV top-left)
-  let uv = pos[VertexIndex] * 0.5 + 0.5;
-  output.uv = vec2<f32>(uv.x, 1.0 - uv.y);
-  return output;
-}
-
-@fragment
-fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
-  // Sample both textures first (must be in uniform control flow)
-  let blurredColor = textureSample(blurredTexture, mySampler, uv);
-  let baseColor = textureSample(baseTexture, mySampler, uv);
-
-  // Check if pixel is inside blur area bounds
-  let inside = uv.x >= composite.minX && uv.x <= composite.maxX &&
-               uv.y >= composite.minY && uv.y <= composite.maxY;
-
-  // Use select to choose between blurred and base
-  return select(baseColor, blurredColor, inside);
-}

package/dist/shaders/grain.wgsl

@@ -1,225 +0,0 @@
-// Grain shader - applies film grain on top of processed image
-// This shader is designed to be used as a final pass after blur
-
-struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
-  @location(0) uv: vec2<f32>,
-};
-
-struct GrainUniforms {
-  // Grain parameters (1 param)
-  grainAmount: f32,      // 0 to 100
-
-  // Viewport (4 params)
-  viewportZoom: f32,
-  viewportOffsetX: f32,
-  viewportOffsetY: f32,
-  viewportScale: f32,
-
-  // Transform (4 params)
-  rotation: f32,         // in radians
-  flipHorizontal: f32,   // 1.0 or -1.0
-  flipVertical: f32,     // 1.0 or -1.0
-  transformScale: f32,
-
-  // Canvas dimensions (2 params)
-  canvasWidth: f32,
-  canvasHeight: f32,
-
-  // Image dimensions (2 params)
-  imageWidth: f32,
-  imageHeight: f32,
-
-  // Crop area (4 params)
-  cropX: f32,
-  cropY: f32,
-  cropWidth: f32,
-  cropHeight: f32,
-};
-
-@group(0) @binding(0) var mySampler: sampler;
-@group(0) @binding(1) var myTexture: texture_2d<f32>;
-@group(0) @binding(2) var<uniform> params: GrainUniforms;
-
-// Simple pass-through vertex shader
-@vertex
-fn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
-  var pos = array<vec2<f32>, 3>(
-    vec2<f32>(-1.0, -1.0),
-    vec2<f32>( 3.0, -1.0),
-    vec2<f32>(-1.0,  3.0)
-  );
-  var output: VertexOutput;
-  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
-  // UV coordinates map directly to texture (0-1)
-  output.uv = pos[VertexIndex] * 0.5 + 0.5;
-  output.uv.y = 1.0 - output.uv.y; // Flip Y for texture coordinates
-  return output;
-}
-
-// Helper functions
-fn getLuminance(color: vec3<f32>) -> f32 {
-  return dot(color, vec3<f32>(0.2126, 0.7152, 0.0722));
-}
-
-// High-quality 2D hash function for uniform random numbers in [0, 1]
-fn hash2d(p: vec2<f32>) -> f32 {
-  let p3 = fract(vec3<f32>(p.x, p.y, p.x) * vec3<f32>(0.1031, 0.1030, 0.0973));
-  let dot_p3 = dot(p3, vec3<f32>(p3.y, p3.z, p3.x) + 33.33);
-  return fract((p3.x + p3.y) * p3.z + dot_p3);
-}
-
-// Generate two independent uniform random numbers
-fn hash2d_dual(p: vec2<f32>) -> vec2<f32> {
-  let p3 = fract(vec3<f32>(p.x, p.y, p.x) * vec3<f32>(0.1031, 0.1030, 0.0973));
-  let p4 = fract(vec3<f32>(p.y, p.x, p.y) * vec3<f32>(0.0973, 0.1031, 0.1030));
-  let dot_p3 = dot(p3, vec3<f32>(p3.y, p3.z, p3.x) + 33.33);
-  let dot_p4 = dot(p4, vec3<f32>(p4.y, p4.z, p4.x) + 45.67);
-  return vec2<f32>(
-    fract((p3.x + p3.y) * p3.z + dot_p3),
-    fract((p4.x + p4.y) * p4.z + dot_p4)
-  );
-}
-
-// Box-Muller transform: converts two uniform random variables to Gaussian distribution
-// Returns a sample from N(0, 1) - standard normal distribution
-fn boxMuller(u1: f32, u2: f32) -> f32 {
-  // Ensure u1 is not zero to avoid log(0)
-  let u1_safe = max(u1, 0.0001);
-  let radius = sqrt(-2.0 * log(u1_safe));
-  let theta = 2.0 * 3.14159265359 * u2;
-  return radius * cos(theta);
-}
-
-// Generate Gaussian-distributed noise using Box-Muller transform
-fn gaussianNoise(p: vec2<f32>) -> f32 {
-  let uniforms = hash2d_dual(p);
-  return boxMuller(uniforms.x, uniforms.y);
-}
-
-// Overlay blend mode - enhances contrast
-// When a < 0.5: result = 2 * a * b
-// When a >= 0.5: result = 1 - 2 * (1-a) * (1-b)
-fn overlayBlend(base: f32, blend: f32) -> f32 {
-  if (base < 0.5) {
-    return 2.0 * base * blend;
-  } else {
-    return 1.0 - 2.0 * (1.0 - base) * (1.0 - blend);
-  }
-}
-
-// Soft light blend mode - gentler than overlay
-fn softLightBlend(base: f32, blend: f32) -> f32 {
-  if (blend < 0.5) {
-    return base - (1.0 - 2.0 * blend) * base * (1.0 - base);
-  } else {
-    let d = select(sqrt(base), base, base < 0.25);
-    return base + (2.0 * blend - 1.0) * (d - base);
-  }
-}
-
-@fragment
-fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
-  // Sample the blurred/processed texture
-  var color = textureSample(myTexture, mySampler, uv);
-  var rgb = color.rgb;
-
-  // Calculate image-space coordinates for grain
-  // Convert UV (0-1) to canvas coordinates
-  var canvasCoord = uv * vec2<f32>(params.canvasWidth, params.canvasHeight);
-
-  // Convert canvas coordinates (top-left origin) to centered coordinates
-  var coord = canvasCoord - vec2<f32>(params.canvasWidth * 0.5, params.canvasHeight * 0.5);
-
-  // Reverse the viewport transformations to get image-space coordinates
-  // 1. Subtract viewport offset
-  coord = coord - vec2<f32>(params.viewportOffsetX, params.viewportOffsetY);
-
-  // 2. Inverse zoom/scale
-  let totalScale = params.viewportScale * params.viewportZoom * params.transformScale;
-  coord = coord / totalScale;
-
-  // 3. Inverse rotation
-  if (params.rotation != 0.0) {
-    let cos_r = cos(-params.rotation);
-    let sin_r = sin(-params.rotation);
-    coord = vec2<f32>(
-      coord.x * cos_r - coord.y * sin_r,
-      coord.x * sin_r + coord.y * cos_r
-    );
-  }
-
-  // 4. Inverse flip
-  coord.x = coord.x * params.flipHorizontal;
-  coord.y = coord.y * params.flipVertical;
-
-  // 5. Convert to image pixel coordinates
-  var imageCoord: vec2<f32>;
-  if (params.cropWidth > 0.0 && params.cropHeight > 0.0) {
-    // Crop mode: coord is in crop-centered space
-    let cropLocalX = coord.x + params.cropWidth * 0.5;
-    let cropLocalY = coord.y + params.cropHeight * 0.5;
-    imageCoord = vec2<f32>(
-      params.cropX + cropLocalX,
-      params.cropY + cropLocalY
-    );
-  } else {
-    // No crop: coord is in image-centered space
-    imageCoord = coord + vec2<f32>(params.imageWidth * 0.5, params.imageHeight * 0.5);
-  }
-
-  // Apply film grain if enabled
-  if (params.grainAmount > 0.0) {
-    let grainIntensity = params.grainAmount / 100.0;
-
-    // Calculate luminance for grain masking
-    let luma = getLuminance(rgb);
-
-    // === Authentic film grain using uniform distribution ===
-    // Film grain is random, sharp, and granular - not smooth Gaussian
-
-    // Primary grain layer (2.5-3 pixels) - sharp, visible grain
-    let grain1 = hash2d(floor(imageCoord / 2.8)) - 0.5;
-
-    // Secondary grain layer (3.5-4 pixels) - adds texture variation
-    let grain2 = hash2d(floor(imageCoord / 3.6) + vec2<f32>(123.45, 678.90)) - 0.5;
-
-    // Tertiary grain layer (5-6 pixels) - larger grain structure
-    let grain3 = hash2d(floor(imageCoord / 5.2) + vec2<f32>(345.67, 890.12)) - 0.5;
-
-    // Coarse grain layer (7-8 pixels) - clumping effect
-    let grain4 = hash2d(floor(imageCoord / 7.5) + vec2<f32>(567.89, 234.56)) - 0.5;
-
-    // Combine with emphasis on visible mid-size grain
-    // Sharp transitions create authentic film texture
-    let grainNoise = grain1 * 0.35 + grain2 * 0.3 + grain3 * 0.25 + grain4 * 0.1;
-
-    // Enhance grain contrast for more pronounced effect
-    let enhancedGrain = sign(grainNoise) * pow(abs(grainNoise), 0.8);
-
-    // === Luminance-based masking ===
-    // Grain visible across most tones, natural falloff at extremes
-    var lumaMask = 1.0 - pow(abs(luma - 0.5) * 2.0, 1.5);
-    lumaMask = smoothstep(0.1, 1.0, lumaMask);
-
-    // Hide grain in very dark areas (outside image bounds)
-    let shadowMask = smoothstep(0.02, 0.12, luma);
-
-    // Slightly reduce grain in very bright areas
-    let highlightMask = 1.0 - smoothstep(0.9, 1.0, luma);
-
-    lumaMask = lumaMask * shadowMask * highlightMask;
-
-    // === Apply strong, visible grain ===
-    let grainStrength = grainIntensity * 0.35;
-
-    // Apply grain with luminance masking
-    let grainValue = enhancedGrain * grainStrength * lumaMask;
-    rgb = rgb + vec3<f32>(grainValue);
-  }
-
-  // Clamp final result
-  rgb = clamp(rgb, vec3<f32>(0.0), vec3<f32>(1.0));
-
-  return vec4<f32>(rgb, color.a);
-}

package/dist/shaders/image-editor.wgsl

@@ -1,296 +0,0 @@
-struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
-  @location(0) uv: vec2<f32>,
-};
-
-struct Uniforms {
-  // Adjustments (11 params)
-  brightness: f32,
-  contrast: f32,
-  exposure: f32,
-  highlights: f32,
-  shadows: f32,
-  saturation: f32,
-  temperature: f32,
-  sepia: f32,
-  grayscale: f32,
-  vignette: f32,
-  grain: f32,
-
-  // Viewport (4 params)
-  viewportZoom: f32,
-  viewportOffsetX: f32,
-  viewportOffsetY: f32,
-  viewportScale: f32,
-
-  // Transform (4 params)
-  rotation: f32,        // in radians
-  flipHorizontal: f32,  // 1.0 or -1.0
-  flipVertical: f32,    // 1.0 or -1.0
-  transformScale: f32,
-
-  // Canvas dimensions (2 params)
-  canvasWidth: f32,
-  canvasHeight: f32,
-
-  // Image dimensions (2 params)
-  imageWidth: f32,
-  imageHeight: f32,
-
-  // Crop area (4 params)
-  cropX: f32,
-  cropY: f32,
-  cropWidth: f32,
-  cropHeight: f32,
-};
-
-@group(0) @binding(0) var mySampler: sampler;
-@group(0) @binding(1) var myTexture: texture_2d<f32>;
-@group(0) @binding(2) var<uniform> params: Uniforms;
-
-// Full-screen triangle vertex shader
-@vertex
-fn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
-  var pos = array<vec2<f32>, 3>(
-    vec2<f32>(-1.0, -1.0),
-    vec2<f32>( 3.0, -1.0),
-    vec2<f32>(-1.0,  3.0)
-  );
-  var output: VertexOutput;
-  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
-
-  // Convert NDC (-1 to 1) to canvas coordinates centered at origin
-  // NDC: -1 → -canvasWidth/2, 0 → 0, 1 → canvasWidth/2
-  // Note: NDC Y increases upward, but canvas Y increases downward, so flip Y
-  var coord = pos[VertexIndex] * vec2<f32>(params.canvasWidth, params.canvasHeight) * 0.5;
-  coord.y = -coord.y;
-
-  // Reverse the 2D canvas transformations:
-  // In 2D: translate(center + offset) → scale(zoom) → rotate → flip → draw(-w/2, -h/2)
-  // In WebGPU (reverse): screen → un-translate → un-scale → un-rotate → un-flip → texture
-
-  // 1. Subtract viewport offset (inverse of translate)
-  coord = coord - vec2<f32>(params.viewportOffsetX, params.viewportOffsetY);
-
-  // 2. Inverse zoom/scale
-  let totalScale = params.viewportScale * params.viewportZoom * params.transformScale;
-  coord = coord / totalScale;
-
-  // 3. Inverse rotation
-  if (params.rotation != 0.0) {
-    let cos_r = cos(-params.rotation);
-    let sin_r = sin(-params.rotation);
-    coord = vec2<f32>(
-      coord.x * cos_r - coord.y * sin_r,
-      coord.x * sin_r + coord.y * cos_r
-    );
-  }
-
-  // 4. Inverse flip
-  coord.x = coord.x * params.flipHorizontal;
-  coord.y = coord.y * params.flipVertical;
-
-  // 5. Convert to texture coordinates
-  // After inverse transformations, coord is in drawing space (centered at origin)
-
-  // When there's a crop, viewport.scale is adjusted to fit crop area to canvas
-  // This means coord values are scaled according to crop dimensions
-  // We need to account for this when mapping to texture coordinates
-
-  // ALWAYS use crop-aware logic
-  if (params.cropWidth > 0.0 && params.cropHeight > 0.0) {
-    // coord is in crop-centered space (units: pixels in crop area after inverse transforms)
-    // The 2D canvas draws: drawImage(img, cropX, cropY, cropW, cropH, -cropW/2, -cropH/2, cropW, cropH)
-    // This means the crop region is drawn centered, from (-cropW/2, -cropH/2) to (cropW/2, cropH/2)
-
-    // Map from drawing space to texture coordinates:
-    // Drawing space: coord ranges from (-cropW/2, -cropH/2) to (cropW/2, cropH/2)
-    // Texture space: we want to read from (cropX, cropY) to (cropX+cropW, cropY+cropH)
-
-    // Convert from centered coordinates to 0-based coordinates within crop region
-    let cropLocalX = coord.x + params.cropWidth * 0.5;
-    let cropLocalY = coord.y + params.cropHeight * 0.5;
-
-    // Convert to texture coordinates by adding crop offset and normalizing by image size
-    output.uv = vec2<f32>(
-      (params.cropX + cropLocalX) / params.imageWidth,
-      (params.cropY + cropLocalY) / params.imageHeight
-    );
-  } else {
-    // No crop - standard transformation
-    // Convert from image-centered space to top-left origin
-    coord = coord + vec2<f32>(params.imageWidth * 0.5, params.imageHeight * 0.5);
-
-    // Normalize to 0-1 range
-    output.uv = coord / vec2<f32>(params.imageWidth, params.imageHeight);
-  }
-
-  return output;
-}
-
-// Helper functions
-fn getLuminance(color: vec3<f32>) -> f32 {
-  return dot(color, vec3<f32>(0.2126, 0.7152, 0.0722));
-}
-
-// Improved 2D hash function for better randomness
-fn hash2d(p: vec2<f32>) -> f32 {
-  let p3 = fract(vec3<f32>(p.x, p.y, p.x) * vec3<f32>(0.1031, 0.1030, 0.0973));
-  let dot_p3 = dot(p3, vec3<f32>(p3.y, p3.z, p3.x) + 33.33);
-  return fract((p3.x + p3.y) * p3.z + dot_p3);
-}
-
-fn rgbToHsl(rgb: vec3<f32>) -> vec3<f32> {
-  let maxVal = max(rgb.r, max(rgb.g, rgb.b));
-  let minVal = min(rgb.r, min(rgb.g, rgb.b));
-  var h = 0.0;
-  var s = 0.0;
-  let l = (maxVal + minVal) / 2.0;
-
-  if (maxVal != minVal) {
-    let d = maxVal - minVal;
-    s = select(d / (maxVal + minVal), d / (2.0 - maxVal - minVal), l > 0.5);
-
-    if (maxVal == rgb.r) {
-      h = ((rgb.g - rgb.b) / d + select(0.0, 6.0, rgb.g < rgb.b)) / 6.0;
-    } else if (maxVal == rgb.g) {
-      h = ((rgb.b - rgb.r) / d + 2.0) / 6.0;
-    } else {
-      h = ((rgb.r - rgb.g) / d + 4.0) / 6.0;
-    }
-  }
-
-  return vec3<f32>(h, s, l);
-}
-
-fn hslToRgb(hsl: vec3<f32>) -> vec3<f32> {
-  let h = hsl.x;
-  let s = hsl.y;
-  let l = hsl.z;
-
-  if (s == 0.0) {
-    return vec3<f32>(l, l, l);
-  }
-
-  let q = select(l + s - l * s, l * (1.0 + s), l < 0.5);
-  let p = 2.0 * l - q;
-
-  let r = hue2rgb(p, q, h + 1.0 / 3.0);
-  let g = hue2rgb(p, q, h);
-  let b = hue2rgb(p, q, h - 1.0 / 3.0);
-
-  return vec3<f32>(r, g, b);
-}
-
-fn hue2rgb(p: f32, q: f32, t_: f32) -> f32 {
-  var t = t_;
-  if (t < 0.0) { t += 1.0; }
-  if (t > 1.0) { t -= 1.0; }
-  if (t < 1.0 / 6.0) { return p + (q - p) * 6.0 * t; }
-  if (t < 1.0 / 2.0) { return q; }
-  if (t < 2.0 / 3.0) { return p + (q - p) * (2.0 / 3.0 - t) * 6.0; }
-  return p;
-}
-
-@fragment
-fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
-  // Sample texture FIRST (must be in uniform control flow before any branching)
-  var color = textureSample(myTexture, mySampler, clamp(uv, vec2<f32>(0.0), vec2<f32>(1.0)));
-  var rgb = color.rgb;
-
-  // Check if outside texture bounds (0-1) and set to black
-  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
-    rgb = vec3<f32>(0.0);
-  }
-
-  // When crop is active, only show the crop region - black out everything else
-  if (params.cropWidth > 0.0) {
-    let cropMinU = params.cropX / params.imageWidth;
-    let cropMaxU = (params.cropX + params.cropWidth) / params.imageWidth;
-    let cropMinV = params.cropY / params.imageHeight;
-    let cropMaxV = (params.cropY + params.cropHeight) / params.imageHeight;
-
-    // If UV is outside the crop region, render black
-    if (uv.x < cropMinU || uv.x > cropMaxU || uv.y < cropMinV || uv.y > cropMaxV) {
-      rgb = vec3<f32>(0.0);
-    }
-  }
-
-  // 1. Brightness
-  if (params.brightness != 0.0) {
-    let factor = 1.0 + (params.brightness / 200.0);
-    rgb = rgb * factor;
-  }
-
-  // 2. Contrast
-  if (params.contrast != 0.0) {
-    let factor = 1.0 + (params.contrast / 200.0);
-    rgb = (rgb - 0.5) * factor + 0.5;
-  }
-
-  // 3. Exposure
-  if (params.exposure != 0.0) {
-    rgb = rgb * exp2(params.exposure / 100.0);
-  }
-
-  // 4. Shadows and Highlights
-  if (params.shadows != 0.0 || params.highlights != 0.0) {
-    let luma = getLuminance(rgb);
-
-    if (params.shadows != 0.0) {
-      let shadowMask = pow(1.0 - luma, 2.0);
-      rgb = rgb - rgb * (params.shadows / 100.0) * shadowMask * 0.5;
-    }
-
-    if (params.highlights != 0.0) {
-      let highlightMask = pow(luma, 2.0);
-      rgb = rgb + rgb * (params.highlights / 100.0) * highlightMask * 0.5;
-    }
-  }
-
-  // 5. Saturation
-  if (params.saturation != 0.0) {
-    rgb = clamp(rgb, vec3<f32>(0.0), vec3<f32>(1.0));
-    var hsl = rgbToHsl(rgb);
-    hsl.y = clamp(hsl.y * (1.0 + params.saturation / 100.0), 0.0, 1.0);
-    rgb = hslToRgb(hsl);
-  }
-
-  // 5.5. Color Temperature
-  // Warm (positive): add red, subtract blue
-  // Cool (negative): subtract red, add blue
-  if (params.temperature != 0.0) {
-    let temp = params.temperature / 100.0;
-    rgb.r = rgb.r + temp * 0.1;
-    rgb.b = rgb.b - temp * 0.1;
-  }
-
-  // 6. Sepia
-  if (params.sepia != 0.0) {
-    let sepiaAmount = params.sepia / 100.0;
-    let tr = 0.393 * rgb.r + 0.769 * rgb.g + 0.189 * rgb.b;
-    let tg = 0.349 * rgb.r + 0.686 * rgb.g + 0.168 * rgb.b;
-    let tb = 0.272 * rgb.r + 0.534 * rgb.g + 0.131 * rgb.b;
-    rgb = mix(rgb, vec3<f32>(tr, tg, tb), sepiaAmount);
-  }
-
-  // 7. Grayscale
-  if (params.grayscale != 0.0) {
-    let gray = getLuminance(rgb);
-    rgb = mix(rgb, vec3<f32>(gray), params.grayscale / 100.0);
-  }
-
-  // 8. Vignette
-  if (params.vignette != 0.0) {
-    let center = vec2<f32>(0.5, 0.5);
-    let dist = distance(uv, center);
-    let vignetteFactor = params.vignette / 100.0;
-    let vignetteAmount = pow(dist * 1.4, 2.0);
-    rgb = rgb * (1.0 + vignetteFactor * vignetteAmount * 1.5);
-  }
-
-  // Clamp final result
-  rgb = clamp(rgb, vec3<f32>(0.0), vec3<f32>(1.0));
-
-  return vec4<f32>(rgb, color.a);
-}