Drop Shadow

A drop shadow effect with HSV color controls, 8-level blur quality, and WebGPU support.

This addon applies customizable drop shadows to objects or Layers with full control over distance, angle, opacity, and color (HSV). It features an 8-tier blur quality system (3x3 to 10x10 kernels) optimized for both desktop and mobile performance.

This effect is adapted from Zane Little's "Ultimate Drop Shadow" which originally supported WebGL only. With the help of Claude AI, I ported it to WebGPU and performed extensive refactoring and optimization, including:

Technical Details

Coordinate System

• Uses layout pixels (unaffected by editor zoom)
• Automatic texture coordinate conversion
• Both WebGL and WebGPU adapted for Y-axis inversion

Blur Algorithms

• WebGL: Gaussian-weighted grid sampling (pre-calculated weight table)
• WebGPU: Gaussian-weighted spiral sampling (Vogel's distribution)
• Both methods produce similar visual results, WebGPU has more uniform sample distribution

Alpha Blending

• Uses double-mixing algorithm for correct transparency compositing
• Supports shadow rendering on semi-transparent objects
• Premultiplied alpha handling ensures color accuracy

Performance Characteristics

• GPU Usage: Primarily GPU-bound effect, performance scales with blur quality and radius
• Texture Sampling:
  • No blur: 1 sample per pixel
  • Low quality (3×3): ~9 samples per pixel
  • High quality (11×11): ~121 samples per pixel
  • WebGPU spiral: Variable samples (16-256 based on quality)
• Memory Impact: Minimal - no additional texture storage required beyond source texture
• Render Passes: Single-pass effect, no intermediate render targets needed

Browser and Device Compatibility

• WebGL Support: All browsers with WebGL 1.0+ support (Chrome, Firefox, Safari, Edge)
• WebGPU Support: Chrome 113+, Edge 113+, Safari 18+ (experimental)
• Mobile Devices: Fully supported on iOS and Android with appropriate quality settings
• Fallback Behavior: Automatically uses WebGL if WebGPU is unavailable

Performance Best Practices

• Mobile Optimization:
  • Use Blur Quality 20-30% on mobile devices
  • Limit Blur Radius to 10 pixels or less
  • Avoid applying to many objects simultaneously
  • Consider using Distance only (Blur Radius = 0) for best performance
• Desktop Optimization:
  • Blur Quality 50-70% provides good balance
  • Higher quality settings (80-100%) acceptable for static UI elements
  • Monitor frame rate when applying to animated objects
• Large Objects:
  • Performance cost scales with pixel count
  • Large fullscreen effects may impact frame rate
  • Consider pre-rendering shadows as sprites for very large static objects

Blur Quality

Recommended Settings

WebGPU Version (Spiral Sampling)

Uses Vogel's spiral distribution for more uniform sample distribution:

WebGL Version (Grid Sampling)

Uses fixed grid pattern with Gaussian-weighted sampling: