@swf2es/context3d 0.1.20 → 0.1.21

package/src/webgl/back-buffer.ts

@@ -0,0 +1,287 @@
+// The back buffer: its storage, as large as the GPU gives, its multisample resolve and its
+// presentation to the canvas.
+
+import { MOST_BACK_BUFFER } from "../backend.js";
+import { Context3DError } from "../errors.js";
+
+import type { WebGLContext3D } from "./context.js";
+import { range } from "./state.js";
+import { selectSamples } from "./targets.js";
+
+export function configureBackBuffer(
+  ctx: WebGLContext3D,
+  width: number,
+  height: number,
+  depth: boolean,
+  antiAlias: number,
+  scale: number,
+): void {
+  ctx.alive();
+  range(32, width - 32, MOST_BACK_BUFFER);
+  range(32, height - 32, MOST_BACK_BUFFER);
+  if (ctx.renderTexture) {
+    throw new Context3DError(
+      "operation",
+      "Context3D experiment: resize while rendering to texture",
+    );
+  }
+
+  // AIR preserves color, depth and bindings when the request is unchanged.
+  // Shadow passes can issue this every frame when returning to the back buffer.
+  if (
+    ctx.framebuffer &&
+    width === ctx.width &&
+    height === ctx.height &&
+    depth === (ctx.depthBuffer !== null) &&
+    antiAlias === ctx.antiAlias
+  ) {
+    if (scale !== ctx.scale) {
+      ctx.scale = scale;
+      showAt(ctx);
+      ctx.applyScissor();
+    }
+
+    return;
+  }
+
+  const samples = selectSamples(ctx.gl, antiAlias, depth);
+  const gl = ctx.gl;
+  const most = storageLimit(ctx);
+  const drawnWidth = Math.min(width, most[0]);
+  const drawnHeight = Math.min(height, most[1]);
+  const texture = gl.createTexture();
+  const framebuffer = gl.createFramebuffer();
+  const depthBuffer = depth ? gl.createRenderbuffer() : null;
+  const resolveFramebuffer = samples ? gl.createFramebuffer() : null;
+  const colorBuffer = samples ? gl.createRenderbuffer() : null;
+  try {
+    if (
+      !texture ||
+      !framebuffer ||
+      (depth && !depthBuffer) ||
+      (samples && (!resolveFramebuffer || !colorBuffer))
+    ) {
+      throw new Context3DError("operation", "Context3D experiment: cannot allocate back buffer");
+    }
+
+    ctx.texturesApplied[0] = 0;
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA8,
+      drawnWidth,
+      drawnHeight,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      null,
+    );
+    ctx.bindFramebuffer(gl.FRAMEBUFFER, resolveFramebuffer ?? framebuffer);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+    if (resolveFramebuffer) {
+      if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
+        throw new Context3DError("operation", "Context3D experiment: incomplete resolve buffer");
+      }
+
+      ctx.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+      gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer);
+      gl.renderbufferStorageMultisample(
+        gl.RENDERBUFFER,
+        samples,
+        gl.RGBA8,
+        drawnWidth,
+        drawnHeight,
+      );
+      gl.framebufferRenderbuffer(
+        gl.FRAMEBUFFER,
+        gl.COLOR_ATTACHMENT0,
+        gl.RENDERBUFFER,
+        colorBuffer,
+      );
+    }
+    if (depthBuffer) {
+      gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
+      if (samples) {
+        gl.renderbufferStorageMultisample(
+          gl.RENDERBUFFER,
+          samples,
+          gl.DEPTH24_STENCIL8,
+          drawnWidth,
+          drawnHeight,
+        );
+      } else {
+        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH24_STENCIL8, drawnWidth, drawnHeight);
+      }
+      gl.framebufferRenderbuffer(
+        gl.FRAMEBUFFER,
+        gl.DEPTH_STENCIL_ATTACHMENT,
+        gl.RENDERBUFFER,
+        depthBuffer,
+      );
+    }
+    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+    if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
+      throw new Context3DError("operation", "Context3D experiment: incomplete back buffer");
+    }
+  } catch (error) {
+    gl.deleteTexture(texture);
+    gl.deleteFramebuffer(framebuffer);
+    gl.deleteFramebuffer(resolveFramebuffer);
+    gl.deleteRenderbuffer(depthBuffer);
+    gl.deleteRenderbuffer(colorBuffer);
+    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+    ctx.bindFramebuffer(gl.FRAMEBUFFER, ctx.framebuffer);
+    throw error;
+  }
+
+  gl.deleteTexture(ctx.texture);
+  gl.deleteFramebuffer(ctx.framebuffer);
+  gl.deleteFramebuffer(ctx.resolveFramebuffer);
+  gl.deleteRenderbuffer(ctx.depthBuffer);
+  gl.deleteRenderbuffer(ctx.colorBuffer);
+  ctx.texture = texture;
+  ctx.framebuffer = framebuffer;
+  ctx.resolveFramebuffer = resolveFramebuffer;
+  ctx.colorBuffer = colorBuffer;
+  ctx.depthBuffer = depthBuffer;
+  ctx.antiAlias = antiAlias;
+  ctx.width = width;
+  ctx.height = height;
+  ctx.drawnWidth = drawnWidth;
+  ctx.drawnHeight = drawnHeight;
+  ctx.scale = scale;
+  gl.canvas.width = drawnWidth;
+  gl.canvas.height = drawnHeight;
+  showAt(ctx);
+  // Readback's storage waits for a read: a back buffer as large as a 4K screen is 33 MB each.
+  ctx.pixels = new Uint8Array(0);
+  ctx.topDown = new Uint8Array(0);
+  ctx.applyScissor();
+  ctx.clear(0, 0, 0, 1);
+}
+
+/**
+ * Shown at the size asked for, in CSS pixels, as an unstyled canvas of that size would be,
+ * divided by its scale: a best-resolution back buffer shows its pixels at the screen's.
+ */
+function showAt(ctx: WebGLContext3D): void {
+  const style = (ctx.gl.canvas as Partial<HTMLCanvasElement>).style;
+  if (!style) {
+    return;
+  }
+
+  const plain = ctx.scale === 1;
+  style.width = plain && ctx.drawnWidth === ctx.width ? "" : `${ctx.width / ctx.scale}px`;
+  style.height = plain && ctx.drawnHeight === ctx.height ? "" : `${ctx.height / ctx.scale}px`;
+}
+
+/** The largest back buffer storage the GPU gives: a texture, a renderbuffer and a viewport. */
+function storageLimit(ctx: WebGLContext3D): Int32Array {
+  if (!ctx.gpuMost) {
+    const gl = ctx.gl;
+    const viewport = gl.getParameter(gl.MAX_VIEWPORT_DIMS) as Int32Array;
+    const side = Math.min(
+      gl.getParameter(gl.MAX_TEXTURE_SIZE) as number,
+      gl.getParameter(gl.MAX_RENDERBUFFER_SIZE) as number,
+    );
+    ctx.gpuMost = Int32Array.of(Math.min(side, viewport[0]), Math.min(side, viewport[1]));
+  }
+
+  return ctx.gpuMost;
+}
+
+export function unconfigureBackBuffer(ctx: WebGLContext3D): void {
+  ctx.alive();
+  if (ctx.renderTexture) {
+    throw new Context3DError(
+      "operation",
+      "Context3D experiment: resize while rendering to texture",
+    );
+  }
+
+  const gl = ctx.gl;
+  gl.deleteTexture(ctx.texture);
+  gl.deleteFramebuffer(ctx.framebuffer);
+  gl.deleteFramebuffer(ctx.resolveFramebuffer);
+  gl.deleteRenderbuffer(ctx.depthBuffer);
+  gl.deleteRenderbuffer(ctx.colorBuffer);
+  ctx.drawState.forget();
+  ctx.texture = null;
+  ctx.framebuffer = null;
+  ctx.resolveFramebuffer = null;
+  ctx.colorBuffer = null;
+  ctx.depthBuffer = null;
+  ctx.resolveDirty = false;
+  ctx.antiAlias = 0;
+  ctx.scale = 1;
+  ctx.width = 0;
+  ctx.height = 0;
+  ctx.drawnWidth = 0;
+  ctx.drawnHeight = 0;
+  ctx.pixels = new Uint8Array(0);
+  ctx.topDown = new Uint8Array(0);
+}
+
+export function resolveBackBuffer(ctx: WebGLContext3D): void {
+  if (!ctx.resolveFramebuffer) {
+    return;
+  }
+
+  const gl = ctx.gl;
+  if (ctx.resolveDirty) {
+    ctx.bindFramebuffer(gl.READ_FRAMEBUFFER, ctx.framebuffer);
+    ctx.bindFramebuffer(gl.DRAW_FRAMEBUFFER, ctx.resolveFramebuffer);
+    if (ctx.scissor) {
+      gl.disable(gl.SCISSOR_TEST);
+    }
+    gl.blitFramebuffer(
+      0,
+      0,
+      ctx.drawnWidth,
+      ctx.drawnHeight,
+      0,
+      0,
+      ctx.drawnWidth,
+      ctx.drawnHeight,
+      gl.COLOR_BUFFER_BIT,
+      gl.NEAREST,
+    );
+    if (ctx.scissor) {
+      gl.enable(gl.SCISSOR_TEST);
+    }
+    ctx.resolveDirty = false;
+  }
+  ctx.bindFramebuffer(gl.READ_FRAMEBUFFER, ctx.resolveFramebuffer);
+}
+
+export function presentBackBuffer(ctx: WebGLContext3D): void {
+  ctx.setRenderTarget(null);
+  ctx.target();
+  resolveBackBuffer(ctx);
+  const gl = ctx.gl;
+  ctx.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+  if (ctx.scissor) {
+    gl.disable(gl.SCISSOR_TEST);
+  }
+  // To the drawing buffer the browser gave, which it may have made smaller than the canvas.
+  gl.blitFramebuffer(
+    0,
+    0,
+    ctx.drawnWidth,
+    ctx.drawnHeight,
+    0,
+    0,
+    gl.drawingBufferWidth,
+    gl.drawingBufferHeight,
+    gl.COLOR_BUFFER_BIT,
+    gl.NEAREST,
+  );
+  if (ctx.scissor) {
+    gl.enable(gl.SCISSOR_TEST);
+  }
+  gl.flush();
+}

package/src/webgl/buffers.ts

@@ -1,4 +1,7 @@
 import type { Buffer3D } from "../backend.js";
+import { Context3DError } from "../errors.js";
+
+import type { WebGLContext3D } from "./context.js";
 import { range } from "./state.js";
 
 export interface BufferState {
@@ -42,7 +45,7 @@ function uploaded(state: BufferState, start: number, amount: number): void {
   }
 }
 
-export function uploadBuffer(
+function uploadBuffer(
   gl: WebGL2RenderingContext,
   vao: WebGLVertexArrayObject,
   buffer: Buffer3D,
@@ -69,7 +72,7 @@ export function uploadBuffer(
   gl.bufferSubData(target, start * size * (stride === 0 ? 2 : 4), data);
 }
 
-export function uploadBufferBytes(
+function uploadBufferBytes(
   gl: WebGL2RenderingContext,
   vao: WebGLVertexArrayObject,
   buffer: Buffer3D,
@@ -104,3 +107,112 @@ export function uploadBufferBytes(
   gl.bindBuffer(target, handle);
   gl.bufferSubData(target, start * bytesPerEntry, data, offset, length);
 }
+
+export function allocateBuffer(
+  ctx: WebGLContext3D,
+  count: number,
+  stride: number,
+  dynamic: boolean,
+): Buffer3D {
+  ctx.alive();
+  range(1, count - 1, stride === 0 ? 524287 : 65535);
+  range(0, stride, 64);
+  const countLimit = stride === 0 ? ctx.limits.maxIndexBuffers : ctx.limits.maxVertexBuffers;
+  const used = stride === 0 ? ctx.buffers.size - ctx.vertexBuffers : ctx.vertexBuffers;
+  if (ctx.buffers.size >= ctx.limits.maxBuffers || used >= countLimit) {
+    throw new Context3DError("limit", "Context3D experiment: buffer limit");
+  }
+
+  const bytes = count * (stride === 0 ? 2 : stride * 4);
+  const usedBytes = stride === 0 ? ctx.bufferBytes - ctx.vertexBufferBytes : ctx.vertexBufferBytes;
+  const byteLimit = stride === 0 ? ctx.limits.maxIndexBufferBytes : ctx.limits.maxVertexBufferBytes;
+  if (ctx.bufferBytes + bytes > ctx.limits.maxBufferBytes || usedBytes + bytes > byteLimit) {
+    throw new Context3DError("limit", "Context3D experiment: buffer memory limit");
+  }
+
+  const gl = ctx.gl;
+  const handle = gl.createBuffer();
+  if (!handle) {
+    throw new Context3DError("bufferAllocation", "Context3D experiment: cannot allocate buffer");
+  }
+
+  const target = stride === 0 ? gl.ELEMENT_ARRAY_BUFFER : gl.ARRAY_BUFFER;
+  if (stride === 0) {
+    ctx.indexBuffer = null;
+  }
+  gl.bindVertexArray(ctx.vao);
+  gl.bindBuffer(target, handle);
+  gl.bufferData(target, bytes, dynamic ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW);
+  const state: BufferState = {
+    handle,
+    indices: stride === 0 ? new Uint16Array(count) : null,
+    uploaded: new Uint8Array(count),
+    prefix: 0,
+    version: 0,
+    checkedVersion: -1,
+    checkedFirst: 0,
+    checkedCount: 0,
+    maximum: -1,
+    ranges: null,
+  };
+  const buffer: Buffer3D = {
+    count,
+    stride,
+    upload: (values, start, amount) => {
+      ctx.alive();
+      ctx.buffer(buffer);
+      try {
+        uploadBuffer(gl, ctx.vao, buffer, state, values, start, amount);
+      } finally {
+        // Source getters can draw before the upload replaces the VAO's index binding.
+        if (stride === 0) {
+          ctx.indexBuffer = null;
+        }
+      }
+    },
+    uploadBytes: (data, offset, start, amount) => {
+      ctx.alive();
+      ctx.buffer(buffer);
+      try {
+        uploadBufferBytes(gl, ctx.vao, buffer, state, data, offset, start, amount);
+      } finally {
+        if (stride === 0) {
+          ctx.indexBuffer = null;
+        }
+      }
+    },
+    dispose: () => {
+      if (!ctx.buffers.delete(buffer)) {
+        return;
+      }
+
+      if (ctx.indexBuffer === handle) {
+        ctx.indexBuffer = null;
+      }
+      gl.deleteBuffer(handle);
+      ctx.bufferBytes -= bytes;
+      if (stride !== 0) {
+        ctx.vertexBuffers--;
+        ctx.vertexBufferBytes -= bytes;
+      }
+      state.indices = null;
+      state.ranges = null;
+      state.uploaded = new Uint8Array(0);
+      for (let i = 0; i < ctx.vertices.length; i++) {
+        const binding = ctx.vertices[i];
+        if (binding?.buffer === buffer) {
+          ctx.vertices[i] = null;
+        } else if (binding?.checkedIndex === state) {
+          binding.checkedIndex = null;
+        }
+      }
+    },
+  };
+  ctx.buffers.set(buffer, state);
+  if (stride !== 0) {
+    ctx.vertexBuffers++;
+    ctx.vertexBufferBytes += bytes;
+  }
+  ctx.bufferBytes += bytes;
+  return buffer;
+}