quad_prebaked_shadow.html

<!-- vim: sw=4 ts=4 expandtab smartindent ft=javascript
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WebGL Demo</title>
    <style> document, body { margin: 0px; padding: 0px; overflow: hidden; } </style>
  </head>

  <body>
    <canvas id="inspectorGraphCanvas"></canvas>
    <script>
function mat4_create() {
    let out = new Float32Array(16);
    out[0] = 1;
    out[5] = 1;
    out[10] = 1;
    out[15] = 1;
    return out;
}
function mat4_ortho(out, left, right, bottom, top, near, far) {
    let lr = 1 / (left - right);
    let bt = 1 / (bottom - top);
    let nf = 1 / (near - far);
    out[0] = -2 * lr;
    out[1] = 0;
    out[2] = 0;
    out[3] = 0;
    out[4] = 0;
    out[5] = -2 * bt;
    out[6] = 0;
    out[7] = 0;
    out[8] = 0;
    out[9] = 0;
    out[10] = 2 * nf;
    out[11] = 0;
    out[12] = (left + right) * lr;
    out[13] = (top + bottom) * bt;
    out[14] = (far + near) * nf;
    out[15] = 1;
    return out;
}

const canvas = document.getElementById('inspectorGraphCanvas');
const gl = canvas.getContext('webgl2', {antialias: true});
if (!gl) { alert('Failed to initialize WebGL'); }

(window.onresize = () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    /* account for e.g. high-dpi retina macbook screens */
    if (window.devicePixelRatio > 1) {
        canvas.style.width = `${canvas.width}px`;
        canvas.style.height = `${canvas.height}px`;
        canvas.width *= window.devicePixelRatio;
        canvas.height *= window.devicePixelRatio;
    }

})();

const READOUT_SIZE_X = 315;
const READOUT_SIZE_Y = 150;

class PopupRenderer {
    constructor(gl) {
        const geo_vbuf_pos = gl.createBuffer();
        const geo_vbuf_color = gl.createBuffer();
        const geo_ibuf = gl.createBuffer();

        const img_vbuf_pos = this.img_vbuf_pos = gl.createBuffer();
        const img_vbuf_uv  = this.img_vbuf_uv  = gl.createBuffer();
        const img_ibuf     = this.img_ibuf     = gl.createBuffer();

        /* compile shaders */
        let shaders;
        {
            const vsImg = `
                attribute vec3 a_pos;
                attribute vec2 a_uv;

                uniform mat4 u_matrix;

                varying vec2 v_uv;

                void main() {
                    gl_Position = u_matrix * vec4(a_pos.xyz, 1);
                    v_uv = a_uv;
                }`;

            const fsImg = `
                precision mediump float;

                varying vec2 v_uv;

                uniform sampler2D u_texture;

                void main() {
                    gl_FragColor = texture2D(u_texture, v_uv);
                }`;

            const vsGeo = `
                attribute vec3 a_pos;
                attribute vec4 a_color;

                uniform mat4 u_matrix;
                uniform vec4 u_color_mask;

                varying vec4 v_color;

                void main() {
                    gl_Position = u_matrix * vec4(a_pos.xyz, 1);
                    v_color = a_color * u_color_mask;
                }`;

            const fsGeo = `
                precision mediump float;

                varying vec4 v_color;

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

            const vsFullscreenBlur = `#version 300 es
                precision mediump float;

                out vec2 v_texcoord;

                void main(void) {
                    float x = float((gl_VertexID & 1) << 2);
                    float y = float((gl_VertexID & 2) << 1);
                    v_texcoord.x = x * 0.5;
                    v_texcoord.y = y * 0.5;
                    gl_Position = vec4(x - 1.0, y - 1.0, 0, 1);
                }
            `;

            const fsFullscreenBlur = `#version 300 es
                precision mediump float;

                uniform sampler2D u_texture;
                uniform vec2 u_direction;

                in vec2 v_texcoord;

                out vec4 frag_color;

                void main(void) {
                    vec2 one_pixel = u_direction*(vec2(1) / vec2(textureSize(u_texture, 0)));

                    frag_color = texture(u_texture, v_texcoord) * 0.2270270270;

                    frag_color += texture(u_texture, v_texcoord + one_pixel    ) * 0.1945945946;
                    frag_color += texture(u_texture, v_texcoord - one_pixel    ) * 0.1945945946;

                    frag_color += texture(u_texture, v_texcoord + one_pixel*2.0) * 0.1216216216;
                    frag_color += texture(u_texture, v_texcoord - one_pixel*2.0) * 0.1216216216;

                    frag_color += texture(u_texture, v_texcoord + one_pixel*3.0) * 0.0540540541;
                    frag_color += texture(u_texture, v_texcoord - one_pixel*3.0) * 0.0540540541;

                    frag_color += texture(u_texture, v_texcoord + one_pixel*4.0) * 0.0162162162;
                    frag_color += texture(u_texture, v_texcoord - one_pixel*4.0) * 0.0162162162;
                }
            `;

            function createProgram(gl, vertexSource, fragmentSource) {
                function createShader(gl, type, source) {
                    const shader = gl.createShader(type);
                    gl.shaderSource(shader, source);
                    gl.compileShader(shader);
                    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                        throw new Error(gl.getShaderInfoLog(shader));
                    }
                    return shader;
                }

                const program = gl.createProgram();

                const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
                const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);

                gl.attachShader(program, vertexShader);
                gl.attachShader(program, fragmentShader);

                gl.linkProgram(program);
                if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                    throw new Error(gl.getProgramInfoLog(program));
                }

                const wrapper = {program};

                const numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
                for (let i = 0; i < numAttributes; i++) {
                    const attribute = gl.getActiveAttrib(program, i);
                    wrapper[attribute.name] = gl.getAttribLocation(program, attribute.name);
                }
                const numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
                for (let i = 0; i < numUniforms; i++) {
                    const uniform = gl.getActiveUniform(program, i);
                    wrapper[uniform.name] = gl.getUniformLocation(program, uniform.name);
                }

                return wrapper;
            }

            shaders = this.shaders = {
                img: createProgram(gl, vsImg, fsImg),
                geo: createProgram(gl, vsGeo, fsGeo),
                fullscreenBlur: createProgram(gl, vsFullscreenBlur, fsFullscreenBlur),
            };
        }

        let prebaked;
        {
          /* more robust approach documented here https://stackoverflow.com/a/55976760 */
          const canvas_width  = READOUT_SIZE_X*window.devicePixelRatio;
          const canvas_height = READOUT_SIZE_Y*window.devicePixelRatio;

          const pad = 40;
          const world_width  = READOUT_SIZE_X;
          const world_height = READOUT_SIZE_Y;
          gl.viewport(
              0,
              0,
              canvas_width,
              canvas_height
          );

          const pMatrix = mat4_ortho(mat4_create(), -pad, world_width+pad, -pad, world_height+pad, 1, -1);

          const render_targets = [
            { tex: gl.createTexture(), fb: gl.createFramebuffer() },
            { tex: gl.createTexture(), fb: gl.createFramebuffer() },
          ];
         
          for (const rt of render_targets) {
              gl.bindTexture(gl.TEXTURE_2D, rt.tex);

              // Upload the image into the texture.
              gl.texImage2D(
                  /* target         */ gl.TEXTURE_2D,
                  /* level          */ 0,
                  /* internalformat */ gl.RGBA,
                  /* width          */ canvas_width ,
                  /* height         */ canvas_height,
                  /* border,        */ 0,
                  /* format,        */ gl.RGBA,
                  /* type,          */ gl.UNSIGNED_BYTE,
                  /* data           */ 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);

              gl.bindFramebuffer(gl.FRAMEBUFFER, rt.fb);
              gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, rt.tex, 0);
          }

          /* prebaked rt is bound */

          {
            const geo_idx = [];
            const geo_pos = [];
            const geo_color = [];

            function drawBox( min_x, min_y,   max_x, max_y,   color ) {
                geo_color.push(
                    color[0], color[1], color[2], color[3],
                    color[0], color[1], color[2], color[3],
                    color[0], color[1], color[2], color[3],
                    color[0], color[1], color[2], color[3]
                )

                const vbuf_i = geo_pos.length / 3;
                geo_pos.push(max_x, min_y, 0.1);
                geo_pos.push(min_x, min_y, 0.1);
                geo_pos.push(min_x, max_y, 0.1);
                geo_pos.push(max_x, max_y, 0.1);

                geo_idx.push(vbuf_i + 0, vbuf_i + 1, vbuf_i + 2, vbuf_i + 2, vbuf_i + 3, vbuf_i + 0);
            }

            function drawTriangle(
                a_x, a_y,
                b_x, b_y,
                c_x, c_y,
                color
            ) {
                geo_color.push(
                    color[0], color[1], color[2], color[3],
                    color[0], color[1], color[2], color[3],
                    color[0], color[1], color[2], color[3]
                )

                const vbuf_i = geo_pos.length / 3;
                geo_pos.push(a_x, a_y, 0.1);
                geo_pos.push(b_x, b_y, 0.1);
                geo_pos.push(c_x, c_y, 0.1);

                geo_idx.push(vbuf_i + 0, vbuf_i + 1, vbuf_i + 2);
            }

            const ARROW_HEIGHT = 40
            drawBox(
                0, 0,
                READOUT_SIZE_X, READOUT_SIZE_Y - ARROW_HEIGHT,
                [100, 80, 60, 255]
            );
            drawTriangle(
                READOUT_SIZE_X*0.5     , READOUT_SIZE_Y,
                READOUT_SIZE_X*0.5 - 30, READOUT_SIZE_Y - ARROW_HEIGHT,
                READOUT_SIZE_X*0.5 + 30, READOUT_SIZE_Y - ARROW_HEIGHT,
                [100, 80, 60, 255]
            )


            /* set up premultiplied alpha */
            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
            gl.enable(gl.BLEND);

            gl.enable(gl.DEPTH_TEST);
            gl.depthFunc(gl.LEQUAL);

            /* clear all */
            gl.clearColor(0, 0, 0, 0);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            /* shadow geo pass (see color mask) */
            {
                gl.useProgram(shaders.geo.program);
                gl.enableVertexAttribArray(shaders.geo.a_pos);
                gl.enableVertexAttribArray(shaders.geo.a_color);

                gl.uniformMatrix4fv(shaders.geo.u_matrix, false, pMatrix);
                // gl.uniform4fv(shaders.geo.u_color_mask, [30, 30, 30, 255].map(x => x/255));
                gl.uniform4fv(shaders.geo.u_color_mask, [0, 0, 0, 0.15]);

                /* upload/bind geometry */

                {
                    gl.bindBuffer(gl.ARRAY_BUFFER, geo_vbuf_pos);
                    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geo_pos), gl.STATIC_DRAW);
                    gl.vertexAttribPointer(shaders.geo.a_pos, 3, gl.FLOAT, false, 0, 0);

                    gl.bindBuffer(gl.ARRAY_BUFFER, geo_vbuf_color);
                    gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(geo_color), gl.STATIC_DRAW);
                    gl.vertexAttribPointer(shaders.geo.a_color, 4, gl.UNSIGNED_BYTE, true, 0, 0);

                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, geo_ibuf);
                    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(geo_idx), gl.STATIC_DRAW);
                }

                gl.drawElements(gl.TRIANGLES, geo_idx.length, gl.UNSIGNED_SHORT, 0);
            }

            gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
            gl.enable(gl.BLEND);

            /* blur time */
            {
                const passes = [
                    [render_targets[1].fb, render_targets[0].tex, [ 0, 10]],
                    [render_targets[0].fb, render_targets[1].tex, [ 9,  0]],
                    [render_targets[1].fb, render_targets[0].tex, [ 0,  8]],
                    [render_targets[0].fb, render_targets[1].tex, [ 7,  0]],
                    [render_targets[1].fb, render_targets[0].tex, [ 0,  6]],
                    [render_targets[0].fb, render_targets[1].tex, [ 5,  0]],
                    [render_targets[1].fb, render_targets[0].tex, [ 0,  4]],
                    [render_targets[0].fb, render_targets[1].tex, [ 3,  0]],
                    [render_targets[1].fb, render_targets[0].tex, [ 0,  2]],
                    [render_targets[0].fb, render_targets[1].tex, [ 1,  0]]
                ];
                for (const [dst_fb, src_tex, dir] of passes) {
                    gl.bindFramebuffer(gl.FRAMEBUFFER, dst_fb);

                    gl.useProgram(shaders.fullscreenBlur.program);

                    gl.uniform2fv(shaders.fullscreenBlur.u_direction, [dir[0]*2, dir[1]*2]);

                    /* bind tex */
                    {
                        gl.activeTexture(gl.TEXTURE0);
                        gl.bindTexture(gl.TEXTURE_2D, src_tex);
                        gl.uniform1i(shaders.fullscreenBlur.u_texture, 0);
                    }

                    gl.drawArrays(gl.TRIANGLE_FAN, 0, 3);
                }
            }

            /* non-shadow thing time */
            {
                gl.useProgram(shaders.geo.program);
                gl.enableVertexAttribArray(shaders.geo.a_pos);
                gl.enableVertexAttribArray(shaders.geo.a_color);

                gl.uniformMatrix4fv(shaders.geo.u_matrix, false, pMatrix);
                gl.uniform4fv(shaders.geo.u_color_mask, [1, 1, 1, 1]);

                /* upload/bind geometry */

                {
                    gl.bindBuffer(gl.ARRAY_BUFFER, geo_vbuf_pos);
                    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geo_pos), gl.STATIC_DRAW);
                    gl.vertexAttribPointer(shaders.geo.a_pos, 3, gl.FLOAT, false, 0, 0);

                    gl.bindBuffer(gl.ARRAY_BUFFER, geo_vbuf_color);
                    gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(geo_color), gl.STATIC_DRAW);
                    gl.vertexAttribPointer(shaders.geo.a_color, 4, gl.UNSIGNED_BYTE, true, 0, 0);

                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, geo_ibuf);
                    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(geo_idx), gl.STATIC_DRAW);
                }

                gl.drawElements(gl.TRIANGLES, geo_idx.length, gl.UNSIGNED_SHORT, 0);
            }
          }

          gl.deleteFramebuffer(render_targets[0].fb);
          gl.deleteFramebuffer(render_targets[1].fb);
          gl.deleteTexture(render_targets[1].tex);
          this.prebaked = prebaked = render_targets[0].tex;

          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
        }

        this.img_idx = [];
        this.img_pos = [];
        this.img_uv = [];
    }

    drawBox(
        min_x, min_y,
        max_x, max_y,

        min_u, min_v,
        max_u, max_v
    ) {
        const vbuf_i = this.img_pos.length / 3;
        this.img_pos.push(max_x, min_y, 0.1);
        this.img_pos.push(min_x, min_y, 0.1);
        this.img_pos.push(min_x, max_y, 0.1);
        this.img_pos.push(max_x, max_y, 0.1);

        this.img_uv .push(max_u, min_v);
        this.img_uv .push(min_u, min_v);
        this.img_uv .push(min_u, max_v);
        this.img_uv .push(max_u, max_v);

        this.img_idx.push(vbuf_i + 0, vbuf_i + 1, vbuf_i + 2, vbuf_i + 2, vbuf_i + 3, vbuf_i + 0);
    }

    render(gl) {
        const { shaders } = this;

        gl.viewport(
            0,
            0,
            canvas.width,
            canvas.height
        );

        /* set up premultiplied alpha */
        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
        gl.enable(gl.BLEND);

        /* clear all */
        gl.clearColor(0.2, 0.2, 0.2, 1);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        /* geo pass */
        {
            gl.useProgram(shaders.img.program);
            gl.enableVertexAttribArray(shaders.img.a_pos);
            gl.enableVertexAttribArray(shaders.img.a_uv);


            const pMatrix = mat4_ortho(mat4_create(), 0, gl.canvas.width, gl.canvas.height, 0, 1, -1);
            gl.uniformMatrix4fv(shaders.img.u_matrix, false, pMatrix);
            {
                gl.activeTexture(gl.TEXTURE0);
                gl.bindTexture(gl.TEXTURE_2D, this.prebaked);
                gl.uniform1i(shaders.img.u_texture, 0);
            }

            /* upload/bind geometry */

            {
                gl.bindBuffer(gl.ARRAY_BUFFER, this.img_vbuf_pos);
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.img_pos), gl.STATIC_DRAW);
                gl.vertexAttribPointer(shaders.img.a_pos, 3, gl.FLOAT, false, 0, 0);

                gl.bindBuffer(gl.ARRAY_BUFFER, this.img_vbuf_uv);
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.img_uv), gl.STATIC_DRAW);
                gl.vertexAttribPointer(shaders.img.a_uv, 2, gl.FLOAT, false, 0, 0);

                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.img_ibuf);
                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.img_idx), gl.STATIC_DRAW);
            }

            gl.drawElements(gl.TRIANGLES, this.img_idx.length, gl.UNSIGNED_SHORT, 0);
        }

        /* prepare for next frame */
        this.img_idx = [];
        this.img_pos = [];
        this.img_uv = [];
    }
}

const pr = new PopupRenderer(gl, canvas);

requestAnimationFrame(function frame(timestamp) {
    requestAnimationFrame(frame);

    for (let _i = 0; _i < 5; _i++) {
        const i = _i;// 5 - 1 - _i;
        pr.drawBox(
            i*50 + 300,
            i*50 + 300,
            i*50 + 300+READOUT_SIZE_X,
            i*50 + 300+READOUT_SIZE_Y,
            0, 0, 1, 1
        );
    }

    pr.render(gl);

})


    </script>
  </body>
</html>