Skip to main content

Ink

Emphasize local image contrast as dark illustrated contours. ink produces a graphic, hand-drawn treatment directly from scene color without requiring depth, normals, or a separate object-identification buffer.

GitHub
0s

At a Glance​

PropertyValue
Exportink
BackendsWebGPU and WebGL2
Render passesOne neighborhood-sampling pass
Additional inputsNone

Usage​

import {ShaderPassRenderer} from '@luma.gl/engine';
import {brightnessContrast, ink} from '@luma.gl/engine/effects';

const renderer = new ShaderPassRenderer(device, {
  shaderPasses: [brightnessContrast, ink]
});

renderer.renderToScreen({
  sourceTexture: sceneColorTexture,
  uniforms: {
    brightnessContrast: {brightness: 0.04, contrast: 0.28},
    ink: {strength: 0.36}
  }
});

Parameters​

ParameterDefaultSuggested rangeDescription
strength0.250 to 1Weight of the dark contour response derived from neighboring source colors.

Higher strengths reveal more aggressive illustrative lines. A value of zero suppresses the visible treatment but does not remove the configured fullscreen pass.

Performance and Composition​

Ink performs one render pass but reads nearby pixels to derive its local contrast response. Increase contrast beforehand for stronger edge separation. Use Screen-Space Outlines when geometric silhouettes should remain independent of surface texture or illumination patterns.