micro-gl 0.1.0

package/src/3d/geometries/BoxGeometry.js

@@ -0,0 +1,56 @@
+import { Geometry, VERTEX_SIZE } from './Geometry.js';
+
+/**
+ * An axis-aligned box centered on the origin, with flat-shaded faces
+ * (24 vertices so each face gets its own normals and uvs).
+ *
+ * Each face is described by the corner where its uvs are (0, 0) plus
+ * the two edges the u and v axes run along; the outward normal falls
+ * out as edgeU x edgeV, which is also what makes the triangles wind
+ * counter-clockwise seen from outside.
+ */
+export class BoxGeometry extends Geometry {
+  constructor(width = 1, height = 1, depth = 1) {
+    const x = width / 2;
+    const y = height / 2;
+    const z = depth / 2;
+
+    // prettier-ignore
+    const faces = [
+      //  uv (0,0) corner       edge along u             edge along v
+      { corner: [ x, -y,  z], edgeU: [0, 0, -depth],  edgeV: [0, height, 0] }, // +X
+      { corner: [-x, -y, -z], edgeU: [0, 0,  depth],  edgeV: [0, height, 0] }, // -X
+      { corner: [-x,  y,  z], edgeU: [width, 0,  0],  edgeV: [0, 0, -depth] }, // +Y
+      { corner: [-x, -y, -z], edgeU: [width, 0,  0],  edgeV: [0, 0,  depth] }, // -Y
+      { corner: [-x, -y,  z], edgeU: [width, 0,  0],  edgeV: [0, height, 0] }, // +Z
+      { corner: [ x, -y, -z], edgeU: [-width, 0, 0],  edgeV: [0, height, 0] }, // -Z
+    ];
+
+    const vertices = [];
+    const indices = [];
+    for (const { corner, edgeU, edgeV } of faces) {
+      let nx = edgeU[1] * edgeV[2] - edgeU[2] * edgeV[1];
+      let ny = edgeU[2] * edgeV[0] - edgeU[0] * edgeV[2];
+      let nz = edgeU[0] * edgeV[1] - edgeU[1] * edgeV[0];
+      const len = Math.hypot(nx, ny, nz);
+      nx /= len;
+      ny /= len;
+      nz /= len;
+
+      const base = vertices.length / VERTEX_SIZE;
+      // The four corners in uv order, then two ccw triangles.
+      for (const [u, v] of [[0, 0], [1, 0], [1, 1], [0, 1]]) {
+        vertices.push(
+          corner[0] + edgeU[0] * u + edgeV[0] * v,
+          corner[1] + edgeU[1] * u + edgeV[1] * v,
+          corner[2] + edgeU[2] * u + edgeV[2] * v,
+          nx, ny, nz,
+          u, v,
+        );
+      }
+      indices.push(base, base + 1, base + 2, base, base + 2, base + 3);
+    }
+
+    super(vertices, indices);
+  }
+}

package/src/3d/geometries/Geometry.js

@@ -0,0 +1,97 @@
+/**
+ * Holds the raw mesh data on the CPU side.
+ *
+ * Vertices are interleaved as 8 floats each:
+ *   position (x, y, z), normal (x, y, z), uv (u, v)
+ * so one GPU vertex buffer with a 32-byte stride serves every attribute.
+ *
+ * Renderers lazily create GPU buffers the first time the geometry is
+ * drawn. `_gpu` holds one cache entry per GPUDevice, so the same CPU
+ * geometry can safely be shared by independently initialized renderers.
+ */
+export class Geometry {
+  /**
+   * @param {Float32Array|number[]} vertices interleaved vertex data
+   * @param {Uint32Array|number[]}  indices  triangle indices
+   */
+  constructor(vertices, indices) {
+    this.vertices =
+      vertices instanceof Float32Array ? vertices : new Float32Array(vertices);
+    this.indices =
+      indices instanceof Uint32Array ? indices : new Uint32Array(indices);
+    this._gpu = null;
+    this._bounds = null;
+    this._needsUpdate = false;
+    // Each cache entry records the revision it last uploaded. A revision
+    // cannot be replaced by one boolean when several devices share this data.
+    this._gpuRevision = 0;
+  }
+
+  /**
+   * Set to true after editing `vertices` or `indices` in place: the
+   * renderer re-uploads the GPU buffers on the next draw and the cached
+   * bounds are recomputed. The arrays must keep their length — to
+   * change the vertex or index count, make a new geometry.
+   */
+  get needsUpdate() {
+    return this._needsUpdate;
+  }
+
+  set needsUpdate(value) {
+    this._needsUpdate = Boolean(value);
+    if (this._needsUpdate) {
+      this._gpuRevision++;
+      this._bounds = null;
+    }
+  }
+
+  /**
+   * Local-space axis-aligned bounding box `{ min, max }`, computed from
+   * the vertex positions on first access. Used as the raycasting broad phase
+   * and for frustum culling.
+   */
+  get bounds() {
+    if (!this._bounds) {
+      const min = [Infinity, Infinity, Infinity];
+      const max = [-Infinity, -Infinity, -Infinity];
+      for (let i = 0; i < this.vertices.length; i += VERTEX_SIZE) {
+        for (let a = 0; a < 3; a++) {
+          const v = this.vertices[i + a];
+          if (v < min[a]) min[a] = v;
+          if (v > max[a]) max[a] = v;
+        }
+      }
+      this._bounds = { min, max };
+    }
+    return this._bounds;
+  }
+
+  get vertexCount() {
+    return this.vertices.length / VERTEX_SIZE;
+  }
+
+  get indexCount() {
+    return this.indices.length;
+  }
+
+  /**
+   * Destroys the GPU vertex/index buffers (if any), releasing the
+   * memory right away instead of waiting for GC. Call it when nothing
+   * draws this geometry anymore; drawing it again re-uploads.
+   */
+  dispose() {
+    if (this._gpu) {
+      for (const { vertexBuffer, indexBuffer } of this._gpu.values()) {
+        vertexBuffer.destroy();
+        indexBuffer.destroy();
+      }
+      this._gpu = null;
+    }
+    return this;
+  }
+}
+
+/** Number of floats per vertex (3 position + 3 normal + 2 uv). */
+export const VERTEX_SIZE = 8;
+/** Byte stride of one vertex in the GPU buffer. */
+export const VERTEX_STRIDE = VERTEX_SIZE * Float32Array.BYTES_PER_ELEMENT;

package/src/3d/geometries/PlaneGeometry.js

@@ -0,0 +1,24 @@
+import { Geometry } from './Geometry.js';
+
+/**
+ * A flat rectangle lying in the XZ plane, facing up (+Y).
+ * Handy as a ground plane.
+ */
+export class PlaneGeometry extends Geometry {
+  constructor(width = 1, depth = 1) {
+    const w = width / 2;
+    const d = depth / 2;
+
+    // prettier-ignore
+    const vertices = [
+      // position   normal   uv
+      -w, 0,  d,    0, 1, 0, 0, 0,
+       w, 0,  d,    0, 1, 0, 1, 0,
+       w, 0, -d,    0, 1, 0, 1, 1,
+      -w, 0, -d,    0, 1, 0, 0, 1,
+    ];
+    const indices = [0, 1, 2, 0, 2, 3];
+
+    super(vertices, indices);
+  }
+}

package/src/3d/geometries/SphereGeometry.js

@@ -0,0 +1,46 @@
+import { Geometry } from './Geometry.js';
+
+/**
+ * A UV sphere centered on the origin.
+ */
+export class SphereGeometry extends Geometry {
+  constructor(radius = 1, widthSegments = 24, heightSegments = 16) {
+    widthSegments = Math.max(3, Math.floor(widthSegments));
+    heightSegments = Math.max(2, Math.floor(heightSegments));
+
+    const vertices = [];
+    const indices = [];
+    const grid = [];
+
+    let index = 0;
+    for (let iy = 0; iy <= heightSegments; iy++) {
+      const row = [];
+      const v = iy / heightSegments;
+      for (let ix = 0; ix <= widthSegments; ix++) {
+        const u = ix / widthSegments;
+
+        const x = -radius * Math.cos(u * Math.PI * 2) * Math.sin(v * Math.PI);
+        const y = radius * Math.cos(v * Math.PI);
+        const z = radius * Math.sin(u * Math.PI * 2) * Math.sin(v * Math.PI);
+
+        vertices.push(x, y, z, x / radius, y / radius, z / radius, u, 1 - v);
+        row.push(index++);
+      }
+      grid.push(row);
+    }
+
+    for (let iy = 0; iy < heightSegments; iy++) {
+      for (let ix = 0; ix < widthSegments; ix++) {
+        const a = grid[iy][ix + 1];
+        const b = grid[iy][ix];
+        const c = grid[iy + 1][ix];
+        const d = grid[iy + 1][ix + 1];
+
+        if (iy !== 0) indices.push(a, b, d);
+        if (iy !== heightSegments - 1) indices.push(b, c, d);
+      }
+    }
+
+    super(vertices, indices);
+  }
+}

package/src/3d/geometries/WireframeGeometry.js

@@ -0,0 +1,39 @@
+import { Geometry, VERTEX_SIZE } from './Geometry.js';
+
+/**
+ * The unique edges of a triangle geometry as line segments — a
+ * wireframe. Draw it with a line-list material:
+ *
+ *   new Mesh(
+ *     new WireframeGeometry(new BoxGeometry()),
+ *     new BasicMaterial({ color: [0, 0, 0], topology: 'line-list' }),
+ *   )
+ *
+ * The source's vertex array is shared, not copied; only new line-list
+ * indices are built. Edges are deduplicated by index pair, so seams
+ * where a geometry duplicates vertices (BoxGeometry's face corners,
+ * SphereGeometry's date line) keep one segment per copy — they draw
+ * identically.
+ */
+export class WireframeGeometry extends Geometry {
+  /** @param {Geometry} geometry a triangle-list geometry */
+  constructor(geometry) {
+    const source = geometry.indices;
+    const vertexCount = geometry.vertices.length / VERTEX_SIZE;
+    const indices = [];
+    const seen = new Set();
+    for (let i = 0; i < source.length; i += 3) {
+      const triangle = [source[i], source[i + 1], source[i + 2]];
+      for (let e = 0; e < 3; e++) {
+        const a = triangle[e];
+        const b = triangle[(e + 1) % 3];
+        const key = Math.min(a, b) * vertexCount + Math.max(a, b);
+        if (!seen.has(key)) {
+          seen.add(key);
+          indices.push(a, b);
+        }
+      }
+    }
+    super(geometry.vertices, indices);
+  }
+}

package/src/3d/helpers/GridHelper.js

@@ -0,0 +1,43 @@
+import { Mesh } from '../core/Mesh.js';
+import { Geometry } from '../geometries/Geometry.js';
+import { BasicMaterial } from '../materials/BasicMaterial.js';
+
+/**
+ * A square grid of lines in the XZ plane (y = 0), centered on the
+ * origin — the usual ground reference while building a scene. One
+ * unlit line-list Mesh, so move, parent or hide it like any other
+ * object.
+ *
+ * Tip: a PlaneGeometry ground at y = 0 z-fights with the grid; nudge
+ * the grid up a hair (grid.position.y = 0.001) or the ground down.
+ */
+export class GridHelper extends Mesh {
+  /**
+   * @param {number}   size      total width/depth in world units
+   * @param {number}   divisions cells per side
+   * @param {number[]} color     line color, [r, g, b] in 0..1
+   */
+  constructor(size = 10, divisions = 10, color = [0.4, 0.4, 0.45]) {
+    const half = size / 2;
+    const vertices = [];
+    const indices = [];
+    for (let i = 0; i <= divisions; i++) {
+      const t = -half + (i / divisions) * size;
+      // One line along X and one along Z per step; 8 floats per vertex
+      // (position, unused normal, unused uv) to match VERTEX_STRIDE.
+      // prettier-ignore
+      vertices.push(
+        -half, 0, t,     0, 1, 0,  0, 0,
+         half, 0, t,     0, 1, 0,  0, 0,
+         t,    0, -half, 0, 1, 0,  0, 0,
+         t,    0,  half, 0, 1, 0,  0, 0,
+      );
+      const base = i * 4;
+      indices.push(base, base + 1, base + 2, base + 3);
+    }
+    super(
+      new Geometry(vertices, indices),
+      new BasicMaterial({ color, topology: 'line-list' }),
+    );
+  }
+}

package/src/3d/lights/AmbientLight.js

@@ -0,0 +1,18 @@
+import { Object3d } from '../core/Object3d.js';
+
+/**
+ * A light that illuminates every surface equally, regardless of
+ * orientation. Used to keep shadows from being pitch black.
+ * Multiple AmbientLights in a scene are added together.
+ */
+export class AmbientLight extends Object3d {
+  /**
+   * @param {number[]} color     [r, g, b] in the 0..1 range
+   * @param {number}   intensity brightness multiplier
+   */
+  constructor(color = [1, 1, 1], intensity = 0.2) {
+    super();
+    this.color = color;
+    this.intensity = intensity;
+  }
+}

package/src/3d/lights/DirectionalLight.js

@@ -0,0 +1,26 @@
+import { Object3d } from '../core/Object3d.js';
+import { Vec3 } from '../../math/Vec3.js';
+import { DirectionalShadow } from './DirectionalShadow.js';
+
+/**
+ * A light that shines in one direction from infinitely far away,
+ * like the sun. The renderer uses the first DirectionalLight it
+ * finds in the scene.
+ */
+export class DirectionalLight extends Object3d {
+  /**
+   * @param {number[]} color     [r, g, b] in the 0..1 range
+   * @param {number}   intensity brightness multiplier
+   */
+  constructor(color = [1, 1, 1], intensity = 1) {
+    super();
+    this.color = color;
+    this.intensity = intensity;
+    /** The direction the light travels in (it gets normalized by the renderer). */
+    this.direction = new Vec3(-1, -1, -1);
+    /** Enable the renderer's directional shadow pass for this light. */
+    this.castShadow = false;
+    /** Shadow-map resolution, bias and orthographic camera configuration. */
+    this.shadow = new DirectionalShadow();
+  }
+}

package/src/3d/lights/DirectionalShadow.js

@@ -0,0 +1,29 @@
+import { OrthographicCamera } from '../cameras/OrthographicCamera.js';
+
+export const DEFAULT_SHADOW_MAP_SIZE = 1024;
+export const DEFAULT_SHADOW_CAMERA_SIZE = 10;
+export const DEFAULT_SHADOW_NEAR = 0.1;
+export const DEFAULT_SHADOW_FAR = 50;
+export const DEFAULT_SHADOW_BIAS = 0.001;
+export const DEFAULT_SHADOW_NORMAL_BIAS = 0.02;
+
+/**
+ * CPU-side configuration for one directional-light shadow map.
+ *
+ * `camera.size` is the half-height of the square world-space area covered by
+ * the map. Aim that area with `camera.lookAt(...)`; the renderer positions the
+ * camera automatically from the light direction and its near/far range.
+ */
+export class DirectionalShadow {
+  constructor() {
+    this.mapSize = DEFAULT_SHADOW_MAP_SIZE;
+    this.bias = DEFAULT_SHADOW_BIAS;
+    this.normalBias = DEFAULT_SHADOW_NORMAL_BIAS;
+    this.camera = new OrthographicCamera(
+      DEFAULT_SHADOW_CAMERA_SIZE,
+      1,
+      DEFAULT_SHADOW_NEAR,
+      DEFAULT_SHADOW_FAR,
+    );
+  }
+}

package/src/3d/lights/PointLight.js

@@ -0,0 +1,23 @@
+import { Object3d } from '../core/Object3d.js';
+
+/**
+ * A light that radiates from a point in all directions, fading with
+ * distance — a lamp. It sits in the scene graph like any object: its
+ * world position (parenting included) is where the light comes from.
+ *
+ * Brightness falls off as 1 / (1 + distance²), so `intensity` is the
+ * brightness right at the light and roughly a tenth of it three units
+ * away. The renderer uses the first MAX_POINT_LIGHTS (4) visible
+ * PointLights it finds in the scene; extras are ignored.
+ */
+export class PointLight extends Object3d {
+  /**
+   * @param {number[]} color     [r, g, b] in the 0..1 range
+   * @param {number}   intensity brightness multiplier
+   */
+  constructor(color = [1, 1, 1], intensity = 1) {
+    super();
+    this.color = color;
+    this.intensity = intensity;
+  }
+}

package/src/3d/materials/BasicMaterial.js

@@ -0,0 +1,11 @@
+import { Material } from './Material.js';
+import { BASIC_FRAGMENT_SHADER } from '../shaders/fragments.js';
+
+/**
+ * An unlit material: renders a flat color, ignoring all lights.
+ */
+export class BasicMaterial extends Material {
+  get fragmentShader() {
+    return BASIC_FRAGMENT_SHADER;
+  }
+}

package/src/3d/materials/LambertMaterial.js

@@ -0,0 +1,13 @@
+import { Material } from './Material.js';
+import { LAMBERT_FRAGMENT_SHADER } from '../shaders/fragments.js';
+
+/**
+ * A simple diffuse (Lambertian) material: brightness depends on the
+ * angle between the surface and the scene's lights (the
+ * DirectionalLight and any PointLights), plus a flat ambient term.
+ */
+export class LambertMaterial extends Material {
+  get fragmentShader() {
+    return LAMBERT_FRAGMENT_SHADER;
+  }
+}

package/src/3d/materials/Material.js

@@ -0,0 +1,87 @@
+import {
+  DEFAULT_CULL_MODE_3D,
+  DEFAULT_FRONT_FACE,
+  DEFAULT_PRIMITIVE_TOPOLOGY,
+} from '../../core/pipelineConstants.js';
+import { MAX_POINT_LIGHTS } from '../constants.js';
+import {
+  INSTANCED_MESH_SHADER_PREFIX,
+  MESH_SHADER_PREFIX,
+} from '../shaders/vertexStages.js';
+
+/**
+ * Base class for materials. A material owns per-object parameters and
+ * fixed-function pipeline state; reusable WGSL stages live in `3d/shaders`.
+ *
+ * Every shader shares the same uniform interface:
+ *   @group(0) — per-frame data (camera + lights), owned by the renderer
+ *   @group(1) — per-object data (transforms + color)
+ *   @group(2) — renderer-owned directional shadow map and uniforms
+ * The renderer caches pipelines by composed WGSL source and pipeline state,
+ * so materials with the same shader share one pipeline while custom material
+ * instances may still provide different fragment stages safely.
+ */
+export class Material {
+  /**
+   * @param {object} [options]
+   * @param {number[]} [options.color]    [r, g, b] in 0..1
+   * @param {Texture}  [options.map] texture the shader can sample at the
+   *   mesh's uvs — only used when `usesMap` is true
+   * @param {boolean} [options.usesMap] whether the fragment shader declares
+   *   the map and sampler bindings. It defaults to whether `map` was supplied
+   *   for compatibility; custom material subclasses should set it explicitly.
+   *   It is fixed for the material's lifetime so replacing or clearing `map`
+   *   cannot silently change its pipeline layout
+   * @param {GPUPrimitiveTopology} [options.topology]
+   *   'triangle-list' (default), 'triangle-strip', 'line-list',
+   *   'line-strip' or 'point-list'
+   * @param {GPUCullMode}  [options.cullMode]  'back' (default), 'front' or
+   *   'none'; only applies to triangle topologies
+   * @param {GPUFrontFace} [options.frontFace] 'ccw' (default) or 'cw'
+   * @param {boolean} [options.transparent] alpha-blend this material: the
+   *   renderer draws transparent meshes after all opaque ones, sorted
+   *   back-to-front, and they stop writing the depth buffer. Combine
+   *   with a color alpha below 1 (or a texture with alpha)
+   */
+  constructor({
+    color = [1, 1, 1],
+    map = null,
+    usesMap = map !== null,
+    topology = DEFAULT_PRIMITIVE_TOPOLOGY,
+    cullMode = DEFAULT_CULL_MODE_3D,
+    frontFace = DEFAULT_FRONT_FACE,
+    transparent = false,
+  } = {}) {
+    this.color = color;
+    this.map = map;
+    Object.defineProperty(this, 'usesMap', {
+      value: Boolean(usesMap),
+      enumerable: true,
+    });
+    this.topology = topology;
+    this.cullMode = cullMode;
+    this.frontFace = frontFace;
+    this.transparent = transparent;
+  }
+
+  /** Full WGSL source with `vs` and `fs` entry points. */
+  get shaderCode() {
+    return Material.SHARED_WGSL + this.fragmentShader;
+  }
+
+  /** Full WGSL source whose vertex stage reads per-instance data. */
+  get instancedShaderCode() {
+    return Material.INSTANCED_WGSL + this.fragmentShader;
+  }
+
+  /** Fragment-stage WGSL supplied by a concrete material. */
+  get fragmentShader() {
+    throw new Error('Material subclasses must implement fragmentShader');
+  }
+
+  // Mutable for compatibility with code that customized these fields directly.
+  static SHARED_WGSL = MESH_SHADER_PREFIX;
+  static INSTANCED_WGSL = INSTANCED_MESH_SHADER_PREFIX;
+}
+
+export { MAX_POINT_LIGHTS };

package/src/3d/materials/TextureMaterial.js

@@ -0,0 +1,24 @@
+import { Material } from './Material.js';
+import { TEXTURE_FRAGMENT_SHADER } from '../shaders/fragments.js';
+
+/**
+ * A diffuse (Lambertian) material that gets its surface color from a
+ * texture sampled at the mesh's uvs, tinted by `color` — LambertMaterial
+ * with a `map`. Requires the map: the shader's texture bindings must
+ * exist when the pipeline is created.
+ */
+export class TextureMaterial extends Material {
+  /** @param {{map: Texture, color?: number[]}} options see Material for the rest */
+  constructor(options = {}) {
+    super({ ...options, usesMap: true });
+    // Compatibility alias retained for existing material introspection.
+    this.requiresMap = true;
+    if (!this.map) {
+      throw new Error('TextureMaterial requires a `map` texture');
+    }
+  }
+
+  get fragmentShader() {
+    return TEXTURE_FRAGMENT_SHADER;
+  }
+}

package/src/3d/shaders/fragments.js

@@ -0,0 +1,34 @@
+import {
+  SHADER_BIND_GROUP,
+  SHADER_BINDING,
+} from '../../core/pipelineConstants.js';
+
+export const BASIC_FRAGMENT_SHADER = /* wgsl */ `
+@fragment
+fn fs(input: VertexOut) -> @location(0) vec4f {
+  return objectColor(input);
+}
+`;
+
+export const LAMBERT_FRAGMENT_SHADER = /* wgsl */ `
+@fragment
+fn fs(input: VertexOut) -> @location(0) vec4f {
+  let base = objectColor(input);
+  let lighting = diffuseLighting(normalize(input.worldNormal), input.worldPosition);
+  return vec4f(base.rgb * lighting, base.a);
+}
+`;
+
+export const TEXTURE_FRAGMENT_SHADER = /* wgsl */ `
+@group(${SHADER_BIND_GROUP.object}) @binding(${SHADER_BINDING.map})
+var uMap: texture_2d<f32>;
+@group(${SHADER_BIND_GROUP.object}) @binding(${SHADER_BINDING.sampler})
+var uMapSampler: sampler;
+
+@fragment
+fn fs(input: VertexOut) -> @location(0) vec4f {
+  let base = textureSample(uMap, uMapSampler, input.uv) * objectColor(input);
+  let lighting = diffuseLighting(normalize(input.worldNormal), input.worldPosition);
+  return vec4f(base.rgb * lighting, base.a);
+}
+`;

package/src/3d/shaders/shadows.js

@@ -0,0 +1,52 @@
+import {
+  SHADER_BIND_GROUP,
+  SHADER_BINDING,
+} from '../../core/pipelineConstants.js';
+import { VERTEX_ATTRIBUTE } from './vertexLayout.js';
+import {
+  OBJECT_UNIFORM_WGSL,
+  SHADOW_UNIFORM_WGSL,
+} from './shared.js';
+
+/** Vertex-only shader used by regular and instanced shadow casters. */
+export const DIRECTIONAL_SHADOW_SHADER = /* wgsl */ `
+${SHADOW_UNIFORM_WGSL}
+${OBJECT_UNIFORM_WGSL}
+
+@group(${SHADER_BIND_GROUP.frame}) @binding(${SHADER_BINDING.uniforms})
+var<uniform> uShadow: ShadowUniforms;
+@group(${SHADER_BIND_GROUP.object}) @binding(${SHADER_BINDING.uniforms})
+var<uniform> uObject: ObjectUniforms;
+
+struct ShadowVertexIn {
+  @location(${VERTEX_ATTRIBUTE.position}) position: vec3f,
+};
+
+struct ShadowInstanceIn {
+  @location(${VERTEX_ATTRIBUTE.instanceMatrix0}) im0: vec4f,
+  @location(${VERTEX_ATTRIBUTE.instanceMatrix1}) im1: vec4f,
+  @location(${VERTEX_ATTRIBUTE.instanceMatrix2}) im2: vec4f,
+  @location(${VERTEX_ATTRIBUTE.instanceMatrix3}) im3: vec4f,
+};
+
+@vertex
+fn vsShadow(input: ShadowVertexIn) -> @builtin(position) vec4f {
+  return uShadow.viewProjection * uObject.model
+    * vec4f(input.position, 1.0);
+}
+
+@vertex
+fn vsShadowInstanced(
+  input: ShadowVertexIn,
+  instance: ShadowInstanceIn,
+) -> @builtin(position) vec4f {
+  let instanceMatrix = mat4x4f(
+    instance.im0,
+    instance.im1,
+    instance.im2,
+    instance.im3,
+  );
+  return uShadow.viewProjection * uObject.model * instanceMatrix
+    * vec4f(input.position, 1.0);
+}
+`;