shader-template.html

<!-- Note: feel free to delete all the comments while editing copy of this template -->
<!--
  "foo-bar" stands for the name of the algorithm or technique you want to exemplify.
  Note: the id specified here will become a part of website navigation, e.g.:

  https://xemantic.github.io/creative-code-algorithms-and-techniques/#reaction-diffusion
-->
<article id="foo-bar">
  <!-- id's have to be unique and we can't use "-" anymore, so let's go CamelCase -->
  <canvas id="FooBarCanvas"></canvas>
  <!--
    Here we have an example of the default Shadertoy shader, but it can be any shader.
    See also multipass-shader-template.html
  -->
  <script type="x-shader/x-fragment" id="FooBarShader">
    precision highp float;

    uniform vec2  iResolution;
    uniform float iTime;

    // -- Paste your Shadertoy code here:

    void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
      // Normalized pixel coordinates (from 0 to 1)
      vec2 uv = fragCoord/iResolution.xy;

      // Time varying pixel color
      vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

      // Output to screen
      fragColor = vec4(col,1.0);
    }

    // -- End of Shadertoy code

    void main() {
      mainImage(gl_FragColor, gl_FragCoord.xy);
    }
  </script>
  <!-- Documentation: https://github.com/xemantic/shader-web-background -->
  <script>
    shaderWebBackground.shade((ctx) => ({
      canvas: document.getElementById("FooBarCanvas"),
      onBeforeFrame: () => {
        ctx.time = performance.now() / 1000;
      },
      shaders: {
        FooBarShader: {
          uniforms: {
            iResolution: () => ctx.resolution,
            iTime:       () => ctx.time
          }
        }
      }
    }));
  </script>
</article>