gl-lite/example.html at main · roprgm/gl-lite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>gl-lite Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="m-0 flex min-h-screen items-center justify-center bg-gray-900">
    <div class="text-center">
      <h1 class="mb-5 text-2xl font-medium text-white">gl-lite Example</h1>
      <canvas
        id="canvas"
        width="512"
        height="512"
        class="rounded-lg border-2 border-gray-700 shadow-2xl"
      ></canvas>
    </div>

    <script type="module">
      import { GLRenderer } from "./dist/index.js";

      const canvas = document.getElementById("canvas");
      const renderer = new GLRenderer({ canvas });

      // Create a simple animated shader
      const program = renderer.program({
        vert: `
        precision mediump float;
        attribute vec2 position;
        varying vec2 vUv;
        void main() {
          vUv = position * 0.5 + 0.5;
          gl_Position = vec4(position, 0.0, 1.0);
        }
      `,
        frag: `
        precision mediump float;
        uniform float time;
        uniform vec2 resolution;
        varying vec2 vUv;

        void main() {
          vec2 uv = vUv * 2.0 - 1.0;
          uv.x *= resolution.x / resolution.y;

          float d = length(uv);
          float angle = atan(uv.y, uv.x);

          float ripple = sin(d * 10.0 - time * 2.0) * 0.5 + 0.5;
          float spin = sin(angle * 5.0 + time) * 0.5 + 0.5;

          vec3 color = vec3(
            ripple,
            spin,
            sin(d * 5.0 + time) * 0.5 + 0.5
          );

          gl_FragColor = vec4(color, 1.0);
        }
      `,
        uniforms: {
          time: (props) => props.time,
          resolution: [canvas.width, canvas.height],
        },
      });

      // Animation loop
      let time = 0;
      function animate() {
        time += 0.016;

        renderer.clear([0.1, 0.1, 0.15, 1]);
        program.draw({ time });

        requestAnimationFrame(animate);
      }
      animate();
    </script>
  </body>
</html>