@footgun/cobalt 0.1.0

package/src/displacement/displacement-texture.ts

@@ -0,0 +1,221 @@
+/// <reference types="@webgpu/types"/>
+
+import displacementWGSL    from './displacement.wgsl'
+import * as wgpuMatrix     from "wgpu-matrix";
+import { TrianglesBuffer } from "./triangles-buffer";
+
+
+type Viewport = {
+    readonly width: number;
+    readonly height: number;
+    readonly zoom: number;
+    readonly position: [number, number];
+};
+
+type Parameters = {
+    readonly device: GPUDevice;
+
+    readonly width: number;
+    readonly height: number;
+
+    readonly blurFactor: number;
+
+    readonly trianglesBuffer: TrianglesBuffer;
+};
+
+type TextureWithView = {
+    readonly texture: GPUTexture;
+    readonly view: GPUTextureView;
+};
+
+class DisplacementTexture {
+    private readonly device: GPUDevice;
+    private readonly format: GPUTextureFormat = "r8unorm";
+    private readonly downsizeFactor: number;
+    private readonly multisample: number;
+
+    private textureSimple: TextureWithView;
+    private textureMultisampled: TextureWithView | null = null;
+
+    private readonly renderPipeline: GPURenderPipeline;
+    private readonly bindgroup: GPUBindGroup;
+    private readonly uniformsBuffer: GPUBuffer;
+
+    private readonly trianglesBuffer: TrianglesBuffer;
+
+    public constructor(params: Parameters) {
+        this.device = params.device;
+        this.downsizeFactor = params.blurFactor;
+        this.multisample = this.downsizeFactor > 1 ? 4 : 1;
+
+        [this.textureSimple, this.textureMultisampled] = this.createTextures(params.width, params.height);
+
+        this.trianglesBuffer = params.trianglesBuffer;
+
+        const shaderModule = this.device.createShaderModule({
+            label: "DisplacementTexture shader module",
+            code: displacementWGSL,
+
+        });
+
+        this.renderPipeline = this.device.createRenderPipeline({
+            label: "DisplacementTexture renderpipeline",
+            layout: "auto",
+            vertex: {
+                module: shaderModule,
+                entryPoint: "main_vertex",
+                buffers: [
+                    {
+                        attributes: [
+                            {
+                                shaderLocation: 0,
+                                offset: 0,
+                                format: "float32x2",
+                            },
+                        ],
+                        arrayStride: 2 * Float32Array.BYTES_PER_ELEMENT,
+                        stepMode: "vertex",
+                    },
+                ],
+            },
+            fragment: {
+                module: shaderModule,
+                entryPoint: "main_fragment",
+                targets: [{
+                    format: this.format,
+                }],
+            },
+            primitive: {
+                cullMode: "none",
+                topology: "triangle-list",
+            },
+            multisample: {
+                count: this.multisample,
+            },
+        });
+
+        this.uniformsBuffer = this.device.createBuffer({
+            label: "DisplacementTexture uniforms buffer",
+            size: 64,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+
+        this.bindgroup = this.device.createBindGroup({
+            label: "DisplacementTexture bindgroup",
+            layout: this.renderPipeline.getBindGroupLayout(0),
+            entries: [
+                {
+                    binding: 0,
+                    resource: { buffer: this.uniformsBuffer },
+                },
+            ],
+        });
+    }
+
+    public update(commandEncoder: GPUCommandEncoder): void {
+        const targetTexture = this.textureMultisampled ?? this.textureSimple;
+
+        const textureRenderpassColorAttachment: GPURenderPassColorAttachment = {
+            view: targetTexture.view,
+            clearValue: [0, 0, 0, 1],
+            loadOp: "clear",
+            storeOp: "store",
+        };
+        if (this.textureMultisampled) {
+            textureRenderpassColorAttachment.resolveTarget = this.textureSimple.view;
+        }
+
+        const renderpassEncoder = commandEncoder.beginRenderPass({
+            label: "DisplacementTexture render to texture renderpass",
+            colorAttachments: [textureRenderpassColorAttachment],
+        });
+
+        const [textureWidth, textureHeight] = [targetTexture.texture.width, targetTexture.texture.height];
+        renderpassEncoder.setViewport(0, 0, textureWidth, textureHeight, 0, 1);
+        renderpassEncoder.setScissorRect(0, 0, textureWidth, textureHeight);
+        renderpassEncoder.setPipeline(this.renderPipeline);
+        renderpassEncoder.setBindGroup(0, this.bindgroup);
+        renderpassEncoder.setVertexBuffer(0, this.trianglesBuffer.bufferGpu);
+        renderpassEncoder.draw(3 * this.trianglesBuffer.spriteCount);
+        renderpassEncoder.end();
+    };
+
+    public resize(width: number, height: number): void {
+        this.textureSimple.texture.destroy();
+        this.textureMultisampled?.texture.destroy();
+
+        [this.textureSimple, this.textureMultisampled] = this.createTextures(width, height);
+    }
+
+    public setViewport(viewport: Viewport): void {
+        const scaling = [1, 1, 1];
+        const rotation = 0;
+        const translation = [1, 1, 0];
+
+        const modelMatrix = wgpuMatrix.mat4.identity();
+        wgpuMatrix.mat4.multiply(wgpuMatrix.mat4.scaling(scaling), modelMatrix, modelMatrix);
+        wgpuMatrix.mat4.multiply(wgpuMatrix.mat4.rotationZ(rotation), modelMatrix, modelMatrix);
+        wgpuMatrix.mat4.multiply(wgpuMatrix.mat4.translation(translation), modelMatrix, modelMatrix);
+
+        const viewMatrix = wgpuMatrix.mat4.translation([-viewport.position[0], -viewport.position[1], 0]);
+
+        const gameWidth = viewport.width / viewport.zoom
+        const gameHeight = viewport.height / viewport.zoom
+        //                         left          right    bottom        top     near     far
+        const projectionMatrix = wgpuMatrix.mat4.ortho(0, gameWidth, gameHeight, 0, -10.0, 10.0)
+
+        const mvpMatrix = wgpuMatrix.mat4.identity();
+        wgpuMatrix.mat4.multiply(viewMatrix, modelMatrix, mvpMatrix);
+        wgpuMatrix.mat4.multiply(projectionMatrix, mvpMatrix, mvpMatrix);
+
+        this.device.queue.writeBuffer(this.uniformsBuffer, 0, mvpMatrix);
+    }
+
+    public getView(): GPUTextureView {
+        return this.textureSimple.view;
+    }
+
+    public destroy(): void {
+        this.textureSimple.texture.destroy();
+        this.textureMultisampled?.texture.destroy();
+        this.uniformsBuffer.destroy();
+    }
+
+    private createTextures(width: number, height: number): [TextureWithView, TextureWithView | null] {
+        const texture = this.device.createTexture({
+            label: "DisplacementTexture texture",
+            size: [
+                Math.ceil(width / this.downsizeFactor),
+                Math.ceil(height / this.downsizeFactor),
+            ],
+            format: this.format,
+            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        const textureSimple = {
+            texture,
+            view: texture.createView({ label: "DisplacementTexture texture view" }),
+        };
+
+        let textureMultisampled: TextureWithView | null = null;
+        if (this.multisample > 1) {
+            const textureMulti = this.device.createTexture({
+                label: "DisplacementTexture texture multisampled",
+                size: [texture.width, texture.height],
+                format: texture.format,
+                usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+                sampleCount: this.multisample,
+            });
+            textureMultisampled = {
+                texture: textureMulti,
+                view: textureMulti.createView({ label: "DisplacementTexture texture multisampled view" }),
+            };
+        }
+
+        return [textureSimple, textureMultisampled];
+    }
+}
+
+export {
+    DisplacementTexture
+};
+

package/src/displacement/displacement.js

@@ -0,0 +1,160 @@
+import { TrianglesBuffer }              from './triangles-buffer.js'
+import { DisplacementParametersBuffer } from './displacement-parameters-buffer.js'
+import { DisplacementComposition }      from './displacement-composition.js'
+import { DisplacementTexture }          from './displacement-texture.js'
+
+
+// adapted to webgpu from https://github.com/pixijs/pixijs/tree/dev/packages/filter-displacement
+
+export default {
+    type: 'cobalt:displacement',
+    refs: [
+
+    	// input framebuffer texture with the scene drawn
+    	{ name: 'color', type: 'textureView', format: 'bgra8unorm', access: 'read' },
+
+    	// displacement map (perlin noise texture works well here)
+        { name: 'map', type: 'cobaltTexture', format: 'bgra8unorm', access: 'read' },
+
+        // result we're writing to
+        { name: 'out', type: 'textureView', format: 'bgra8unorm', access: 'write' },
+    ],
+
+    // cobalt event handling functions
+
+    // @params Object cobalt renderer world object
+    // @params Object options optional data passed when initing this node
+    onInit: async function (cobalt, options={}) {
+        return init(cobalt, options)
+    },
+
+    onRun: function (cobalt, node, webGpuCommandEncoder) {
+        // do whatever you need for this node. webgpu renderpasses, etc.
+        draw(cobalt, node, webGpuCommandEncoder)
+    },
+
+    onDestroy: function (cobalt, node) {
+        // any cleanup for your node should go here (releasing textures, etc.)
+        destroy(node)
+    },
+
+    onResize: function (cobalt, node) {
+        // do whatever you need when the dimensions of the renderer change (resize textures, etc.)
+        node.data.displacementTexture.resize(cobalt.viewport.width, cobalt.viewport.height);
+
+        node.data.displacementComposition.setColorTextureView(node.refs.color.data.view);
+        node.data.displacementComposition.setNoiseMapTextureView(node.refs.map.view);
+        node.data.displacementComposition.setDisplacementTextureView(node.data.displacementTexture.getView());
+    },
+
+    onViewportPosition: function (cobalt, node) {
+    	node.data.displacementTexture.setViewport(cobalt.viewport);
+    },
+
+    // optional
+    customFunctions: {
+    
+        addTriangle: function (cobalt, node, triangleVertices) {
+            return node.data.trianglesBuffer.addTriangle(triangleVertices);
+        },
+
+        removeTriangle: function (cobalt, node, triangleId) {
+            node.data.trianglesBuffer.removeTriangle(triangleId);
+        },
+
+        setPosition: function (cobalt, node, triangleId, triangleVertices) {
+            node.data.trianglesBuffer.setTriangle(triangleId, triangleVertices);
+        },
+    },
+}
+
+
+// This corresponds to a WebGPU render pass.  It handles 1 sprite layer.
+async function init (cobalt, node) {
+    const { device } = cobalt
+
+    const displacementParameters = new DisplacementParametersBuffer({
+        device,
+        initialParameters: {
+            offsetX: node.options.offseyX ?? 0,
+            offsetY: node.options.offseyY ?? 0,
+            scale: node.options.scale ?? 20,
+        }
+    })
+
+    const MAX_SPRITE_COUNT = 256  // max number of displacement sprites in this render pass
+
+    const trianglesBuffer = new TrianglesBuffer({
+        device,
+        maxSpriteCount: MAX_SPRITE_COUNT,
+    });
+
+    const displacementTexture = new DisplacementTexture({
+        device,
+
+        width: cobalt.viewport.width,
+        height: cobalt.viewport.height,
+
+        blurFactor: 8,
+
+        trianglesBuffer,
+    });
+
+    const displacementComposition = new DisplacementComposition({
+        device,
+        targetFormat: "bgra8unorm",
+
+        colorTextureView: node.refs.color.data.view,
+        noiseMapTextureView: node.refs.map.view,
+        displacementTextureView: displacementTexture.getView(),
+        
+        displacementParametersBuffer: displacementParameters,
+    });
+
+    return {
+        displacementParameters,
+        displacementTexture,
+        displacementComposition,
+        trianglesBuffer,
+    }
+}
+
+
+function draw(cobalt, node, commandEncoder) {
+    const spriteCount = node.data.trianglesBuffer.spriteCount;
+
+    if (spriteCount === 0)
+        return
+
+    node.data.trianglesBuffer.update();
+
+    node.data.displacementTexture.update(commandEncoder);
+
+    const renderpass = commandEncoder.beginRenderPass({
+        colorAttachments: [
+            {
+                view: node.refs.out,
+                clearValue: cobalt.clearValue,
+                loadOp: 'load',
+                storeOp: 'store'
+            }
+        ],
+    });
+    renderpass.executeBundles([node.data.displacementComposition.getRenderBundle()]);
+    renderpass.end()
+}
+
+
+function destroy (node) {
+    node.data.trianglesBuffer.destroy();
+    node.data.trianglesBuffer = null;
+
+    node.data.displacementParameters.destroy();
+    node.data.displacementParameters = null;
+
+    node.data.displacementTexture.destroy();
+    node.data.displacementTexture = null;
+
+    node.data.displacementComposition.destroy();
+    node.data.displacementComposition = null;
+}

package/src/displacement/displacement.wgsl

@@ -0,0 +1,31 @@
+struct TransformData {      //           align(16) size(64)
+    mvpMatrix: mat4x4<f32>, // offset(0) align(16) size(64)
+};
+
+@group(0) @binding(0) var<uniform> transformUBO: TransformData;
+
+struct VertexIn {
+    @location(0) position: vec2<f32>,
+};
+
+struct VertexOut {
+    @builtin(position) position: vec4<f32>,
+};
+
+@vertex
+fn main_vertex (in: VertexIn) -> VertexOut  {
+    var output: VertexOut;
+    output.position = transformUBO.mvpMatrix * vec4<f32>(in.position, 0.0, 1.0);
+    return output;
+}
+
+struct FragmentOut {
+    @location(0) color: vec4<f32>,
+};
+
+@fragment
+fn main_fragment () -> FragmentOut {
+    var out: FragmentOut;
+    out.color = vec4<f32>(1.0, 1.0, 1.0, 1.0);
+    return out;
+}

package/src/displacement/triangles-buffer.ts

@@ -0,0 +1,95 @@
+/// <reference types="@webgpu/types"/>
+
+import uuid from '../uuid.js'
+
+type Parameters = {
+    readonly device: GPUDevice;
+    readonly maxSpriteCount: number;
+};
+
+type Point = [number, number];
+type TriangleVertices = [Point, Point, Point];
+type TriangleData = [number, number, number, number, number, number];
+
+class TrianglesBuffer {
+    private readonly device: GPUDevice;
+
+    private readonly floatsPerSprite = 6;  // vec2(translate) + vec2(scale) + rotation + opacity 
+    public readonly bufferGpu: GPUBuffer;
+    private bufferNeedsUpdate: boolean = false;
+
+    private readonly sprites: Map<number, TriangleData> = new Map();
+    public get spriteCount(): number {
+        return this.sprites.size;
+    }
+
+    public constructor(params: Parameters) {
+        this.device = params.device;
+
+        this.bufferGpu = this.device.createBuffer({
+            size: params.maxSpriteCount * this.floatsPerSprite * Float32Array.BYTES_PER_ELEMENT,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+    }
+
+    public destroy(): void {
+        this.bufferGpu.destroy;
+    }
+
+    public update(): void {
+        if (this.bufferNeedsUpdate) {
+            const bufferData: number[] = [];
+            for (const sprite of this.sprites.values()) {
+                bufferData.push(...sprite);
+            };
+            const buffer = new Float32Array(bufferData);
+            this.device.queue.writeBuffer(this.bufferGpu, 0, buffer);
+        }
+    }
+
+    public addTriangle(triangleVertices: TriangleVertices): number {
+        const triangleId = uuid();
+        if (this.sprites.has(triangleId)) {
+            throw new Error(`Duplicate triangle "${triangleId}".`);
+        }
+
+        const triangleData = this.buildTriangleData(triangleVertices);
+        this.sprites.set(triangleId, triangleData);
+        this.bufferNeedsUpdate = true;
+
+        return triangleId;
+    }
+
+    public removeTriangle(triangleId: number): void {
+        if (!this.sprites.has(triangleId)) {
+            throw new Error(`Unknown triangle "${triangleId}".`);
+        }
+        this.sprites.delete(triangleId);
+        this.bufferNeedsUpdate = true;
+    }
+
+    public setTriangle(triangleId: number, triangleVertices: TriangleVertices): void {
+        if (!this.sprites.has(triangleId)) {
+            throw new Error(`Unknown triangle "${triangleId}".`);
+        }
+        const triangleData = this.buildTriangleData(triangleVertices);
+        this.sprites.set(triangleId, triangleData);
+        this.bufferNeedsUpdate = true;
+    }
+
+    private buildTriangleData(triangleVertices: TriangleVertices): TriangleData {
+        return [
+            triangleVertices[0][0],
+            triangleVertices[0][1],
+            triangleVertices[1][0],
+            triangleVertices[1][1],
+            triangleVertices[2][0],
+            triangleVertices[2][1],
+        ];
+    }
+}
+
+export {
+    TrianglesBuffer
+};
+

package/src/fb-blit/fb-blit.js

@@ -0,0 +1,161 @@
+import blitWGSL from './fb-blit.wgsl'
+
+
+// blit a source texture into a destination texture
+
+export default {
+    type: 'cobalt:fbBlit',
+    refs: [
+        { name: 'in', type: 'cobaltTexture', format: 'bgra8unorm', access: 'read' },
+        { name: 'out', type: 'cobaltTexture', format: 'bgra8unorm', access: 'write' },
+    ],
+
+    // @params Object cobalt renderer world object
+    // @params Object options optional data passed when initing this node
+    onInit: async function (cobalt, options={}) {
+        return init(cobalt, options)
+    },
+
+    onRun: function (cobalt, node, webGpuCommandEncoder) {
+        // do whatever you need for this node. webgpu renderpasses, etc.
+        draw(cobalt, node, webGpuCommandEncoder)
+    },
+
+    onDestroy: function (cobalt, node) {
+        // any cleanup for your node should go here (releasing textures, etc.)
+    },
+
+    onResize: function (cobalt, node) {
+        // do whatever you need when the dimensions of the renderer change (resize textures, etc.)
+        resize(cobalt, node)
+    },
+
+    onViewportPosition: function (cobalt, node) { },
+}
+
+
+async function init (cobalt, node) {
+    const { device } = cobalt
+
+    const bindGroupLayout = device.createBindGroupLayout({
+        entries: [
+            {
+                binding: 0,
+                visibility: GPUShaderStage.FRAGMENT,
+                texture:  { }
+            },
+            {
+                binding: 1,
+                visibility: GPUShaderStage.FRAGMENT,
+                sampler: { }
+            }
+        ],
+    })
+
+    const bindGroup = device.createBindGroup({
+        layout: bindGroupLayout,
+        entries: [
+            {
+                binding: 0,
+                resource: node.refs.in.data.view
+            },
+            {
+                binding: 1,
+                resource: node.refs.in.data.sampler
+            }
+        ]
+    })
+
+    const pipelineLayout = device.createPipelineLayout({
+        bindGroupLayouts: [ bindGroupLayout ]
+    })
+
+    const pipeline = device.createRenderPipeline({
+        label: 'fb-blit',
+        vertex: {
+            module: device.createShaderModule({
+                code: blitWGSL
+            }),
+            entryPoint: 'vs_main',
+            buffers: [ /*quad.bufferLayout*/ ]
+        },
+
+        fragment: {
+            module: device.createShaderModule({
+                code: blitWGSL
+            }),
+            entryPoint: 'fs_main',
+            targets: [
+                {
+                    format: 'bgra8unorm',
+                    blend: {
+                        color: {
+                            srcFactor: 'src-alpha',
+                            dstFactor: 'one-minus-src-alpha',
+                        },
+                        alpha: {
+                            srcFactor: 'zero',
+                            dstFactor: 'one'
+                        }
+                    }
+                }
+            ]
+        },
+
+        primitive: {
+            topology: 'triangle-list'
+        },
+
+        layout: pipelineLayout
+    })
+
+    return {
+        bindGroupLayout,
+        bindGroup,
+        pipeline,
+    }
+}
+
+
+function draw (cobalt, node, commandEncoder) {
+    const { device } = cobalt
+    
+    const renderpass = commandEncoder.beginRenderPass({
+        colorAttachments: [
+            {
+                view: node.refs.out,
+                clearValue: cobalt.clearValue,
+                loadOp: 'load',
+                storeOp: 'store'
+            }
+        ]
+    })
+
+    renderpass.setPipeline(node.data.pipeline)
+
+    renderpass.setBindGroup(0, node.data.bindGroup)
+
+    renderpass.draw(3)
+
+    renderpass.end()
+}
+
+
+function resize (cobalt, node) {
+    const { device } = cobalt
+
+    // re-build the bind group
+    node.data.bindGroup = device.createBindGroup({
+        layout: node.data.bindGroupLayout,
+        entries: [
+            {
+                binding: 0,
+                resource: node.refs.in.data.view
+            },
+            {
+                binding: 1,
+                resource: node.refs.in.data.sampler
+            }
+        ]
+    })
+}

package/src/fb-blit/fb-blit.wgsl

@@ -0,0 +1,40 @@
+
+@binding(0) @group(0) var tileTexture: texture_2d<f32>;
+@binding(1) @group(0) var tileSampler: sampler;
+
+
+struct Fragment {
+    @builtin(position) Position : vec4<f32>,
+    @location(0) TexCoord : vec2<f32>
+};
+
+// fullscreen triangle position and uvs
+const positions = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -3.0),
+    vec2<f32>(3.0, 1.0),
+    vec2<f32>(-1.0, 1.0)
+);
+
+const uvs = array<vec2<f32>, 3>(
+    vec2<f32>(0.0, 2.0),
+    vec2<f32>(2.0, 0.0),
+    vec2<f32>(0.0, 0.0)
+);
+
+@vertex
+fn vs_main (@builtin(vertex_index) VertexIndex : u32) -> Fragment  {
+
+    var output : Fragment;
+
+    output.Position = vec4<f32>(positions[VertexIndex], 0.0, 1.0);
+    output.TexCoord = vec2<f32>(uvs[VertexIndex]);
+
+    return output;
+}
+
+
+@fragment
+fn fs_main (@location(0) TexCoord: vec2<f32>) -> @location(0) vec4<f32> {
+    var col = textureSample(tileTexture, tileSampler, TexCoord);
+    return vec4<f32>(col.rgb, 1.0);
+}