Fluted Glass

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

function App() {
  return (
    <FlutedGlass
      image="/path/to/image.jpg"
      size={0.5}
      shape="lines"
      distortionShape="prism"
      distortion={0.5}
      angle={0}
      shadows={0.25}
      highlights={0.1}
      blur={0}
      edges={0.25}
    />
  );
}

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

const canvas = document.getElementById('canvas');
const mount = mountShader(canvas, {
  fragmentShader: flutedGlassFragmentShader,
  uniforms: {
    u_image: '/path/to/image.jpg',
    u_colorBack: [0, 0, 0, 0],
    u_colorShadow: [0, 0, 0, 1],
    u_colorHighlight: [1, 1, 1, 1],
    u_size: 0.5,
    u_shape: GlassGridShapes.lines, // 1
    u_distortionShape: GlassDistortionShapes.prism, // 1
    u_distortion: 0.5,
    u_angle: 0,
    u_shadows: 0.25,
    u_highlights: 0.1,
    u_blur: 0,
    u_edges: 0.25,
    u_shift: 0,
    u_stretch: 0,
    u_marginLeft: 0,
    u_marginRight: 0,
    u_marginTop: 0,
    u_marginBottom: 0,
    u_grainMixer: 0,
    u_grainOverlay: 0,
    // Sizing uniforms
    u_fit: 2, // 0=none, 1=contain, 2=cover
    u_scale: 1,
    u_rotation: 0,
    u_offsetX: 0,
    u_offsetY: 0,
    u_originX: 0.5,
    u_originY: 0.5,
  },
});

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

function App() {
  return <FlutedGlass {...flutedGlassPresets[0].params} image="/image.jpg" />;
}