@swf2es/context3d 0.1.19 → 0.1.21

package/src/webgl/programs.ts

@@ -1,4 +1,5 @@
 import { type SamplerSource, translate } from "../agal.js";
+import type { Profile } from "../backend.js";
 import { linkProgram as link, ShaderError } from "../device/programs.js";
 import { Context3DError } from "../errors.js";
 
@@ -10,6 +11,8 @@ export interface ProgramState {
   attributeMask: number;
   vertex: (WebGLUniformLocation | null)[];
   vertexBank: WebGLUniformLocation | null;
+  /** The colour outputs its fragment program writes. */
+  outputs: number;
   fragment: (WebGLUniformLocation | null)[];
   samplers: { source: SamplerSource; location: WebGLUniformLocation | null }[];
   samplerMask: number;
@@ -32,19 +35,20 @@ export function uploadProgram(
   state: ProgramState,
   vertex: Uint8Array,
   fragment: Uint8Array,
+  profile: Profile,
 ): void {
   // Translate both before allocating anything on the GPU.
-  const vs = translate(vertex, "vertex");
-  const fs = translate(fragment, "fragment");
-  for (let i = 0; i < 8; i++) {
-    if (fs.varyings[i] & ~vs.varyings[i]) {
+  const vs = translate(vertex, "vertex", profile);
+  const fs = translate(fragment, "fragment", profile);
+  for (let i = 0; i < fs.varyings.length; i++) {
+    if (fs.varyings[i] & ~(vs.varyings[i] ?? 0)) {
       throw new Context3DError(
         "agalVaryingMissing",
         "Fragment program reads an unwritten varying component",
       );
     }
   }
-  for (let i = 0; i < 8; i++) {
+  for (let i = 0; i < vs.varyings.length; i++) {
     if (vs.varyings[i] && vs.varyings[i] !== 15) {
       throw new Context3DError(
         "agalVaryingPartial",
@@ -70,6 +74,7 @@ export function uploadProgram(
 
   state.vertex = [];
   state.vertexBank = vs.indirect ? gl.getUniformLocation(handle, "vc[0]") : null;
+  state.outputs = fs.outputs;
   state.fragment = [];
   state.samplers = [];
   state.samplerMask = 0;

package/src/webgl/readback.ts

@@ -0,0 +1,54 @@
+// The back buffer read back for drawToBitmapData: its rows top-down, at the size asked for.
+
+import { resolveBackBuffer } from "./back-buffer.js";
+import type { WebGLContext3D } from "./context.js";
+
+export function readBackBuffer(ctx: WebGLContext3D, width: number, height: number): Uint8Array {
+  width = Math.max(0, Math.min(ctx.width, Math.floor(width) || 0));
+  height = Math.max(0, Math.min(ctx.height, Math.floor(height) || 0));
+  ctx.target(true);
+  resolveBackBuffer(ctx);
+  const gl = ctx.gl;
+  const scaleX = ctx.drawnWidth / ctx.width;
+  const scaleY = ctx.drawnHeight / ctx.height;
+  const drawnWidth = Math.min(ctx.drawnWidth, Math.ceil(width * scaleX));
+  const drawnHeight = Math.min(ctx.drawnHeight, Math.ceil(height * scaleY));
+  if (ctx.pixels.length < drawnWidth * drawnHeight * 4) {
+    ctx.pixels = new Uint8Array(drawnWidth * drawnHeight * 4);
+  }
+  if (ctx.topDown.length < width * height * 4) {
+    ctx.topDown = new Uint8Array(width * height * 4);
+  }
+
+  // GL's rows run bottom-up, so the top-left region starts height rows below the top.
+  gl.readPixels(
+    0,
+    ctx.drawnHeight - drawnHeight,
+    drawnWidth,
+    drawnHeight,
+    gl.RGBA,
+    gl.UNSIGNED_BYTE,
+    ctx.pixels,
+  );
+  const row = width * 4;
+  if (drawnWidth === width && drawnHeight === height) {
+    for (let y = 0; y < height; y++) {
+      const from = (height - y - 1) * row;
+      ctx.topDown.set(ctx.pixels.subarray(from, from + row), y * row);
+    }
+
+    return ctx.topDown;
+  }
+
+  // Storage smaller than the back buffer: each pixel is the stored one it falls on.
+  const source = new Uint32Array(ctx.pixels.buffer, 0, drawnWidth * drawnHeight);
+  const target = new Uint32Array(ctx.topDown.buffer, 0, width * height);
+  for (let y = 0; y < height; y++) {
+    const from = (drawnHeight - 1 - Math.min(drawnHeight - 1, Math.floor(y * scaleY))) * drawnWidth;
+    for (let x = 0; x < width; x++) {
+      target[y * width + x] = source[from + Math.min(drawnWidth - 1, Math.floor(x * scaleX))];
+    }
+  }
+
+  return ctx.topDown;
+}

package/src/webgl/targets.ts

@@ -107,6 +107,8 @@ export function allocateMultisample(
   depth: boolean,
   depthWrite: boolean,
   stencilWrite: number,
+  /** The texture's internal format, which its samples resolve into. */
+  storage: number = gl.RGBA8,
 ): MultisampleTarget {
   const same = old?.samples === samples;
   const newDepth = depth && (!same || !old.depth);
@@ -125,7 +127,7 @@ export function allocateMultisample(
     if (texture.cube && !same) {
       gl.activeTexture(gl.TEXTURE0);
       gl.bindTexture(gl.TEXTURE_2D, resolved);
-      gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, texture.width, texture.height);
+      gl.texStorage2D(gl.TEXTURE_2D, 1, storage, texture.width, texture.height);
       gl.bindFramebuffer(gl.FRAMEBUFFER, resolve);
       gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, resolved, 0);
       if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
@@ -148,7 +150,7 @@ export function allocateMultisample(
       gl.renderbufferStorageMultisample(
         gl.RENDERBUFFER,
         samples,
-        gl.RGBA8,
+        storage,
         texture.width,
         texture.height,
       );

package/src/webgl/textures.ts

@@ -1,4 +1,4 @@
-import type { Texture3D } from "../backend.js";
+import { compressedFormat, TEXEL_BYTES, type Texture3D, type TextureFormat } from "../backend.js";
 import { blockBytes, type DxtEncoder, decodeDxt, encodeDxt } from "../dxt.js";
 import { Context3DError } from "../errors.js";
 import { range } from "./state.js";
@@ -20,20 +20,169 @@ export interface TextureState {
   multisample: MultisampleTarget | null;
   samples: number;
   antiAlias: number;
+  /** The extra colour outputs its framebuffer has attached, a bit each from output 1. */
+  outputs: number;
   /** TEXTURE_BASE_LEVEL: a streaming texture's finest level whole to the smallest. */
   base: number;
 }
 
-/** The staging array, made base-sized at its first use: a texture given only blocks on S3TC has none. */
+/**
+ * GL's internal format for an uncompressed texture's storage. The packed formats are kept
+ * at 8 bits a channel, as AIR draws into them, their texels widened on upload as Direct3D
+ * samples them; 5:6:5 has no alpha to read but 1.
+ */
+export function storageFormat(gl: WebGL2RenderingContext, format: TextureFormat): number {
+  switch (format) {
+    case "bgrPacked565":
+      return gl.RGB8;
+    case "rgbaHalfFloat":
+      return gl.RGBA16F;
+    default:
+      return gl.RGBA8;
+  }
+}
+
+/** 8-bit channel values as half floats, for bitmaps uploaded to rgbaHalfFloat. */
+let halves: Uint16Array | null = null;
+
+function halfOf(byte: number): number {
+  if (!halves) {
+    halves = new Uint16Array(256);
+    const float = new Float32Array(1);
+    const bits = new Uint32Array(float.buffer);
+    for (let i = 1; i < 256; i++) {
+      float[0] = i / 255;
+      const word = bits[0];
+      const exponent = ((word >>> 23) & 255) - 127 + 15;
+      // Every value here is a normal half: round its 23-bit mantissa to 10 bits, to nearest even.
+      const mantissa = word & 0x7fffff;
+      let half = (exponent << 10) | (mantissa >>> 13);
+      const rest = mantissa & 0x1fff;
+      if (rest > 0x1000 || (rest === 0x1000 && half & 1)) {
+        half++;
+      }
+      halves[i] = half;
+    }
+  }
+
+  return halves[byte];
+}
+
+/** A channel cut to its high `bits` and widened back to 8 by repeating them, as Direct3D reads it. */
+function widen(value: number, bits: number): number {
+  const kept = value >> (8 - bits);
+  return (kept << (8 - bits)) | (kept >> (2 * bits - 8));
+}
+
+/**
+ * The staging array, made base-sized at its first use: a texture given only blocks on S3TC
+ * has none. It holds a level as RGBA bytes, or a byte upload's texels as they came, with
+ * room for half floats' eight bytes a texel.
+ */
 function staging(texture: Texture3D, state: TextureState): Uint8Array {
   if (state.bytes.length === 0) {
-    state.bytes = new Uint8Array(texture.width * texture.height * 4);
+    state.bytes = new Uint8Array(
+      texture.width * texture.height * Math.max(4, TEXEL_BYTES[texture.format] ?? 4),
+    );
   }
 
   return state.bytes;
 }
 
-/** The staged level uploaded: as it is, or a compressed texture's encoded to its blocks, as AIR compresses pixels. */
+/**
+ * The staged level turned, in place, into what the texture's storage takes: from RGBA
+ * bytes, or from its format's texels where `raw`, little-endian words. 5:6:5 and 4:4:4:4
+ * keep each channel's high bits, as AIR packs a bitmap; half floats take each byte over 255.
+ */
+function convertStaged(
+  format: TextureFormat,
+  bytes: Uint8Array,
+  count: number,
+  raw: boolean,
+): void {
+  const words = new Uint16Array(bytes.buffer, bytes.byteOffset, bytes.length >> 1);
+  switch (format) {
+    case "bgrPacked565":
+      if (raw) {
+        // Backwards: texel i's three bytes land at 3i, ahead of its word at 2i.
+        for (let i = count - 1; i >= 0; i--) {
+          const word = words[i];
+          const at = i * 3;
+          bytes[at] = ((word >> 11) << 3) | (word >> 13);
+          bytes[at + 1] = (((word >> 5) & 63) << 2) | ((word >> 9) & 3);
+          bytes[at + 2] = ((word & 31) << 3) | ((word >> 2) & 7);
+        }
+      } else {
+        // Forwards: texel i's three bytes land at 3i, behind its own four at 4i.
+        for (let i = 0; i < count; i++) {
+          const at = i * 4;
+          const to = i * 3;
+          const r = widen(bytes[at], 5);
+          const g = widen(bytes[at + 1], 6);
+          const b = widen(bytes[at + 2], 5);
+          bytes[to] = r;
+          bytes[to + 1] = g;
+          bytes[to + 2] = b;
+        }
+      }
+      break;
+    case "bgraPacked4444":
+      if (raw) {
+        // A word is alpha, red, green and blue from its high nibble down.
+        for (let i = count - 1; i >= 0; i--) {
+          const word = words[i];
+          const at = i * 4;
+          bytes[at] = ((word >> 8) & 15) * 17;
+          bytes[at + 1] = ((word >> 4) & 15) * 17;
+          bytes[at + 2] = (word & 15) * 17;
+          bytes[at + 3] = (word >> 12) * 17;
+        }
+      } else {
+        for (let i = 0; i < count * 4; i++) {
+          bytes[i] = (bytes[i] >> 4) * 17;
+        }
+      }
+      break;
+    case "rgbaHalfFloat":
+      if (!raw) {
+        // Backwards: texel i's four words land at 8i, ahead of its own bytes at 4i.
+        for (let i = count - 1; i >= 0; i--) {
+          const at = i * 4;
+          const r = halfOf(bytes[at]);
+          const g = halfOf(bytes[at + 1]);
+          const b = halfOf(bytes[at + 2]);
+          const a = halfOf(bytes[at + 3]);
+          words[i * 4] = r;
+          words[i * 4 + 1] = g;
+          words[i * 4 + 2] = b;
+          words[i * 4 + 3] = a;
+        }
+      }
+      break;
+  }
+}
+
+/** The staged level's texels, as WebGL takes them for the texture's storage. */
+function stagedPixels(
+  gl: WebGL2RenderingContext,
+  format: TextureFormat,
+  bytes: Uint8Array,
+  count: number,
+): [number, number, ArrayBufferView] {
+  switch (format) {
+    case "bgrPacked565":
+      return [gl.RGB, gl.UNSIGNED_BYTE, bytes];
+    case "rgbaHalfFloat":
+      return [gl.RGBA, gl.HALF_FLOAT, new Uint16Array(bytes.buffer, bytes.byteOffset, count * 4)];
+    default:
+      return [gl.RGBA, gl.UNSIGNED_BYTE, bytes];
+  }
+}
+
+/**
+ * The staged level uploaded: as it is, or a compressed texture's encoded to its blocks, as
+ * AIR compresses pixels; `raw` where it is staged in the texture's own format, not as RGBA.
+ */
 function uploadLevel(
   gl: WebGL2RenderingContext,
   texture: Texture3D,
@@ -43,8 +192,9 @@ function uploadLevel(
   w: number,
   h: number,
   encoder: DxtEncoder | null,
+  raw = false,
 ): void {
-  if (texture.format !== "bgra") {
+  if (compressedFormat(texture.format)) {
     const rgba = state.bytes.subarray(0, w * h * 4);
     const dxt5 = texture.format === "compressedAlpha";
     const blocks = encoder?.(rgba, dxt5, w, h) ?? encodeDxt(rgba, dxt5, w, h);
@@ -52,6 +202,18 @@ function uploadLevel(
     return;
   }
 
+  // BGRA's staging is RGBA bytes already: no conversion and no views.
+  const bgra = texture.format === "bgra";
+  if (!bgra) {
+    convertStaged(texture.format, state.bytes, w * h, raw);
+  }
+  const [layout, type, pixels] = bgra
+    ? [gl.RGBA, gl.UNSIGNED_BYTE, state.bytes]
+    : stagedPixels(gl, texture.format, state.bytes, w * h);
+  // 5:6:5's rows of three bytes need not be 4-byte aligned.
+  if (texture.format === "bgrPacked565") {
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+  }
   const cube = texture.cube;
   const target = cube ? gl.TEXTURE_CUBE_MAP : gl.TEXTURE_2D;
   gl.activeTexture(gl.TEXTURE0);
@@ -63,10 +225,13 @@ function uploadLevel(
     0,
     w,
     h,
-    gl.RGBA,
-    gl.UNSIGNED_BYTE,
-    state.bytes,
+    layout,
+    type,
+    pixels,
   );
+  if (texture.format === "bgrPacked565") {
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+  }
   state.uploaded[face] |= 1 << level;
 }
 
@@ -149,10 +314,19 @@ export function uploadTextureBytes(
   range(face, 1, faces);
   const w = Math.max(1, width >> level);
   const h = Math.max(1, height >> level);
-  const length = w * h * 4;
+  const texel = TEXEL_BYTES[texture.format] ?? 4;
+  const length = w * h * texel;
   range(offset, length, data.length);
   staging(texture, state);
 
+  // BGRA, and the compressed formats' pixels, which are BGRA too, go up as RGBA; the
+  // others' texels as they are, little-endian words.
+  if (texel !== 4) {
+    state.bytes.set(data.subarray(offset, offset + length));
+    uploadLevel(gl, texture, state, level, face, w, h, encoder, true);
+    return;
+  }
+
   for (let i = 0; i < length; i += 4) {
     state.bytes[i] = data[offset + i + 2];
     state.bytes[i + 1] = data[offset + i + 1];