micro-gl 0.1.0

package/src/2d/controls/DragControls2d.js

@@ -0,0 +1,174 @@
+import { Vec2 } from '../../math/Vec2.js';
+import { Mat3 } from '../../math/Mat3.js';
+
+const _inverse = new Mat3();
+const _pointer = new Vec2();
+const _local = new Vec2();
+const _worldPos = new Vec2();
+
+function isVisibleInHierarchy(object) {
+  for (let current = object; current; current = current.parent) {
+    if (!current.visible) return false;
+  }
+  return true;
+}
+
+/**
+ * Lets the user pick shapes with the pointer and drag them around —
+ * the 2D counterpart of DragControls, without needing a Raycaster:
+ * the pointer is mapped into world space through the inverse camera
+ * matrix and tested against each shape's geometry directly.
+ *
+ * Assign the callbacks to react to interaction:
+ *   onSelect(shape | null)  selection changed (click on shape / empty space)
+ *   onDragStart(shape), onDrag(shape), onDragEnd(shape)
+ *
+ * Disable your camera controls in onDragStart / re-enable in onDragEnd
+ * so panning doesn't fight the drag.
+ */
+export class DragControls2d {
+  /**
+   * @param {Shape2d[]} objects shapes that can be selected and dragged
+   */
+  constructor(objects, camera, domElement) {
+    this.objects = objects;
+    this.camera = camera;
+    this.domElement = domElement;
+    /** Set to false to ignore input; it also pauses an in-progress drag. */
+    this.enabled = true;
+    this.selected = null;
+
+    this.onSelect = null;
+    this.onDragStart = null;
+    this.onDrag = null;
+    this.onDragEnd = null;
+
+    this._dragging = false;
+    this._activePointerId = null;
+    this._grabOffset = new Vec2(); // shape world position - grab point
+
+    this._onPointerDown = this._handlePointerDown.bind(this);
+    this._onPointerMove = this._handlePointerMove.bind(this);
+    this._onPointerUp = this._handlePointerUp.bind(this);
+
+    domElement.addEventListener('pointerdown', this._onPointerDown);
+    domElement.addEventListener('pointermove', this._onPointerMove);
+    domElement.addEventListener('pointerup', this._onPointerUp);
+    domElement.addEventListener('pointercancel', this._onPointerUp);
+  }
+
+  _handlePointerDown(event) {
+    const rotateViewGesture = event.button !== 0 || event.altKey;
+    if (
+      !this.enabled ||
+      rotateViewGesture ||
+      this._activePointerId !== null
+    ) {
+      return;
+    }
+
+    const point = this._pointerToWorld(event);
+    if (!point) return;
+    const hit = this._pick(point);
+    if (!hit) {
+      this._select(null);
+      return;
+    }
+
+    this._select(hit);
+    this._dragging = true;
+    this._activePointerId = event.pointerId;
+    this.domElement.setPointerCapture(event.pointerId);
+
+    const worldMatrix = hit.worldMatrix.elements;
+    this._grabOffset.set(
+      worldMatrix[8] - point.x,
+      worldMatrix[9] - point.y,
+    );
+    if (this.onDragStart) this.onDragStart(hit);
+  }
+
+  _handlePointerMove(event) {
+    if (
+      !this.enabled ||
+      !this._dragging ||
+      !this.selected ||
+      event.pointerId !== this._activePointerId
+    ) {
+      return;
+    }
+
+    const point = this._pointerToWorld(event);
+    if (!point) return;
+
+    // New world position, then into the parent's local space.
+    _worldPos.copy(point).add(this._grabOffset);
+    const parent = this.selected.parent;
+    if (parent) {
+      if (!_inverse.copy(parent.worldMatrix).tryInvert()) return;
+      _worldPos.applyMat3(_inverse);
+    }
+    this.selected.position.copy(_worldPos);
+    if (this.onDrag) this.onDrag(this.selected);
+  }
+
+  _handlePointerUp(event) {
+    if (!this._dragging || event.pointerId !== this._activePointerId) return;
+    this._finishDrag();
+  }
+
+  _finishDrag() {
+    const pointerId = this._activePointerId;
+    this._dragging = false;
+    this._activePointerId = null;
+    if (
+      pointerId !== null &&
+      this.domElement.hasPointerCapture(pointerId)
+    ) {
+      this.domElement.releasePointerCapture(pointerId);
+    }
+    if (this.onDragEnd) this.onDragEnd(this.selected);
+  }
+
+  _select(shape) {
+    if (shape === this.selected) return;
+    this.selected = shape;
+    if (this.onSelect) this.onSelect(shape);
+  }
+
+  /** The pointer position in world space (via the inverse view-projection). */
+  _pointerToWorld(e) {
+    const rect = this.domElement.getBoundingClientRect();
+    const ndcX = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+    const ndcY = 1 - ((e.clientY - rect.top) / rect.height) * 2;
+    if (!_inverse.copy(this.camera.viewProjectionMatrix).tryInvert()) {
+      return null;
+    }
+    return _pointer.set(ndcX, ndcY).applyMat3(_inverse);
+  }
+
+  /**
+   * The topmost shape under the world-space point, or null. Higher
+   * zIndex wins; ties go to the later entry in `objects`, matching the
+   * renderer's draw order when the array follows scene order.
+   */
+  _pick(point) {
+    let hit = null;
+    for (const shape of this.objects) {
+      if (!isVisibleInHierarchy(shape)) continue;
+      if (!_inverse.copy(shape.worldMatrix).tryInvert()) continue;
+      _local.copy(point).applyMat3(_inverse);
+      if (!shape.geometry.containsPoint(_local.x, _local.y)) continue;
+      if (!hit || shape.zIndex >= hit.zIndex) hit = shape;
+    }
+    return hit;
+  }
+
+  dispose() {
+    if (this._dragging) this._finishDrag();
+    this.domElement.removeEventListener('pointerdown', this._onPointerDown);
+    this.domElement.removeEventListener('pointermove', this._onPointerMove);
+    this.domElement.removeEventListener('pointerup', this._onPointerUp);
+    this.domElement.removeEventListener('pointercancel', this._onPointerUp);
+  }
+}

package/src/2d/controls/PanZoomControls.js

@@ -0,0 +1,64 @@
+import { PointerControls } from '../../core/PointerControls.js';
+
+/**
+ * Mouse / touch controls for a Camera2d: right-drag to pan, scroll to
+ * zoom (toward the cursor), Alt + left-drag to spin the view. A
+ * right-click without dragging still opens the browser context menu.
+ * On touch screens: drag with one or two fingers to pan, pinch to zoom.
+ *
+ * The same gestures as OrbitControls (both inherit the plumbing from
+ * PointerControls), minus the orbit — and because a 2D camera has no
+ * derived state, the handlers modify it directly, so there is no
+ * per-frame update() to call.
+ */
+export class PanZoomControls extends PointerControls {
+  constructor(camera, domElement) {
+    super(domElement);
+    this.camera = camera;
+
+    this.minZoom = 0.1;
+    this.maxZoom = 20;
+  }
+
+  /** Half the height of the visible area, in world units. */
+  _visibleHalfHeight() {
+    return this.camera.size / this.camera.zoom;
+  }
+
+  _rotate(rx) {
+    this.camera.rotation += rx;
+  }
+
+  /**
+   * Moves the camera along its screen-space axes so the scene follows
+   * the cursor (1 pixel of drag = 1 pixel on screen).
+   */
+  _pan(dx, dy) {
+    const worldPerPixel =
+      (2 * this._visibleHalfHeight()) / this.domElement.clientHeight;
+    // The camera's right axis is (cos r, sin r), its up axis (-sin r, cos r).
+    const c = Math.cos(this.camera.rotation);
+    const s = Math.sin(this.camera.rotation);
+    this.camera.position.x -= (c * dx + s * dy) * worldPerPixel;
+    this.camera.position.y -= (s * dx - c * dy) * worldPerPixel;
+  }
+
+  _zoom(factor, ndcX, ndcY) {
+    const halfHBefore = this._visibleHalfHeight();
+    this.camera.zoom /= factor;
+    this.camera.zoom = Math.min(
+      Math.max(this.camera.zoom, this.minZoom),
+      this.maxZoom,
+    );
+
+    // Zoom toward the cursor: shift the camera so the world point
+    // under the pointer stays under it as the view scales.
+    const dh = halfHBefore - this._visibleHalfHeight();
+    const ox = ndcX * dh * this.camera.aspect;
+    const oy = ndcY * dh;
+    const c = Math.cos(this.camera.rotation);
+    const s = Math.sin(this.camera.rotation);
+    this.camera.position.x += c * ox - s * oy;
+    this.camera.position.y += s * ox + c * oy;
+  }
+}

package/src/2d/core/GpuResources2d.js

@@ -0,0 +1,163 @@
+import { uploadTexture } from '../../core/uploadTexture.js';
+import { SINGLE_SAMPLE_COUNT } from '../../core/rendererConfig.js';
+import { SHADER_BINDING } from '../../core/pipelineConstants.js';
+import { materialUsesMap } from '../../core/materialResources.js';
+import {
+  disposeOwnedObjectGpuResources,
+  trackObjectGpuResource,
+} from '../../core/objectGpuResources.js';
+import { Pipelines2d } from './Pipelines2d.js';
+import { OBJECT_UNIFORM_SIZE_2D } from './Uniforms2d.js';
+
+export { OBJECT_UNIFORM_SIZE_2D } from './Uniforms2d.js';
+
+/**
+ * Owns the GPU resources Renderer2d creates on behalf of geometries,
+ * materials and shapes — the 2D counterpart of GpuResources, with the
+ * same lazy caching scheme:
+ *
+ *   - vertex + index buffers per geometry
+ *   - a GPU texture + sampler per Texture
+ *   - a small uniform buffer + bind group per shape
+ *
+ * Everything is created lazily on first use. Geometry and texture
+ * resources are cached per GPUDevice; shape resources are cached per
+ * GpuResources2d instance because their bind groups use this instance's
+ * layouts. Render pipelines and their shared layouts live in Pipelines2d.
+ */
+export class GpuResources2d {
+  constructor(device, format, sampleCount = SINGLE_SAMPLE_COUNT) {
+    this.device = device;
+    this.pipelines = new Pipelines2d(device, format, sampleCount);
+    this._objectGpuResourceRefs = new Set();
+    // Renderer2d builds its per-frame bind group against this layout.
+    this.frameBindGroupLayout = this.pipelines.frameBindGroupLayout;
+  }
+
+  /** The render pipeline for a material + pipeline state — see Pipelines2d. */
+  pipelineFor(material, instanced = false) {
+    return this.pipelines.pipelineFor(material, instanced);
+  }
+
+  /** GPU texture, view and sampler for a Texture, uploaded on first use. */
+  textureFor(texture) {
+    return uploadTexture(this.device, texture);
+  }
+
+  /**
+   * Vertex and index buffers for a geometry, re-uploaded when its
+   * `needsUpdate` flag is set.
+   */
+  geometryFor(geometry) {
+    const cache = geometry._gpu || (geometry._gpu = new Map());
+    let gpu = cache.get(this.device);
+
+    if (!gpu) {
+      const vertexBuffer = this.device.createBuffer({
+        size: geometry.vertices.byteLength,
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+      });
+      this.device.queue.writeBuffer(vertexBuffer, 0, geometry.vertices);
+
+      const indexBuffer = this.device.createBuffer({
+        size: geometry.indices.byteLength,
+        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+      });
+      this.device.queue.writeBuffer(indexBuffer, 0, geometry.indices);
+
+      gpu = {
+        vertexBuffer,
+        indexBuffer,
+        revision: geometry._gpuRevision,
+      };
+      cache.set(this.device, gpu);
+    } else if (
+      geometry.needsUpdate ||
+      gpu.revision !== geometry._gpuRevision
+    ) {
+      this.device.queue.writeBuffer(gpu.vertexBuffer, 0, geometry.vertices);
+      this.device.queue.writeBuffer(gpu.indexBuffer, 0, geometry.indices);
+      gpu.revision = geometry._gpuRevision;
+    }
+
+    // Revisions keep the other devices' caches stale until each is drawn,
+    // so clearing this public hint here cannot make them miss an update.
+    geometry.needsUpdate = false;
+    return gpu;
+  }
+
+  /**
+   * Uniform buffer, bind group and staging array for a shape. The bind
+   * group is rebuilt automatically whenever the material's `map`
+   * changes (a swapped material, a swapped texture, or a Texture
+   * re-uploaded after `dispose()`).
+   */
+  shapeFor(shape) {
+    const cache = shape._gpu || (shape._gpu = new Map());
+    let gpu = cache.get(this);
+    if (!gpu) {
+      gpu = {
+        uniformBuffer: this.device.createBuffer({
+          size: OBJECT_UNIFORM_SIZE_2D,
+          usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        }),
+        bindGroup: null,
+        mapGpu: null, // the uploaded texture the bind group samples
+        data: new Float32Array(
+          OBJECT_UNIFORM_SIZE_2D / Float32Array.BYTES_PER_ELEMENT,
+        ),
+      };
+      if (shape.isInstanced) {
+        gpu.instanceBuffer = this.device.createBuffer({
+          size: shape.instanceData.byteLength,
+          usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        gpu.instanceRevision = null; // this fresh buffer has no data yet
+      }
+      cache.set(this, gpu);
+      trackObjectGpuResource(this, shape, gpu);
+    }
+
+    if (
+      shape.isInstanced &&
+      (shape.needsUpdate ||
+        gpu.instanceRevision !== shape._instanceRevision)
+    ) {
+      this.device.queue.writeBuffer(
+        gpu.instanceBuffer,
+        0,
+        shape.instanceData,
+      );
+      gpu.instanceRevision = shape._instanceRevision;
+      shape.needsUpdate = false;
+    }
+
+    const mapGpu = materialUsesMap(shape.material)
+      ? this.textureFor(shape.material.map)
+      : null;
+    if (!gpu.bindGroup || gpu.mapGpu !== mapGpu) {
+      let layout = this.pipelines.objectBindGroupLayout;
+      const entries = [
+        {
+          binding: SHADER_BINDING.uniforms,
+          resource: { buffer: gpu.uniformBuffer },
+        },
+      ];
+      if (mapGpu) {
+        layout = this.pipelines.texturedObjectBindGroupLayout;
+        entries.push(
+          { binding: SHADER_BINDING.map, resource: mapGpu.view },
+          { binding: SHADER_BINDING.sampler, resource: mapGpu.sampler },
+        );
+      }
+      gpu.bindGroup = this.device.createBindGroup({ layout, entries });
+      gpu.mapGpu = mapGpu;
+    }
+    return gpu;
+  }
+
+  /** Releases this manager's per-object buffers and cache entries. */
+  dispose() {
+    disposeOwnedObjectGpuResources(this);
+  }
+}

package/src/2d/core/InstancedShape2d.js

@@ -0,0 +1,74 @@
+import { Shape2d } from './Shape2d.js';
+import { srgbToLinear } from '../../math/color.js';
+import { INSTANCE_SIZE_2D } from '../constants.js';
+
+export { INSTANCE_SIZE_2D } from '../constants.js';
+
+/**
+ * A Shape2d drawn `count` times in one draw call — the 2D counterpart
+ * of InstancedMesh. Each instance has its own transform and color;
+ * instance transforms are local to the shape and instance colors
+ * multiply with the material's color. The whole group sorts by the
+ * shape's single `zIndex`; instances draw in buffer order within it.
+ *
+ * Write instances with `setMatrixAt`/`setColorAt` — they mark the
+ * buffer for re-upload; set `needsUpdate = true` yourself only if you
+ * write `instanceData` directly. The instance count is fixed at
+ * construction.
+ *
+ * Note: picking (DragControls2d) sees only the base geometry at the
+ * shape's own transform, not the individual instances.
+ */
+export class InstancedShape2d extends Shape2d {
+  constructor(geometry, material, count) {
+    super(geometry, material);
+    this.isInstanced = true;
+    this.count = count;
+    this.instanceData = new Float32Array(count * INSTANCE_SIZE_2D);
+    // Every instance starts as an identity matrix with a white color.
+    for (let i = 0; i < count; i++) {
+      const base = i * INSTANCE_SIZE_2D;
+      this.instanceData[base] = 1;
+      this.instanceData[base + 5] = 1;
+      this.instanceData[base + 10] = 1;
+      this.instanceData.fill(1, base + 12, base + 16);
+    }
+    // Resource caches compare revisions so every renderer/device receives
+    // an edit, even after another renderer has cleared needsUpdate.
+    this._instanceRevision = 0;
+    this._needsUpdate = true;
+  }
+
+  /** Upload hint; set true after changing `instanceData` directly. */
+  get needsUpdate() {
+    return this._needsUpdate;
+  }
+
+  set needsUpdate(value) {
+    this._needsUpdate = Boolean(value);
+    if (this._needsUpdate) this._instanceRevision++;
+  }
+
+  /** Copies a Mat3 into instance `index`'s transform. */
+  setMatrixAt(index, matrix) {
+    this.instanceData.set(matrix.elements, index * INSTANCE_SIZE_2D);
+    this.needsUpdate = true;
+    return this;
+  }
+
+  /**
+   * Sets instance `index`'s color from [r, g, b] or [r, g, b, a] —
+   * sRGB display values like material colors. They are stored
+   * linearized (shading happens in linear space), so write linear
+   * values if you fill `instanceData` directly instead.
+   */
+  setColorAt(index, color) {
+    const base = index * INSTANCE_SIZE_2D + 12;
+    this.instanceData[base] = srgbToLinear(color[0]);
+    this.instanceData[base + 1] = srgbToLinear(color[1]);
+    this.instanceData[base + 2] = srgbToLinear(color[2]);
+    this.instanceData[base + 3] = color.length > 3 ? color[3] : 1;
+    this.needsUpdate = true;
+    return this;
+  }
+}

package/src/2d/core/Object2d.js

@@ -0,0 +1,107 @@
+import { Vec2 } from '../../math/Vec2.js';
+import { Mat3 } from '../../math/Mat3.js';
+import { disposeObjectGpuResources } from '../../core/objectGpuResources.js';
+
+/**
+ * Base class for everything that lives in the 2D scene graph — the flat
+ * counterpart of Object3d. The transform is genuinely 2D: a Vec2
+ * position, a single rotation angle and a Vec2 scale, composed into 3x3
+ * matrices instead of 4x4.
+ */
+export class Object2d {
+  constructor() {
+    this.position = new Vec2(0, 0);
+    /** Rotation around the object's origin, in radians (counter-clockwise). */
+    this.rotation = 0;
+    this.scale = new Vec2(1, 1);
+    /**
+     * Draw order: higher values render on top. Objects with equal zIndex
+     * keep their scene order (later-added draws on top).
+     */
+    this.zIndex = 0;
+
+    this.parent = null;
+    this.children = [];
+    /** Invisible objects — and everything under them — are skipped by rendering and picking. */
+    this.visible = true;
+
+    this.localMatrix = new Mat3();
+    this.worldMatrix = new Mat3();
+    /** Renderer-local GPU resources, created lazily (see GpuResources2d). */
+    this._gpu = null;
+  }
+
+  add(child) {
+    // Adding an object to itself or to one of its own descendants would
+    // create a cycle and hang traverse/updateWorldMatrix — refuse it.
+    for (let node = this; node; node = node.parent) {
+      if (node === child) return this;
+    }
+    if (child.parent) child.parent.remove(child);
+    child.parent = this;
+    this.children.push(child);
+    return this;
+  }
+
+  remove(child) {
+    const index = this.children.indexOf(child);
+    if (index !== -1) {
+      child.parent = null;
+      this.children.splice(index, 1);
+    }
+    return this;
+  }
+
+  /** Recomputes localMatrix and worldMatrix for this object and all descendants. */
+  updateWorldMatrix() {
+    this.localMatrix.compose(this.position, this.rotation, this.scale);
+    if (this.parent) {
+      this.worldMatrix.multiplyMatrices(
+        this.parent.worldMatrix,
+        this.localMatrix,
+      );
+    } else {
+      this.worldMatrix.copy(this.localMatrix);
+    }
+    for (const child of this.children) {
+      child.updateWorldMatrix();
+    }
+  }
+
+  /** Calls `callback(object)` for this object and every descendant. */
+  traverse(callback) {
+    callback(this);
+    for (const child of this.children) {
+      child.traverse(callback);
+    }
+  }
+
+  /**
+   * Like traverse, but skips objects with `visible = false` and their
+   * whole subtree — hiding a group hides everything inside it. The
+   * renderer and picking walk the scene with this.
+   */
+  traverseVisible(callback) {
+    if (!this.visible) return;
+    callback(this);
+    for (const child of this.children) {
+      child.traverseVisible(callback);
+    }
+  }
+
+  /**
+   * Destroys the per-object GPU resources created by every renderer for
+   * this object and its descendants (see GpuResources2d), releasing memory
+   * right away instead of waiting for GC. Geometry buffers are left alone:
+   * geometries may be shared between objects. Drawing a disposed object
+   * again re-creates its resources and re-uploads its instance data.
+   */
+  dispose() {
+    this.traverse((object) => {
+      disposeObjectGpuResources(object);
+      // Re-created instance buffers must receive the CPU-side data before use.
+      if (object.isInstanced) object.needsUpdate = true;
+    });
+    return this;
+  }
+}

package/src/2d/core/Pipelines2d.js

@@ -0,0 +1,110 @@
+import {
+  INDEX_FORMAT,
+  SHADER_ENTRY_POINT,
+  STRAIGHT_ALPHA_BLEND,
+  isStripTopology,
+} from '../../core/pipelineConstants.js';
+import {
+  createMaterialPipelineLayouts,
+} from '../../core/createMaterialPipelineLayouts.js';
+import { materialUsesMap } from '../../core/materialResources.js';
+import { SINGLE_SAMPLE_COUNT } from '../../core/rendererConfig.js';
+import { vertexBufferLayouts2d } from '../shaders/vertexLayout.js';
+
+/**
+ * Compiles and caches the render pipelines for 2D materials, and owns
+ * the bind group / pipeline layouts every 2D shader shares (the
+ * @group(0) / @group(1) uniform interface in Material2d).
+ *
+ * A pipeline is keyed by composed shader source + pipeline state (topology,
+ * cull mode, front face, textured or not, instanced or not): each
+ * combination compiles once and is shared by every material instance
+ * that matches.
+ *
+ * The pipelines differ from the 3D ones where 2D differs from 3D:
+ *   - alpha blending is enabled (shapes draw back-to-front, so
+ *     transparency just works — no depth buffer involved)
+ *   - no depth/stencil state (the 2D render pass has no depth attachment)
+ *   - culling defaults to 'none': a negative scale flips a shape's
+ *     winding and it should still be visible
+ */
+export class Pipelines2d {
+  constructor(device, format, sampleCount = SINGLE_SAMPLE_COUNT) {
+    this.device = device;
+    this.format = format;
+    /** MSAA sample count of the renderer's color target. */
+    this.sampleCount = sampleCount;
+    // composed WGSL -> Map of pipeline-state key -> GPURenderPipeline
+    this._cache = new Map();
+    // WGSL source -> GPUShaderModule, so pipeline variants that share a
+    // shader (e.g. the same material at another topology) compile once.
+    this._modules = new Map();
+
+    Object.assign(
+      this,
+      createMaterialPipelineLayouts(device, GPUShaderStage.VERTEX),
+    );
+  }
+
+  /** The render pipeline for a material's shader and fixed-function state. */
+  pipelineFor(material, instanced = false) {
+    const { topology, cullMode, frontFace } = material;
+    const shaderCode = instanced
+      ? material.instancedShaderCode
+      : material.shaderCode;
+    let variants = this._cache.get(shaderCode);
+    if (!variants) {
+      variants = new Map();
+      this._cache.set(shaderCode, variants);
+    }
+    const textured = materialUsesMap(material);
+    const stateKey = `${topology}|${cullMode}|${frontFace}|${textured}|${instanced}`;
+    let pipeline = variants.get(stateKey);
+    if (!pipeline) {
+      pipeline = this._build(material, shaderCode, { textured, instanced });
+      variants.set(stateKey, pipeline);
+    }
+    return pipeline;
+  }
+
+  _moduleFor(code) {
+    let module = this._modules.get(code);
+    if (!module) {
+      module = this.device.createShaderModule({ code });
+      this._modules.set(code, module);
+    }
+    return module;
+  }
+
+  _build(material, shaderCode, { textured, instanced }) {
+    const { topology, cullMode, frontFace } = material;
+    const primitive = { topology, cullMode, frontFace };
+    // Indexed draws on strip topologies must declare the index format
+    // up front; the renderer always uses uint32 indices.
+    if (isStripTopology(topology)) {
+      primitive.stripIndexFormat = INDEX_FORMAT;
+    }
+    const buffers = vertexBufferLayouts2d(instanced);
+    const module = this._moduleFor(shaderCode);
+    return this.device.createRenderPipeline({
+      layout: textured ? this.texturedPipelineLayout : this.pipelineLayout,
+      vertex: {
+        module,
+        entryPoint: SHADER_ENTRY_POINT.vertex,
+        buffers,
+      },
+      fragment: {
+        module,
+        entryPoint: SHADER_ENTRY_POINT.fragment,
+        targets: [
+          {
+            format: this.format,
+            blend: STRAIGHT_ALPHA_BLEND,
+          },
+        ],
+      },
+      primitive,
+      multisample: { count: this.sampleCount },
+    });
+  }
+}