@multiplekex/shallot 0.2.5 → 0.3.0

package/src/standard/render/postprocess.ts

@@ -241,22 +241,267 @@ export interface PostProcessConfig {
     getRenderSize?: () => { width: number; height: number };
 }
 
+interface PostProcessGPU {
+    pipeline: GPURenderPipeline;
+    blitPipeline: GPURenderPipeline;
+    uniformBuffer: GPUBuffer;
+    uniformData: ArrayBuffer;
+    uniformFloats: Float32Array;
+    uniformUints: Uint32Array;
+    linearSampler: GPUSampler;
+    nearestSampler: GPUSampler;
+}
+
+interface PostProcessCache {
+    mainBindGroup: GPUBindGroup | null;
+    blitBindGroup: GPUBindGroup | null;
+    inputView: GPUTextureView | null;
+    sampler: GPUSampler | null;
+    maskView: GPUTextureView | null;
+}
+
+async function preparePostProcess(device: GPUDevice): Promise<PostProcessGPU> {
+    const format: GPUTextureFormat = "bgra8unorm";
+
+    const [mainModule, blitModule] = await Promise.all([
+        device.createShaderModule({ code: shader }),
+        device.createShaderModule({ code: blitShader }),
+    ]);
+
+    const [pipeline, blitPipeline] = await Promise.all([
+        device.createRenderPipelineAsync({
+            layout: "auto",
+            vertex: { module: mainModule, entryPoint: "vertexMain" },
+            fragment: {
+                module: mainModule,
+                entryPoint: "fragmentMain",
+                targets: [{ format }],
+            },
+            primitive: { topology: "triangle-list" },
+        }),
+        device.createRenderPipelineAsync({
+            layout: "auto",
+            vertex: { module: blitModule, entryPoint: "vertexMain" },
+            fragment: {
+                module: blitModule,
+                entryPoint: "fragmentMain",
+                targets: [{ format }],
+            },
+            primitive: { topology: "triangle-list" },
+        }),
+    ]);
+
+    const uniformData = new ArrayBuffer(48);
+
+    return {
+        pipeline,
+        blitPipeline,
+        uniformBuffer: device.createBuffer({
+            size: 48,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        }),
+        uniformData,
+        uniformFloats: new Float32Array(uniformData),
+        uniformUints: new Uint32Array(uniformData),
+        linearSampler: device.createSampler({ magFilter: "linear", minFilter: "linear" }),
+        nearestSampler: device.createSampler({ magFilter: "nearest", minFilter: "nearest" }),
+    };
+}
+
+function blitToCanvas(
+    encoder: GPUCommandEncoder,
+    pipeline: GPURenderPipeline,
+    bindGroup: GPUBindGroup,
+    canvasView: GPUTextureView
+): void {
+    const pass = encoder.beginRenderPass({
+        colorAttachments: [
+            {
+                view: canvasView,
+                loadOp: "clear" as const,
+                storeOp: "store" as const,
+                clearValue: { r: 0, g: 0, b: 0, a: 1 },
+            },
+        ],
+    });
+    pass.setPipeline(pipeline);
+    pass.setBindGroup(0, bindGroup);
+    pass.draw(3);
+    pass.end();
+}
+
+function executeContributors(
+    contributors: { execute: (ctx: DrawContext) => void }[],
+    baseCtx: Omit<DrawContext, "inputView" | "outputView">,
+    pingAView: GPUTextureView,
+    pingBView: GPUTextureView,
+    currentInput: GPUTextureView,
+    pingPong: boolean
+): { currentInput: GPUTextureView; pingPong: boolean } {
+    for (const contributor of contributors) {
+        const currentOutput = pingPong ? pingAView : pingBView;
+        contributor.execute({
+            ...baseCtx,
+            inputView: currentInput,
+            outputView: currentOutput,
+        });
+        currentInput = currentOutput;
+        pingPong = !pingPong;
+    }
+    return { currentInput, pingPong };
+}
+
+function ensureBlitBindGroup(
+    device: GPUDevice,
+    gpu: PostProcessGPU,
+    cache: PostProcessCache,
+    inputView: GPUTextureView,
+    sampler: GPUSampler
+): GPUBindGroup {
+    if (inputView !== cache.inputView || sampler !== cache.sampler) {
+        cache.blitBindGroup = device.createBindGroup({
+            layout: gpu.blitPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: inputView },
+                { binding: 1, resource: sampler },
+            ],
+        });
+        cache.inputView = inputView;
+        cache.sampler = sampler;
+    }
+    return cache.blitBindGroup!;
+}
+
+function executePostProcess(
+    gpu: PostProcessGPU,
+    cache: PostProcessCache,
+    ctx: ExecutionContext,
+    config: PostProcessConfig
+): void {
+    const { device, encoder, canvasView, format, context } = ctx;
+    const width = context.canvas.width;
+    const height = context.canvas.height;
+    const colorView = ctx.getTextureView("color")!;
+    const maskView = ctx.getTextureView("mask")!;
+    const zView = ctx.getTextureView("z")!;
+    const eidView = ctx.getTextureView("eid")!;
+    const pingAView = ctx.getTextureView("pingA")!;
+    const pingBView = ctx.getTextureView("pingB")!;
+
+    const renderSize = config.getRenderSize?.();
+    const isUpscaling = renderSize && (renderSize.width !== width || renderSize.height !== height);
+    const sampler = isUpscaling ? gpu.nearestSampler : gpu.linearSampler;
+
+    let currentInput = colorView;
+    let pingPong = false;
+
+    const baseCtx = {
+        device,
+        encoder,
+        format,
+        width,
+        height,
+        sceneView: colorView,
+        zView,
+        entityIdView: eidView,
+        maskView,
+        canvasView,
+    };
+
+    const beforePostProcess = getDrawsByPass(config.state, Pass.BeforePost);
+    ({ currentInput, pingPong } = executeContributors(
+        beforePostProcess,
+        baseCtx,
+        pingAView,
+        pingBView,
+        currentInput,
+        pingPong
+    ));
+
+    const postProcessContributors = getDrawsByPass(config.state, Pass.Post);
+    const hasBuiltinEffects =
+        config.uniforms.tonemap ||
+        config.uniforms.fxaa ||
+        config.uniforms.vignetteStrength > 0 ||
+        config.uniforms.bloomIntensity > 0 ||
+        config.uniforms.quantize > 0;
+
+    if (hasBuiltinEffects || postProcessContributors.length > 0) {
+        ({ currentInput, pingPong } = executeContributors(
+            postProcessContributors,
+            baseCtx,
+            pingAView,
+            pingBView,
+            currentInput,
+            pingPong
+        ));
+
+        if (hasBuiltinEffects) {
+            let flags = 0;
+            if (config.uniforms.tonemap) flags |= FLAG_TONEMAP;
+            if (config.uniforms.fxaa) flags |= FLAG_FXAA;
+            if (config.uniforms.vignetteStrength > 0) flags |= FLAG_VIGNETTE;
+            if (config.uniforms.bloomIntensity > 0) flags |= FLAG_BLOOM;
+            if (config.uniforms.quantize > 0) flags |= FLAG_QUANTIZE;
+
+            gpu.uniformFloats[0] = config.uniforms.exposure;
+            gpu.uniformFloats[1] = config.uniforms.vignetteStrength;
+            gpu.uniformFloats[2] = config.uniforms.vignetteInner;
+            gpu.uniformFloats[3] = config.uniforms.vignetteOuter;
+            gpu.uniformFloats[4] = 1.0 / width;
+            gpu.uniformFloats[5] = 1.0 / height;
+            gpu.uniformUints[6] = flags;
+            gpu.uniformFloats[7] = config.uniforms.bloomIntensity;
+            gpu.uniformFloats[8] = config.uniforms.bloomThreshold;
+            gpu.uniformFloats[9] = config.uniforms.bloomRadius;
+            gpu.uniformFloats[10] = config.uniforms.quantize;
+
+            device.queue.writeBuffer(gpu.uniformBuffer, 0, gpu.uniformData);
+
+            if (
+                currentInput !== cache.inputView ||
+                sampler !== cache.sampler ||
+                maskView !== cache.maskView
+            ) {
+                cache.mainBindGroup = device.createBindGroup({
+                    layout: gpu.pipeline.getBindGroupLayout(0),
+                    entries: [
+                        { binding: 0, resource: currentInput },
+                        { binding: 1, resource: sampler },
+                        { binding: 2, resource: { buffer: gpu.uniformBuffer } },
+                        { binding: 3, resource: maskView },
+                    ],
+                });
+                cache.inputView = currentInput;
+                cache.sampler = sampler;
+                cache.maskView = maskView;
+            }
+
+            blitToCanvas(encoder, gpu.pipeline, cache.mainBindGroup!, canvasView);
+        } else {
+            const bindGroup = ensureBlitBindGroup(device, gpu, cache, currentInput, sampler);
+            blitToCanvas(encoder, gpu.blitPipeline, bindGroup, canvasView);
+        }
+    } else {
+        const bindGroup = ensureBlitBindGroup(device, gpu, cache, currentInput, sampler);
+        blitToCanvas(encoder, gpu.blitPipeline, bindGroup, canvasView);
+    }
+
+    const afterPostProcess = getDrawsByPass(config.state, Pass.AfterPost);
+    for (const contributor of afterPostProcess) {
+        contributor.execute(baseCtx);
+    }
+}
+
 export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
-    let pipeline: GPURenderPipeline | null = null;
-    let blitPipeline: GPURenderPipeline | null = null;
-    let uniformBuffer: GPUBuffer | null = null;
-    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;
+    let gpu: PostProcessGPU | null = null;
+    const cache: PostProcessCache = {
+        mainBindGroup: null,
+        blitBindGroup: null,
+        inputView: null,
+        sampler: null,
+        maskView: null,
+    };
 
     return {
         id: "postprocess",
@@ -269,261 +514,12 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
         outputs: [{ id: "framebuffer", access: "write" }],
 
         async prepare(device: GPUDevice) {
-            const format: GPUTextureFormat = "bgra8unorm";
-
-            const [mainModule, blitModule] = await Promise.all([
-                device.createShaderModule({ code: shader }),
-                device.createShaderModule({ code: blitShader }),
-            ]);
-
-            [pipeline, blitPipeline] = await Promise.all([
-                device.createRenderPipelineAsync({
-                    layout: "auto",
-                    vertex: { module: mainModule, entryPoint: "vertexMain" },
-                    fragment: {
-                        module: mainModule,
-                        entryPoint: "fragmentMain",
-                        targets: [{ format }],
-                    },
-                    primitive: { topology: "triangle-list" },
-                }),
-                device.createRenderPipelineAsync({
-                    layout: "auto",
-                    vertex: { module: blitModule, entryPoint: "vertexMain" },
-                    fragment: {
-                        module: blitModule,
-                        entryPoint: "fragmentMain",
-                        targets: [{ format }],
-                    },
-                    primitive: { topology: "triangle-list" },
-                }),
-            ]);
-
-            uniformBuffer = device.createBuffer({
-                size: 48,
-                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-            });
-
-            linearSampler = device.createSampler({
-                magFilter: "linear",
-                minFilter: "linear",
-            });
-
-            nearestSampler = device.createSampler({
-                magFilter: "nearest",
-                minFilter: "nearest",
-            });
-
-            uniformData = new ArrayBuffer(48);
-            uniformFloats = new Float32Array(uniformData);
-            uniformUints = new Uint32Array(uniformData);
+            gpu = await preparePostProcess(device);
         },
 
         execute(ctx: ExecutionContext) {
-            const { device, encoder, canvasView, format, context } = ctx;
-            const width = context.canvas.width;
-            const height = context.canvas.height;
-            const colorView = ctx.getTextureView("color")!;
-            const maskView = ctx.getTextureView("mask")!;
-            const zView = ctx.getTextureView("z")!;
-            const eidView = ctx.getTextureView("eid")!;
-            const pingAView = ctx.getTextureView("pingA")!;
-            const pingBView = ctx.getTextureView("pingB")!;
-
-            const renderSize = config.getRenderSize?.();
-            const isUpscaling =
-                renderSize && (renderSize.width !== width || renderSize.height !== height);
-            const sampler = isUpscaling ? nearestSampler! : linearSampler!;
-
-            let currentInput = colorView;
-            let currentOutput = pingAView;
-            let pingPong = false;
-
-            const beforePostProcess = getDrawsByPass(config.state, Pass.BeforePost);
-            for (const contributor of beforePostProcess) {
-                const passCtx: DrawContext = {
-                    device,
-                    encoder,
-                    format,
-                    width,
-                    height,
-                    sceneView: colorView,
-                    zView,
-                    entityIdView: eidView,
-                    maskView,
-                    canvasView,
-                    inputView: currentInput,
-                    outputView: currentOutput,
-                };
-                contributor.execute(passCtx);
-
-                currentInput = currentOutput;
-                currentOutput = pingPong ? pingAView : pingBView;
-                pingPong = !pingPong;
-            }
-
-            const postProcessContributors = getDrawsByPass(config.state, Pass.Post);
-            const hasBuiltinEffects =
-                config.uniforms.tonemap ||
-                config.uniforms.fxaa ||
-                config.uniforms.vignetteStrength > 0 ||
-                config.uniforms.bloomIntensity > 0 ||
-                config.uniforms.quantize > 0;
-
-            if (hasBuiltinEffects || postProcessContributors.length > 0) {
-                for (const contributor of postProcessContributors) {
-                    const passCtx: DrawContext = {
-                        device,
-                        encoder,
-                        format,
-                        width,
-                        height,
-                        sceneView: colorView,
-                        zView,
-                        entityIdView: eidView,
-                        maskView,
-                        canvasView,
-                        inputView: currentInput,
-                        outputView: currentOutput,
-                    };
-                    contributor.execute(passCtx);
-
-                    currentInput = currentOutput;
-                    currentOutput = pingPong ? pingAView : pingBView;
-                    pingPong = !pingPong;
-                }
-
-                if (hasBuiltinEffects) {
-                    let flags = 0;
-                    if (config.uniforms.tonemap) flags |= FLAG_TONEMAP;
-                    if (config.uniforms.fxaa) flags |= FLAG_FXAA;
-                    if (config.uniforms.vignetteStrength > 0) flags |= FLAG_VIGNETTE;
-                    if (config.uniforms.bloomIntensity > 0) flags |= FLAG_BLOOM;
-                    if (config.uniforms.quantize > 0) flags |= FLAG_QUANTIZE;
-
-                    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: [
-                            {
-                                view: canvasView,
-                                loadOp: "clear" as const,
-                                storeOp: "store" as const,
-                                clearValue: { r: 0, g: 0, b: 0, a: 1 },
-                            },
-                        ],
-                    });
-
-                    pass.setPipeline(pipeline!);
-                    pass.setBindGroup(0, mainBindGroup!);
-                    pass.draw(3);
-                    pass.end();
-                } else {
-                    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: [
-                            {
-                                view: canvasView,
-                                loadOp: "clear" as const,
-                                storeOp: "store" as const,
-                                clearValue: { r: 0, g: 0, b: 0, a: 1 },
-                            },
-                        ],
-                    });
-
-                    pass.setPipeline(blitPipeline!);
-                    pass.setBindGroup(0, blitBindGroup!);
-                    pass.draw(3);
-                    pass.end();
-                }
-            } else {
-                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: [
-                        {
-                            view: canvasView,
-                            loadOp: "clear" as const,
-                            storeOp: "store" as const,
-                            clearValue: { r: 0, g: 0, b: 0, a: 1 },
-                        },
-                    ],
-                });
-
-                pass.setPipeline(blitPipeline!);
-                pass.setBindGroup(0, blitBindGroup!);
-                pass.draw(3);
-                pass.end();
-            }
-
-            const afterPostProcess = getDrawsByPass(config.state, Pass.AfterPost);
-            for (const contributor of afterPostProcess) {
-                const passCtx: DrawContext = {
-                    device,
-                    encoder,
-                    format,
-                    width,
-                    height,
-                    sceneView: colorView,
-                    zView,
-                    entityIdView: eidView,
-                    maskView,
-                    canvasView,
-                };
-                contributor.execute(passCtx);
-            }
+            if (!gpu) return;
+            executePostProcess(gpu, cache, ctx, config);
         },
     };
 }

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

@@ -1,10 +1,11 @@
 import { MAX_ENTITIES } from "../../../core";
 import { setTraits } from "../../../core/component";
+import { WGSL_STRUCTS } from "./structs";
+import { compileVertexBody, WGSL_LIGHTING_CALC, SPECULAR_WGSL } from "./shaders";
 
 export interface SurfaceData {
     vertex?: string;
     fragment?: string;
-    lit?: boolean;
 }
 
 interface ComposedSurface extends SurfaceData {
@@ -21,23 +22,28 @@ export function createSurfaceRegistry(): SurfaceRegistry {
     return registry;
 }
 
+const surfaceNames = new Map<string, number>();
+
 function initBuiltIns(registry: SurfaceRegistry): void {
-    registry.surfaces.push({ lit: true });
+    registry.surfaces.push({});
 
     registry.surfaces.push({
-        lit: false,
         fragment: `(*surface).baseColor = (*surface).normal * 0.5 + 0.5;`,
     });
 
     registry.surfaces.push({
-        lit: false,
         fragment: `
     let depth = position.z;
     let remapped = pow(1.0 - depth, 0.1);
     (*surface).baseColor = vec3(remapped);`,
     });
 
-    registry.surfaces.push({ lit: false });
+    registry.surfaces.push({});
+
+    surfaceNames.set("default", 0);
+    surfaceNames.set("normals", 1);
+    surfaceNames.set("depth", 2);
+    surfaceNames.set("albedo", 3);
 }
 
 export const SurfaceType = {
@@ -73,14 +79,11 @@ export function composeSurfaces(registry: SurfaceRegistry, ...ids: number[]): nu
 
     const vertexParts: string[] = [];
     const fragmentParts: string[] = [];
-    let lit = true;
 
     for (const id of validIds) {
         const s = registry.surfaces[id];
         if (!s) continue;
 
-        if (s.lit === false) lit = false;
-
         if ("composed" in s) {
             for (const composedId of s.composed) {
                 const inner = registry.surfaces[composedId];
@@ -96,7 +99,6 @@ export function composeSurfaces(registry: SurfaceRegistry, ...ids: number[]): nu
     const composedData: ComposedSurface = {
         vertex: vertexParts.length > 0 ? vertexParts.join("\n    ") : undefined,
         fragment: fragmentParts.length > 0 ? fragmentParts.join("\n    ") : undefined,
-        lit,
         composed: validIds,
     };
 
@@ -107,8 +109,14 @@ export function composeSurfaces(registry: SurfaceRegistry, ...ids: number[]): nu
 
 const defaultRegistry = createSurfaceRegistry();
 
-export function surface(data: SurfaceData): number {
-    return registerSurface(defaultRegistry, data);
+export function surface(data: SurfaceData, name?: string): number {
+    const id = registerSurface(defaultRegistry, data);
+    if (name) surfaceNames.set(name, id);
+    return id;
+}
+
+export function getSurfaceByName(name: string): number | undefined {
+    return surfaceNames.get(name);
 }
 
 export function getDefaultSurface(id: number): SurfaceData | undefined {
@@ -120,6 +128,7 @@ export function getDefaultAllSurfaces(): SurfaceData[] {
 }
 
 export function clearDefaultSurfaces(): void {
+    surfaceNames.clear();
     clearSurfaces(defaultRegistry);
 }
 
@@ -141,6 +150,66 @@ setTraits(Surface, {
     defaults: () => ({
         type: SurfaceType.Default,
     }),
+    parse: { type: getSurfaceByName },
 });
 
-export { compileSurface } from "./compile";
+export function compileSurface(data: SurfaceData): string {
+    const vertexTransform = compileVertexBody(data.vertex);
+
+    const fragmentBody = data.fragment ?? "";
+
+    return /* wgsl */ `
+${WGSL_STRUCTS}
+${SPECULAR_WGSL}
+
+fn userVertexTransform(worldPos: vec3<f32>, normal: vec3<f32>, eid: u32) -> vec3<f32> {
+    ${vertexTransform}
+}
+
+fn userFragment(surface: ptr<function, SurfaceData>, position: vec4<f32>) {
+    ${fragmentBody}
+}
+
+@vertex
+fn vs(input: VertexInput) -> VertexOutput {
+    let eid = entityIds[input.instance];
+    let world = matrices[eid];
+    let scaledPos = input.position * sizes[eid].xyz;
+    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);
+
+    var output: VertexOutput;
+    output.position = scene.viewProj * vec4<f32>(finalWorldPos, 1.0);
+    output.color = data[eid].baseColor;
+    output.worldNormal = worldNormal;
+    output.entityId = eid;
+    output.worldPos = finalWorldPos;
+    return output;
+}
+
+@fragment
+fn fs(input: VertexOutput) -> FragmentOutput {
+    let eid = input.entityId;
+    let d = data[eid];
+
+    var surface: SurfaceData;
+    surface.baseColor = input.color.rgb;
+    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;
+
+    userFragment(&surface, input.position);
+
+    let shadowFactor = 1.0;
+    ${WGSL_LIGHTING_CALC}
+
+    var output: FragmentOutput;
+    output.color = vec4<f32>(litColor, input.color.a);
+    output.entityId = input.entityId;
+    return output;
+}
+`;
+}