vrplotlib/fbexamplemod.html at master · taoroalin/vrplotlib · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>

<head></head>

<body>
  <script src="https://twgljs.org/dist/2.x/twgl.min.js"></script>
  <canvas></canvas>
  <script>
    var vs = `
attribute vec4 position;

uniform mat4 matrix;

varying vec2 v_texcoord;

void main() {
  gl_Position = matrix * position;
  v_texcoord = position.xy * .5 + .5;
}
`;

    var colorFS = `
precision mediump float;

uniform vec4 color;

void main() {
  gl_FragColor = color;
}
`;

    var mixFS = `
precision mediump float;

varying vec2 v_texcoord;

uniform sampler2D tex1;
uniform sampler2D tex2;

void main() {
  // probably should use different texture coords for each
  // texture for more flexibility but I'm lazy
  vec4 color1 = texture2D(tex1, v_texcoord);
  vec4 color2 = texture2D(tex2, v_texcoord);
  gl_FragColor = mix(color1, color2, 0.5);
}
`;

    const gl = document.querySelector("canvas").getContext("webgl");
    const colorProgram = twgl.createProgramFromSources(gl, [vs, colorFS]);
    const mixProgram = twgl.createProgramFromSources(gl, [vs, mixFS]);

    // make 2 textures by attaching them to framebuffers and rendering to them
    const texFbPair1 = createTextureAndFramebuffer(gl, 64, 64);
    const texFbPair2 = createTextureAndFramebuffer(gl, 64, 64);

    const buf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
      -1, -1,
      1, -1,
      -1, 1,
      -1, 1,
      1, -1,
      1, 1,
    ]), gl.STATIC_DRAW);

    function setAttributes(buf, positionLoc) {
      gl.enableVertexAttribArray(positionLoc);
      gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
    }

    const colorPrgPositionLoc = gl.getAttribLocation(colorProgram, "position");
    setAttributes(buf, colorPrgPositionLoc);
    const colorLoc = gl.getUniformLocation(colorProgram, "color");
    const colorProgMatrixLoc = gl.getUniformLocation(colorProgram, "matrix");

    // draw red rect to first texture through the framebuffer it's attached to
    gl.useProgram(colorProgram);

    gl.bindFramebuffer(gl.FRAMEBUFFER, texFbPair1.fb);
    gl.viewport(0, 0, 64, 64);
    gl.uniform4fv(colorLoc, [0, 1, 0, 1]);
    gl.uniformMatrix4fv(colorProgMatrixLoc, false, [
      0.5, 0, 0, 0,
      0, .25, 0, 0,
      0, 0, 1, 0,
      .2, .3, 0, 1,
    ]);

    gl.drawArrays(gl.TRIANGLES, 0, 6);


    // Draw a blue rect to the second texture through the framebuffer it's attached to
    gl.bindFramebuffer(gl.FRAMEBUFFER, texFbPair2.fb);
    gl.viewport(0, 0, 64, 64);
    gl.uniform4fv(colorLoc, [0, 0, 1, 1]);
    gl.uniformMatrix4fv(colorProgMatrixLoc, false, [
      0.25, 0, 0, 0,
      0, .5, 0, 0,
      0, 0, 1, 0,
      .2, .3, 0, 1,
    ]);

    gl.drawArrays(gl.TRIANGLES, 0, 6);

    // Draw both textures to the canvas
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    const mixPrgPositionLoc = gl.getAttribLocation(mixProgram, "position");
    setAttributes(buf, mixPrgPositionLoc);

    const mixProgMatrixLoc = gl.getUniformLocation(mixProgram, "matrix");

    const tex1Loc = gl.getUniformLocation(mixProgram, "tex1");
    const tex2Loc = gl.getUniformLocation(mixProgram, "tex2");

    gl.useProgram(mixProgram);

    gl.uniform1i(tex1Loc, 0);
    gl.uniform1i(tex2Loc, 1);
    gl.activeTexture(gl.TEXTURE0 + 0);
    gl.bindTexture(gl.TEXTURE_2D, texFbPair1.tex);
    gl.activeTexture(gl.TEXTURE0 + 1);
    gl.bindTexture(gl.TEXTURE_2D, texFbPair2.tex);
    gl.uniformMatrix4fv(mixProgMatrixLoc, false, [
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1,
    ]);

    gl.drawArrays(gl.TRIANGLES, 0, 6);

    function createTextureAndFramebuffer(gl, width, height) {
      const tex = gl.createTexture();
      gl.bindTexture(gl.TEXTURE_2D, tex);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      const fb = gl.createFramebuffer();
      gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
      gl.framebufferTexture2D(
        gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
      return { tex: tex, fb: fb };
    }
  </script>
</body>