@woosh/meep-engine 2.75.7 → 2.75.9

package/src/engine/graphics/render/webgpu/sample/lightUpdate.wgsl

@@ -1,41 +0,0 @@
-struct LightData {
-  position : vec4<f32>;
-  color : vec3<f32>;
-  radius : f32;
-};
-struct LightsBuffer {
-  lights: array<LightData>;
-};
-[[group(0), binding(0)]] var<storage, read_write> lightsBuffer: LightsBuffer;
-
-struct Config {
-  numLights : u32;
-};
-
-[[group(0), binding(1)]] var<uniform> config: Config;
-
-struct LightExtent {
-  min : vec4<f32>;
-  max : vec4<f32>;
-};
-
-[[group(0), binding(2)]] var<uniform> lightExtent: LightExtent;
-
-[[stage(compute), workgroup_size(64, 1, 1)]]
-fn main([[builtin(global_invocation_id)]] GlobalInvocationID : vec3<u32>) {
-  var index = GlobalInvocationID.x;
-  if (index >= config.numLights) {
-    return;
-  }
-
-  let light = &lightsBuffer.lights[index];
-
-  (*light).position.y = (*light).position.y - 0.001 - 0.003 * (f32(index) - 64.0 * floor(f32(index) / 64.0));
-
-  if ((*light).position.y < lightExtent.min.y) {
-    (*light).position.y = lightExtent.max.y;
-  }
-
-  // write out
-//  lightBuffer.lighs[index] = light;
-}

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

@@ -1,605 +0,0 @@
-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 navigator = globalThis.navigator;
-
-    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/src/engine/graphics/render/webgpu/sample/vertexTextureQuad.wgsl

@@ -1,9 +0,0 @@
-[[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/src/engine/graphics/render/webgpu/sample/vertexWriteGBuffers.wgsl

@@ -1,30 +0,0 @@
-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;
-}