patch-notes-game/game.html at main · Frogpants/patch-notes-game · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

<html>
<head>
  <meta charset="UTF-8">
  <title>WebGL Post-Process Game</title>
  <style>
    body { margin: 0; background: black; }
    canvas { display: block; width: 100vw; height: 100vh; }
  </style>
</head>
<body>
  <canvas id="glCanvas"></canvas>

  <script type="module">
    import {
      initWebGL,
      loadShaderSource,
      createProgram,
      createFramebuffer
    } from "./js/webglUtils.js";

    const canvas = document.getElementById("glCanvas");
    const gl = initWebGL(canvas);

    async function main() {
      // obj
      const sceneVertSrc = await loadShaderSource("./shaders/objVert.glsl");
      const sceneFragSrc = await loadShaderSource("./shaders/objFrag.glsl");
      const sceneProgram = createProgram(gl, sceneVertSrc, sceneFragSrc);

      // post
      const postVertSrc = await loadShaderSource("./shaders/postVertex.glsl");
      const postFragSrc = await loadShaderSource("./shaders/postFragment.glsl");
      const postProgram = createProgram(gl, postVertSrc, postFragSrc);

      const framebuffer = createFramebuffer(gl, canvas.width, canvas.height);

      const quadVertices = new Float32Array([
        -1, -1, 0, 0,
         1, -1, 1, 0,
        -1,  1, 0, 1,
         1,  1, 1, 1,
      ]);

      const quadBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, quadVertices, gl.STATIC_DRAW);

      const a_position = gl.getAttribLocation(postProgram, "a_position");
      const a_texcoord = gl.getAttribLocation(postProgram, "a_texcoord");

      gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 16, 0);
      gl.enableVertexAttribArray(a_position);

      gl.vertexAttribPointer(a_texcoord, 2, gl.FLOAT, false, 16, 8);
      gl.enableVertexAttribArray(a_texcoord);

      function renderScene() {
        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer.fb);
        gl.viewport(0, 0, canvas.width, canvas.height);
        gl.clearColor(0.1, 0.1, 0.1, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.useProgram(sceneProgram);

        // do not forget this is where to put the obj rendering code (I keep forgetting)
      }

      function renderPost() {
        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
        gl.viewport(0, 0, canvas.width, canvas.height);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.useProgram(postProgram);

        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, framebuffer.tex);
        const u_texture = gl.getUniformLocation(postProgram, "u_texture");
        gl.uniform1i(u_texture, 0);

        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 16, 0);
        gl.enableVertexAttribArray(a_position);
        gl.vertexAttribPointer(a_texcoord, 2, gl.FLOAT, false, 16, 8);
        gl.enableVertexAttribArray(a_texcoord);

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
      }

      function loop() {
        renderScene();
        renderPost();
        requestAnimationFrame(loop);
      }

      loop();
    }

    main();
  </script>
</body>
</html>