trid3d 0.5.0 → 0.7.0

package/trid/render/webglRenderer.js

@@ -5,7 +5,8 @@ import { clear, edgeSegments, wireEdges } from "./draw.js";
 import { parseColor } from "./color.js";
 import { materialsOf } from "./canvasRenderer.js";
 import { sceneLights, MAX_LIGHTS } from "./lights.js";
-import { FRAME_GLSL, postPasses, activePost, runCanvasPost } from "./post.js";
+import { shadowFrame, shadowFlag } from "./shadows.js";
+import { FRAME_GLSL, GEOMETRY_GLSL, postPasses, activePost, runCanvasPost, wantsGeometry, maskedObjects } from "./post.js";
 import { uvsFor, uvTransform, mappingKey } from "./uvMapping.js";
 import { newell, cornerNormals, creaseOf } from "./normals.js";
 import { SURFACE_GLSL, buildEffects, effectsKey, uniformType } from "./effects.js";
@@ -77,12 +78,40 @@ uniform vec4 uBackground;
 uniform vec3 uCamWorld;
 uniform sampler2D uTexture;
 uniform float uUseTexture;
+// Shadows (trid/render/shadows.js): which light casts them (-1: none), and its shadow map
+uniform int uShadowLight;
+uniform sampler2D uShadowMap;
+uniform mat4 uShadowMatrix;
+uniform float uShadowTexel; // one pixel of the map, in its 0..1 units
+uniform float uShadowSoft;  // edge blur, in map pixels
+uniform float uShadowOffset; // how far the test point moves along the normal, in world units
+uniform float uShadowBias;
+uniform float uReceive;
 varying vec3 vNormal;
 varying vec3 vWorld;
 varying vec3 vLocal;
 varying vec2 vUV;
 ${SURFACE_GLSL}
-// The light reaching a point: the same math as lightAt in trid/render/lights.js
+float tridShadowDepth(vec2 uv) {
+  return dot(texture2D(uShadowMap, uv), vec4(1.0, 1.0 / 255.0, 1.0 / 65025.0, 1.0 / 16581375.0));
+}
+// How much of the shadow-casting light reaches a point: 1 = all, 0 = in shadow
+float tridShadow(vec3 n, vec3 p) {
+  vec4 q = uShadowMatrix * vec4(p + n * uShadowOffset, 1.0);
+  vec3 c = q.xyz * 0.5 + 0.5;
+  if (c.x < 0.0 || c.x > 1.0 || c.y < 0.0 || c.y > 1.0 || c.z < 0.0) return 1.0;
+  float z = min(c.z, 0.999) - uShadowBias; // past the casters: compared as just behind them
+  float lit = 0.0;
+  // 4 × 4 samples spread over the blur: soft edges
+  for (int i = 0; i < 4; i++) {
+    for (int j = 0; j < 4; j++) {
+      vec2 o = (vec2(float(i), float(j)) - 1.5) / 1.5 * uShadowSoft * uShadowTexel;
+      lit += z <= tridShadowDepth(c.xy + o) ? 1.0 : 0.0;
+    }
+  }
+  return lit / 16.0;
+}
+// The light reaching a point: the same math as lightAt in trid/render/lights.js, with shadows
 vec3 tridLighting(vec3 n, vec3 p) {
   vec3 c = uAmbientColor;
   for (int i = 0; i < ${MAX_LIGHTS}; i++) {
@@ -100,7 +129,9 @@ vec3 tridLighting(vec3 n, vec3 p) {
         fade = k * k;
       }
     }
-    c += uLightColor[i].rgb * max(0.0, dot(n, d)) * fade;
+    float k = max(0.0, dot(n, d)) * fade;
+    if (i == uShadowLight && uReceive > 0.5 && k > 0.0) k *= tridShadow(n, p);
+    c += uLightColor[i].rgb * k;
   }
   return c;
 }
@@ -143,7 +174,8 @@ ${fx.calls}
   return { source, uniforms: fx.uniforms };
 }
 
-const FACE_UNIFORMS = ["uUVTransform", "uNormalMatrix", "uAmbientColor", "uAmbient", "uLightDir", "uLightVec", "uLightColor", "uLightCount", "uShade", "uTime", "uBackground", "uCamWorld", "uTexture", "uUseTexture"];
+const FACE_UNIFORMS = ["uUVTransform", "uNormalMatrix", "uAmbientColor", "uAmbient", "uLightDir", "uLightVec", "uLightColor", "uLightCount", "uShade", "uTime", "uBackground", "uCamWorld", "uTexture", "uUseTexture",
+  "uShadowLight", "uShadowMap", "uShadowMatrix", "uShadowTexel", "uShadowSoft", "uShadowOffset", "uShadowBias", "uReceive"];
 
 // Each line segment is a thin rectangle facing the screen, `uWidth` pixels wide
 const LINE_VS = `
@@ -181,6 +213,94 @@ void main() {
 
 const UNIFORMS = ["uModel", "uCamPos", "uCamRot", "uF", "uAspect", "uNear", "uFar", "uColor"];
 
+// The shadow map: each pixel keeps the distance to the nearest face, seen from the light
+const SHADOW_VS = `
+attribute vec3 aPos;
+attribute vec2 aUV;
+uniform mat4 uModel;
+uniform mat4 uShadowMatrix;
+uniform mat3 uUVTransform;
+varying vec2 vUV;
+void main() {
+  vUV = (uUVTransform * vec3(aUV, 1.0)).xy;
+  gl_Position = uShadowMatrix * (uModel * vec4(aPos, 1.0));
+}
+`;
+
+const SHADOW_FS = `
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+uniform vec4 uColor;
+uniform sampler2D uTexture;
+uniform float uUseTexture;
+varying vec2 vUV;
+void main() {
+  // See-through parts of a texture cast no shadow
+  if (uColor.a * mix(1.0, texture2D(uTexture, vUV).a, uUseTexture) < 0.5) discard;
+  // The distance (0..1) spread over four bytes
+  vec4 e = fract(gl_FragCoord.z * vec4(1.0, 255.0, 65025.0, 16581375.0));
+  gl_FragColor = e - e.yzww * vec4(1.0 / 255.0, 1.0 / 255.0, 1.0 / 255.0, 0.0);
+}
+`;
+
+// Depth and normals of the faces, for post effects with `geometry: true`
+// (the packing is read back by GEOMETRY_GLSL in trid/render/post.js)
+const GEO_VS = `
+attribute vec3 aPos;
+attribute vec3 aNormal;
+attribute vec2 aUV;
+varying vec3 vNormal; // camera space
+varying vec2 vUV;
+varying float vDepth;
+uniform mat3 uUVTransform;
+uniform mat3 uNormalMatrix;
+${COMMON}
+void main() {
+  vec3 n = uNormalMatrix * aNormal;
+  vNormal = rotX(rotY(n, uCamRot.x), uCamRot.y);
+  vUV = (uUVTransform * vec3(aUV, 1.0)).xy;
+  vec3 c = toCamera(toWorld(aPos));
+  vDepth = c.z;
+  gl_Position = toClip(c);
+}
+`;
+
+const GEO_FS = `
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+uniform vec4 uColor;
+uniform sampler2D uTexture;
+uniform float uUseTexture;
+uniform float uGeoNear;
+uniform float uGeoRange;
+uniform float uMask;
+varying vec3 vNormal;
+varying vec2 vUV;
+varying float vDepth;
+void main() {
+  // See-through parts of a texture don't count, like in the face shader
+  if (uColor.a * mix(1.0, texture2D(uTexture, vUV).a, uUseTexture) < 0.004) discard;
+  vec3 n = normalize(vNormal);
+  if (!gl_FrontFacing) n = -n;
+  // Octahedral packing: the unit normal folded onto a square
+  n /= abs(n.x) + abs(n.y) + abs(n.z);
+  vec2 p = n.z >= 0.0 ? n.xy : (1.0 - abs(n.yx)) * vec2(n.x >= 0.0 ? 1.0 : -1.0, n.y >= 0.0 ? 1.0 : -1.0);
+  vec2 rg = floor((p * 0.5 + 0.5) * 255.0 + 0.5);
+  // Distance on a log scale, 15 bits: 0 = near, 32766 = far (32767: nothing drawn)
+  float d = clamp(log(max(vDepth, uGeoNear) / uGeoNear) / uGeoRange, 0.0, 1.0);
+  float q = floor(d * 32766.0 + 0.5);
+  float hi = floor(q / 128.0);
+  float lo = q - hi * 128.0;
+  gl_FragColor = vec4(rg, hi, lo * 2.0 + uMask) / 255.0;
+}
+`;
+
 // Post effects: one big triangle covering the screen
 const POST_VS = `
 attribute vec2 aPos;
@@ -192,7 +312,7 @@ void main() {
 `;
 
 /** Fragment shader for one pass of a post effect (see trid/render/post.js). */
-function postFS(glsl, uniforms) {
+function postFS(glsl, uniforms, geometry = false) {
   const decls = uniforms.map((u) => `uniform ${u.type} ${u.name};`).join("\n");
   return `
 #ifdef GL_FRAGMENT_PRECISION_HIGH
@@ -204,8 +324,10 @@ uniform vec2 uSize;
 uniform vec2 uTexel;
 uniform float uTime;
 uniform vec4 uBackground;
+uniform float uNear, uFar;
 varying vec2 vUV;
 ${FRAME_GLSL}
+${geometry ? GEOMETRY_GLSL : ""}
 ${decls}
 ${glsl}
 void main() {
@@ -215,12 +337,14 @@ void main() {
   f.texel = uTexel;
   f.time = uTime;
   f.background = uBackground;
+  f.near = uNear;
+  f.far = uFar;
   gl_FragColor = clamp(post(frame(vUV), f), 0.0, 1.0);
 }
 `;
 }
 
-const POST_UNIFORMS = ["uFrame", "uSource", "uSize", "uTexel", "uTime", "uBackground"];
+const POST_UNIFORMS = ["uFrame", "uSource", "uSize", "uTexel", "uTime", "uBackground", "uNear", "uFar", "uGeometry", "uGeoNear", "uGeoRange"];
 const COPY_GLSL = "vec4 post(vec4 color, Frame f) { return color; }";
 
 /**
@@ -242,7 +366,8 @@ const COPY_GLSL = "vec4 post(vec4 color, Frame f) { return color; }";
  *
  * Post effects (`scene.post`, see trid/render/post.js) run on the graphics
  * card too: the scene is drawn into a texture, then each pass draws the
- * next picture from it.
+ * next picture from it. Effects with `geometry: true` (like `outline()`) also
+ * get the faces' depth and normals, drawn in one extra pass.
  *
  * Meshes and textures that haven't been drawn for `releaseAfter` frames
  * are freed from the graphics card, so replacing them (`obj.mesh = newMesh`)
@@ -311,6 +436,8 @@ export class WebGLRenderer {
     this._line = program(gl, LINE_VS, LINE_FS, ["aA", "aB", "aCorner"], [...UNIFORMS, "uRes", "uWidth"]);
     this._posts = new Map(); // post effect pass programs, one per pass code
     this._post = null; // render targets for post effects, made when first needed
+    this._geo = null; // depth and normals program, for post effects with `geometry`
+    this._shadow = null; // shadow map and its program, made when a light first casts shadows
 
     gl.enable(gl.DEPTH_TEST);
     gl.depthFunc(gl.LEQUAL);
@@ -343,7 +470,7 @@ export class WebGLRenderer {
     // Post effects: the ones with GLSL run here, canvas-only ones after the copy
     const post = activePost(scene.post);
     const gpuPost = post.filter((e) => postPasses(e).length);
-    const background = this._color(ctx, scene.background);
+    const background = this._color(ctx, scene.background ?? "transparent");
     if (gpuPost.length) {
       // Into a texture, on the scene's background so effects see the whole picture
       gl.bindFramebuffer(gl.FRAMEBUFFER, this._sceneTarget(w, h));
@@ -403,11 +530,27 @@ export class WebGLRenderer {
       }
     }
 
+    // Shadows: drawn from the light first, then the main framebuffer again
+    if (lights.shadow) {
+      lights.shadow.map = this._shadowPass(lights.shadow, opaque);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, gpuPost.length ? this._sceneTarget(w, h) : null);
+      gl.viewport(0, 0, w, h);
+    }
+
     for (const d of opaque) this._draw(d, view, lights, w, h);
     gl.depthMask(false);
     for (const d of clear2) this._draw(d, view, lights, w, h);
 
-    if (gpuPost.length) this._runPost(gpuPost, view, w, h);
+    if (gpuPost.length) {
+      // Depth and normals for the effects that read them: one picture per `objects` list
+      const geometry = new Map();
+      for (const e of gpuPost) {
+        if (!wantsGeometry(e)) continue;
+        const key = Array.isArray(e.objects) ? e.objects : null;
+        if (!geometry.has(key)) geometry.set(key, this._geometryPass(opaque, view, w, h, maskedObjects(e), key));
+      }
+      this._runPost(gpuPost, view, w, h, geometry);
+    }
 
     ctx.drawImage(this.canvas, 0, 0);
     runCanvasPost(scene, post.filter((e) => !postPasses(e).length), this._start);
@@ -456,6 +599,7 @@ export class WebGLRenderer {
     const oldest = this._frame - this.releaseAfter;
     for (const [item, frame] of this._meshUse) if (frame < oldest) this.release(item);
     for (const [item, frame] of this._textureUse) if (frame < oldest) this.release(item);
+    if (this._shadow && this._shadow.used < this._frame - 60) this._freeShadow();
     // Post effect pictures of a size no longer used (after a resize, or effects removed)
     if (this._post) {
       const keep = [];
@@ -464,6 +608,12 @@ export class WebGLRenderer {
         else keep.push(t);
       }
       this._post.pool = keep;
+      for (const [key, t] of this._post.geometry) {
+        if (t.used < this._frame - 60) {
+          this._freeTarget(t);
+          this._post.geometry.delete(key);
+        }
+      }
       if (this._post.used < this._frame - 60) this._freePost();
     }
   }
@@ -483,7 +633,7 @@ export class WebGLRenderer {
       P = null;
     }
     if (!P) {
-      P = this._post = { w, h, pool: [], used: this._frame };
+      P = this._post = { w, h, pool: [], geometry: new Map(), used: this._frame };
       P.scene = this._makeTarget(w, h, true);
       if (this._webgl2 && this._options.antialias) {
         const samples = Math.min(4, gl.getParameter(gl.MAX_SAMPLES) || 0);
@@ -555,6 +705,7 @@ export class WebGLRenderer {
     const gl = this.gl;
     this._freeTarget(P.scene);
     for (const t of P.pool) this._freeTarget(t);
+    for (const t of P.geometry.values()) this._freeTarget(t);
     if (P.msaa) {
       gl.deleteFramebuffer(P.msaa.fb);
       gl.deleteRenderbuffer(P.msaa.color);
@@ -576,16 +727,166 @@ export class WebGLRenderer {
     return t;
   }
 
+  /**
+   * Draws the shadow map for the light casting shadows: the opaque faces of
+   * objects that cast them, seen from the light, in a box fitted around them.
+   *
+   * @returns {{ tex:WebGLTexture, matrix:Float32Array, size:number, radius:number } | null}
+   */
+  _shadowPass(shadow, draws) {
+    const gl = this.gl;
+    const casters = draws.filter((d) => d.kind === "face" && shadowFlag(d.obj, "castShadow"));
+    const frame = shadowFrame([...new Set(casters.map((d) => d.obj))], shadow.dir);
+    if (!frame) return null;
+    const size = Math.min(shadow.size, gl.getParameter(gl.MAX_TEXTURE_SIZE) || shadow.size);
+
+    let S = this._shadow;
+    if (S && S.size !== size) {
+      this._freeShadow();
+      S = null;
+    }
+    if (!S) {
+      S = this._shadow = { size, target: this._makeTarget(size, size, true), used: this._frame };
+      gl.bindTexture(gl.TEXTURE_2D, S.target.tex);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); // packed distances: never blended
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+    S.used = this._frame;
+    S.prog ??= program(gl, SHADOW_VS, SHADOW_FS, ["aPos", "aUV"], ["uModel", "uShadowMatrix", "uUVTransform", "uColor", "uTexture", "uUseTexture"]);
+    const prog = S.prog, u = prog.uniforms, a = prog.attributes;
+
+    gl.bindFramebuffer(gl.FRAMEBUFFER, S.target.fb);
+    gl.viewport(0, 0, size, size);
+    gl.clearColor(1, 1, 1, 1); // the farthest distance: nothing there
+    gl.depthMask(true);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.disable(gl.BLEND);
+    gl.disable(gl.CULL_FACE); // both sides cast: open meshes don't leak light
+    gl.disable(gl.POLYGON_OFFSET_FILL);
+    gl.useProgram(prog.program);
+    gl.uniformMatrix4fv(u.uShadowMatrix, false, frame.matrix);
+    gl.uniform1i(u.uTexture, 0);
+    const locs = [a.aPos, a.aUV].filter((loc) => loc >= 0);
+    for (const loc of locs) gl.enableVertexAttribArray(loc);
+
+    for (const d of casters) {
+      if (!d.count) continue;
+      const buf = this._faceBuffer(d.geo, d.obj.mesh, d.mat.shade === false ? null : creaseOf(d.mat.smooth), d.mat.mapping);
+      gl.uniformMatrix4fv(u.uModel, false, d.obj.world);
+      gl.uniform4fv(u.uColor, d.color);
+      const m = uvTransform(d.mat) ?? [1, 0, 0, 1, 0, 0];
+      gl.uniformMatrix3fv(u.uUVTransform, false, [m[0], m[1], 0, m[2], m[3], 0, m[4], m[5], 1]);
+      const tex = d.mat.texture
+        ? this._texture(d.mat.texture, d.mat, d.obj.mesh, !!uvsFor(d.obj.mesh, d.mat.mapping).faceUVs)
+        : null;
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.uniform1f(u.uUseTexture, tex ? 1 : 0);
+      gl.bindBuffer(gl.ARRAY_BUFFER, buf.buffer);
+      gl.vertexAttribPointer(a.aPos, 3, gl.FLOAT, false, 32, 0);
+      if (a.aUV >= 0) gl.vertexAttribPointer(a.aUV, 2, gl.FLOAT, false, 32, 24);
+      gl.drawArrays(gl.TRIANGLES, d.first, d.count);
+    }
+
+    for (const loc of locs) gl.disableVertexAttribArray(loc);
+    gl.enable(gl.BLEND);
+    return { tex: S.target.tex, matrix: frame.matrix, size, radius: frame.radius };
+  }
+
+  /** Frees the shadow map and its program. */
+  _freeShadow() {
+    const S = this._shadow;
+    if (!S) return;
+    this._freeTarget(S.target);
+    if (S.prog) this.gl.deleteProgram(S.prog.program);
+    this._shadow = null;
+  }
+
+  /**
+   * Draws the opaque faces' depth and normals (see GEO_FS) into a picture
+   * kept for this `objects` list. `mask`: the objects marked in it (null: all).
+   */
+  _geometryPass(draws, view, w, h, mask, key) {
+    const gl = this.gl;
+    const P = this._post;
+    let t = P.geometry.get(key);
+    if (!t) {
+      t = this._makeTarget(w, h, true);
+      // Packed numbers: never blend neighboring pixels
+      gl.bindTexture(gl.TEXTURE_2D, t.tex);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      gl.bindTexture(gl.TEXTURE_2D, null);
+      P.geometry.set(key, t);
+    }
+    t.used = this._frame;
+    this._geo ??= program(gl, GEO_VS, GEO_FS, ["aPos", "aNormal", "aUV"],
+      [...UNIFORMS, "uUVTransform", "uNormalMatrix", "uTexture", "uUseTexture", "uGeoNear", "uGeoRange", "uMask"]);
+    const prog = this._geo;
+    const u = prog.uniforms, a = prog.attributes;
+
+    gl.bindFramebuffer(gl.FRAMEBUFFER, t.fb);
+    gl.viewport(0, 0, w, h);
+    gl.clearColor(0.5, 0.5, 1, 254 / 255); // "nothing drawn": the farthest distance, mask 0
+    gl.depthMask(true);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.disable(gl.BLEND);
+    gl.disable(gl.POLYGON_OFFSET_FILL);
+    gl.useProgram(prog.program);
+    gl.uniform3fv(u.uCamPos, view.camPos);
+    gl.uniform2fv(u.uCamRot, view.camRot);
+    gl.uniform1f(u.uF, view.f);
+    gl.uniform1f(u.uAspect, view.aspect);
+    gl.uniform1f(u.uNear, view.near);
+    gl.uniform1f(u.uFar, view.far);
+    gl.uniform1f(u.uGeoNear, view.near);
+    gl.uniform1f(u.uGeoRange, Math.log(view.far / view.near));
+    gl.uniform1i(u.uTexture, 0);
+    const locs = [a.aPos, a.aNormal, a.aUV].filter((loc) => loc >= 0);
+    for (const loc of locs) gl.enableVertexAttribArray(loc);
+
+    for (const d of draws) {
+      if (d.kind !== "face") continue;
+      const buf = this._faceBuffer(d.geo, d.obj.mesh, d.mat.shade === false ? null : creaseOf(d.mat.smooth), d.mat.mapping);
+      if (!d.count) continue;
+      gl.uniformMatrix4fv(u.uModel, false, d.obj.world);
+      gl.uniform4fv(u.uColor, d.color);
+      gl.uniform1f(u.uMask, !mask || mask.has(d.obj) ? 1 : 0);
+      const m = uvTransform(d.mat) ?? [1, 0, 0, 1, 0, 0];
+      gl.uniformMatrix3fv(u.uUVTransform, false, [m[0], m[1], 0, m[2], m[3], 0, m[4], m[5], 1]);
+      gl.uniformMatrix3fv(u.uNormalMatrix, false, d.place.normals);
+      gl.frontFace(d.place.mirrored ? gl.CCW : gl.CW);
+      if (d.mat.doubleSided) gl.disable(gl.CULL_FACE);
+      else gl.enable(gl.CULL_FACE);
+      const tex = d.mat.texture
+        ? this._texture(d.mat.texture, d.mat, d.obj.mesh, !!uvsFor(d.obj.mesh, d.mat.mapping).faceUVs)
+        : null;
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.uniform1f(u.uUseTexture, tex ? 1 : 0);
+      gl.bindBuffer(gl.ARRAY_BUFFER, buf.buffer);
+      gl.vertexAttribPointer(a.aPos, 3, gl.FLOAT, false, 32, 0);
+      if (a.aNormal >= 0) gl.vertexAttribPointer(a.aNormal, 3, gl.FLOAT, false, 32, 12);
+      if (a.aUV >= 0) gl.vertexAttribPointer(a.aUV, 2, gl.FLOAT, false, 32, 24);
+      gl.drawArrays(gl.TRIANGLES, d.first, d.count);
+    }
+
+    for (const loc of locs) gl.disableVertexAttribArray(loc);
+    gl.enable(gl.BLEND);
+    return t;
+  }
+
   /** The program for one pass's code, compiled once. Null if it doesn't compile (reported once). */
-  _postProgram(glsl, uniforms) {
+  _postProgram(glsl, uniforms, geometry = false) {
     const list = Object.entries(uniforms ?? {})
       .map(([name, value]) => ({ name, type: uniformType(value) }))
       .filter((u) => u.type);
-    const key = glsl + "|" + list.map((u) => u.name + ":" + u.type).join(",");
+    const key = (geometry ? "geo|" : "") + glsl + "|" + list.map((u) => u.name + ":" + u.type).join(",");
     if (this._posts.has(key)) return this._posts.get(key);
     let p = null;
     try {
-      p = program(this.gl, POST_VS, postFS(glsl, list), ["aPos"], [...POST_UNIFORMS, ...list.map((u) => u.name)]);
+      p = program(this.gl, POST_VS, postFS(glsl, list, geometry), ["aPos"], [...POST_UNIFORMS, ...list.map((u) => u.name)]);
       p.list = list;
     } catch (err) {
       console.error("Trid: a post effect's shader failed to compile, skipping it.\n" + err.message);
@@ -598,7 +899,7 @@ export class WebGLRenderer {
    * Runs the post effects on the scene's picture, then draws the result on
    * the WebGL canvas.
    */
-  _runPost(effects, view, w, h) {
+  _runPost(effects, view, w, h, geometry = new Map()) {
     const gl = this.gl;
     const P = this._post;
     // Multisampled drawing: resolve it into the scene's texture
@@ -616,7 +917,7 @@ export class WebGLRenderer {
     gl.disable(gl.POLYGON_OFFSET_FILL);
     gl.bindBuffer(gl.ARRAY_BUFFER, P.quad);
 
-    const pass = (prog, input, source, target, tw, th, uniforms) => {
+    const pass = (prog, input, source, target, tw, th, uniforms, geo = null) => {
       gl.bindFramebuffer(gl.FRAMEBUFFER, target ? target.fb : null);
       gl.viewport(0, 0, tw, th);
       gl.useProgram(prog.program);
@@ -631,6 +932,15 @@ export class WebGLRenderer {
       gl.uniform2f(u.uTexel, 1 / input.w, 1 / input.h);
       gl.uniform1f(u.uTime, view.time);
       gl.uniform4fv(u.uBackground, view.background);
+      gl.uniform1f(u.uNear, view.near);
+      gl.uniform1f(u.uFar, view.far);
+      if (geo) {
+        gl.activeTexture(gl.TEXTURE2);
+        gl.bindTexture(gl.TEXTURE_2D, geo.tex);
+        gl.uniform1i(u.uGeometry, 2);
+        gl.uniform1f(u.uGeoNear, view.near);
+        gl.uniform1f(u.uGeoRange, Math.log(view.far / view.near));
+      }
       for (const x of prog.list) this._setUniform(view.ctx, u[x.name], x.type, uniforms?.[x.name]);
       const a = prog.attributes.aPos;
       gl.enableVertexAttribArray(a);
@@ -642,12 +952,13 @@ export class WebGLRenderer {
     let source = P.scene; // the picture the current effect starts from
     for (const e of effects) {
       let prev = source;
+      const geo = wantsGeometry(e) ? geometry.get(Array.isArray(e.objects) ? e.objects : null) ?? null : null;
       for (const ps of postPasses(e)) {
-        const prog = this._postProgram(ps.glsl, e.uniforms);
+        const prog = this._postProgram(ps.glsl, e.uniforms, !!geo);
         if (!prog) continue;
         const tw = Math.max(1, Math.round(w * ps.scale)), th = Math.max(1, Math.round(h * ps.scale));
         const target = this._poolTarget(tw, th, [source, prev]);
-        pass(prog, prev, source, target, tw, th, e.uniforms);
+        pass(prog, prev, source, target, tw, th, e.uniforms, geo);
         prev = target;
       }
       source = prev;
@@ -656,6 +967,8 @@ export class WebGLRenderer {
     // Onto the canvas
     pass(this._postProgram(COPY_GLSL, {}), source, source, null, w, h, {});
 
+    gl.activeTexture(gl.TEXTURE2);
+    gl.bindTexture(gl.TEXTURE_2D, null);
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, null);
     gl.activeTexture(gl.TEXTURE0);
@@ -677,6 +990,8 @@ export class WebGLRenderer {
     for (const p of new Set(this._faces.values())) gl.deleteProgram(p.program);
     for (const p of this._posts.values()) if (p) gl.deleteProgram(p.program);
     gl.deleteProgram(this._line.program);
+    if (this._geo) gl.deleteProgram(this._geo.program);
+    this._freeShadow();
     this._freePost();
     gl.getExtension("WEBGL_lose_context")?.loseContext();
   }
@@ -694,6 +1009,7 @@ export class WebGLRenderer {
       vec, color, count: L.lights.length,
       ambient: L.ambient, ambientLevel: L.ambientLevel,
       dir: [L.mainDir.x, L.mainDir.y, L.mainDir.z],
+      shadow: L.shadow, // the light casting shadows; `map` is added by _shadowPass
     };
   }
 
@@ -737,6 +1053,21 @@ export class WebGLRenderer {
       gl.uniform1f(u.uTime, view.time);
       gl.uniform4fv(u.uBackground, view.background);
       gl.uniform3fv(u.uCamWorld, view.camPos);
+      const sh = lights.shadow?.map;
+      gl.uniform1i(u.uShadowLight, sh ? lights.shadow.index : -1);
+      if (sh) {
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, sh.tex);
+        gl.uniform1i(u.uShadowMap, 1);
+        gl.uniformMatrix4fv(u.uShadowMatrix, false, sh.matrix);
+        gl.uniform1f(u.uShadowTexel, 1 / sh.size);
+        gl.uniform1f(u.uShadowSoft, lights.shadow.softness);
+        // About two map pixels along the normal, and one pixel of distance: no speckles on lit faces
+        const pixel = (2 * sh.radius) / sh.size;
+        gl.uniform1f(u.uShadowOffset, pixel * 1.5 * lights.shadow.bias);
+        gl.uniform1f(u.uShadowBias, (1 / sh.size) * lights.shadow.bias);
+        gl.uniform1f(u.uReceive, shadowFlag(d.obj, "receiveShadow") ? 1 : 0);
+      }
       for (const e of prog.effectUniforms) {
         this._setUniform(view.ctx, u[e.glslName], e.type, effects[e.effect]?.uniforms?.[e.name]);
       }

package/trid/scene.js

@@ -37,7 +37,7 @@ export class Scene {
    * @param {Object} [opts]
    * @param {number} [opts.width] - Sets canvas.width (keeps the current one if omitted)
    * @param {number} [opts.height] - Sets canvas.height (keeps the current one if omitted)
-   * @param {string} [opts.background="#141414"] - Clear color
+   * @param {string|null} [opts.background="#141414"] - Clear color; "transparent" or null: see-through, the page shows behind
    * @param {string} [opts.color="#ffffff"] - Default wireframe color
    * @param {number} [opts.lineWidth=3] - Default wireframe width
    * @param {import("./math/transform.js").Camera} [opts.camera={ z: -1 }] - Camera

package/trid/tools/index.js

@@ -8,3 +8,4 @@ export { FpsMeter } from "./fpsMeter.js";
 export { ObjUploader } from "./objUploader.js";
 export { ViewGizmo } from "./viewGizmo.js";
 export { TransformGizmo } from "./transformGizmo.js";
+export { SelectionOutline } from "./selectionOutline.js";