@ikijs/engine 0.3.0 → 0.3.2

package/README.md

@@ -86,8 +86,10 @@ delta, so a backgrounded tab or a long hitch cannot snap the rig.
 
 ## Rendering notes
 
-- The whole pipeline is **premultiplied alpha** — the canvas is created with
-  `premultipliedAlpha: true` and the shader premultiplies before blending.
+- The whole pipeline is **premultiplied alpha** — textures are uploaded
+  premultiplied (so LINEAR filtering never blends a transparent texel's rgb
+  into an edge), the shader keeps them so, and the canvas is created with
+  `premultipliedAlpha: true`.
 - Clipping masks use the stencil buffer. If the context grants no stencil, the
   affected parts render unclipped and `load()` logs it.
 - Textures are decoded from `data:` URIs only; external URLs are skipped with a

package/dist/index.js

@@ -399,10 +399,10 @@ var IkiPlayer = class {
     this.canvas = canvas;
     const gl = canvas.getContext("webgl2", {
       alpha: true,
-      // The whole pipeline is premultiplied-alpha: the fragment shader
-      // multiplies rgb by alpha, the blend function is ONE /
-      // ONE_MINUS_SRC_ALPHA, and the page compositor reads the framebuffer
-      // as premultiplied. Straight-alpha (`premultipliedAlpha: false`) cannot
+      // The whole pipeline is premultiplied-alpha: textures are uploaded
+      // premultiplied, the fragment shader keeps them so, the blend function
+      // is ONE / ONE_MINUS_SRC_ALPHA, and the page compositor reads the
+      // framebuffer as premultiplied. Straight-alpha (`premultipliedAlpha: false`) cannot
       // be made consistent with SRC_ALPHA-style blending: semi-transparent
       // pixels over a transparent background come out premultiplied anyway
       // and composite too dark.
@@ -538,7 +538,7 @@ var IkiPlayer = class {
         return null;
       }
       gl.bindTexture(gl.TEXTURE_2D, texture);
-      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
       drainGlErrors(gl);
       gl.texImage2D(
@@ -949,14 +949,17 @@ uniform float u_alphaCutoff;
 in vec2 v_uv;
 out vec4 outColor;
 void main() {
+  // Texels are premultiplied (see the upload); the untextured fill is opaque
+  // white, premultiplied or not.
   vec4 base = u_useTexture ? texture(u_tex, v_uv) : vec4(1.0);
   vec4 tinted = base * u_color;
   // 0 for normal draws (no-op); raised during the stencil mask-write pass so
   // only opaque mask coverage marks the stencil (the transparent fringe is cut).
   if (tinted.a < u_alphaCutoff) discard;
-  // Premultiply: the blend function and the canvas compositing contract
-  // (premultipliedAlpha: true) both expect rgb already scaled by alpha.
-  outColor = vec4(tinted.rgb * tinted.a, tinted.a);
+  // The blend function and the canvas compositing contract (premultipliedAlpha:
+  // true) both expect rgb already scaled by alpha. base.rgb is; the tint's own
+  // alpha still has to scale it (base.a is already folded into base.rgb).
+  outColor = vec4(tinted.rgb * u_color.a, tinted.a);
 }`;
 async function decodeTexture(source) {
   if (!source.startsWith("data:")) {
@@ -969,7 +972,7 @@ async function decodeTexture(source) {
   const blob = await (await fetch(source)).blob();
   return createImageBitmap(blob, {
     imageOrientation: "none",
-    premultiplyAlpha: "none"
+    premultiplyAlpha: "premultiply"
   });
 }
 function createUnitQuad(gl) {
@@ -1073,7 +1076,10 @@ var FixedStepClock = class {
 // src/idle-motion.ts
 var BLINK_INTERVAL_MIN_MS = 1500;
 var BLINK_INTERVAL_MAX_MS = 6e3;
-var BLINK_DURATION_MS = 120;
+var BLINK_CLOSE_MS = 60;
+var BLINK_HOLD_MS = 20;
+var BLINK_OPEN_MS = 100;
+var BLINK_DURATION_MS = BLINK_CLOSE_MS + BLINK_HOLD_MS + BLINK_OPEN_MS;
 var BREATH_PERIOD_MS = 3500;
 var GAZE_RADIUS = 0.3;
 var GAZE_RETARGET_MIN_MS = 1200;
@@ -1091,7 +1097,18 @@ function lerp(a, b, t) {
   return a + (b - a) * t;
 }
 function blinkEnvelope(phase) {
-  return 2 * Math.abs(phase - 0.5);
+  const ms = phase * BLINK_DURATION_MS;
+  if (ms <= 0) return 1;
+  if (ms < BLINK_CLOSE_MS) {
+    const t = ms / BLINK_CLOSE_MS;
+    return 1 - t * t * (3 - 2 * t);
+  }
+  if (ms <= BLINK_CLOSE_MS + BLINK_HOLD_MS) return 0;
+  if (ms < BLINK_DURATION_MS) {
+    const t = (ms - BLINK_CLOSE_MS - BLINK_HOLD_MS) / BLINK_OPEN_MS;
+    return 1 - (1 - t) * (1 - t);
+  }
+  return 1;
 }
 function randomInDisk(rng, radius) {
   const r = Math.sqrt(rng()) * radius;