lines_cube.html

<!-- vim: sw=2 ts=2 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="glcanvas"></canvas>
    <script>

window.onload = () => {
  const canvas = document.querySelector("#glcanvas");
  const gl = canvas.getContext("webgl2");

  if (gl === null) {
    alert(
      "Unable to initialize WebGL. Your browser or machine may not support it."
    );
    return;
  }

  (window.onresize = () => {
     gl.viewport(
       0,
       0,
       canvas.width = window.innerWidth*window.devicePixelRatio,
       canvas.height = window.innerHeight*window.devicePixelRatio
     );
     canvas.style.width = window.innerWidth + 'px';
     canvas.style.height = window.innerHeight + 'px';
   })();

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

    in vec4 a_vpos;
    in float a_palette_index;

    flat out int v_palette_index;

    void main(void) {
      v_palette_index = int(round(a_palette_index));
      gl_Position = a_vpos;
    }
  `;

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

    flat in int v_palette_index;

    out vec4 color;

    void main(void) {
      color = vec4(1.0, 0.0, 1.0, 1.0);
      if (0 == v_palette_index) color = vec4(0.8, 0.1, 0.1, 1.0);
      if (1 == v_palette_index) color = vec4(0.1, 0.8, 0.1, 1.0);
      if (2 == v_palette_index) color = vec4(0.1, 0.1, 0.8, 1.0);
      if (3 == v_palette_index) color = vec4(1.0, 0.4, 0.4, 1.0);
      if (4 == v_palette_index) color = vec4(0.4, 1.0, 0.4, 1.0);
      if (5 == v_palette_index) color = vec4(0.4, 0.4, 1.0, 1.0);

      // gl_FragColor *= 0.6;
    }
  `;

  let shaderProgram;
  {
    let vsShader, fsShader;
    {
      vsShader = gl.createShader(gl.VERTEX_SHADER);
      fsShader = gl.createShader(gl.FRAGMENT_SHADER);

      /* compile shaders in parallel
       *  https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#compile_shaders_and_link_programs_in_parallel
       *  https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#dont_check_shader_compile_status_unless_linking_fails
       *
       * improvement:
       *  https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#prefer_khr_parallel_shader_compile
       */
      gl.shaderSource(fsShader, fsSource);
      gl.shaderSource(vsShader, vsSource);
      gl.compileShader(fsShader);
      gl.compileShader(vsShader);
    }

    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vsShader);
    gl.attachShader(shaderProgram, fsShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
      console.error(`Link failed: ${gl.getProgramInfoLog(shaderProgram)}`);
      console.error(`vs info-log: ${gl.getShaderInfoLog(vsShader)}`);
      console.error(`fs info-log: ${gl.getShaderInfoLog(fsShader)}`);
      return;
    }
  }

  const programInfo = {
    program: shaderProgram,
    a_vpos:          gl.getAttribLocation(shaderProgram,          "a_vpos"),
    a_palette_index: gl.getAttribLocation(shaderProgram, "a_palette_index"),
  };

  const buffers = {
    vrt: gl.createBuffer(),
    col: gl.createBuffer(),
    idx: gl.createBuffer(),
  };

  /* fill buffers */
  {
    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vrt);
    gl.bufferData(gl.ARRAY_BUFFER, 8192, gl.DYNAMIC_DRAW);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.idx);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, 8192, gl.DYNAMIC_DRAW);
  }

  let camRotationX =  Math.PI/4;
  let camRotationY = -Math.PI/4;
  let mouse_x = 0;
  let mouse_y = 0;
  window.onmousemove = ev => {
    if (ev.buttons > 0) {
      camRotationX -= ev.movementX*0.01;
      camRotationY -= ev.movementY*0.01;
    }
    mouse_x = ev.offsetX;
    mouse_y = ev.offsetY;
  }

  let then = 0;
  let deltaTime = 0;
  requestAnimationFrame(function render(now) {
    requestAnimationFrame(render);

    now *= 0.001;
    deltaTime = now - then;
    then = now;

    /* draw */
    {
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clearDepth(1.0);
      gl.enable(gl.DEPTH_TEST);
      gl.depthFunc(gl.LEQUAL);

      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

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

      {
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vrt);

        gl.vertexAttribPointer(
          programInfo.a_vpos,
          4,        /* numComponents, */
          gl.FLOAT, /* type,          */
          false,    /* normalize,     */
          4*5,      /* stride,        */
          0         /* offset         */
        );
        gl.enableVertexAttribArray(programInfo.a_vpos);

        gl.vertexAttribPointer(
          programInfo.a_palette_index,
          1,        /* numComponents, */
          gl.FLOAT, /* type,          */
          false,    /* normalize,     */
          4*5,      /* stride,        */
          4*4       /* offset         */
        );
        gl.enableVertexAttribArray(programInfo.a_palette_index);
      }

      let vbuf, ibuf, ibuf_i;
      {

        const u_mvp = mat4_perspective(
          mat4_create(),
          (45 * Math.PI) / 180,                           /* fieldOfView */
          gl.canvas.clientWidth / gl.canvas.clientHeight, /* aspect      */
          0.1,                                            /* zNear       */
          100.0,                                          /* zFar        */
        );

        mat4_mul(
          u_mvp,
          u_mvp,
          mat4_from_translation(mat4_create(), [0.0, 0.0, -8.0])
        );
        const m = mat4_create();
        mat4_mul(
          u_mvp,
          u_mvp,
          mat4_invert(m, mat4_from_zyx_rotation(m, camRotationY, camRotationX, 0))
        );

        let vbuf_i = 0;
        ibuf_i = 0;
        vbuf = new Float32Array(8192 / 4);
        ibuf = new Uint16Array(8192 / 2);

        function line(a, b, a_thick, b_thick, c, z_push=0) {
          mat4_transform_vec4(a, a, u_mvp);
          mat4_transform_vec4(b, b, u_mvp);
          
          const dx = b[0] - a[0];
          const dy = b[1] - a[1];
          const nx = -dy;
          const ny =  dx;
          const tlen = Math.sqrt(nx*nx + ny*ny);
          if (tlen <= 0) return;
          let a_tx = nx/tlen * 0.5*a_thick;
          let a_ty = ny/tlen * 0.5*a_thick;
          let b_tx = nx/tlen * 0.5*b_thick;
          let b_ty = ny/tlen * 0.5*b_thick;

          ibuf[ibuf_i++] = 0 + vbuf_i/5;
          ibuf[ibuf_i++] = 1 + vbuf_i/5;
          ibuf[ibuf_i++] = 2 + vbuf_i/5;

          ibuf[ibuf_i++] = 2 + vbuf_i/5;
          ibuf[ibuf_i++] = 1 + vbuf_i/5;
          ibuf[ibuf_i++] = 3 + vbuf_i/5;

          a[2] += z_push;
          b[2] += z_push;

          vbuf[vbuf_i++] = a[0] + a_tx; vbuf[vbuf_i++] = a[1] + a_ty; vbuf[vbuf_i++] = a[2]; vbuf[vbuf_i++] = a[3]; vbuf[vbuf_i++] = c;
          vbuf[vbuf_i++] = a[0] - a_tx; vbuf[vbuf_i++] = a[1] - a_ty; vbuf[vbuf_i++] = a[2]; vbuf[vbuf_i++] = a[3]; vbuf[vbuf_i++] = c;
          vbuf[vbuf_i++] = b[0] + b_tx; vbuf[vbuf_i++] = b[1] + b_ty; vbuf[vbuf_i++] = b[2]; vbuf[vbuf_i++] = b[3]; vbuf[vbuf_i++] = c;
          vbuf[vbuf_i++] = b[0] - b_tx; vbuf[vbuf_i++] = b[1] - b_ty; vbuf[vbuf_i++] = b[2]; vbuf[vbuf_i++] = b[3]; vbuf[vbuf_i++] = c;
        }

        function dist_to_line(a, b) {
          mat4_transform_vec4(a, a, u_mvp);
          {
            const w = a[3];
            a[0] = (0 + (a[0]/w*0.5 + 0.5))*window.innerWidth;
            a[1] = (1 - (a[1]/w*0.5 + 0.5))*window.innerHeight;
          }

          mat4_transform_vec4(b, b, u_mvp);
          {
            const w = b[3];
            b[0] = (0 + (b[0]/w*0.5 + 0.5))*window.innerWidth;
            b[1] = (1 - (b[1]/w*0.5 + 0.5))*window.innerHeight;
          }


          /* get dot product of e1, e2 */
          const e1_x =    b[0] - a[0];
          const e1_y =    b[1] - a[1];
          const e2_x = mouse_x - a[0];
          const e2_y = mouse_y - a[1];
          const dot = e1_x*e2_x + e1_y*e2_y;

          /* get squared length of e1 */
          const len2 = e1_x*e1_x + e1_y*e1_y;

          const t = Math.min(1, Math.max(0, dot / len2));
          const projected_x = a[0] + (b[0] - a[0])*t;
          const projected_y = a[1] + (b[1] - a[1])*t;

          const dist = Math.sqrt((projected_x - mouse_x)*(projected_x - mouse_x) +
                                 (projected_y - mouse_y)*(projected_y - mouse_y) );

          return dist;
        }

        {
          function gizmo(line) {
            const LINE_BASE  = -1;
            const ARROW_BASE =  1;

            let gizmo_i = 1;

            /* lines */
            for (let dir_x = 0; dir_x < 2; dir_x++) {
              for (let dir_y = -1; dir_y <= 1; dir_y += 2) {
                for (let axis_i = 0; axis_i < 3; axis_i++) {
                  const color = axis_i;

                  const from = [0, 0, 0, 1];
                  const   to = [0, 0, 0, 1];
                  from[axis_i] = -1;
                    to[axis_i] =  1;

                  for (let i = 0; i < 3; i++) {
                    if (i == axis_i) continue;
                    from[i] = dir_y;
                      to[i] = dir_y;
                  }
                  if (dir_x) from[(axis_i+1)%3] *= -1;
                  if (dir_x)   to[(axis_i+1)%3] *= -1;

                  line(from, to, 0.04, 0.04, color, gizmo_i++);
                }
              }
            }
          }

          const RED            = 0;
          const GREEN          = 1;
          const BLUE           = 2;
          const SELECTED_RED   = 3;
          const SELECTED_GREEN = 4;
          const SELECTED_BLUE  = 5;

          /* first pass - find closest */
          let selected_i = -1;
          let selected_dist = Infinity;
          gizmo((a, b, a_thick, b_thick, color, i) => {
            const dist = dist_to_line(a, b);

            if (i && dist < selected_dist && dist < 30) {
              selected_dist = dist;
              selected_i = i;
            }
          });

          /* second pass - draw */
          gizmo((a, b, a_thick, b_thick, color, i) => {
            const selected = (selected_i == i);
            color += 3*selected;
            const push = -0.01*selected;
            line(a, b, a_thick, b_thick, color, push);
          });
        }
   
      }

      gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vrt);
      gl.bufferSubData(gl.ARRAY_BUFFER, 0, vbuf);
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.idx);
      gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, ibuf);

      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.idx);
      gl.useProgram(programInfo.program);

      gl.drawElements(
        gl.TRIANGLES,
        ibuf_i,            /* vertexCount */
        gl.UNSIGNED_SHORT, /* type        */
        0                  /* offset      */
      );
    }
  })
}

function mat4_create() {
  let out = new Float32Array(16);
  out[0] = 1;
  out[5] = 1;
  out[10] = 1;
  out[15] = 1;
  return out;
}
function mat4_invert(out, a) {
  let a00 = a[0],
    a01 = a[1],
    a02 = a[2],
    a03 = a[3];
  let a10 = a[4],
    a11 = a[5],
    a12 = a[6],
    a13 = a[7];
  let a20 = a[8],
    a21 = a[9],
    a22 = a[10],
    a23 = a[11];
  let a30 = a[12],
    a31 = a[13],
    a32 = a[14],
    a33 = a[15];
  let b00 = a00 * a11 - a01 * a10;
  let b01 = a00 * a12 - a02 * a10;
  let b02 = a00 * a13 - a03 * a10;
  let b03 = a01 * a12 - a02 * a11;
  let b04 = a01 * a13 - a03 * a11;
  let b05 = a02 * a13 - a03 * a12;
  let b06 = a20 * a31 - a21 * a30;
  let b07 = a20 * a32 - a22 * a30;
  let b08 = a20 * a33 - a23 * a30;
  let b09 = a21 * a32 - a22 * a31;
  let b10 = a21 * a33 - a23 * a31;
  let b11 = a22 * a33 - a23 * a32;
  /* Calculate the determinant */
  let det =
    b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
  if (!det) {
    return null;
  }
  det = 1.0 / det;
  out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
  out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
  out[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
  out[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
  out[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
  out[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
  out[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
  out[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
  out[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
  out[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
  out[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
  out[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
  out[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
  out[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
  out[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
  out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
  return out;
}
const _scratch = mat4_create();
function mat4_from_zyx_rotation(out, x, y, z) {
  mat4_from_z_rotation(out, z);

  mat4_from_y_rotation(_scratch, y);
  mat4_mul(out, out, _scratch);

  mat4_from_x_rotation(_scratch, x);
  mat4_mul(out, out, _scratch);

  return out;
}
function mat4_from_x_rotation(out, rad) {
  let s = Math.sin(rad);
  let c = Math.cos(rad);
  /* Perform axis-specific matrix multiplication */
  out[0] = 1;
  out[1] = 0;
  out[2] = 0;
  out[3] = 0;
  out[4] = 0;
  out[5] = c;
  out[6] = s;
  out[7] = 0;
  out[8] = 0;
  out[9] = -s;
  out[10] = c;
  out[11] = 0;
  out[12] = 0;
  out[13] = 0;
  out[14] = 0;
  out[15] = 1;
  return out;
}
function mat4_from_y_rotation(out, rad) {
  let s = Math.sin(rad);
  let c = Math.cos(rad);
  /* Perform axis-specific matrix multiplication */
  out[0] = c;
  out[1] = 0;
  out[2] = -s;
  out[3] = 0;
  out[4] = 0;
  out[5] = 1;
  out[6] = 0;
  out[7] = 0;
  out[8] = s;
  out[9] = 0;
  out[10] = c;
  out[11] = 0;
  out[12] = 0;
  out[13] = 0;
  out[14] = 0;
  out[15] = 1;
  return out;
}
function mat4_from_z_rotation(out, rad) {
  let s = Math.sin(rad);
  let c = Math.cos(rad);
  /* Perform axis-specific matrix multiplication */
  out[0] = c;
  out[1] = s;
  out[2] = 0;
  out[3] = 0;
  out[4] = -s;
  out[5] = c;
  out[6] = 0;
  out[7] = 0;
  out[8] = 0;
  out[9] = 0;
  out[10] = 1;
  out[11] = 0;
  out[12] = 0;
  out[13] = 0;
  out[14] = 0;
  out[15] = 1;
  return out;
}
function mat4_from_translation(out, v) {
  out[0] = 1;
  out[1] = 0;
  out[2] = 0;
  out[3] = 0;
  out[4] = 0;
  out[5] = 1;
  out[6] = 0;
  out[7] = 0;
  out[8] = 0;
  out[9] = 0;
  out[10] = 1;
  out[11] = 0;
  out[12] = v[0];
  out[13] = v[1];
  out[14] = v[2];
  out[15] = 1;
  return out;
}
function mat4_mul(out, a, b) {
  let a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3];
  let a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7];
  let a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11];
  let a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];
  /* Cache only the current line of the second matrix */
  let b0 = b[0],
    b1 = b[1],
    b2 = b[2],
    b3 = b[3];
  out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
  out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
  out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
  out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
  b0 = b[4];
  b1 = b[5];
  b2 = b[6];
  b3 = b[7];
  out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
  out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
  out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
  out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
  b0 = b[8];
  b1 = b[9];
  b2 = b[10];
  b3 = b[11];
  out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
  out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
  out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
  out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
  b0 = b[12];
  b1 = b[13];
  b2 = b[14];
  b3 = b[15];
  out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
  out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
  out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
  out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
  return out;
}
function mat4_transform_vec4(out, a, m) {
  let x = a[0], y = a[1], z = a[2], w = a[3];
  out[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w;
  out[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w;
  out[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w;
  out[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w;
  return out;
}
function mat4_perspective(out, fovy, aspect, near, far) {
  let f = 1.0 / Math.tan(fovy / 2),
    nf;
  out[0] = f / aspect;
  out[1] = 0;
  out[2] = 0;
  out[3] = 0;
  out[4] = 0;
  out[5] = f;
  out[6] = 0;
  out[7] = 0;
  out[8] = 0;
  out[9] = 0;
  out[11] = -1;
  out[12] = 0;
  out[13] = 0;
  out[15] = 0;
  if (far != null && far !== Infinity) {
    nf = 1 / (near - far);
    out[10] = (far + near) * nf;
    out[14] = 2 * far * near * nf;
  } else {
    out[10] = -1;
    out[14] = -2 * near;
  }
  return out;
}

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