@multiplekex/shallot 0.2.3 → 0.2.5

package/src/standard/render/mesh/index.ts

@@ -1,5 +1,5 @@
 import { MAX_ENTITIES } from "../../../core";
-import { setTraits, type FieldAccessor } from "../../../core/component";
+import { setTraits, createFieldProxy, type FieldProxy } from "../../../core/component";
 import { createEntityIdBuffer } from "../../compute";
 import { writeIndirect } from "../indirect";
 import { createBox } from "./box";
@@ -7,7 +7,7 @@ import { createSphere } from "./sphere";
 import { createPlane } from "./plane";
 
 export const MAX_SURFACES = 16;
-export const MAX_BATCH_SLOTS = 64;
+export const MAX_BATCH_SLOTS = 256;
 const INVALID_SHAPE = 0xffffffff;
 
 const batchEntityIds = new Uint32Array(MAX_ENTITIES);
@@ -81,11 +81,7 @@ export const Volume = {
     HalfSpace: 1,
 } as const;
 
-interface ColorProxy extends Array<number>, FieldAccessor {}
-
-function colorProxy(): ColorProxy {
-    const data = MeshColors.data;
-
+function hexColorProxy(data: Float32Array): FieldProxy {
     function getValue(eid: number): number {
         const offset = eid * 4;
         const r = Math.round(data[offset] * 255);
@@ -101,67 +97,7 @@ function colorProxy(): ColorProxy {
         data[offset + 2] = (value & 0xff) / 255;
     }
 
-    return new Proxy([] as unknown as ColorProxy, {
-        get(_, prop) {
-            if (prop === "get") return getValue;
-            if (prop === "set") return setValue;
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return undefined;
-            return getValue(eid);
-        },
-        set(_, prop, value) {
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return false;
-            setValue(eid, value);
-            return true;
-        },
-    });
-}
-
-interface ColorChannelProxy extends Array<number>, FieldAccessor {}
-
-function colorChannelProxy(channelIndex: number): ColorChannelProxy {
-    const data = MeshColors.data;
-
-    function getValue(eid: number): number {
-        return data[eid * 4 + channelIndex];
-    }
-
-    function setValue(eid: number, value: number): void {
-        data[eid * 4 + channelIndex] = value;
-    }
-
-    return new Proxy([] as unknown as ColorChannelProxy, {
-        get(_, prop) {
-            if (prop === "get") return getValue;
-            if (prop === "set") return setValue;
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return undefined;
-            return getValue(eid);
-        },
-        set(_, prop, value) {
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return false;
-            setValue(eid, value);
-            return true;
-        },
-    });
-}
-
-interface SizeProxy extends Array<number>, FieldAccessor {}
-
-function sizeProxy(component: number): SizeProxy {
-    const data = MeshSizes.data;
-
-    function getValue(eid: number): number {
-        return data[eid * 4 + component];
-    }
-
-    function setValue(eid: number, value: number): void {
-        data[eid * 4 + component] = value;
-    }
-
-    return new Proxy([] as unknown as SizeProxy, {
+    return new Proxy([] as unknown as FieldProxy, {
         get(_, prop) {
             if (prop === "get") return getValue;
             if (prop === "set") return setValue;
@@ -178,86 +114,19 @@ function sizeProxy(component: number): SizeProxy {
     });
 }
 
-interface PBRProxy extends Array<number>, FieldAccessor {}
-
-function pbrProxy(component: number, defaultValue: number): PBRProxy {
+function roughnessProxy(): FieldProxy {
     const data = MeshPBR.data;
 
     function getValue(eid: number): number {
-        const val = data[eid * 4 + component];
-        return val === 0 && component === 0 ? defaultValue : val;
-    }
-
-    function setValue(eid: number, value: number): void {
-        data[eid * 4 + component] = value;
-    }
-
-    return new Proxy([] as unknown as PBRProxy, {
-        get(_, prop) {
-            if (prop === "get") return getValue;
-            if (prop === "set") return setValue;
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return undefined;
-            return getValue(eid);
-        },
-        set(_, prop, value) {
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return false;
-            setValue(eid, value);
-            return true;
-        },
-    });
-}
-
-interface EmissionProxy extends Array<number>, FieldAccessor {}
-
-function emissionProxy(): EmissionProxy {
-    const data = MeshEmission.data;
-
-    function getValue(eid: number): number {
-        const offset = eid * 4;
-        const r = Math.round(data[offset] * 255);
-        const g = Math.round(data[offset + 1] * 255);
-        const b = Math.round(data[offset + 2] * 255);
-        return (r << 16) | (g << 8) | b;
-    }
-
-    function setValue(eid: number, value: number): void {
-        const offset = eid * 4;
-        data[offset] = ((value >> 16) & 0xff) / 255;
-        data[offset + 1] = ((value >> 8) & 0xff) / 255;
-        data[offset + 2] = (value & 0xff) / 255;
-    }
-
-    return new Proxy([] as unknown as EmissionProxy, {
-        get(_, prop) {
-            if (prop === "get") return getValue;
-            if (prop === "set") return setValue;
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return undefined;
-            return getValue(eid);
-        },
-        set(_, prop, value) {
-            const eid = Number(prop);
-            if (Number.isNaN(eid)) return false;
-            setValue(eid, value);
-            return true;
-        },
-    });
-}
-
-function emissionIntensityProxy(): PBRProxy {
-    const data = MeshEmission.data;
-
-    function getValue(eid: number): number {
-        return data[eid * 4 + 3];
+        const val = data[eid * 4];
+        return val === 0 ? 0.9 : val;
     }
 
     function setValue(eid: number, value: number): void {
-        data[eid * 4 + 3] = value;
+        data[eid * 4] = value;
     }
 
-    return new Proxy([] as unknown as PBRProxy, {
+    return new Proxy([] as unknown as FieldProxy, {
         get(_, prop) {
             if (prop === "get") return getValue;
             if (prop === "set") return setValue;
@@ -276,35 +145,35 @@ function emissionIntensityProxy(): PBRProxy {
 
 export const Mesh: {
     shape: Uint32Array;
-    color: ColorProxy;
-    colorR: ColorChannelProxy;
-    colorG: ColorChannelProxy;
-    colorB: ColorChannelProxy;
-    opacity: ColorChannelProxy;
-    sizeX: SizeProxy;
-    sizeY: SizeProxy;
-    sizeZ: SizeProxy;
-    roughness: PBRProxy;
-    metallic: PBRProxy;
-    ior: PBRProxy;
-    emission: EmissionProxy;
-    emissionIntensity: PBRProxy;
+    color: FieldProxy;
+    colorR: FieldProxy;
+    colorG: FieldProxy;
+    colorB: FieldProxy;
+    opacity: FieldProxy;
+    sizeX: FieldProxy;
+    sizeY: FieldProxy;
+    sizeZ: FieldProxy;
+    roughness: FieldProxy;
+    metallic: FieldProxy;
+    ior: FieldProxy;
+    emission: FieldProxy;
+    emissionIntensity: FieldProxy;
     volume: Uint8Array;
 } = {
     shape: MeshShapes.data,
-    color: colorProxy(),
-    colorR: colorChannelProxy(0),
-    colorG: colorChannelProxy(1),
-    colorB: colorChannelProxy(2),
-    opacity: colorChannelProxy(3),
-    sizeX: sizeProxy(0),
-    sizeY: sizeProxy(1),
-    sizeZ: sizeProxy(2),
-    roughness: pbrProxy(0, 0.9),
-    metallic: pbrProxy(1, 0.0),
-    ior: pbrProxy(2, 1.0),
-    emission: emissionProxy(),
-    emissionIntensity: emissionIntensityProxy(),
+    color: hexColorProxy(MeshColors.data),
+    colorR: createFieldProxy(MeshColors.data, 4, 0),
+    colorG: createFieldProxy(MeshColors.data, 4, 1),
+    colorB: createFieldProxy(MeshColors.data, 4, 2),
+    opacity: createFieldProxy(MeshColors.data, 4, 3),
+    sizeX: createFieldProxy(MeshSizes.data, 4, 0),
+    sizeY: createFieldProxy(MeshSizes.data, 4, 1),
+    sizeZ: createFieldProxy(MeshSizes.data, 4, 2),
+    roughness: roughnessProxy(),
+    metallic: createFieldProxy(MeshPBR.data, 4, 1),
+    ior: createFieldProxy(MeshPBR.data, 4, 2),
+    emission: hexColorProxy(MeshEmission.data),
+    emissionIntensity: createFieldProxy(MeshEmission.data, 4, 3),
     volume: MeshVolumes.data,
 };
 

package/src/standard/render/overlay.ts

@@ -12,7 +12,7 @@ export interface OverlayNodeConfig {
 export function createOverlayNode(config: OverlayNodeConfig): ComputeNode {
     return {
         id: "overlay",
-        inputs: [{ id: "depth", access: "read" }],
+        inputs: [{ id: "z", access: "read" }],
         outputs: [
             { id: "color", access: "write" },
             { id: "mask", access: "write" },
@@ -21,7 +21,7 @@ export function createOverlayNode(config: OverlayNodeConfig): ComputeNode {
         execute(ctx: ExecutionContext) {
             const { device, encoder, format, context } = ctx;
             const targetView = ctx.getTextureView("color") ?? ctx.canvasView;
-            const depthView = ctx.getTextureView("depth")!;
+            const zView = ctx.getTextureView("z")!;
             const maskView = ctx.getTextureView("mask")!;
             const eidView = ctx.getTextureView("eid")!;
 
@@ -32,7 +32,7 @@ export function createOverlayNode(config: OverlayNodeConfig): ComputeNode {
                 width: context.canvas.width,
                 height: context.canvas.height,
                 sceneView: targetView,
-                depthView,
+                zView,
                 entityIdView: eidView,
                 maskView,
                 canvasView: ctx.canvasView,
@@ -60,7 +60,7 @@ export function createOverlayNode(config: OverlayNodeConfig): ComputeNode {
                         },
                     ],
                     depthStencilAttachment: {
-                        view: depthView,
+                        view: zView,
                         depthLoadOp: "load" as const,
                         depthStoreOp: "store" as const,
                     },

package/src/standard/render/pass.ts

@@ -17,7 +17,7 @@ export interface DrawContext {
     readonly height: number;
 
     readonly sceneView: GPUTextureView;
-    readonly depthView: GPUTextureView;
+    readonly zView: GPUTextureView;
     readonly entityIdView: GPUTextureView;
     readonly maskView: GPUTextureView;
     readonly canvasView: GPUTextureView;

package/src/standard/render/postprocess.ts

@@ -120,7 +120,6 @@ fn applyVignette(color: vec3f, uv: vec2f) -> vec3f {
 
 fn sampleBloom(uv: vec2f) -> vec3f {
     let texelSize = vec2f(uniforms.texelSizeX, uniforms.texelSizeY);
-    // Normalize to reference height (1080p) for resolution-independent bloom
     let height = 1.0 / uniforms.texelSizeY;
     let resolutionScale = height / 1080.0;
     let spread = uniforms.bloomRadius * 4.0 * resolutionScale;
@@ -130,7 +129,6 @@ fn sampleBloom(uv: vec2f) -> vec3f {
     var bloom = vec3f(0.0);
     var totalWeight = 0.0;
 
-    // 9x9 kernel with gaussian weights
     for (var y = -4; y <= 4; y++) {
         for (var x = -4; x <= 4; x++) {
             let offset = vec2f(f32(x), f32(y)) * texelSize * spread;
@@ -165,7 +163,6 @@ fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
         color = select(fxaaColor, color, maskValue >= 0.5);
     }
 
-    // Bloom applied before tonemapping
     if (uniforms.flags & FLAG_BLOOM) != 0u {
         let bloom = sampleBloom(input.uv);
         color += bloom * uniforms.bloomIntensity;
@@ -251,6 +248,16 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
     let linearSampler: GPUSampler | null = null;
     let nearestSampler: GPUSampler | null = null;
 
+    let uniformData: ArrayBuffer;
+    let uniformFloats: Float32Array;
+    let uniformUints: Uint32Array;
+
+    let mainBindGroup: GPUBindGroup | null = null;
+    let blitBindGroup: GPUBindGroup | null = null;
+    let cachedInputView: GPUTextureView | null = null;
+    let cachedSampler: GPUSampler | null = null;
+    let cachedMaskView: GPUTextureView | null = null;
+
     return {
         id: "postprocess",
         inputs: [
@@ -306,6 +313,10 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                 magFilter: "nearest",
                 minFilter: "nearest",
             });
+
+            uniformData = new ArrayBuffer(48);
+            uniformFloats = new Float32Array(uniformData);
+            uniformUints = new Uint32Array(uniformData);
         },
 
         execute(ctx: ExecutionContext) {
@@ -314,7 +325,7 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
             const height = context.canvas.height;
             const colorView = ctx.getTextureView("color")!;
             const maskView = ctx.getTextureView("mask")!;
-            const depthView = ctx.getTextureView("depth")!;
+            const zView = ctx.getTextureView("z")!;
             const eidView = ctx.getTextureView("eid")!;
             const pingAView = ctx.getTextureView("pingA")!;
             const pingBView = ctx.getTextureView("pingB")!;
@@ -337,7 +348,7 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                     width,
                     height,
                     sceneView: colorView,
-                    depthView,
+                    zView,
                     entityIdView: eidView,
                     maskView,
                     canvasView,
@@ -368,7 +379,7 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                         width,
                         height,
                         sceneView: colorView,
-                        depthView,
+                        zView,
                         entityIdView: eidView,
                         maskView,
                         canvasView,
@@ -390,32 +401,38 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                     if (config.uniforms.bloomIntensity > 0) flags |= FLAG_BLOOM;
                     if (config.uniforms.quantize > 0) flags |= FLAG_QUANTIZE;
 
-                    const data = new ArrayBuffer(48);
-                    const floats = new Float32Array(data);
-                    const uints = new Uint32Array(data);
-                    floats[0] = config.uniforms.exposure;
-                    floats[1] = config.uniforms.vignetteStrength;
-                    floats[2] = config.uniforms.vignetteInner;
-                    floats[3] = config.uniforms.vignetteOuter;
-                    floats[4] = 1.0 / width;
-                    floats[5] = 1.0 / height;
-                    uints[6] = flags;
-                    floats[7] = config.uniforms.bloomIntensity;
-                    floats[8] = config.uniforms.bloomThreshold;
-                    floats[9] = config.uniforms.bloomRadius;
-                    floats[10] = config.uniforms.quantize;
-
-                    device.queue.writeBuffer(uniformBuffer!, 0, data);
-
-                    const bindGroup = device.createBindGroup({
-                        layout: pipeline!.getBindGroupLayout(0),
-                        entries: [
-                            { binding: 0, resource: currentInput },
-                            { binding: 1, resource: sampler },
-                            { binding: 2, resource: { buffer: uniformBuffer! } },
-                            { binding: 3, resource: maskView },
-                        ],
-                    });
+                    uniformFloats[0] = config.uniforms.exposure;
+                    uniformFloats[1] = config.uniforms.vignetteStrength;
+                    uniformFloats[2] = config.uniforms.vignetteInner;
+                    uniformFloats[3] = config.uniforms.vignetteOuter;
+                    uniformFloats[4] = 1.0 / width;
+                    uniformFloats[5] = 1.0 / height;
+                    uniformUints[6] = flags;
+                    uniformFloats[7] = config.uniforms.bloomIntensity;
+                    uniformFloats[8] = config.uniforms.bloomThreshold;
+                    uniformFloats[9] = config.uniforms.bloomRadius;
+                    uniformFloats[10] = config.uniforms.quantize;
+
+                    device.queue.writeBuffer(uniformBuffer!, 0, uniformData);
+
+                    if (
+                        currentInput !== cachedInputView ||
+                        sampler !== cachedSampler ||
+                        maskView !== cachedMaskView
+                    ) {
+                        mainBindGroup = device.createBindGroup({
+                            layout: pipeline!.getBindGroupLayout(0),
+                            entries: [
+                                { binding: 0, resource: currentInput },
+                                { binding: 1, resource: sampler },
+                                { binding: 2, resource: { buffer: uniformBuffer! } },
+                                { binding: 3, resource: maskView },
+                            ],
+                        });
+                        cachedInputView = currentInput;
+                        cachedSampler = sampler;
+                        cachedMaskView = maskView;
+                    }
 
                     const pass = encoder.beginRenderPass({
                         colorAttachments: [
@@ -429,17 +446,21 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                     });
 
                     pass.setPipeline(pipeline!);
-                    pass.setBindGroup(0, bindGroup);
+                    pass.setBindGroup(0, mainBindGroup!);
                     pass.draw(3);
                     pass.end();
                 } else {
-                    const bindGroup = device.createBindGroup({
-                        layout: blitPipeline!.getBindGroupLayout(0),
-                        entries: [
-                            { binding: 0, resource: currentInput },
-                            { binding: 1, resource: sampler },
-                        ],
-                    });
+                    if (currentInput !== cachedInputView || sampler !== cachedSampler) {
+                        blitBindGroup = device.createBindGroup({
+                            layout: blitPipeline!.getBindGroupLayout(0),
+                            entries: [
+                                { binding: 0, resource: currentInput },
+                                { binding: 1, resource: sampler },
+                            ],
+                        });
+                        cachedInputView = currentInput;
+                        cachedSampler = sampler;
+                    }
 
                     const pass = encoder.beginRenderPass({
                         colorAttachments: [
@@ -453,18 +474,22 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                     });
 
                     pass.setPipeline(blitPipeline!);
-                    pass.setBindGroup(0, bindGroup);
+                    pass.setBindGroup(0, blitBindGroup!);
                     pass.draw(3);
                     pass.end();
                 }
             } else {
-                const bindGroup = device.createBindGroup({
-                    layout: blitPipeline!.getBindGroupLayout(0),
-                    entries: [
-                        { binding: 0, resource: currentInput },
-                        { binding: 1, resource: sampler },
-                    ],
-                });
+                if (currentInput !== cachedInputView || sampler !== cachedSampler) {
+                    blitBindGroup = device.createBindGroup({
+                        layout: blitPipeline!.getBindGroupLayout(0),
+                        entries: [
+                            { binding: 0, resource: currentInput },
+                            { binding: 1, resource: sampler },
+                        ],
+                    });
+                    cachedInputView = currentInput;
+                    cachedSampler = sampler;
+                }
 
                 const pass = encoder.beginRenderPass({
                     colorAttachments: [
@@ -478,7 +503,7 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                 });
 
                 pass.setPipeline(blitPipeline!);
-                pass.setBindGroup(0, bindGroup);
+                pass.setBindGroup(0, blitBindGroup!);
                 pass.draw(3);
                 pass.end();
             }
@@ -492,7 +517,7 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                     width,
                     height,
                     sceneView: colorView,
-                    depthView,
+                    zView,
                     entityIdView: eidView,
                     maskView,
                     canvasView,

package/src/standard/render/scene.ts

@@ -1,6 +1,7 @@
-export const SCENE_UNIFORM_SIZE = 512;
-export const DEPTH_FORMAT: GPUTextureFormat = "depth24plus";
-export const LINEAR_DEPTH_FORMAT: GPUTextureFormat = "r32float";
+export const SCENE_UNIFORM_SIZE = 352;
+export const SKY_UNIFORM_SIZE = 176;
+export const Z_FORMAT: GPUTextureFormat = "depth24plus";
+export const DEPTH_FORMAT: GPUTextureFormat = "r32float";
 export const MASK_FORMAT: GPUTextureFormat = "r8unorm";
 export const EID_FORMAT: GPUTextureFormat = "r32uint";
 export const COLOR_FORMAT: GPUTextureFormat = "rgba8unorm";
@@ -13,6 +14,14 @@ export function createSceneBuffer(device: GPUDevice): GPUBuffer {
     });
 }
 
+export function createSkyBuffer(device: GPUDevice): GPUBuffer {
+    return device.createBuffer({
+        label: "sky",
+        size: SKY_UNIFORM_SIZE,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+    });
+}
+
 export function ensureTextures(
     device: GPUDevice,
     format: GPUTextureFormat,
@@ -25,9 +34,9 @@ export function ensureTextures(
     if (existing && existing.width === width && existing.height === height) return;
 
     existing?.destroy();
-    textures.get("linear-depth")?.destroy();
-    textures.get("eid")?.destroy();
     textures.get("depth")?.destroy();
+    textures.get("eid")?.destroy();
+    textures.get("z")?.destroy();
     textures.get("mask")?.destroy();
     textures.get("pingA")?.destroy();
     textures.get("pingB")?.destroy();
@@ -42,11 +51,14 @@ export function ensureTextures(
             GPUTextureUsage.TEXTURE_BINDING,
     });
 
-    const linearDepth = device.createTexture({
-        label: "linear-depth",
+    const depth = device.createTexture({
+        label: "depth",
         size: { width, height },
-        format: LINEAR_DEPTH_FORMAT,
-        usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
+        format: DEPTH_FORMAT,
+        usage:
+            GPUTextureUsage.STORAGE_BINDING |
+            GPUTextureUsage.RENDER_ATTACHMENT |
+            GPUTextureUsage.TEXTURE_BINDING,
     });
 
     const eid = device.createTexture({
@@ -59,10 +71,10 @@ export function ensureTextures(
             GPUTextureUsage.TEXTURE_BINDING,
     });
 
-    const depth = device.createTexture({
-        label: "depth",
+    const z = device.createTexture({
+        label: "z",
         size: { width, height },
-        format: DEPTH_FORMAT,
+        format: Z_FORMAT,
         usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
     });
 
@@ -89,12 +101,12 @@ export function ensureTextures(
 
     textures.set("color", color);
     textureViews.set("color", color.createView());
-    textures.set("linear-depth", linearDepth);
-    textureViews.set("linear-depth", linearDepth.createView());
-    textures.set("eid", eid);
-    textureViews.set("eid", eid.createView());
     textures.set("depth", depth);
     textureViews.set("depth", depth.createView());
+    textures.set("eid", eid);
+    textureViews.set("eid", eid.createView());
+    textures.set("z", z);
+    textureViews.set("z", z.createView());
     textures.set("mask", mask);
     textureViews.set("mask", mask.createView());
     textures.set("pingA", pingA);

package/src/standard/render/surface/compile.ts

@@ -1,6 +1,6 @@
 import { WGSL_STRUCTS } from "./structs";
 import type { SurfaceData } from "./index";
-import { compileVertexBody, WGSL_LIGHTING_CALC } from "./wgsl";
+import { compileVertexBody, WGSL_LIGHTING_CALC } from "./shaders";
 
 export function compileSurface(data: SurfaceData): string {
     const vertexTransform = compileVertexBody(data.vertex);
@@ -26,11 +26,10 @@ fn vs(input: VertexInput) -> VertexOutput {
     let baseWorldPos = (world * vec4<f32>(scaledPos, 1.0)).xyz;
     let worldNormal = normalize((world * vec4<f32>(input.normal, 0.0)).xyz);
     let finalWorldPos = userVertexTransform(baseWorldPos, worldNormal, eid);
-    _ = shapes[eid]; // Keep binding alive
 
     var output: VertexOutput;
     output.position = scene.viewProj * vec4<f32>(finalWorldPos, 1.0);
-    output.color = colors[eid];
+    output.color = data[eid].baseColor;
     output.worldNormal = worldNormal;
     output.entityId = eid;
     output.worldPos = finalWorldPos;
@@ -40,14 +39,13 @@ fn vs(input: VertexInput) -> VertexOutput {
 @fragment
 fn fs(input: VertexOutput) -> FragmentOutput {
     let eid = input.entityId;
-    let pbrData = pbr[eid];
-    let emissionData = emission[eid];
+    let d = data[eid];
 
     var surface: SurfaceData;
     surface.baseColor = input.color.rgb;
-    surface.roughness = pbrData.x;
-    surface.metallic = pbrData.y;
-    surface.emission = emissionData.rgb * emissionData.a;
+    surface.roughness = d.pbr.x;
+    surface.metallic = d.pbr.y;
+    surface.emission = d.emission.rgb * d.emission.a;
     surface.normal = normalize(input.worldNormal);
     surface.worldPos = input.worldPos;