Dot Screen
Convert source-image luminance into a rotated monochrome dot pattern. dotScreen produces a
graphic halftone treatment whose orientation, origin, and cell size remain fully adjustable.
At a Glance
| Property | Value |
|---|---|
| Export | dotScreen |
| Backends | WebGPU and WebGL2 |
| Render passes | One fullscreen color-filter pass |
| Additional inputs | None |
Usage
import {ShaderPassRenderer} from '@luma.gl/engine';
import {dotScreen} from '@luma.gl/effects';
const renderer = new ShaderPassRenderer(device, {shaderPasses: [dotScreen]});
renderer.renderToScreen({
sourceTexture: sceneColorTexture,
uniforms: {dotScreen: {center: [0.5, 0.5], angle: 0.42, size: 5}}
});
Parameters
| Parameter | Default | Description |
|---|---|---|
center | [0.5, 0.5] | Normalized origin of the rotated screen pattern. |
angle | 1.1 | Dot-screen rotation in radians. |
size | 3 | Dot-cell size in image pixels; minimum is 1. |
Fine cells preserve more source detail, while larger cells make the underlying print structure more prominent.
Composition and Cost
The effect runs in one fullscreen pass and derives its pattern from current color and image coordinates. Raising Brightness and Contrast before the dot screen can sharpen tonal separation; Color Halftone preserves multiple color channels when a monochrome treatment is not desired.
Related Effects
- Color Halftone creates independent full-color print patterns.
- Brightness and Contrast controls the luminance entering the screen.
- Ink produces a complementary contour-oriented illustrated style.