Skip to content
Utilora

Photo Filter Studio - Real-Time, GPU-Accelerated

Image Tools

Drop an image or click to browse

JPG, PNG, WebP - runs locally, nothing uploads

What is Photo Filter Studio - Real-Time, GPU-Accelerated?

WebGPU Filter Studio is a real-time photo finishing tool that runs on your GPU. It chains a tone-mapping pass (exposure, contrast, saturation, warmth, gamma), a separable Gaussian blur, and a finishing pass (sharpen, vignette, film grain) entirely in WGSL fragment shaders. Each parameter update re-renders the full chain in milliseconds, so sliders feel like a desktop editor rather than a web upload form.

How it works

The pipeline is three WGSL fragment passes. Pass 1 applies exposure (power-of-two scaling), contrast (around mid-gray), saturation (mix toward luminance), warmth (R/B offset), and gamma. Pass 2 is a horizontal Gaussian blur with weights computed from the radius. Pass 3 reuses the blur shader for vertical sampling, giving a proper separable Gaussian. Pass 4 is finishing: a five-tap sharpen, radial vignette, and hashed film grain. Each pass writes a new rgba8unorm texture, and the final result is read back, drawn to a canvas, and offered as a PNG.

Features & Benefits

  • Nine filter parameters running as a multi-pass WebGPU shader chain
  • Real-time slider response even on full-resolution images
  • Separable Gaussian blur (horizontal then vertical) for proper, low-cost smoothing
  • Single-pass tone, blur, and finishing passes - no quality loss from CPU round-trips

Frequently Asked Questions

Why is it so fast compared to a CSS-filter-based editor?

CSS filters are wrapped browser primitives with limited composition. This tool builds a custom WGSL pipeline that runs as native GPU code, with chained passes and direct texture I/O.

Do the filters degrade quality?

Each pass writes to rgba8unorm. For finishing-pass work this is fine; if you plan to layer many heavy filters consider applying them once at the end of your editing flow.

Does it work without WebGPU?

If WebGPU is missing the tool shows a fallback message pointing you to our Canvas-based image tools.

Is my photo uploaded?

No. All processing runs on your device's GPU; nothing is sent anywhere.

Related Tools

Edge Detect - Sobel, Real-Time

Sobel edge detection in your browser, GPU-accelerated via WebGPU. Real-time preview, threshold and thickness controls, PNG export.

Image Histogram & Levels

Per-channel RGB and luminance histograms computed on the GPU. Adjust black point, white point, and gamma with live preview.

Image Color Transform

Invert, shift hue, adjust warmth, brightness, contrast, and saturation. Full-fidelity Canvas API processing - your images never leave your browser.

Popular Utilities

JSON Formatter & Validator

Format, validate, and minify JSON instantly in your browser. Your data never leaves your device.

JWT Decoder

Decode JWT tokens and inspect header and payload instantly in your browser. Your tokens never leave your device.

Word Counter

Count words, characters, sentences, and estimate reading time instantly in your browser. No sign-up required.

Learn More & Guides

Sobel Edge Detection on the GPU: A WebGPU Worked Example

Edge detection is a textbook image-processing problem with a textbook solution. Implementing it on the GPU in WebGPU is also textbook - but the texts haven't been written yet. Here's the worked example.

9 min read

Real-Time Photo Finishing in a Browser Tab: A Multi-Pass WebGPU Pipeline

A photo finisher needs nine sliders to do real work: exposure, contrast, saturation, warmth, gamma, blur, sharpen, vignette, grain. Doing all nine in real time used to require a desktop app. Here's how to do it in a tab.

10 min read

Image Histograms and Levels: What Photoshop Has Been Doing Since 1990

The histogram is the single most useful diagnostic in image processing. The levels adjustment is the matching tool that lets you do something about what the histogram tells you. Both finally run in real time in the browser.

10 min read

Pixel Sort: How Glitch Art Became an Algorithm

Pixel sort is one of the few generative-art techniques with a clean algorithmic statement: sort runs of pixels by some key. The visual signature - smeared streaks broken by sharp untouched regions - comes from one tiny detail: the threshold.

9 min read