@multiplekex/shallot 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@multiplekex/shallot",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/extras/arrows/index.ts

@@ -7,7 +7,7 @@ import {
     type ComputeNode,
     type ExecutionContext,
 } from "../../standard/compute";
-import { Render, RenderPlugin } from "../../standard/render";
+import { Render, RenderPlugin, DEPTH_FORMAT } from "../../standard/render";
 import { Transform } from "../../standard/transforms";
 import { Line, Lines, LinesPlugin } from "../lines";
 
@@ -125,65 +125,72 @@ fn vs(@builtin(vertex_index) vid: u32, @builtin(instance_index) iid: u32) -> Ver
     let line = lines[eid];
     let transform = matrices[eid];
 
+    // Extract scale from transform matrix
+    let scaleX = length(transform[0].xyz);
+    let scaleY = length(transform[1].xyz);
+    let scaleZ = length(transform[2].xyz);
+    let avgScale = (scaleX + scaleY + scaleZ) / 3.0;
+
+    // Skip rendering if scale is near zero
+    if avgScale < 0.001 {
+        var out: VertexOutput;
+        out.position = vec4(0.0, 0.0, -2.0, 1.0);
+        out.color = vec4(0.0);
+        return out;
+    }
+
     let start = transform[3].xyz;
     let rotation = mat3x3<f32>(transform[0].xyz, transform[1].xyz, transform[2].xyz);
     let end = start + rotation * line.offset;
 
-    // Project both points to clip space
-    let startClip = scene.viewProj * vec4(start, 1.0);
-    let endClip = scene.viewProj * vec4(end, 1.0);
-
-    // Convert to NDC
-    let startNDC = startClip.xy / startClip.w;
-    let endNDC = endClip.xy / endClip.w;
-
-    // Direction in screen space
-    let dir = endNDC - startNDC;
-    let len = length(dir);
-    let normDir = select(vec2(1.0, 0.0), dir / len, len > 0.0001);
+    // Line direction in world space
+    let lineVec = end - start;
+    let lineLen = length(lineVec);
+    let lineDir = select(vec3(1.0, 0.0, 0.0), lineVec / lineLen, lineLen > 0.0001);
 
-    // Perpendicular in screen space (this naturally faces camera)
-    let perp = vec2(-normDir.y, normDir.x);
+    // Camera position and direction to arrow
+    let cameraPos = scene.cameraWorld[3].xyz;
+    let anchorWorld = select(start, end, isEnd);
+    let toCamera = normalize(cameraPos - anchorWorld);
+
+    // Billboard perpendicular: perpendicular to both line and view direction
+    var perp = cross(lineDir, toCamera);
+    let perpLen = length(perp);
+    if perpLen < 0.001 {
+        // Line pointing at camera, pick arbitrary perpendicular
+        let up = select(vec3(0.0, 1.0, 0.0), vec3(1.0, 0.0, 0.0), abs(lineDir.y) > 0.9);
+        perp = normalize(cross(lineDir, up));
+    } else {
+        perp = perp / perpLen;
+    }
 
     // Arrow size scales with sqrt of line thickness and world-space distance to camera
-    let cameraPos = scene.cameraWorld[3].xyz;
-    let midpoint = (start + end) * 0.5;
-    let distToCamera = length(cameraPos - midpoint);
+    let distToCamera = length(cameraPos - anchorWorld);
     let refDist = 15.0;
     let rawScale = distToCamera / refDist;
     let maxScale = 3.0;
     let zoomScale = max(1.0, rawScale / (1.0 + rawScale / maxScale));
-    let baseSize = sqrt(line.thickness) * 0.008 * zoomScale;
-    let arrowLength = arrow.size * baseSize * 3.0;
-    let arrowWidth = arrow.size * baseSize * 1.5;
-
-    // Pick anchor position and direction based on which end
-    var anchorNDC: vec2<f32>;
-    var anchorDepth: f32;
-    var arrowDir: vec2<f32>;
-
-    if isEnd {
-        anchorNDC = endNDC;
-        anchorDepth = endClip.z / endClip.w;
-        arrowDir = normDir;
-    } else {
-        anchorNDC = startNDC;
-        anchorDepth = startClip.z / startClip.w;
-        arrowDir = -normDir;
-    }
+    let baseSize = sqrt(line.thickness) * 0.1 * zoomScale;
+    let arrowLength = arrow.size * baseSize * 2.0;
+    let arrowWidth = arrow.size * baseSize * 0.8;
 
-    // Build triangle centered on anchor (tip extends forward, base extends back)
-    let halfLen = arrowLength * 0.5;
-    var pos: vec2<f32>;
+    // Arrow direction along line
+    let arrowDir = select(-lineDir, lineDir, isEnd);
+
+    // Build triangle vertices in world space
+    var worldPos: vec3<f32>;
     switch vid {
-        case 0u: { pos = anchorNDC + arrowDir * halfLen; }
-        case 1u: { pos = anchorNDC - arrowDir * halfLen + perp * arrowWidth; }
-        case 2u: { pos = anchorNDC - arrowDir * halfLen - perp * arrowWidth; }
-        default: { pos = anchorNDC; }
+        case 0u: { worldPos = anchorWorld + arrowDir * arrowLength * 0.5; }
+        case 1u: { worldPos = anchorWorld - arrowDir * arrowLength * 0.5 + perp * arrowWidth; }
+        case 2u: { worldPos = anchorWorld - arrowDir * arrowLength * 0.5 - perp * arrowWidth; }
+        default: { worldPos = anchorWorld; }
     }
 
+    // Project to clip space
+    let clipPos = scene.viewProj * vec4(worldPos, 1.0);
+
     var out: VertexOutput;
-    out.position = vec4(pos, anchorDepth, 1.0);
+    out.position = clipPos;
     out.color = vec4(line.color.rgb, line.color.a * line.opacity);
     return out;
 }
@@ -230,6 +237,11 @@ export function createArrowsPipeline(
         primitive: {
             topology: "triangle-list",
         },
+        depthStencil: {
+            format: DEPTH_FORMAT,
+            depthCompare: "less",
+            depthWriteEnabled: false,
+        },
     });
 }
 
@@ -239,7 +251,7 @@ export function createArrowsNode(config: ArrowsConfig): ComputeNode {
 
     return {
         id: "arrows",
-        phase: "overlay",
+        phase: "transparent",
         inputs: [],
         outputs: [],
 
@@ -267,6 +279,8 @@ export function createArrowsNode(config: ArrowsConfig): ComputeNode {
                 });
             }
 
+            const depthView = ctx.getTextureView("depth")!;
+
             const pass = encoder.beginRenderPass({
                 colorAttachments: [
                     {
@@ -275,6 +289,11 @@ export function createArrowsNode(config: ArrowsConfig): ComputeNode {
                         storeOp: "store" as const,
                     },
                 ],
+                depthStencilAttachment: {
+                    view: depthView,
+                    depthLoadOp: "load" as const,
+                    depthStoreOp: "store" as const,
+                },
             });
 
             pass.setPipeline(pipeline);

package/src/extras/lines/index.ts

@@ -7,7 +7,7 @@ import {
     type ComputeNode,
     type ExecutionContext,
 } from "../../standard/compute";
-import { Render, RenderPlugin } from "../../standard/render";
+import { Render, RenderPlugin, DEPTH_FORMAT } from "../../standard/render";
 import { Transform } from "../../standard/transforms";
 
 export const LineData = {
@@ -245,6 +245,11 @@ export function createLinesPipeline(
         primitive: {
             topology: "triangle-list",
         },
+        depthStencil: {
+            format: DEPTH_FORMAT,
+            depthCompare: "less",
+            depthWriteEnabled: false,
+        },
     });
 }
 
@@ -254,7 +259,7 @@ export function createLinesNode(config: LinesConfig): ComputeNode {
 
     return {
         id: "lines",
-        phase: "overlay",
+        phase: "transparent",
         inputs: [],
         outputs: [],
 
@@ -281,6 +286,8 @@ export function createLinesNode(config: LinesConfig): ComputeNode {
                 });
             }
 
+            const depthView = ctx.getTextureView("depth")!;
+
             const pass = encoder.beginRenderPass({
                 colorAttachments: [
                     {
@@ -289,6 +296,11 @@ export function createLinesNode(config: LinesConfig): ComputeNode {
                         storeOp: "store" as const,
                     },
                 ],
+                depthStencilAttachment: {
+                    view: depthView,
+                    depthLoadOp: "load" as const,
+                    depthStoreOp: "store" as const,
+                },
             });
 
             pass.setPipeline(pipeline);

package/src/extras/text/index.ts

@@ -7,7 +7,7 @@ import {
     type ComputeNode,
     type ExecutionContext,
 } from "../../standard/compute";
-import { Render, RenderPlugin } from "../../standard/render";
+import { Render, RenderPlugin, DEPTH_FORMAT } from "../../standard/render";
 import { Transform } from "../../standard/transforms";
 
 const MAX_GLYPHS = 50000;
@@ -304,7 +304,7 @@ struct GlyphInstance {
     posX: f32,
     posY: f32,
     posZ: f32,
-    _pad0: f32,
+    entityId: u32,
     width: f32,
     height: f32,
     _pad1: vec2<f32>,
@@ -319,6 +319,7 @@ struct GlyphInstance {
 @group(0) @binding(1) var<storage, read> glyphs: array<GlyphInstance>;
 @group(0) @binding(2) var atlasTexture: texture_2d<f32>;
 @group(0) @binding(3) var atlasSampler: sampler;
+@group(0) @binding(4) var<storage, read> matrices: array<mat4x4<f32>>;
 
 struct VertexOutput {
     @builtin(position) position: vec4<f32>,
@@ -369,14 +370,17 @@ fn vs(@builtin(vertex_index) vid: u32) -> VertexOutput {
         }
     }
 
-    let worldPos = vec3(
+    let localPos3 = vec3(
         glyph.posX + localPos.x * glyph.width,
         glyph.posY + localPos.y * glyph.height,
         glyph.posZ
     );
 
+    let transform = matrices[glyph.entityId];
+    let worldPos = transform * vec4(localPos3, 1.0);
+
     var out: VertexOutput;
-    out.position = scene.viewProj * vec4(worldPos, 1.0);
+    out.position = scene.viewProj * worldPos;
     out.uv = uv;
     out.color = glyph.color;
     return out;
@@ -429,6 +433,11 @@ function createTextPipeline(device: GPUDevice, format: GPUTextureFormat): GPURen
             topology: "triangle-list",
             cullMode: "none",
         },
+        depthStencil: {
+            format: DEPTH_FORMAT,
+            depthCompare: "less",
+            depthWriteEnabled: false,
+        },
     });
 }
 
@@ -437,6 +446,7 @@ export interface TextConfig {
     glyphs: GPUBuffer;
     atlas: GPUTextureView;
     sampler: GPUSampler;
+    matrices: GPUBuffer;
     getCount: () => number;
 }
 
@@ -446,7 +456,7 @@ export function createTextNode(config: TextConfig): ComputeNode {
 
     return {
         id: "text",
-        phase: "overlay",
+        phase: "transparent",
         inputs: [],
         outputs: [],
 
@@ -469,10 +479,13 @@ export function createTextNode(config: TextConfig): ComputeNode {
                         { binding: 1, resource: { buffer: config.glyphs } },
                         { binding: 2, resource: config.atlas },
                         { binding: 3, resource: config.sampler },
+                        { binding: 4, resource: { buffer: config.matrices } },
                     ],
                 });
             }
 
+            const depthView = ctx.getTextureView("depth")!;
+
             const pass = encoder.beginRenderPass({
                 colorAttachments: [
                     {
@@ -481,6 +494,11 @@ export function createTextNode(config: TextConfig): ComputeNode {
                         storeOp: "store" as const,
                     },
                 ],
+                depthStencilAttachment: {
+                    view: depthView,
+                    depthLoadOp: "load" as const,
+                    depthStoreOp: "store" as const,
+                },
             });
 
             pass.setPipeline(pipeline);
@@ -523,6 +541,7 @@ const TextSystem: System = {
 
         const { device } = compute;
         const { atlas, staging, content } = text;
+        const stagingU32 = new Uint32Array(staging.buffer);
 
         let glyphCount = 0;
 
@@ -542,10 +561,6 @@ const TextSystem: System = {
             const offsetX = -layout.width * anchorX;
             const offsetY = -layout.height * anchorY;
 
-            const baseX = Transform.posX[eid] + offsetX;
-            const baseY = Transform.posY[eid] + offsetY;
-            const baseZ = Transform.posZ[eid];
-
             const color = Text.color[eid];
             const r = ((color >> 16) & 0xff) / 255;
             const g = ((color >> 8) & 0xff) / 255;
@@ -557,10 +572,10 @@ const TextSystem: System = {
 
                 const offset = glyphCount * GLYPH_FLOATS;
 
-                staging[offset + 0] = baseX + glyph.x;
-                staging[offset + 1] = baseY + glyph.y;
-                staging[offset + 2] = baseZ;
-                staging[offset + 3] = 0;
+                staging[offset + 0] = offsetX + glyph.x;
+                staging[offset + 1] = offsetY + glyph.y;
+                staging[offset + 2] = 0;
+                stagingU32[offset + 3] = eid;
 
                 staging[offset + 4] = glyph.width;
                 staging[offset + 5] = glyph.height;
@@ -634,6 +649,7 @@ export const TextPlugin: Plugin = {
                 glyphs: textState.buffer,
                 atlas: atlas.textureView,
                 sampler,
+                matrices: render.matrices,
                 getCount: () => textState.count,
             })
         );

package/src/standard/compute/graph.ts

@@ -3,9 +3,9 @@ import { inspect as inspectGraph, type GraphInspection } from "./inspect";
 
 export type ResourceId = string;
 export type NodeId = string;
-export type Phase = "render" | "overlay" | "postprocess";
+export type Phase = "opaque" | "transparent" | "postprocess";
 
-const PHASE_ORDER: Phase[] = ["render", "overlay", "postprocess"];
+const PHASE_ORDER: Phase[] = ["opaque", "transparent", "postprocess"];
 
 export interface ResourceRef {
     id: ResourceId;
@@ -22,6 +22,9 @@ export interface ExecutionContext {
     getTexture(id: ResourceId): GPUTexture | null;
     getTextureView(id: ResourceId): GPUTextureView | null;
     getBuffer(id: ResourceId): GPUBuffer | null;
+    setTexture(id: ResourceId, texture: GPUTexture): void;
+    setTextureView(id: ResourceId, view: GPUTextureView): void;
+    setBuffer(id: ResourceId, buffer: GPUBuffer): void;
 }
 
 export interface ComputeNode {
@@ -116,7 +119,7 @@ function compile(nodes: ComputeNode[]): ExecutionPlan {
     }
 
     for (const node of nodes) {
-        const phase = node.phase ?? "render";
+        const phase = node.phase ?? "opaque";
         byPhase.get(phase)!.push(node);
     }
 

package/src/standard/compute/index.ts

@@ -105,6 +105,15 @@ export const ComputeSystem: System = {
             getBuffer(id: ResourceId) {
                 return resources.buffers.get(id) ?? null;
             },
+            setTexture(id: ResourceId, texture: GPUTexture) {
+                resources.textures.set(id, texture);
+            },
+            setTextureView(id: ResourceId, view: GPUTextureView) {
+                resources.textureViews.set(id, view);
+            },
+            setBuffer(id: ResourceId, buffer: GPUBuffer) {
+                resources.buffers.set(id, buffer);
+            },
         };
 
         for (const node of plan.sorted) {

package/src/standard/compute/inspect.ts

@@ -20,12 +20,12 @@ export interface GraphInspection {
     readonly byPhase: ReadonlyMap<Phase, readonly NodeId[]>;
 }
 
-const PHASE_ORDER: Phase[] = ["render", "overlay", "postprocess"];
+const PHASE_ORDER: Phase[] = ["opaque", "transparent", "postprocess"];
 
 export function inspect(nodes: readonly ComputeNode[]): GraphInspection {
     const nodeInfos: NodeInfo[] = nodes.map((n) => ({
         id: n.id,
-        phase: n.phase ?? "render",
+        phase: n.phase ?? "opaque",
         inputs: n.inputs,
         outputs: n.outputs,
     }));
@@ -97,7 +97,7 @@ function topoSortIds(nodes: readonly ComputeNode[]): NodeId[] {
         byPhase.set(phase, []);
     }
     for (const node of nodes) {
-        const phase = node.phase ?? "render";
+        const phase = node.phase ?? "opaque";
         byPhase.get(phase)!.push(node);
     }
 

package/src/standard/input/index.ts

@@ -30,6 +30,10 @@ const inputState: InputState = {
 };
 
 let canvas: HTMLCanvasElement | null = null;
+let lastPointerX = 0;
+let lastPointerY = 0;
+let activePointerId: number | null = null;
+let activeButton: number | null = null;
 
 function handleKeyDown(e: KeyboardEvent): void {
     if (!keys.has(e.code)) {
@@ -43,22 +47,55 @@ function handleKeyUp(e: KeyboardEvent): void {
     keysReleased.add(e.code);
 }
 
-function handleMouseDown(e: MouseEvent): void {
+function setButtonState(button: number, pressed: boolean): void {
+    if (button === 0) mouse.left = pressed;
+    if (button === 1) mouse.middle = pressed;
+    if (button === 2) mouse.right = pressed;
+}
+
+function clearPointerState(): void {
+    if (activeButton !== null) {
+        setButtonState(activeButton, false);
+    }
+    activePointerId = null;
+    activeButton = null;
+    lastPointerX = 0;
+    lastPointerY = 0;
+}
+
+function handlePointerDown(e: PointerEvent): void {
     if (e.target !== canvas) return;
-    if (e.button === 0) mouse.left = true;
-    if (e.button === 1) mouse.middle = true;
-    if (e.button === 2) mouse.right = true;
+    if (activePointerId === null) {
+        activePointerId = e.pointerId;
+        activeButton = e.button;
+        lastPointerX = e.clientX;
+        lastPointerY = e.clientY;
+        setButtonState(e.button, true);
+        canvas!.setPointerCapture(e.pointerId);
+        e.preventDefault();
+    }
+}
+
+function handlePointerUp(e: PointerEvent): void {
+    if (e.pointerId === activePointerId) {
+        canvas?.releasePointerCapture(e.pointerId);
+        clearPointerState();
+    }
 }
 
-function handleMouseUp(e: MouseEvent): void {
-    if (e.button === 0) mouse.left = false;
-    if (e.button === 1) mouse.middle = false;
-    if (e.button === 2) mouse.right = false;
+function handlePointerCancel(e: PointerEvent): void {
+    if (e.pointerId === activePointerId) {
+        clearPointerState();
+    }
 }
 
-function handleMouseMove(e: MouseEvent): void {
-    mouse.deltaX += e.movementX;
-    mouse.deltaY += e.movementY;
+function handlePointerMove(e: PointerEvent): void {
+    if (e.pointerId !== activePointerId) return;
+    e.preventDefault();
+    mouse.deltaX += e.clientX - lastPointerX;
+    mouse.deltaY += e.clientY - lastPointerY;
+    lastPointerX = e.clientX;
+    lastPointerY = e.clientY;
 }
 
 function handleWheel(e: WheelEvent): void {
@@ -91,6 +128,10 @@ function clearAllState(): void {
     mouse.left = false;
     mouse.right = false;
     mouse.middle = false;
+    activePointerId = null;
+    activeButton = null;
+    lastPointerX = 0;
+    lastPointerY = 0;
 }
 
 export const InputSystem: System = {
@@ -99,12 +140,14 @@ export const InputSystem: System = {
     setup(state: State) {
         if (!state.canvas) return;
         canvas = state.canvas;
+        canvas.style.touchAction = "none";
 
         window.addEventListener("keydown", handleKeyDown);
         window.addEventListener("keyup", handleKeyUp);
-        canvas.addEventListener("mousedown", handleMouseDown);
-        window.addEventListener("mouseup", handleMouseUp);
-        canvas.addEventListener("mousemove", handleMouseMove);
+        canvas.addEventListener("pointerdown", handlePointerDown);
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerCancel);
+        window.addEventListener("pointermove", handlePointerMove);
         canvas.addEventListener("wheel", handleWheel, { passive: false });
         canvas.addEventListener("contextmenu", handleContextMenu);
 
@@ -115,9 +158,10 @@ export const InputSystem: System = {
         if (canvas) {
             window.removeEventListener("keydown", handleKeyDown);
             window.removeEventListener("keyup", handleKeyUp);
-            canvas.removeEventListener("mousedown", handleMouseDown);
-            window.removeEventListener("mouseup", handleMouseUp);
-            canvas.removeEventListener("mousemove", handleMouseMove);
+            canvas.removeEventListener("pointerdown", handlePointerDown);
+            window.removeEventListener("pointerup", handlePointerUp);
+            window.removeEventListener("pointercancel", handlePointerCancel);
+            window.removeEventListener("pointermove", handlePointerMove);
             canvas.removeEventListener("wheel", handleWheel);
             canvas.removeEventListener("contextmenu", handleContextMenu);
             canvas = null;

package/src/standard/render/light.ts

@@ -22,9 +22,9 @@ setTraits(DirectionalLight, {
     defaults: () => ({
         color: 0xffffff,
         intensity: 1.0,
-        directionX: -0.5,
+        directionX: -0.6,
         directionY: -1.0,
-        directionZ: -0.5,
+        directionZ: -0.8,
     }),
 });
 

package/src/standard/render/postprocess.ts

@@ -6,26 +6,6 @@ struct VertexOutput {
     @location(0) uv: vec2f,
 }
 
-@vertex
-fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
-    var positions = array<vec2f, 3>(
-        vec2f(-1.0, -1.0),
-        vec2f(3.0, -1.0),
-        vec2f(-1.0, 3.0)
-    );
-
-    let pos = positions[vertexIndex];
-
-    var output: VertexOutput;
-    output.position = vec4f(pos, 0.0, 1.0);
-    output.uv = (pos + 1.0) * 0.5;
-    output.uv.y = 1.0 - output.uv.y;
-    return output;
-}
-
-@group(0) @binding(0) var inputTexture: texture_2d<f32>;
-@group(0) @binding(1) var inputSampler: sampler;
-
 struct Uniforms {
     exposure: f32,
     vignetteStrength: f32,
@@ -37,12 +17,31 @@ struct Uniforms {
     _pad: u32,
 }
 
+@group(0) @binding(0) var inputTexture: texture_2d<f32>;
+@group(0) @binding(1) var inputSampler: sampler;
 @group(0) @binding(2) var<uniform> uniforms: Uniforms;
 
 const FLAG_TONEMAP: u32 = 1u;
 const FLAG_FXAA: u32 = 2u;
 const FLAG_VIGNETTE: u32 = 4u;
 
+@vertex
+fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+    var positions = array<vec2f, 3>(
+        vec2f(-1.0, -1.0),
+        vec2f(3.0, -1.0),
+        vec2f(-1.0, 3.0)
+    );
+
+    let pos = positions[vertexIndex];
+
+    var output: VertexOutput;
+    output.position = vec4f(pos, 0.0, 1.0);
+    output.uv = (pos + 1.0) * 0.5;
+    output.uv.y = 1.0 - output.uv.y;
+    return output;
+}
+
 fn aces(x: vec3f) -> vec3f {
     let a = 2.51;
     let b = 0.03;
@@ -111,11 +110,11 @@ fn applyVignette(color: vec3f, uv: vec2f) -> vec3f {
 }
 
 @fragment
-fn fragmentMain(@location(0) uv: vec2f) -> @location(0) vec4f {
-    var color = textureSample(inputTexture, inputSampler, uv).rgb;
+fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
+    var color = textureSample(inputTexture, inputSampler, input.uv).rgb;
 
     if (uniforms.flags & FLAG_FXAA) != 0u {
-        color = applyFXAA(uv, color);
+        color = applyFXAA(input.uv, color);
     }
 
     if (uniforms.flags & FLAG_TONEMAP) != 0u {
@@ -123,7 +122,7 @@ fn fragmentMain(@location(0) uv: vec2f) -> @location(0) vec4f {
     }
 
     if (uniforms.flags & FLAG_VIGNETTE) != 0u {
-        color = applyVignette(color, uv);
+        color = applyVignette(color, input.uv);
     }
 
     return vec4f(color, 1.0);

package/src/standard/render/scene.ts

@@ -75,24 +75,7 @@ export function orthographic(
     const lr = 1 / (size * aspect);
     const bt = 1 / size;
     const nf = 1 / (near - far);
-    return new Float32Array([
-        lr,
-        0,
-        0,
-        0,
-        0,
-        bt,
-        0,
-        0,
-        0,
-        0,
-        nf,
-        0,
-        0,
-        0,
-        near * nf,
-        1,
-    ]);
+    return new Float32Array([lr, 0, 0, 0, 0, bt, 0, 0, 0, 0, nf, 0, 0, 0, near * nf, 1]);
 }
 
 export function multiply(a: Float32Array, b: Float32Array): Float32Array {