Clickable Covers

// Section 3.17: BookNest's catalog (booknest-data.json), in the order of GLH.covers
GLH.books = [['The Quiet Harbor', 'Mara Ellison', 14.99, 4.6],
  ['Patterns of the Deep Web', 'Tomas Reyes', 39.5, 4.3],
  ['Salt and Saffron', 'Priya Nair', 24, 4.8],
  ['Small Steps to Big Summits', 'Jonas Berg', 18.75, 4.1],
  ["The Clockmaker's Paradox", 'Elena Sokolova', 16.2, 4.5],
  ['Gardens in Glass', 'Aiko Tanaka', 21.3, 4.4]]
  .map(([title, author, price, rating]) => ({ title, author, price, rating }));

<div style="position:relative;width:620px;font:13px Georgia">
  <canvas id="c" width="1240" height="480" style="width:620px;height:240px"></canvas>
  <div id="card" style="position:absolute;right:10px;bottom:10px;padding:6px 10px;
    background:#fffdf7;border:1px solid #c9b99a;border-radius:6px"></div>
  <code id="log" style="position:absolute;left:10px;top:10px;font-size:11px"></code>
</div>
<script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.4.4/gl-matrix-min.js"></script>
<script src="webgl-helper.js"></script>
<script type="module">
const gl = GLH.context('c'), canvas = gl.canvas, aspect = canvas.width / canvas.height;
const picker = GLH.picker(gl), idShelf = GLH.shelf(gl, picker.attributes);
const { program, attributes, uniforms: u } = GLH.lit(gl, `#version 300 es
  precision highp float;
  in vec3 vPosition, vNormal; in vec2 vUV; flat in int vFace; out vec4 outColor;
  uniform sampler2D uCover; uniform vec3 uColor, uLamp;
  uniform int uPart; uniform float uTextured, uSelected;   // selected face; 1 if selected
  void main() {
    float light = 0.4 + 0.75 * max(dot(normalize(vNormal), normalize(uLamp - vPosition)), 0.0);
    vec3 base = vFace == 4 && uTextured > 0.5 ? texture(uCover, vUV).rgb : uColor;
    vec2 edge = min(vUV, 1.0 - vUV);
    bool frame = uSelected > 0.5 && vFace == uPart && min(edge.x, edge.y) < 0.04;
    outColor = vec4(frame ? vec3(1, 0.75, 0.15) : base * light * (1.0 + 0.3 * uSelected), 1);
  }`, GLH.litVS.replace('out vec2 vUV;', 'out vec2 vUV; flat out int vFace;')
  .replace('vUV = aUV;', 'vUV = aUV; vFace = gl_VertexID / 4;'));   // four vertices a face
const shelf = GLH.shelf(gl, attributes), faces = ['fore-edge', 'spine', 'top', 'bottom',
  'front cover', 'back cover'];
const covers = await Promise.all([1, 2, 3, 4, 5, 6].map((n) =>
  GLH.image(`booknest-cover-${n}.png`).then((image) => GLH.texture(gl, image))));
let selected = 0, part = -1; u.uLamp([-0.6, 1.2, 2.0]);
const orbit = GLH.orbit(canvas, { click: ({ pixel }) => {
  picker.render((p) => {                             // redraw the IDs with today's camera
    p.uViewProjection(orbit.camera(aspect));
    idShelf.items.forEach((item, i) => { p.uObject(i + 1); idShelf.draw(p, [item]); });
  });
  const id = picker.read(pixel), book = GLH.books[(id >> 4) - 1];
  [selected, part] = [id >> 4, id & 15];
  document.getElementById('log').textContent = `yaw ${orbit.yaw.toFixed(1)}: readPixels(` +
    `${pixel}) -> id ${id} = object ${id >> 4}, ${id ? faces[part] : 'nothing'}`;
  document.getElementById('card').innerHTML = book ? `<b>${book.title}</b><br>${book.author}
    <br>$${book.price.toFixed(2)} &middot; rated ${book.rating} / 5` : 'Click a book';
} });
const draw = () => {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.enable(gl.DEPTH_TEST); gl.enable(gl.CULL_FACE); gl.useProgram(program);
  u.uViewProjection(orbit.camera(aspect)); u.uPart(part);
  shelf.items.forEach((item, i) => {
    gl.bindTexture(gl.TEXTURE_2D, covers[i] ?? null);
    u.uTextured(i < 6 ? 1 : 0); u.uSelected(i + 1 === selected ? 1 : 0);
    shelf.draw(u, [item]);
  });
};
const fire = (type, x, y) => canvas.dispatchEvent(new PointerEvent(type,
  { clientX: x, clientY: y, pointerId: 1, bubbles: true }));
for (let frame = 0; frame < 60; frame++) {         // the script plays the user:
  if (frame === 0) fire('pointerdown', 300, 150);  // drag 30 pixels right over 10 frames,
  if (frame < 10) fire('pointermove', 303 + 3 * frame, 150 - frame / 4);
  if (frame === 10) fire('pointerup', 330, 148);   // let go, let inertia run,
  if (frame === 58) { fire('pointerdown', 390, 110); fire('pointerup', 390, 110); }   // click
  orbit.step(); draw();
  await new Promise(requestAnimationFrame);
}
window.__done = true;
</script>

<!doctype html>
<style>
  body { margin: 0; font: 12px Georgia, serif; background: #f7f4ee; color: #333; }
  .wrap { position: relative; width: 100%; max-width: 600px; }
  canvas { display: block; width: 100%; cursor: grab; }
  #card { position: absolute; right: 10px; bottom: 10px; padding: 6px 10px; background: #fffdf7; border: 1px solid #c9b99a; border-radius: 6px; }
  #log { position: absolute; left: 10px; top: 8px; font: 11px monospace; }
</style>
<div class="wrap">
  <canvas id="c" width="1200" height="480"></canvas>
  <div id="card">Click a book</div>
  <code id="log"></code>
</div>
<script>
const m4 = {
  perspective(fovy, aspect, near, far) {
    const f = 1 / Math.tan(fovy * Math.PI / 360), d = near - far;
    return [f / aspect, 0, 0, 0, 0, f, 0, 0, 0, 0, (far + near) / d, -1, 0, 0, 2 * far * near / d, 0];
  },
  lookAt(eye, target, up = [0, 1, 0]) {
    const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
    const unit = (v) => v.map((c) => c / Math.hypot(...v));
    const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
    const z = unit(eye.map((c, i) => c - target[i])), x = unit(cross(up, z)), y = cross(z, x);
    return [x[0], y[0], z[0], 0, x[1], y[1], z[1], 0, x[2], y[2], z[2], 0, -dot(x, eye), -dot(y, eye), -dot(z, eye), 1];
  },
  multiply(a, b) {
    const out = new Array(16).fill(0);
    for (let c = 0; c < 4; c++) for (let r = 0; r < 4; r++) for (let k = 0; k < 4; k++) out[c * 4 + r] += a[k * 4 + r] * b[c * 4 + k];
    return out;
  },
  model(x, y, z, sx, sy, sz, turn = 0) {        // T * Ry(turn) * S
    const c = Math.cos(turn), s = Math.sin(turn);
    return [c * sx, 0, -s * sx, 0, 0, sy, 0, 0, s * sz, 0, c * sz, 0, x, y, z, 1];
  },
  normal(m) {
    const [a, b, c, , d, e, f, , g, h, i] = m;
    const n = [e * i - f * h, f * g - d * i, d * h - e * g, c * h - b * i, a * i - c * g, b * g - a * h, b * f - c * e, c * d - a * f, a * e - b * d];
    const det = a * n[0] + b * n[1] + c * n[2];
    return n.map((v) => v / det);
  },
};
function program(vs, fs) {
  const p = gl.createProgram();
  for (const [type, src] of [[gl.VERTEX_SHADER, vs], [gl.FRAGMENT_SHADER, fs]]) {
    const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s);
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
    gl.attachShader(p, s);
  }
  gl.linkProgram(p);
  return p;
}
const canvas = document.getElementById('c');
const gl = canvas.getContext('webgl2');
const u = (p, n) => gl.getUniformLocation(p, n);

// A box whose faces come in book order (6 vertices each, so face = gl_VertexID / 6):
// +x fore-edge, -x spine, +y top, -y bottom, +z front cover, -z back cover.
const FACES = ['fore-edge', 'spine', 'top', 'bottom', 'front cover', 'back cover'];
const cube = [];
for (const [n, a1, b1] of [[[1,0,0],[0,0,-1],[0,1,0]], [[-1,0,0],[0,0,1],[0,1,0]], [[0,1,0],[1,0,0],[0,0,-1]],
                           [[0,-1,0],[1,0,0],[0,0,1]], [[0,0,1],[1,0,0],[0,1,0]], [[0,0,-1],[-1,0,0],[0,1,0]]])
  for (const [a, b] of [[-1,-1],[1,-1],[1,1],[-1,-1],[1,1],[-1,1]])
    cube.push(...[0, 1, 2].map(i => (n[i] + a * a1[i] + b * b1[i]) / 2), ...n, (a + 1) / 2, (b + 1) / 2);
gl.bindVertexArray(gl.createVertexArray());
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cube), gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 32, 0); gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 32, 12); gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 32, 24); gl.enableVertexAttribArray(2);

// BookNest's catalog, its covers (drawn on 2D canvases) and the shelf.
const books = [['The Quiet Harbor', 'Mara Ellison', 14.99, 4.6, '#1f5f8b'], ['Patterns of the Deep Web', 'Tomas Reyes', 39.5, 4.3, '#5b3f99'],
  ['Salt and Saffron', 'Priya Nair', 24, 4.8, '#e09a10'], ['Small Steps to Big Summits', 'Jonas Berg', 18.75, 4.1, '#3f7d3a'],
  ["The Clockmaker's Paradox", 'Elena Sokolova', 16.2, 4.5, '#b5452f'], ['Gardens in Glass', 'Aiko Tanaka', 21.3, 4.4, '#2a9d8f']]
  .map(([title, author, price, rating, color]) => ({ title, author, price, rating, color }));
const rgb = (hex) => [1, 3, 5].map((k) => parseInt(hex.slice(k, k + 2), 16) / 255);
const covers = books.map(({ title, color }) => {
  const c = Object.assign(document.createElement('canvas'), { width: 128, height: 192 }), g = c.getContext('2d');
  g.fillStyle = color; g.fillRect(0, 0, 128, 192);
  g.strokeStyle = '#f2ead8'; g.lineWidth = 3; g.strokeRect(8, 8, 112, 176);
  g.fillStyle = '#f2ead8'; g.font = 'bold 15px Georgia'; g.textAlign = 'center';
  title.split(' ').reduce((lines, w) => { const l = lines[lines.length - 1]; if ((l + ' ' + w).length > 11) lines.push(w); else lines[lines.length - 1] = (l + ' ' + w).trim(); return lines; }, [''])
    .forEach((line, i) => g.fillText(line, 64, 90 + i * 20));
  const t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, c); gl.generateMipmap(gl.TEXTURE_2D);
  return t;
});
const items = books.map(({ color }, i) => ({ color: rgb(color), model: m4.model(-1.3 + i * 0.52, 0.5, 0, 0.42, 0.98, 0.12, (30 - i * 12) * Math.PI / 180) }));
items.push({ color: rgb('#8a6240'), model: m4.model(0, -0.03, 0, 3.4, 0.06, 0.7) });   // the plank: object 7

// The visible pass, with the selection as uniforms: brighten the book, frame the face in gold.
const lit = program(`#version 300 es
layout(location = 0) in vec3 aPosition; layout(location = 1) in vec3 aNormal; layout(location = 2) in vec2 aUV;
uniform mat4 uViewProjection, uModel; uniform mat3 uNormalMatrix;
out vec3 vPosition, vNormal; out vec2 vUV; flat out int vFace;     // integers must be flat
void main() { vec4 w = uModel * vec4(aPosition, 1.0); vPosition = w.xyz; vNormal = uNormalMatrix * aNormal;
  vUV = aUV; vFace = gl_VertexID / 6; gl_Position = uViewProjection * w; }`, `#version 300 es
precision highp float;
in vec3 vPosition, vNormal; in vec2 vUV; flat in int vFace; out vec4 outColor;
uniform sampler2D uCover; uniform vec3 uColor, uLamp;
uniform int uPart; uniform float uTextured, uSelected;          // selected face; 1 if this book is selected
void main() {
  float light = 0.4 + 0.75 * max(dot(normalize(vNormal), normalize(uLamp - vPosition)), 0.0);
  vec3 base = vFace == 4 && uTextured > 0.5 ? texture(uCover, vUV).rgb : uColor;
  vec2 edge = min(vUV, 1.0 - vUV);
  bool frame = uSelected > 0.5 && vFace == uPart && min(edge.x, edge.y) < 0.04;
  outColor = vec4(frame ? vec3(1.0, 0.75, 0.15) : base * light * (1.0 + 0.3 * uSelected), 1.0);
}`);
// The ID pass: an R32UI target the size of the canvas; each fragment writes object * 16 + face.
const idProgram = program(`#version 300 es
layout(location = 0) in vec3 aPosition; uniform mat4 uViewProjection, uModel; flat out uint vFace;
void main() { vFace = uint(gl_VertexID / 6); gl_Position = uViewProjection * uModel * vec4(aPosition, 1.0); }`,
`#version 300 es
flat in uint vFace; uniform uint uObject; out uint id;
void main() { id = uObject * 16u + vFace; }`);
const idTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, idTexture);
gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R32UI, canvas.width, canvas.height);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
const idDepth = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, idDepth);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT24, canvas.width, canvas.height);
const idFBO = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, idFBO);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, idTexture, 0);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, idDepth);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
function renderIDs(viewProjection) {
  gl.bindFramebuffer(gl.FRAMEBUFFER, idFBO);
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearBufferuiv(gl.COLOR, 0, [0, 0, 0, 0]);               // clear() is invalid on integer targets
  gl.clearBufferfv(gl.DEPTH, 0, [1]);
  gl.enable(gl.DEPTH_TEST); gl.enable(gl.CULL_FACE);
  gl.useProgram(idProgram);
  gl.uniformMatrix4fv(u(idProgram, 'uViewProjection'), false, viewProjection);
  items.forEach(({ model }, i) => {
    gl.uniform1ui(u(idProgram, 'uObject'), i + 1);            // 0 means nothing
    gl.uniformMatrix4fv(u(idProgram, 'uModel'), false, model);
    gl.drawArrays(gl.TRIANGLES, 0, 36);
  });
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}
function readID([x, y]) {
  const id = new Uint32Array(4);                              // RGBA_INTEGER always returns four
  gl.bindFramebuffer(gl.FRAMEBUFFER, idFBO);
  gl.readPixels(x, y, 1, 1, gl.RGBA_INTEGER, gl.UNSIGNED_INT, id);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  return id[0];
}
function drawScene(viewProjection, selected = 0, part = -1) {
  gl.enable(gl.DEPTH_TEST); gl.enable(gl.CULL_FACE);
  gl.useProgram(lit);
  gl.uniformMatrix4fv(u(lit, 'uViewProjection'), false, viewProjection);
  gl.uniform3f(u(lit, 'uLamp'), -0.6, 1.8, 2.0);
  gl.uniform1i(u(lit, 'uPart'), part);
  items.forEach(({ color, model }, i) => {
    gl.bindTexture(gl.TEXTURE_2D, covers[i] || null);
    gl.uniform1f(u(lit, 'uTextured'), i < 6 ? 1 : 0);
    gl.uniform1f(u(lit, 'uSelected'), i + 1 === selected ? 1 : 0);
    gl.uniformMatrix4fv(u(lit, 'uModel'), false, model);
    gl.uniformMatrix3fv(u(lit, 'uNormalMatrix'), false, m4.normal(model));
    gl.uniform3fv(u(lit, 'uColor'), color);
    gl.drawArrays(gl.TRIANGLES, 0, 36);
  });
}

// Pointer input: drags turn an orbit camera (with inertia), a press and release that barely moved is a click.
function locate(e) {                                            // CSS pixels -> buffer pixels (y up) and clip space
  const r = canvas.getBoundingClientRect();
  const x = (e.clientX - r.left) * canvas.width / r.width, y = (e.clientY - r.top) * canvas.height / r.height;
  return { pixel: [Math.floor(x), canvas.height - 1 - Math.floor(y)], clip: [2 * x / canvas.width - 1, 1 - 2 * y / canvas.height] };
}
function makeOrbit({ target = [0, 0.4, 0], distance = 3.4, yaw = 15, pitch = 20, click = () => {} } = {}) {
  const orbit = { yaw, pitch, vx: 0, vy: 0, dx: 0, dy: 0, dragging: false, moved: 0, x: 0, y: 0 };
  canvas.style.touchAction = 'none';                          // no scrolling on touch drags
  canvas.addEventListener('pointerdown', (e) => {
    if (e.isTrusted) canvas.setPointerCapture(e.pointerId);    // keep the moves that leave the canvas
    Object.assign(orbit, { dragging: true, moved: 0, x: e.clientX, y: e.clientY });
  });
  canvas.addEventListener('pointermove', (e) => {
    if (!orbit.dragging) return;
    const dx = e.clientX - orbit.x, dy = e.clientY - orbit.y;
    orbit.moved += Math.hypot(dx, dy); orbit.x = e.clientX; orbit.y = e.clientY;
    orbit.dx += dx; orbit.dy += dy;
  });
  canvas.addEventListener('pointerup', (e) => {
    orbit.dragging = false;
    if (orbit.moved < 4) click(locate(e));                    // a drag is not a click
  });
  orbit.step = () => {                                          // once per frame
    if (orbit.dragging) [orbit.vx, orbit.vy] = [orbit.dx * 0.4, orbit.dy * 0.4];
    else [orbit.vx, orbit.vy] = [orbit.vx * 0.92, orbit.vy * 0.92];   // inertia: 8% less per frame
    orbit.yaw -= orbit.vx;
    orbit.pitch = Math.min(80, Math.max(-80, orbit.pitch + orbit.vy));  // never flip over
    orbit.dx = orbit.dy = 0;
  };
  orbit.eye = () => {
    const y = orbit.yaw * Math.PI / 180, p = orbit.pitch * Math.PI / 180;
    return [target[0] + distance * Math.cos(p) * Math.sin(y), target[1] + distance * Math.sin(p), target[2] + distance * Math.cos(p) * Math.cos(y)];
  };
  orbit.camera = (aspect) => m4.multiply(m4.perspective(40, aspect, 0.1, 20), m4.lookAt(orbit.eye(), target));
  return orbit;
}
// Scripted input for the preview: synthetic PointerEvents play the user.
const fire = (type, x, y) => {
  const r = canvas.getBoundingClientRect();
  canvas.dispatchEvent(new PointerEvent(type, { clientX: r.left + x * r.width, clientY: r.top + y * r.height, pointerId: 1, bubbles: true }));
};

const aspect = canvas.width / canvas.height;
let selected = 0, part = -1;
const orbit = makeOrbit({ click: ({ pixel }) => {
  renderIDs(orbit.camera(aspect));                             // redraw the IDs with today's camera
  const id = readID(pixel), book = books[(id >> 4) - 1];
  [selected, part] = book ? [id >> 4, id & 15] : [0, -1];     // the plank (7) is not selectable
  document.getElementById('log').textContent =
    `yaw ${orbit.yaw.toFixed(1)}: readPixels(${pixel}) -> id ${id} = object ${id >> 4}, ${id ? FACES[id & 15] : 'nothing'}`;
  document.getElementById('card').innerHTML = book
    ? `<b>${book.title}</b><br>${book.author}<br>$${book.price.toFixed(2)} &middot; rated ${book.rating} / 5` : 'Click a book';
} });
let frameNo = 0;
function frame() {
  if (frameNo === 0) fire('pointerdown', 0.48, 0.6);           // a 30-pixel drag, release, inertia...
  if (frameNo > 0 && frameNo < 10) fire('pointermove', 0.48 + frameNo * 0.005, 0.6);
  if (frameNo === 10) fire('pointerup', 0.53, 0.6);
  if (frameNo === 58) { fire('pointerdown', 0.62, 0.45); fire('pointerup', 0.62, 0.45); }   // ...then a click
  frameNo++;
  orbit.step();
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(0.93, 0.91, 0.87, 1);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  drawScene(orbit.camera(aspect), selected, part);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script>