Triangle Blur
Blend neighboring pixels with a linearly weighted pyramid kernel. triangleBlur uses separable
horizontal and vertical passes to produce an inexpensive, visibly soft image treatment.
At a Glance​
| Property | Value |
|---|---|
| Export | triangleBlur |
| Backends | WebGPU and WebGL2 |
| Render passes | Two separable fullscreen sampling passes |
| Additional inputs | None |
Usage​
import {ShaderPassRenderer} from '@luma.gl/engine';
import {triangleBlur} from '@luma.gl/engine/effects';
const renderer = new ShaderPassRenderer(device, {shaderPasses: [triangleBlur]});
renderer.renderToScreen({
sourceTexture: sceneColorTexture,
uniforms: {triangleBlur: {radius: 14}}
});
Parameters​
| Parameter | Default | Suggested range | Description |
|---|---|---|---|
radius | 20 | 0 to 100 | Width of the triangular blur kernel in source-image pixels. |
The descriptor owns its horizontal and vertical direction uniforms. A radius of zero suppresses the visible blur but does not remove the two configured fullscreen passes.
Composition and Cost​
The pass performs two separable draws and requires no scene depth or persistent history. Its triangular weights differ from the smoother bell-shaped Gaussian Blur kernel; choose between them based on the desired reconstruction profile rather than pass count alone.
Related Effects​
- Gaussian Blur produces a smoother photographic weight falloff.
- Tilt Shift varies blur strength around a selected focal line.
- Zoom Blur samples radially toward an adjustable focal center.