@footgun/cobalt 0.10.0 → 0.11.0

package/src/light/lights-buffer.js

@@ -1,4 +1,6 @@
-export const LIGHTS_STRUCT_DEFINITION = `
+class LightsBuffer {
+    static structs = {
+        definition: `
 struct Light {                //             align(16) size(48)
     color: vec3<f32>,         // offset(0)   align(16) size(12)
     radius: f32,              // offset(12)  align(4)  size(4)
@@ -13,59 +15,61 @@ struct LightsBuffer {         //             align(16)
     // padding
     lights: array<Light>,     // offset(16)  align(16)
 };
-`
-
-export const LIGHTS_BUFFER_STRUCTS = {
-    light: {
-        radius: { offset: 12 },
-        position: { offset: 16 },
-    },
-    lightsBuffer: {
-        lights: { offset: 16, stride: 48 },
-    },
-}
-
-export function computeLightsBufferByteLength(lightsCount) {
-    return (
-        LIGHTS_BUFFER_STRUCTS.lightsBuffer.lights.offset +
-        LIGHTS_BUFFER_STRUCTS.lightsBuffer.lights.stride * lightsCount
-    )
-}
-
-export function createLightsBuffer(device, maxLightsCount) {
-    const lightsBufferCpu = new ArrayBuffer(computeLightsBufferByteLength(maxLightsCount))
-    const lightsBufferGpu = device.createBuffer({
-        label: 'LightsBuffer buffer',
-        size: lightsBufferCpu.byteLength,
-        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.VERTEX,
-    })
-    const data = { lightsBufferCpu, lightsBufferGpu, maxLightsCount, lightsCount: 0 }
-    writeLightsBuffer(device, data, [])
-    return data
-}
-
-export function writeLightsBuffer(device, data, lights) {
-    if (lights.length > data.maxLightsCount) {
-        throw new Error(`Too many lights "${lights.length}", max is "${data.maxLightsCount}".`)
+`,
+        light: {
+            radius: { offset: 12 },
+            position: { offset: 16 },
+        },
+        lightsBuffer: {
+            lights: { offset: 16, stride: 48 },
+        },
+    };
+    device;
+    maxLightsCount;
+    currentLightsCount = 0;
+    buffer;
+    get gpuBuffer() {
+        return this.buffer.bufferGpu;
+    }
+    constructor(device, maxLightsCount) {
+        this.device = device;
+        this.maxLightsCount = maxLightsCount;
+        const bufferCpu = new ArrayBuffer(LightsBuffer.computeBufferBytesLength(maxLightsCount));
+        const bufferGpu = device.createBuffer({
+            label: "LightsBuffer buffer",
+            size: bufferCpu.byteLength,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.VERTEX,
+        });
+        this.buffer = { bufferCpu, bufferGpu };
+        this.setLights([]);
+    }
+    setLights(lights) {
+        if (lights.length > this.maxLightsCount) {
+            throw new Error(`Too many lights "${lights.length}", max is "${this.maxLightsCount}".`);
+        }
+        const newBufferLength = LightsBuffer.computeBufferBytesLength(lights.length);
+        new Uint32Array(this.buffer.bufferCpu, 0, 1).set([lights.length]);
+        lights.forEach((light, index) => {
+            new Float32Array(this.buffer.bufferCpu, LightsBuffer.structs.lightsBuffer.lights.offset + LightsBuffer.structs.lightsBuffer.lights.stride * index, 9).set([
+                ...light.color,
+                light.radius,
+                ...light.position,
+                light.intensity,
+                light.attenuationLinear,
+                light.attenuationExp
+            ]);
+        });
+        this.device.queue.writeBuffer(this.buffer.bufferGpu, 0, this.buffer.bufferCpu, 0, newBufferLength);
+        this.currentLightsCount = lights.length;
+    }
+    get lightsCount() {
+        return this.currentLightsCount;
+    }
+    destroy() {
+        this.buffer.bufferGpu.destroy();
+    }
+    static computeBufferBytesLength(lightsCount) {
+        return LightsBuffer.structs.lightsBuffer.lights.offset + LightsBuffer.structs.lightsBuffer.lights.stride * lightsCount;
     }
-    const { lightsBufferCpu, lightsBufferGpu } = data
-    const { offset, stride } = LIGHTS_BUFFER_STRUCTS.lightsBuffer.lights
-    new Uint32Array(lightsBufferCpu, 0, 1).set([lights.length])
-    lights.forEach((light, index) => {
-        new Float32Array(lightsBufferCpu, offset + stride * index, 9).set([
-            ...light.color,
-            light.radius,
-            ...light.position,
-            light.intensity,
-            light.attenuationLinear,
-            light.attenuationExp,
-        ])
-    })
-    const newBufferLength = computeLightsBufferByteLength(lights.length)
-    device.queue.writeBuffer(lightsBufferGpu, 0, lightsBufferCpu, 0, newBufferLength)
-    data.lightsCount = lights.length
-}
-
-export function destroyLightsBuffer(data) {
-    data.lightsBufferGpu.destroy()
 }
+export { LightsBuffer };

package/src/light/lights-renderer.js

@@ -0,0 +1,230 @@
+import { LightsBuffer } from "./lights-buffer.js";
+import { LightsTexture } from "./texture/lights-texture.js";
+
+class LightsRenderer {
+    device;
+    ambientLight = [0.2, 0.2, 0.2];
+    targetTexture;
+    renderPipeline;
+    uniformsBufferGpu;
+    bindgroup0;
+    bindgroup1;
+    renderBundle;
+    lightsBuffer;
+    lightsTexture;
+    constructor(params) {
+        this.device = params.device;
+        this.targetTexture = params.targetTexture;
+        this.lightsBuffer = params.lightsBuffer;
+        this.lightsTexture = new LightsTexture(params.device, params.lightsBuffer, params.lightsTextureProperties);
+        this.uniformsBufferGpu = params.device.createBuffer({
+            label: "LightsRenderer uniforms buffer",
+            size: 80,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        const shaderModule = params.device.createShaderModule({
+            label: "LightsRenderer shader module",
+            code: `
+struct Uniforms {                  //            align(16) size(80)
+    invertViewMatrix: mat4x4<f32>, // offset(0)  align(16) size(64)
+    ambientLight: vec3<f32>,       // offset(64) align(16) size(12)
+};
+
+${LightsBuffer.structs.definition}
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(0) @binding(1) var<storage,read> lightsBuffer: LightsBuffer;
+@group(0) @binding(2) var lightsTexture: texture_2d<f32>;
+@group(0) @binding(3) var lightsTextureSampler: sampler;
+
+@group(1) @binding(0) var albedoTexture: texture_2d<f32>;
+@group(1) @binding(1) var albedoSampler: sampler;
+
+struct VertexIn {
+    @builtin(vertex_index) vertexIndex: u32,
+};
+
+struct VertexOut {
+    @builtin(position) position: vec4<f32>,
+    @location(0) worldPosition: vec2<f32>,
+    @location(1) uv: vec2<f32>,
+};
+
+@vertex
+fn main_vertex(in: VertexIn) -> VertexOut {
+    const corners = array<vec2<f32>, 4>(
+        vec2<f32>(-1, -1),
+        vec2<f32>(1, -1),
+        vec2<f32>(-1, 1),
+        vec2<f32>(1, 1),
+    );
+    let screenPosition = corners[in.vertexIndex];
+
+    var out: VertexOut;
+    out.position = vec4<f32>(screenPosition, 0.0, 1.0);
+    out.worldPosition = (uniforms.invertViewMatrix * out.position).xy;
+    out.uv = 0.5 + 0.5 * screenPosition * vec2<f32>(1.0, -1.0);
+    return out;
+}
+
+struct FragmentOut {
+    @location(0) color: vec4<f32>,
+};
+
+const cellsGridSizeU = vec2<u32>(${this.lightsTexture.gridSize.x}, ${this.lightsTexture.gridSize.y});
+const cellsGridSizeF = vec2<f32>(${this.lightsTexture.gridSize.x}, ${this.lightsTexture.gridSize.y});
+
+fn sampleLightBaseIntensity(lightId: u32, localUv: vec2<f32>) -> f32 {
+    let cellIndex = lightId / 4u;
+    let indexInCell = lightId % 4u;
+
+    let cellIdU = vec2<u32>(
+        cellIndex % cellsGridSizeU.x,
+        cellIndex / cellsGridSizeU.x,
+    );
+    let cellIdF = vec2<f32>(cellIdU);
+    let uv = (cellIdF + localUv) / cellsGridSizeF;
+    let uvYInverted = vec2<f32>(uv.x, 1.0 - uv.y);
+    let sample = textureSampleLevel(lightsTexture, lightsTextureSampler, uvYInverted, 0.0);
+    let channel = vec4<f32>(
+        vec4<u32>(indexInCell) == vec4<u32>(0u, 1u, 2u, 3u),
+    );
+    return dot(sample, channel);
+}
+    
+fn compute_lights(worldPosition: vec2<f32>) -> vec3<f32> {
+    var color = vec3<f32>(uniforms.ambientLight);
+
+    const maxUvDistance = f32(${1 - 2 / params.lightsTextureProperties.resolutionPerLight});
+
+    let lightsCount = lightsBuffer.count;
+    for (var iLight = 0u; iLight < lightsCount; iLight++) {
+        let light = lightsBuffer.lights[iLight];
+        let lightSize = f32(${params.lightsTextureProperties.resolutionPerLight});
+        let relativePosition = (worldPosition - light.position) / lightSize;
+        if (max(abs(relativePosition.x), abs(relativePosition.y)) < maxUvDistance) {
+            let localUv = 0.5 + 0.5 * relativePosition;    
+            let lightIntensity = light.intensity * sampleLightBaseIntensity(iLight, localUv);
+            color += lightIntensity * light.color;
+        }
+    }
+
+    return color;
+}
+
+@fragment
+fn main_fragment(in: VertexOut) -> FragmentOut {
+    let light = compute_lights(in.worldPosition);
+    let albedo = textureSample(albedoTexture, albedoSampler, in.uv);
+    let color = albedo.rgb * light;
+
+    var out: FragmentOut;
+    out.color = vec4<f32>(color, 1.0);
+    return out;
+}
+            `,
+        });
+        this.renderPipeline = params.device.createRenderPipeline({
+            label: "LightsRenderer renderpipeline",
+            layout: "auto",
+            vertex: {
+                module: shaderModule,
+                entryPoint: "main_vertex",
+            },
+            fragment: {
+                module: shaderModule,
+                entryPoint: "main_fragment",
+                targets: [{
+                        format: this.targetTexture.format,
+                    }],
+            },
+            primitive: {
+                cullMode: "none",
+                topology: "triangle-strip",
+            },
+        });
+        const bindgroupLayout = this.renderPipeline.getBindGroupLayout(0);
+        this.bindgroup0 = params.device.createBindGroup({
+            label: "LightsRenderer bindgroup 0",
+            layout: bindgroupLayout,
+            entries: [
+                {
+                    binding: 0,
+                    resource: { buffer: this.uniformsBufferGpu },
+                },
+                {
+                    binding: 1,
+                    resource: { buffer: this.lightsBuffer.gpuBuffer },
+                },
+                {
+                    binding: 2,
+                    resource: this.lightsTexture.texture.createView({ label: "LightsRenderer lightsTexture view" }),
+                },
+                {
+                    binding: 3,
+                    resource: params.device.createSampler({
+                        label: "LightsRenderer sampler",
+                        addressModeU: "clamp-to-edge",
+                        addressModeV: "clamp-to-edge",
+                        magFilter: params.lightsTextureProperties.filtering,
+                        minFilter: params.lightsTextureProperties.filtering,
+                    }),
+                },
+            ]
+        });
+        this.bindgroup1 = this.buildBindgroup1(params.albedo);
+        this.renderBundle = this.buildRenderBundle();
+    }
+    computeLightsTexture(commandEncoder) {
+        this.lightsTexture.update(commandEncoder);
+    }
+    render(renderpassEncoder, invertVpMatrix) {
+        const uniformsBufferCpu = new ArrayBuffer(80);
+        new Float32Array(uniformsBufferCpu, 0, 16).set(invertVpMatrix);
+        new Float32Array(uniformsBufferCpu, 64, 3).set(this.ambientLight);
+        this.device.queue.writeBuffer(this.uniformsBufferGpu, 0, uniformsBufferCpu);
+        renderpassEncoder.executeBundles([this.renderBundle]);
+    }
+    setAlbedo(albedo) {
+        this.bindgroup1 = this.buildBindgroup1(albedo);
+        this.renderBundle = this.buildRenderBundle();
+    }
+    setAmbientLight(color) {
+        this.ambientLight = [...color];
+    }
+    setObstacles(segments) {
+        this.lightsTexture.setObstacles(segments);
+    }
+    destroy() {
+        this.uniformsBufferGpu.destroy();
+        this.lightsTexture.destroy();
+    }
+    buildBindgroup1(albedo) {
+        return this.device.createBindGroup({
+            label: "LightsRenderer bindgroup 1",
+            layout: this.renderPipeline.getBindGroupLayout(1),
+            entries: [
+                {
+                    binding: 0,
+                    resource: albedo.view,
+                },
+                {
+                    binding: 1,
+                    resource: albedo.sampler,
+                },
+            ]
+        });
+    }
+    buildRenderBundle() {
+        const renderBundleEncoder = this.device.createRenderBundleEncoder({
+            label: "LightsRenderer renderbundle encoder",
+            colorFormats: [this.targetTexture.format],
+        });
+        renderBundleEncoder.setPipeline(this.renderPipeline);
+        renderBundleEncoder.setBindGroup(0, this.bindgroup0);
+        renderBundleEncoder.setBindGroup(1, this.bindgroup1);
+        renderBundleEncoder.draw(4);
+        return renderBundleEncoder.finish({ label: "LightsRenderer renderbundle" });
+    }
+}
+export { LightsRenderer };

package/src/light/public-api.js

@@ -1,4 +1,5 @@
-import { setMaskObstacles } from './texture/lights-texture-mask.js'
+import { vec2 } from 'wgpu-matrix'
+import uuid from '../uuid.js'
 
 // public API to interact with a lighting/shadows node.
 
@@ -8,10 +9,10 @@ export function setLights(cobalt, node, lights) {
 }
 
 export function setAmbientLight(cobalt, node, color) {
-    node.data.ambientLight = [...color]
+    node.data.lightsRenderer.setAmbientLight(color)
 }
 
 export function setOccluders(cobalt, node, segmentsList) {
-    setMaskObstacles(cobalt.device, node.data, segmentsList)
+    node.data.lightsRenderer.setObstacles(segmentsList)
     node.data.lightsTextureNeedsUpdate = true
 }

package/src/light/texture/lights-texture-initializer.js

@@ -0,0 +1,175 @@
+import { LightsBuffer } from "../lights-buffer.js";
+
+class LightsTextureInitializer {
+    lightsBuffer;
+    renderPipeline;
+    bindgroup;
+    renderBundle;
+    constructor(device, lightsBuffer, lightsTexture, maxLightSize) {
+        this.lightsBuffer = lightsBuffer;
+        const shaderModule = device.createShaderModule({
+            label: "LightsTextureInitializer shader module",
+            code: `
+${LightsBuffer.structs.definition}
+
+@group(0) @binding(0) var<storage,read> lightsBuffer: LightsBuffer;
+
+struct VertexIn {
+    @builtin(vertex_index) vertexIndex: u32,
+};
+
+struct VertexOut {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+};
+
+const cellsGridSizeU = vec2<u32>(${lightsTexture.gridSize.x}, ${lightsTexture.gridSize.y});
+const cellsGridSizeF = vec2<f32>(${lightsTexture.gridSize.x}, ${lightsTexture.gridSize.y});
+
+@vertex
+fn main_vertex(in: VertexIn) -> VertexOut {
+    const corners = array<vec2<f32>, 4>(
+        vec2<f32>(-1, -1),
+        vec2<f32>(1, -1),
+        vec2<f32>(-1, 1),
+        vec2<f32>(1, 1),
+    );
+    let screenPosition = corners[in.vertexIndex];
+
+    var out: VertexOut;
+    out.position = vec4<f32>(screenPosition, 0.0, 1.0);
+    out.uv = (0.5 + 0.5 * screenPosition) * cellsGridSizeF;
+    return out;
+}
+
+struct FragmentOut {
+    @location(0) color: vec4<f32>,
+};
+
+struct LightProperties {
+    radius: f32,
+    intensity: f32,
+    attenuationLinear: f32,
+    attenuationExp: f32,
+};
+
+fn get_light_properties(lightId: u32) -> LightProperties {
+    var lightProperties: LightProperties;
+    if (lightId < lightsBuffer.count) {
+        let light = lightsBuffer.lights[lightId];
+        lightProperties.radius = light.radius;
+        lightProperties.intensity = 1.0;
+        lightProperties.attenuationLinear = light.attenuationLinear;
+        lightProperties.attenuationExp = light.attenuationExp;
+    } else {
+        lightProperties.radius = 0.0;
+        lightProperties.intensity = 0.0;
+        lightProperties.attenuationLinear = 0.0;
+        lightProperties.attenuationExp = 0.0;
+    }
+    return lightProperties;
+}
+
+@fragment
+fn main_fragment(in: VertexOut) -> FragmentOut {
+    let cellId = vec2<u32>(in.uv);
+
+    let lightIdFrom = 4u * (cellId.x + cellId.y * cellsGridSizeU.x);
+    let lightProperties = array<LightProperties, 4>(
+        get_light_properties(lightIdFrom + 0u),
+        get_light_properties(lightIdFrom + 1u),
+        get_light_properties(lightIdFrom + 2u),
+        get_light_properties(lightIdFrom + 3u),
+    );
+
+    let sizes = vec4<f32>(
+        lightProperties[0].radius,
+        lightProperties[1].radius,
+        lightProperties[2].radius,
+        lightProperties[3].radius,
+    );
+
+    let localUv = fract(in.uv);
+    let fromCenter = 2.0 * localUv - 1.0;
+    let uvDistanceFromCenter = distance(vec2<f32>(0,0), fromCenter);
+    let distancesFromCenter = vec4<f32>(uvDistanceFromCenter / sizes * f32(${maxLightSize}));
+
+    let intensities = vec4<f32>(
+        lightProperties[0].intensity * (1.0 + 1.0 * step(uvDistanceFromCenter, 0.01)),
+        lightProperties[1].intensity * (1.0 + 1.0 * step(uvDistanceFromCenter, 0.01)),
+        lightProperties[2].intensity * (1.0 + 1.0 * step(uvDistanceFromCenter, 0.01)),
+        lightProperties[3].intensity * (1.0 + 1.0 * step(uvDistanceFromCenter, 0.01)),
+    );
+    let attenuationsLinear = vec4<f32>(
+        lightProperties[0].attenuationLinear,
+        lightProperties[1].attenuationLinear,
+        lightProperties[2].attenuationLinear,
+        lightProperties[3].attenuationLinear,
+    );
+    let attenuationsExp = vec4<f32>(
+        lightProperties[0].attenuationExp,
+        lightProperties[1].attenuationExp,
+        lightProperties[2].attenuationExp,
+        lightProperties[3].attenuationExp,
+    );
+
+    var lightIntensities = intensities / (1.0 + distancesFromCenter * (attenuationsLinear + distancesFromCenter * attenuationsExp)); // base intensity equation
+    lightIntensities *= cos(distancesFromCenter * ${Math.PI / 2}); // soft limit;
+    lightIntensities *= step(distancesFromCenter, vec4<f32>(1.0)); // hard limit
+
+    var out: FragmentOut;
+    out.color = lightIntensities;
+    return out;
+}
+            `,
+        });
+        this.renderPipeline = device.createRenderPipeline({
+            label: "LightsTextureInitializer renderpipeline",
+            layout: "auto",
+            vertex: {
+                module: shaderModule,
+                entryPoint: "main_vertex",
+            },
+            fragment: {
+                module: shaderModule,
+                entryPoint: "main_fragment",
+                targets: [{
+                        format: lightsTexture.format,
+                    }],
+            },
+            primitive: {
+                cullMode: "none",
+                topology: "triangle-strip",
+            },
+            multisample: {
+                count: lightsTexture.sampleCount,
+            },
+        });
+        this.bindgroup = device.createBindGroup({
+            label: "LightsTextureInitializer bindgroup 0",
+            layout: this.renderPipeline.getBindGroupLayout(0),
+            entries: [
+                {
+                    binding: 0,
+                    resource: { buffer: this.lightsBuffer.gpuBuffer },
+                },
+            ]
+        });
+        const renderBundleEncoder = device.createRenderBundleEncoder({
+            label: "LightsTextureInitializer renderbundle encoder",
+            colorFormats: [lightsTexture.format],
+            sampleCount: lightsTexture.sampleCount,
+        });
+        renderBundleEncoder.setPipeline(this.renderPipeline);
+        renderBundleEncoder.setBindGroup(0, this.bindgroup);
+        renderBundleEncoder.draw(4);
+        this.renderBundle = renderBundleEncoder.finish({ label: "LightsTextureInitializer renderbundle" });
+    }
+    getRenderBundle() {
+        return this.renderBundle;
+    }
+    destroy() {
+        // nothing to do
+    }
+}
+export { LightsTextureInitializer };