webgl fullscreen triangle

demo url

data:text/html,%3Cstyle%3E*%7Bmargin%3A0%3Bwidth%3A100%25%3Bheight%3A100%25%3Boverflow%3Ahidden%3B%7D%3C%2Fstyle%3E%3Cscript%20type%3Dmodule%3Econst%20n%3Ddocument.body.appendChild(document.createElement(%22canvas%22))%2Ce%3Dn.getContext(%22webgl2%22)%2Cc%3De.createShader(e.VERTEX_SHADER)%3Be.shaderSource(c%2C%22%23version%20300%20es%5Cnout%20vec2%20a%3Bconst%20vec2%20b%5B3%5D%3Dvec2%5B%5D(vec2(-1)%2Cvec2(3%2C-1)%2Cvec2(-1%2C3))%3Bconst%20vec2%20c%5B3%5D%3Dvec2%5B%5D(vec2(0)%2Cvec2(2%2C0)%2Cvec2(0%2C2))%3Bvoid%20main()%7Bgl_Position%3Dvec4(b%5Bgl_VertexID%5D%2C0%2C1)%3Ba%3Dc%5Bgl_VertexID%5D%3B%7D%22)%3Be.compileShader(c)%3Bconst%20r%3De.createShader(e.FRAGMENT_SHADER)%3Be.shaderSource(r%2C%22%23version%20300%20es%5Cnprecision%20lowp%20float%3Buniform%20float%20d%3Bin%20vec2%20a%3Bout%20vec4%20e%3Bvoid%20main()%7Be%3Dvec4(.3%2C.2%2C.5%2C1)%3Be.rgb%2B%3D.5%2B.3*cos(a.xyx%2Bd)%3B%7D%22)%3Be.compileShader(r)%3Bconst%20o%3De.createProgram()%3Be.attachShader(o%2Cc)%3Be.attachShader(o%2Cr)%3Be.linkProgram(o)%3Be.useProgram(o)%3Bconst%20t%3Da%3D%3E%7BrequestAnimationFrame(t)%2Ce.uniform1f(e.getUniformLocation(o%2C%22d%22)%2Ca%2F1e3)%2Ce.drawArrays(e.TRIANGLES%2C0%2C3)%7D%3Bt()%3B%3C%2Fscript%3E

index.html

<style>
  * {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>
<script type="module">
  const canvas = document.body.appendChild(document.createElement('canvas'))
  const gl = canvas.getContext('webgl2')
  const vertex = gl.createShader(gl.VERTEX_SHADER)
  gl.shaderSource(
    vertex,
    /* glsl */ `#version 300 es
      out vec2 vUv;

      const vec2 position[3] = vec2[](vec2(-1), vec2(3, -1), vec2(-1, 3));
      const vec2 uv[3] = vec2[](vec2(0), vec2(2, 0), vec2(0, 2));

      void main() {
        gl_Position = vec4(position[gl_VertexID], 0, 1);
        vUv = uv[gl_VertexID];
      }
    `,
  )
  gl.compileShader(vertex)
  const fragment = gl.createShader(gl.FRAGMENT_SHADER)
  gl.shaderSource(
    fragment,
    /* glsl */ `#version 300 es
      precision lowp float;

      uniform float time;
      in vec2 vUv;
      out vec4 color;

      void main() {
        color = vec4(.3, .2, .5, 1);
        color.rgb += .5 + .3 * cos(vUv.xyx + time);
      }
    `,
  )
  gl.compileShader(fragment)
  const program = gl.createProgram()
  gl.attachShader(program, vertex)
  gl.attachShader(program, fragment)
  gl.linkProgram(program)
  gl.useProgram(program)
  const animate = (time) => {
    requestAnimationFrame(animate)
    gl.uniform1f(gl.getUniformLocation(program, 'time'), time / 1000)
    gl.drawArrays(gl.TRIANGLES, 0, 3)
  }
  animate()
</script>