@woosh/meep-engine 2.33.60 → 2.33.64

package/engine/graphics/render/webgpu/sample/main.js

@@ -0,0 +1,604 @@
+import { mat4, vec3, vec4 } from 'gl-matrix';
+import lightUpdate from './lightUpdate.wgsl';
+import vertexWriteGBuffers from './vertexWriteGBuffers.wgsl';
+import fragmentWriteGBuffers from './fragmentWriteGBuffers.wgsl';
+import vertexTextureQuad from './vertexTextureQuad.wgsl';
+import fragmentGBuffersDebugView from './fragmentGBuffersDebugView.wgsl';
+import fragmentDeferredRendering from './fragmentDeferredRendering.wgsl';
+import dat from "dat.gui";
+import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader.js";
+import { noop } from "../../../../../core/function/Functions.js";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { MeshInstance } from "./MeshInstance.js";
+
+const kMaxNumLights = 1024;
+const lightExtentMin = vec3.fromValues(-50, -30, -50);
+const lightExtentMax = vec3.fromValues(50, 50, 50);
+
+/**
+ *
+ * @param {string} path
+ * @return {Promise<THREE.BufferGeometry>}
+ */
+function load_geometry(path) {
+    const loader = new PLYLoader();
+
+    return new Promise((resolve, reject) => {
+
+        loader.load(path, resolve, noop, reject);
+    });
+}
+
+function load_geometry_gltf(path) {
+    const loader = new GLTFLoader();
+
+    return new Promise((resolve, reject) => {
+        loader.load(path, (gltf) => {
+            let r = null;
+
+            gltf.scene.traverse(o => {
+                if (o.isMesh) {
+                    r = o.geometry;
+                }
+            });
+
+            resolve(r);
+
+        }, noop, reject);
+    });
+}
+
+const init = async ({ canvasRef, gui }) => {
+
+    // const mesh = await load_geometry("data/models/stanford/dragon_recon/dragon_vrip.ply");
+    const mesh = await load_geometry_gltf("data/models/stanford/DragonAttenuation.glb");
+
+
+    const adapter = await navigator.gpu.requestAdapter();
+    const device = await adapter.requestDevice();
+
+    /**
+     *
+     * @type {HTMLCanvasElement}
+     */
+    const canvas = canvasRef.current;
+
+    if (canvas === null) {
+        return;
+    }
+
+    /**
+     *
+     * @type {GPUCanvasContext}
+     */
+    const context = canvas.getContext('webgpu');
+
+    const devicePixelRatio = window.devicePixelRatio || 1;
+
+    const presentationSize = [
+        canvas.clientWidth * devicePixelRatio,
+        canvas.clientHeight * devicePixelRatio,
+    ];
+
+    const aspect = presentationSize[0] / presentationSize[1];
+
+    const presentationFormat = context.getPreferredFormat(adapter);
+
+    context.configure({
+        device,
+        format: presentationFormat,
+        size: presentationSize,
+    });
+
+    const m_instance = new MeshInstance();
+    m_instance.geometry = mesh;
+    m_instance.init(device);
+
+    // GBuffer texture render targets
+    const gBufferTexture2DFloat = device.createTexture({
+        size: [...presentationSize, 3],
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        format: 'rgba32float',
+    });
+    const gBufferTextureAlbedo = device.createTexture({
+        size: presentationSize,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        format: 'bgra8unorm',
+    });
+    const gBufferTextureViews = [
+        gBufferTexture2DFloat.createView({ baseArrayLayer: 0, arrayLayerCount: 1 }),
+        gBufferTexture2DFloat.createView({ baseArrayLayer: 1, arrayLayerCount: 1 }),
+        gBufferTextureAlbedo.createView(),
+    ];
+    const vertexBuffers = [
+        {
+            arrayStride: Float32Array.BYTES_PER_ELEMENT * 8,
+            attributes: [
+                {
+                    // position
+                    shaderLocation: 0,
+                    offset: 0,
+                    format: 'float32x3',
+                },
+                {
+                    // normal
+                    shaderLocation: 1,
+                    offset: Float32Array.BYTES_PER_ELEMENT * 3,
+                    format: 'float32x3',
+                },
+                {
+                    // uv
+                    shaderLocation: 2,
+                    offset: Float32Array.BYTES_PER_ELEMENT * 6,
+                    format: 'float32x2',
+                },
+            ],
+        },
+    ];
+    const primitive = {
+        topology: 'triangle-list',
+        cullMode: 'back',
+    };
+    const writeGBuffersPipeline = device.createRenderPipeline({
+        vertex: {
+            module: device.createShaderModule({
+                code: vertexWriteGBuffers,
+            }),
+            entryPoint: 'main',
+            buffers: vertexBuffers,
+        },
+        fragment: {
+            module: device.createShaderModule({
+                code: fragmentWriteGBuffers,
+            }),
+            entryPoint: 'main',
+            targets: [
+                // position
+                { format: 'rgba32float' },
+                // normal
+                { format: 'rgba32float' },
+                // albedo
+                { format: 'bgra8unorm' },
+            ],
+        },
+        depthStencil: {
+            depthWriteEnabled: true,
+            depthCompare: 'less',
+            format: 'depth24plus',
+        },
+        primitive,
+    });
+    const gBufferTexturesBindGroupLayout = device.createBindGroupLayout({
+        entries: [
+            {
+                binding: 0,
+                visibility: GPUShaderStage.FRAGMENT,
+                texture: {
+                    sampleType: 'unfilterable-float',
+                },
+            },
+            {
+                binding: 1,
+                visibility: GPUShaderStage.FRAGMENT,
+                texture: {
+                    sampleType: 'unfilterable-float',
+                },
+            },
+            {
+                binding: 2,
+                visibility: GPUShaderStage.FRAGMENT,
+                texture: {
+                    sampleType: 'unfilterable-float',
+                },
+            },
+        ],
+    });
+    const lightsBufferBindGroupLayout = device.createBindGroupLayout({
+        entries: [
+            {
+                binding: 0,
+                visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE,
+                buffer: {
+                    type: 'storage',
+                },
+            },
+            {
+                binding: 1,
+                visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE,
+                buffer: {
+                    type: 'uniform',
+                },
+            },
+        ],
+    });
+    const canvasSizeUniformBindGroupLayout = device.createBindGroupLayout({
+        entries: [
+            {
+                binding: 0,
+                visibility: GPUShaderStage.FRAGMENT,
+                buffer: {
+                    type: 'uniform',
+                },
+            },
+        ],
+    });
+    const gBuffersDebugViewPipeline = device.createRenderPipeline({
+        layout: device.createPipelineLayout({
+            bindGroupLayouts: [
+                gBufferTexturesBindGroupLayout,
+                canvasSizeUniformBindGroupLayout,
+            ],
+        }),
+        vertex: {
+            module: device.createShaderModule({
+                code: vertexTextureQuad,
+            }),
+            entryPoint: 'main',
+        },
+        fragment: {
+            module: device.createShaderModule({
+                code: fragmentGBuffersDebugView,
+            }),
+            entryPoint: 'main',
+            targets: [
+                {
+                    format: presentationFormat,
+                },
+            ],
+        },
+        primitive,
+    });
+    const deferredRenderPipeline = device.createRenderPipeline({
+        layout: device.createPipelineLayout({
+            bindGroupLayouts: [
+                gBufferTexturesBindGroupLayout,
+                lightsBufferBindGroupLayout,
+                canvasSizeUniformBindGroupLayout,
+            ],
+        }),
+        vertex: {
+            module: device.createShaderModule({
+                code: vertexTextureQuad,
+            }),
+            entryPoint: 'main',
+        },
+        fragment: {
+            module: device.createShaderModule({
+                code: fragmentDeferredRendering,
+            }),
+            entryPoint: 'main',
+            targets: [
+                {
+                    format: presentationFormat,
+                },
+            ],
+        },
+        primitive,
+    });
+    const depthTexture = device.createTexture({
+        size: presentationSize,
+        format: 'depth24plus',
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+    const writeGBufferPassDescriptor = {
+        colorAttachments: [
+            {
+                view: gBufferTextureViews[0],
+                loadValue: {
+                    r: Number.MAX_VALUE,
+                    g: Number.MAX_VALUE,
+                    b: Number.MAX_VALUE,
+                    a: 1.0,
+                },
+                storeOp: 'store',
+            },
+            {
+                view: gBufferTextureViews[1],
+                loadValue: { r: 0.0, g: 0.0, b: 1.0, a: 1.0 },
+                storeOp: 'store',
+            },
+            {
+                view: gBufferTextureViews[2],
+                loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
+                storeOp: 'store',
+            },
+        ],
+        depthStencilAttachment: {
+            view: depthTexture.createView(),
+            depthLoadValue: 1.0,
+            depthStoreOp: 'store',
+            stencilLoadValue: 0,
+            stencilStoreOp: 'store',
+        },
+    };
+    const textureQuadPassDescriptor = {
+        colorAttachments: [
+            {
+                // view is acquired and set in render loop.
+                view: undefined,
+                loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
+                storeOp: 'store',
+            },
+        ],
+    };
+    const settings = {
+        mode: 'rendering',
+        numLights:1,
+    };
+    const configUniformBuffer = (() => {
+        const buffer = device.createBuffer({
+            size: Uint32Array.BYTES_PER_ELEMENT,
+            mappedAtCreation: true,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        new Uint32Array(buffer.getMappedRange())[0] = settings.numLights;
+        buffer.unmap();
+        return buffer;
+    })();
+    gui.add(settings, 'mode', ['rendering', 'gBuffers view']);
+    gui
+        .add(settings, 'numLights', 1, kMaxNumLights)
+        .step(1)
+        .onChange(() => {
+            device.queue.writeBuffer(configUniformBuffer, 0, new Uint32Array([settings.numLights]));
+        });
+    const modelUniformBuffer = device.createBuffer({
+        size: 4 * 16 * 2,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    const cameraUniformBuffer = device.createBuffer({
+        size: 4 * 16,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    const sceneUniformBindGroup = device.createBindGroup({
+        layout: writeGBuffersPipeline.getBindGroupLayout(0),
+        entries: [
+            {
+                binding: 0,
+                resource: {
+                    buffer: modelUniformBuffer,
+                },
+            },
+            {
+                binding: 1,
+                resource: {
+                    buffer: cameraUniformBuffer,
+                },
+            },
+        ],
+    });
+    const canvasSizeUniformBuffer = device.createBuffer({
+        size: 4 * 2,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    const canvasSizeUniformBindGroup = device.createBindGroup({
+        layout: canvasSizeUniformBindGroupLayout,
+        entries: [
+            {
+                binding: 0,
+                resource: {
+                    buffer: canvasSizeUniformBuffer,
+                },
+            },
+        ],
+    });
+    const gBufferTexturesBindGroup = device.createBindGroup({
+        layout: gBufferTexturesBindGroupLayout,
+        entries: [
+            {
+                binding: 0,
+                resource: gBufferTextureViews[0],
+            },
+            {
+                binding: 1,
+                resource: gBufferTextureViews[1],
+            },
+            {
+                binding: 2,
+                resource: gBufferTextureViews[2],
+            },
+        ],
+    });
+    // Lights data are uploaded in a storage buffer
+    // which could be updated/culled/etc. with a compute shader
+    const extent = vec3.create();
+    vec3.sub(extent, lightExtentMax, lightExtentMin);
+    const lightDataStride = 8;
+    const bufferSizeInByte = Float32Array.BYTES_PER_ELEMENT * lightDataStride * kMaxNumLights;
+    const lightsBuffer = device.createBuffer({
+        size: bufferSizeInByte,
+        usage: GPUBufferUsage.STORAGE,
+        mappedAtCreation: true,
+    });
+    // We randomaly populate lights randomly in a box range
+    // And simply move them along y-axis per frame to show they are
+    // dynamic lightings
+    const lightData = new Float32Array(lightsBuffer.getMappedRange());
+    const tmpVec4 = vec4.create();
+    let offset = 0;
+    for (let i = 0; i < kMaxNumLights; i++) {
+        offset = lightDataStride * i;
+        // position
+        for (let i = 0; i < 3; i++) {
+            tmpVec4[i] = Math.random() * extent[i] + lightExtentMin[i];
+        }
+        tmpVec4[3] = 1;
+        lightData.set(tmpVec4, offset);
+        // color
+        tmpVec4[0] = Math.random() * 2;
+        tmpVec4[1] = Math.random() * 2;
+        tmpVec4[2] = Math.random() * 2;
+        // radius
+        tmpVec4[3] = 20.0;
+        lightData.set(tmpVec4, offset + 4);
+    }
+    lightsBuffer.unmap();
+    const lightExtentBuffer = device.createBuffer({
+        size: 4 * 8,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    const lightExtentData = new Float32Array(8);
+    lightExtentData.set(lightExtentMin, 0);
+    lightExtentData.set(lightExtentMax, 4);
+    device.queue.writeBuffer(lightExtentBuffer, 0, lightExtentData.buffer, lightExtentData.byteOffset, lightExtentData.byteLength);
+    const lightUpdateComputePipeline = device.createComputePipeline({
+        compute: {
+            module: device.createShaderModule({
+                code: lightUpdate,
+            }),
+            entryPoint: 'main',
+        },
+    });
+    const lightsBufferBindGroup = device.createBindGroup({
+        layout: lightsBufferBindGroupLayout,
+        entries: [
+            {
+                binding: 0,
+                resource: {
+                    buffer: lightsBuffer,
+                },
+            },
+            {
+                binding: 1,
+                resource: {
+                    buffer: configUniformBuffer,
+                },
+            },
+        ],
+    });
+    const lightsBufferComputeBindGroup = device.createBindGroup({
+        layout: lightUpdateComputePipeline.getBindGroupLayout(0),
+        entries: [
+            {
+                binding: 0,
+                resource: {
+                    buffer: lightsBuffer,
+                },
+            },
+            {
+                binding: 1,
+                resource: {
+                    buffer: configUniformBuffer,
+                },
+            },
+            {
+                binding: 2,
+                resource: {
+                    buffer: lightExtentBuffer,
+                },
+            },
+        ],
+    });
+    //--------------------
+    // Scene matrices
+    const eyePosition = vec3.fromValues(0, 50, -100);
+    const upVector = vec3.fromValues(0, 1, 0);
+    const origin = vec3.fromValues(0, 0, 0);
+    const projectionMatrix = mat4.create();
+    mat4.perspective(projectionMatrix, (2 * Math.PI) / 5, aspect, 1, 2000.0);
+    const viewMatrix = mat4.create();
+    mat4.lookAt(viewMatrix, eyePosition, origin, upVector);
+    const viewProjMatrix = mat4.create();
+    mat4.multiply(viewProjMatrix, projectionMatrix, viewMatrix);
+    // Move the model so it's centered.
+    const modelMatrix = mat4.create();
+    mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0, -5, 0));
+    mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0, -40, 0));
+    const cameraMatrixData = viewProjMatrix;
+    device.queue.writeBuffer(cameraUniformBuffer, 0, cameraMatrixData.buffer, cameraMatrixData.byteOffset, cameraMatrixData.byteLength);
+    const modelData = modelMatrix;
+    device.queue.writeBuffer(modelUniformBuffer, 0, modelData.buffer, modelData.byteOffset, modelData.byteLength);
+    const invertTransposeModelMatrix = mat4.create();
+    mat4.invert(invertTransposeModelMatrix, modelMatrix);
+    mat4.transpose(invertTransposeModelMatrix, invertTransposeModelMatrix);
+    const normalModelData = invertTransposeModelMatrix;
+    device.queue.writeBuffer(modelUniformBuffer, 64, normalModelData.buffer, normalModelData.byteOffset, normalModelData.byteLength);
+    // Pass the canvas size to shader to help sample from gBuffer textures using coord
+    const canvasSizeData = new Float32Array(presentationSize);
+    device.queue.writeBuffer(canvasSizeUniformBuffer, 0, canvasSizeData.buffer, canvasSizeData.byteOffset, canvasSizeData.byteLength);
+
+    // Rotates the camera around the origin based on time.
+    function getCameraViewProjMatrix() {
+        const eyePosition = vec3.fromValues(0, 50, -10);
+        const rad = Math.PI * (Date.now() / 5000);
+        vec3.rotateY(eyePosition, eyePosition, origin, rad);
+        const viewMatrix = mat4.create();
+        mat4.lookAt(viewMatrix, eyePosition, origin, upVector);
+        mat4.multiply(viewProjMatrix, projectionMatrix, viewMatrix);
+        return viewProjMatrix;
+    }
+
+    function frame() {
+        // Sample is no longer the active page.
+        if (!canvas)
+            return;
+        const cameraViewProj = getCameraViewProjMatrix();
+        device.queue.writeBuffer(cameraUniformBuffer, 0, cameraViewProj.buffer, cameraViewProj.byteOffset, cameraViewProj.byteLength);
+        const commandEncoder = device.createCommandEncoder();
+        {
+            // Write position, normal, albedo etc. data to gBuffers
+            const gBufferPass = commandEncoder.beginRenderPass(writeGBufferPassDescriptor);
+            gBufferPass.setPipeline(writeGBuffersPipeline);
+            gBufferPass.setBindGroup(0, sceneUniformBindGroup);
+
+                m_instance.draw(gBufferPass);
+
+            gBufferPass.endPass();
+        }
+        {
+            // Update lights position
+            const lightPass = commandEncoder.beginComputePass();
+            lightPass.setPipeline(lightUpdateComputePipeline);
+            lightPass.setBindGroup(0, lightsBufferComputeBindGroup);
+            lightPass.dispatch(Math.ceil(kMaxNumLights / 64));
+            lightPass.endPass();
+        }
+        {
+            if (settings.mode === 'gBuffers view') {
+                // GBuffers debug view
+                // Left: position
+                // Middle: normal
+                // Right: albedo (use uv to mimic a checkerboard texture)
+                textureQuadPassDescriptor.colorAttachments[0].view = context
+                    .getCurrentTexture()
+                    .createView();
+                const debugViewPass = commandEncoder.beginRenderPass(textureQuadPassDescriptor);
+                debugViewPass.setPipeline(gBuffersDebugViewPipeline);
+                debugViewPass.setBindGroup(0, gBufferTexturesBindGroup);
+                debugViewPass.setBindGroup(1, canvasSizeUniformBindGroup);
+                debugViewPass.draw(6);
+                debugViewPass.endPass();
+            } else {
+                // Deferred rendering
+                textureQuadPassDescriptor.colorAttachments[0].view = context
+                    .getCurrentTexture()
+                    .createView();
+                const deferredRenderingPass = commandEncoder.beginRenderPass(textureQuadPassDescriptor);
+                deferredRenderingPass.setPipeline(deferredRenderPipeline);
+                deferredRenderingPass.setBindGroup(0, gBufferTexturesBindGroup);
+                deferredRenderingPass.setBindGroup(1, lightsBufferBindGroup);
+                deferredRenderingPass.setBindGroup(2, canvasSizeUniformBindGroup);
+                deferredRenderingPass.draw(6);
+                deferredRenderingPass.endPass();
+            }
+        }
+        device.queue.submit([commandEncoder.finish()]);
+        requestAnimationFrame(frame);
+    }
+
+    requestAnimationFrame(frame);
+};
+
+const canvas_el = document.createElement('canvas');
+canvas_el.width = window.innerWidth;
+canvas_el.height = window.innerHeight;
+
+document.body.appendChild(canvas_el);
+
+const gui = new dat.GUI();
+init({
+    canvasRef: {
+        current: canvas_el,
+    },
+    gui: gui
+});

package/engine/graphics/render/webgpu/sample/vertexTextureQuad.wgsl

@@ -0,0 +1,9 @@
+[[stage(vertex)]]
+fn main([[builtin(vertex_index)]] VertexIndex : u32)
+        -> [[builtin(position)]] vec4<f32> {
+    var pos = array<vec2<f32>, 6>(
+        vec2<f32>(-1.0, -1.0), vec2<f32>(1.0, -1.0), vec2<f32>(-1.0, 1.0),
+        vec2<f32>(-1.0, 1.0), vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0));
+
+    return vec4<f32>(pos[VertexIndex], 0.0, 1.0);
+}

package/engine/graphics/render/webgpu/sample/vertexWriteGBuffers.wgsl

@@ -0,0 +1,30 @@
+struct Uniforms {
+  modelMatrix : mat4x4<f32>;
+  normalModelMatrix : mat4x4<f32>;
+};
+
+struct Camera {
+  viewProjectionMatrix : mat4x4<f32>;
+};
+
+[[group(0), binding(0)]] var<uniform> uniforms : Uniforms;
+[[group(0), binding(1)]] var<uniform> camera : Camera;
+
+struct VertexOutput {
+  [[builtin(position)]] Position : vec4<f32>;
+  [[location(0)]] fragPosition: vec3<f32>;  // position in world space
+  [[location(1)]] fragNormal: vec3<f32>;    // normal in world space
+  [[location(2)]] fragUV: vec2<f32>;
+};
+
+[[stage(vertex)]]
+fn main([[location(0)]] position : vec3<f32>,
+        [[location(1)]] normal : vec3<f32>,
+        [[location(2)]] uv : vec2<f32>) -> VertexOutput {
+  var output : VertexOutput;
+  output.fragPosition = (uniforms.modelMatrix * vec4<f32>(position, 1.0)).xyz;
+  output.Position = camera.viewProjectionMatrix * vec4<f32>(output.fragPosition, 1.0);
+  output.fragNormal = normalize((uniforms.normalModelMatrix * vec4<f32>(normal, 1.0)).xyz);
+  output.fragUV = uv;
+  return output;
+}

package/engine/graphics/shadows/testShadowMapRendering.js

@@ -5,7 +5,6 @@ import { MeshSystem } from "../ecs/mesh/MeshSystem.js";
 import GUIElementSystem from "../../ecs/gui/GUIElementSystem.js";
 import HeadsUpDisplaySystem from "../../ecs/gui/hud/HeadsUpDisplaySystem.js";
 import TagSystem from "../../ecs/systems/TagSystem.js";
-import { AttachmentSocketsSystem } from "../../ecs/sockets/AttachmentSocketsSystem.js";
 import { AttachmentSystem } from "../../ecs/attachment/AttachmentSystem.js";
 import { SoundEmitterSystem } from "../../sound/ecs/emitter/SoundEmitterSystem.js";
 import SoundControllerSystem from "../../sound/ecs/SoundControllerSystem.js";
@@ -72,7 +71,6 @@ function makeConfig(engine) {
 
     config.addManySystems(
         new TagSystem(),
-        new AttachmentSocketsSystem(),
         new AttachmentSystem(),
         new SoundEmitterSystem(assetManager, sound.destination, sound.context),
         new SoundControllerSystem(),

package/engine/{ecs/grid → graphics/texture/sampler}/sampler2DToFloat32Texture.js

@@ -1,5 +1,5 @@
 import { ClampToEdgeWrapping, DataTexture, FloatType, LinearFilter, NearestFilter, RedFormat } from "three";
-import { assert } from "../../../core/assert.js";
+import { assert } from "../../../../core/assert.js";
 
 /**
  *