Fluted Glass

Fluted Glass is an image filter shader that distorts an input image through configurable ribbed or streaked patterns, simulating the look of fluted or textured glass. Grid shape, distortion profile, blur, edge softness, and grain are all individually adjustable.

This is an image filter shader — it requires an image input. In React, pass a URL string to the image prop and it is loaded automatically. In vanilla JS, pass a fully loaded HTMLImageElement to the u_image uniform.

Usage

React
Vanilla JS

import { FlutedGlass } from '@paper-design/shaders-react';

export default function Example() {
  return (
    <FlutedGlass
      image="/my-photo.jpg"
      shape="lines"
      distortionShape="prism"
      size={0.5}
      distortion={0.5}
      shadows={0.25}
      highlights={0.1}
      blur={0}
      edges={0.25}
      colorBack="#00000000"
      colorShadow="#000000"
      colorHighlight="#ffffff"
      style={{ width: 600, height: 400 }}
    />
  );
}

import { ShaderMount, flutedGlassFragmentShader, GlassGridShapes, GlassDistortionShapes } from '@paper-design/shaders';

const image = new Image();
image.crossOrigin = 'anonymous';
image.src = '/my-photo.jpg';

image.addEventListener('load', () => {
  const container = document.querySelector('#canvas-container');

  const shader = new ShaderMount(container, flutedGlassFragmentShader, {
    u_image: image,
    u_colorBack: [0, 0, 0, 0],
    u_colorShadow: [0, 0, 0, 1],
    u_colorHighlight: [1, 1, 1, 1],
    u_shadows: 0.25,
    u_size: 0.5,
    u_angle: 0,
    u_shape: GlassGridShapes.lines,
    u_distortionShape: GlassDistortionShapes.prism,
    u_distortion: 0.5,
    u_highlights: 0.1,
    u_shift: 0,
    u_blur: 0,
    u_edges: 0.25,
    u_stretch: 0,
    u_marginLeft: 0,
    u_marginRight: 0,
    u_marginTop: 0,
    u_marginBottom: 0,
    u_grainMixer: 0,
    u_grainOverlay: 0,
  });
});

The HTMLImageElement must be fully loaded before passing it to ShaderMount. Listen for the load event as shown above.

Props

image

string (React) | HTMLImageElement (vanilla JS)

required

The source image to filter. In React, pass a URL string — the component loads it automatically. In vanilla JS, pass a fully loaded HTMLImageElement as u_image.

shape

GlassGridShape

default:"'lines'"

Shape of the repeating grid pattern. Use the GlassGridShapes enum (vanilla JS) or string literal (React).

Value	Description
`lines`	Straight parallel lines
`linesIrregular`	Organically varying lines
`wave`	Sinusoidal wave pattern
`zigzag`	Zigzag stripe pattern
`pattern`	Crosshatch pattern

distortionShape

GlassDistortionShape

default:"'prism'"

The profile of distortion applied within each stripe. Use the GlassDistortionShapes enum (vanilla JS) or string literal (React).

Value	Description
`prism`	Prism-like refraction
`lens`	Lens-shaped bulge
`contour`	Contour-following distortion
`cascade`	Cascading waterfall-like flow
`flat`	Flat, minimal distortion

size

number

default:"0.5"

Size of the distortion shape grid. Range: 0 to 1.

angle

number

default:"0"

Direction of the grid relative to the image, in degrees. Range: 0 to 180.

distortion

number

default:"0.5"

Power of distortion applied within each stripe. Range: 0 to 1.

shift

number

default:"0"

Texture shift in the direction opposite the grid. Range: -1 to 1.

stretch

number

default:"0"

Extra distortion along the grid lines. Range: 0 to 1.

blur

number

default:"0"

One-directional blur over the image and extra blur around edges. Range: 0 to 1.

edges

number

default:"0.25"

Glass distortion and softness on the image edges. Range: 0 to 1.

shadows

number

default:"0.25"

Color gradient added over the image and background, following the distortion shape. Range: 0 to 1.

highlights

number

default:"0.1"

Thin strokes rendered along the distortion shape, useful for anti-aliasing on small grids. Range: 0 to 1.

colorBack

string

default:"'#00000000'"

Background color as a CSS color string (including alpha). Visible outside the image frame.

colorShadow

string

default:"'#000000'"

Color of shadow gradients applied over the distortion pattern.

colorHighlight

string

default:"'#ffffff'"

Color of highlight strokes along the distortion edges.

margin

number

default:"0"

Shorthand to set all four margins simultaneously. Range: 0 to 1.

marginLeft

number

default:"0"

Distance from the left edge to the effect. Range: 0 to 1.

marginRight

number

default:"0"

Distance from the right edge to the effect. Range: 0 to 1.

marginTop

number

default:"0"

Distance from the top edge to the effect. Range: 0 to 1.

marginBottom

number

default:"0"

Distance from the bottom edge to the effect. Range: 0 to 1.

grainMixer

number

default:"0"

Strength of grain distortion applied to shape edges. Range: 0 to 1.

grainOverlay

number

default:"0"

Post-processing black/white grain overlay strength. Range: 0 to 1.

Presets

The following presets are exported from @paper-design/shaders-react:

Export	Name	Description
`defaultPreset`	Default	Straight lines with prism distortion
`wavesPreset`	Waves	Wave grid with contour distortion and blur
`abstractPreset`	Abstract	Irregular lines at high scale and full blur
`foldsPreset`	Folds	Cascade distortion with margins giving a folded edge look

import { flutedGlassPresets } from '@paper-design/shaders-react';

Enums

Import GlassGridShapes and GlassDistortionShapes from @paper-design/shaders when using the vanilla JS API:

import { GlassGridShapes, GlassDistortionShapes } from '@paper-design/shaders';

// GlassGridShapes: lines | linesIrregular | wave | zigzag | pattern
// GlassDistortionShapes: prism | lens | contour | cascade | flat

Get Started

Core Concepts

Shaders

Image Filters

Usage

Props

Presets

Enums

Get Started

Core Concepts

Shaders

Image Filters

Documentation Index

​Usage

​Props

​Presets

​Enums

Usage

Props

Presets

Enums