Shaded-image NPM

shaded-image

Apply a stack of post-processing style shaders to a static image

Note When using React, I recommend using the React component wrapper shaded-image-react

Install

npm install shaded-image

Usage

Inbuilt Components

You can use one of the inbuilt effect components

<head>
  <script type="module">
    import "shaded-image";
  </script>
</head>
<body>
  <div style="display: flex">
    <si-greyscale-image image="./image.svg" class="logo" />
  </div>
</body>

<head>
  <script type="module">
    import "shaded-image";
  </script>
</head>
<body>
  <div style="display: flex">
    <si-anim-test-image image="./image.svg" class="logo" />
  </div>
</body>
`;

Custom Effects

You can create your own custom effects by defining a glsl fragment and vertex shader. Uniform and Varying values can be set using initFunction and updateFunction

GrayscaleImage.js

<head>
  <script type="module">
    import "shaded-image";
    const fragmentShader = `
      varying highp vec2 vTextureCoord;
      uniform sampler2D uSampler;

      void main(void) {
      	lowp vec4 tex = texture2D(uSampler, vTextureCoord);
      	lowp float col = (0.2126 * tex.r + 0.7152 * tex.g + 0.0722*tex.b);
      	gl_FragColor = vec4(col, col, col, tex.a);
      }

      `;
    const vertexShader = `
      attribute vec3 aVertexPosition;
      attribute vec2 aTextureCoord;

      varying highp vec2 vTextureCoord;

      void main(void) {
      	gl_Position =  vec4(aVertexPosition.xy, 0.0, 1.0);
      	vTextureCoord = aTextureCoord;
      }
    `;
    const shaders = [
      {
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
        initFunction: (args) => {},
        updateFunction: (args) => {},
      },
    ];

    const greyImage = document.querySelector("#example");
    greyImage.shaders = shaders;
  </script>
</head>
<body>
  <div style="display: flex">
    <si-shaded-image id="example" image="./image.svg" class="logo" />
  </div>
</body>