@footgun/cobalt 0.1.0

package/src/cobalt.js

@@ -0,0 +1,231 @@
+export { default as createTexture }        from './create-texture.js'
+export { default as createTextureFromUrl } from './create-texture-from-url.js'
+export { default as createTextureFromBuffer } from './create-texture-from-buffer.js'
+
+
+// built-in run nodes
+import bloomNode        from './bloom/bloom.js'
+import compositeNode    from './scene-composite/scene-composite.js'
+import spriteNode       from './sprite/sprite.js'
+import tileNode         from './tile/tile.js'
+import displacementNode from './displacement/displacement.js'
+import overlayNode      from './overlay/overlay.js'    
+import fbBlitNode       from './fb-blit/fb-blit.js'  
+import primitivesNode   from './primitives/primitives.js'
+import lightNode        from './light/light.js'
+
+// built-in resource nodes
+import tileAtlasNode    from './tile/atlas.js'
+import spritesheetNode  from './sprite/spritesheet.js'
+import fbTextureNode    from './fb-texture/fb-texture.js'
+
+
+// create and initialize a WebGPU renderer for a given canvas
+// returns the data structure containing all WebGPU related stuff
+export async function init (ctx, viewportWidth, viewportHeight) {
+
+    let device, gpu, context, canvas
+
+    // determine if an sdl/gpu context was passed, or if this is a browser canvas
+    if (ctx.sdlWindow && ctx.gpu) {
+        // this is an sdl/gpu context
+        gpu = ctx.gpu
+        
+        const instance = gpu.create([ 'verbose=1' ])
+        const adapter = await instance.requestAdapter()
+        device = await adapter.requestDevice()
+        context = gpu.renderGPUDeviceToWindow({ device, window: ctx.sdlWindow })
+
+        // gpu module doesn't expose these globals to node namespace so manually wire them up
+        global.GPUBufferUsage = gpu.GPUBufferUsage
+        global.GPUShaderStage = gpu.GPUShaderStage
+        global.GPUTextureUsage = gpu.GPUTextureUsage
+
+    } else {
+        // ctx is a canvas element
+        canvas = ctx
+
+        const adapter = await navigator.gpu?.requestAdapter({ powerPreference: 'high-performance' })
+
+        device = await adapter?.requestDevice()
+        gpu = navigator.gpu
+
+        context = canvas.getContext('webgpu')
+
+        context.configure({
+            device,
+            format: navigator.gpu?.getPreferredCanvasFormat(), // bgra8unorm
+            alphaMode: 'opaque'
+        })
+    }
+
+    // all available node defintions the renderer knows about are defined here.
+    // the cobalt:* nodes are built in. New nodes can be defined at run time with Cobalt.defineNode(...)
+    const nodeDefs = {
+        // built in resource nodes
+        'cobalt:tileAtlas': tileAtlasNode,
+        'cobalt:spritesheet': spritesheetNode,
+        'cobalt:fbTexture': fbTextureNode,
+
+        // builtin run nodes
+        'cobalt:bloom': bloomNode,
+        'cobalt:composite': compositeNode,
+        'cobalt:sprite': spriteNode,
+        'cobalt:tile': tileNode,
+        'cobalt:displacement': displacementNode,
+        'cobalt:overlay': overlayNode,
+        'cobalt:fbBlit': fbBlitNode,
+        'cobalt:primitives': primitivesNode,
+        'cobalt:light': lightNode,
+    }
+
+    return {
+        nodeDefs,
+        // runnable nodes. ordering dictates render order (first to last)
+        nodes: [ ],
+
+        // keeps references to all node refs that need to access the per-frame default texture view
+        // these refs are updated on each invocation of Cobalt.draw(...)
+        defaultTextureViewRefs: [ ],
+
+		canvas,
+		device,
+		context,
+        gpu,
+
+        // used in the color attachments of renderpass
+        clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
+
+        viewport: {
+            width: viewportWidth,
+            height: viewportHeight,
+            zoom: 1.0,
+            position: [ 0, 0 ], // top-left corner of the viewport
+        },
+    }
+}
+
+
+export function defineNode (c, nodeDefinition) {
+    if (!nodeDefinition?.type)
+        throw new Error(`Can't define a new node missing a type.`)
+
+    c.nodeDefs[nodeDefinition.type] = nodeDefinition
+}
+
+
+export async function initNode (c, nodeData) {
+    const nodeDef = c.nodeDefs[nodeData?.type]
+
+    if (!nodeDef)
+        throw new Error(`Can't initialize a new node missing a type.`)
+
+    const node = {
+        type: nodeData.type,
+        refs: nodeData.refs || { },
+        options: nodeData.options || { },
+        data: { },
+        enabled: true, // when disabled, the node won't be run
+    }
+
+    for (const refName in node.refs) {
+        if (node.refs[refName] === 'FRAME_TEXTURE_VIEW') {
+            c.defaultTextureViewRefs.push({ node, refName })
+            node.refs[refName] = getCurrentTextureView(c)
+        }
+    }
+
+    node.data = await nodeDef.onInit(c, node)
+
+    // copy in all custom functions, and ensure the first parameter is the node itself 
+    const customFunctions = nodeDef.customFunctions || { }
+    for (const fnName in customFunctions) {
+        node[fnName] = function (...args) {
+            return customFunctions[fnName](c, node, ...args)
+        }
+    }
+
+    c.nodes.push(node)
+    return node
+}
+
+
+export function draw (c) {
+	const { device, context } = c
+
+    const commandEncoder = device.createCommandEncoder()
+
+    const v = getCurrentTextureView(c)
+
+    // some nodes may need a reference to the default texture view (the frame backing)
+    // this is generated each draw frame so we need to update the references
+    for (const r of c.defaultTextureViewRefs)
+        r.node.refs[r.refName] = v
+
+    // run all of the enabled nodes
+    for (const node of c.nodes) {
+        if (!node.enabled)
+            continue
+
+        const nodeDef = c.nodeDefs[node.type]
+        nodeDef.onRun(c, node, commandEncoder)
+    }
+
+    device.queue.submit([ commandEncoder.finish() ])
+
+    // for sdl + gpu setups, we need to do this swap() step
+    if (!c.canvas)
+        c.context.swap()
+}
+
+
+// clean up all the loaded data so we could re-load a level, etc.
+export function reset (c) {
+    for (const n of c.nodes) {
+        const nodeDef = c.nodeDefs[n.type]
+        nodeDef.onDestroy(c, n)
+    }
+    c.nodes.length = 0
+    c.defaultTextureViewRefs.length = 0
+}
+
+
+export function setViewportDimensions (c, width, height) {
+	c.viewport.width = width
+	c.viewport.height = height
+
+    for (const n of c.nodes) {
+        const nodeDef = c.nodeDefs[n.type]
+        nodeDef.onResize(c, n)
+    }
+}
+
+
+// @param Array pos 2D point the viewport is centered on
+export function setViewportPosition (c, pos) {
+    c.viewport.position[0] = pos[0] - (c.viewport.width / 2 / c.viewport.zoom)
+    c.viewport.position[1] = pos[1] - (c.viewport.height / 2 / c.viewport.zoom)
+
+    for (const n of c.nodes) {
+        const nodeDef = c.nodeDefs[n.type]
+        nodeDef.onViewportPosition(c, n)
+    }
+}
+
+
+export function getPreferredFormat (cobalt) {
+    if (cobalt.canvas)
+        return navigator.gpu.getPreferredCanvasFormat()
+    else
+        return cobalt.context.getPreferredFormat()
+}
+
+
+export function getCurrentTextureView (cobalt) {
+    if (cobalt.canvas)
+        return cobalt.context.getCurrentTexture().createView()
+    else {
+        //return cobalt.context.getCurrentTexture().createView()
+        return cobalt.context.getCurrentTextureView()
+    }
+}

package/src/create-texture-from-buffer.js

@@ -0,0 +1,39 @@
+import createTexture from './create-texture.js'
+
+
+export default function createTextureFromBuffer (c, label, image, format='rgba8unorm') {
+
+    const usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+    const mip_count = 1
+    const t = createTexture(c.device, label, image.width, image.height, mip_count, format, usage)
+
+    /*
+    c.device.queue.copyExternalImageToTexture(
+        { source: image },
+        { texture: t.texture },
+        {
+            width: image.width,
+            height: image.height
+        }
+    )*/
+
+    c.device.queue.writeTexture(
+        { texture: t.texture },
+        image.data,
+        { bytesPerRow: 4 * image.width },
+        { width: image.width, height: image.height }
+    ) 
+
+    // nearest neighbor filtering is good for da pixel art
+    const samplerDescriptor = {
+        addressModeU: 'repeat', // repeat | clamp-to-edge
+        addressModeV: 'repeat', // repeat | clamp-to-edge
+        magFilter: 'nearest',
+        minFilter: 'nearest',
+        mipmapFilter: 'nearest',
+        maxAnisotropy: 1
+    }
+
+    t.sampler = c.device.createSampler(samplerDescriptor)
+    return t
+}

package/src/create-texture-from-url.js

@@ -0,0 +1,35 @@
+import createTexture from './create-texture.js'
+
+
+export default async function createTextureFromUrl (c, label, url, format='rgba8unorm') {
+    const response = await fetch(url)
+    const blob = await response.blob()
+
+    const imageData = await createImageBitmap(blob/*, { premultiplyAlpha: 'none', resizeQuality: 'pixelated' }*/)
+    
+    const usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+    const mip_count = 1
+    const t = createTexture(c.device, label, imageData.width, imageData.height, mip_count, format, usage)
+
+    c.device.queue.copyExternalImageToTexture(
+        { source: imageData },
+        { texture: t.texture },
+        {
+            width: imageData.width,
+            height: imageData.height
+        }
+    )
+
+    // nearest neighbor filtering is good for da pixel art
+    const samplerDescriptor = {
+        addressModeU: 'repeat', // repeat | clamp-to-edge
+        addressModeV: 'repeat', // repeat | clamp-to-edge
+        magFilter: 'nearest',
+        minFilter: 'nearest',
+        mipmapFilter: 'nearest',
+        maxAnisotropy: 1
+    }
+
+    t.sampler = c.device.createSampler(samplerDescriptor)
+    return t
+}

package/src/create-texture.js

@@ -0,0 +1,46 @@
+export default function createTexture (device, label, width, height, mip_count, format, usage) {
+    
+    const texture = device.createTexture({
+        label,
+        size: { width, height },
+        format,
+        usage,
+        mipLevelCount: mip_count,
+        sampleCount: 1,
+        dimension: '2d',
+    })
+
+    const view = texture.createView()
+
+    const mip_view = [ ]
+
+    for (let i=0; i < mip_count; i++)
+        mip_view.push(texture.createView({
+            label,
+            format,
+            dimension: '2d',
+            aspect: 'all',
+            baseMipLevel: i,
+            mipLevelCount: 1,
+            baseArrayLayer: 0,
+            arrayLayerCount: 1,
+        }))
+
+    const sampler = device.createSampler({
+        label: `${label} sampler`,
+        addressModeU: 'clamp-to-edge',
+        addressModeV: 'clamp-to-edge',
+        addressModeW: 'clamp-to-edge',
+        magFilter: 'linear',
+        minFilter: 'linear',
+        mipmapFilter: 'linear',
+    })
+
+    return {
+        size: { width, height },
+        texture,
+        view,
+        mip_view,
+        sampler,
+    }
+}

package/src/deps.js

@@ -0,0 +1,3 @@
+export { default as removeArrayItems } from 'https://cdn.jsdelivr.net/gh/mreinstein/remove-array-items/src/remove-array-items.js'
+export { default as round }            from 'https://cdn.skypack.dev/pin/round-half-up-symmetric@v2.0.0-pfMZ4UGGs9FcqO8UiEHO/mode=imports,min/optimized/round-half-up-symmetric.js'
+export { mat4, vec2, vec3, vec4 }      from 'https://wgpu-matrix.org/dist/3.x/wgpu-matrix.module.js'

package/src/displacement/composition.wgsl

@@ -0,0 +1,58 @@
+struct DisplacementParameters {  //            align(16) size(16)
+    offset: vec2<f32>,           // offset(0)  align(8)  size(8)
+    scale: f32,                  // offset(8)  align(4)  size(4)
+};
+
+@group(0) @binding(0) var<uniform> uniforms: DisplacementParameters;
+@group(0) @binding(1) var colorTexture: texture_2d<f32>;
+@group(0) @binding(2) var colorSampler: sampler;
+@group(0) @binding(3) var noiseTexture: texture_2d<f32>;
+@group(0) @binding(4) var noiseSampler: sampler;
+@group(0) @binding(5) var displacementTexture: texture_2d<f32>;
+
+struct VertexIn {
+    @builtin(vertex_index) vertexIndex: u32,
+};
+
+struct VertexOut {
+    @builtin(position) position: vec4<f32>,
+    @location(0) 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, 1);
+    out.uv = (0.5 + 0.5 * screenPosition * vec2<f32>(1, -1));
+    return out;
+}
+
+struct FragmentOut {
+    @location(0) color: vec4<f32>,
+};
+
+@fragment
+fn main_fragment(in: VertexOut) -> FragmentOut {
+    let noiseTextureDimensions = vec2<f32>(textureDimensions(noiseTexture, 0));
+    let noiseUv = in.uv + uniforms.offset / noiseTextureDimensions;
+    var noise = textureSample(noiseTexture, noiseSampler, noiseUv).rg;
+    noise -= 0.5;
+    noise *= uniforms.scale / noiseTextureDimensions;
+
+    let displacement = textureSample(displacementTexture, colorSampler, in.uv).r;
+    noise *= displacement;
+
+    let colorUv = in.uv + noise;
+
+    var out: FragmentOut;
+    out.color = textureSample(colorTexture, colorSampler, colorUv);
+    return out;
+}

package/src/displacement/displacement-composition.ts

@@ -0,0 +1,161 @@
+/// <reference types="@webgpu/types"/>
+
+import { DisplacementParametersBuffer } from "./displacement-parameters-buffer";
+import compositionWGSL from "./composition.wgsl"
+
+type Parameters = {
+    readonly device: GPUDevice;
+    readonly targetFormat: GPUTextureFormat;
+
+    readonly colorTextureView: GPUTextureView;
+    readonly noiseMapTextureView: GPUTextureView;
+    readonly displacementTextureView: GPUTextureView;
+
+    readonly displacementParametersBuffer: DisplacementParametersBuffer;
+};
+
+class DisplacementComposition {
+    private readonly device: GPUDevice;
+    private readonly targetFormat: GPUTextureFormat;
+    private readonly renderPipeline: GPURenderPipeline;
+
+    private readonly colorSampler: GPUSampler;
+    private readonly noiseSampler: GPUSampler;
+
+    private readonly displacementParametersBuffer: DisplacementParametersBuffer;
+
+    private renderBundle: GPURenderBundle | null = null;
+
+    private colorTextureView: GPUTextureView;
+    private noiseMapTextureView: GPUTextureView;
+    private displacementTextureView: GPUTextureView;
+
+    public constructor(params: Parameters) {
+        this.device = params.device;
+
+        this.targetFormat = params.targetFormat;
+        this.colorTextureView = params.colorTextureView;
+        this.noiseMapTextureView = params.noiseMapTextureView;
+        this.displacementTextureView = params.displacementTextureView;
+
+        this.displacementParametersBuffer = params.displacementParametersBuffer;
+
+        const shaderModule = this.device.createShaderModule({
+            label: "DisplacementComposition shader module",
+            code: compositionWGSL,
+        });
+
+        this.renderPipeline = this.device.createRenderPipeline({
+            label: "DisplacementComposition renderpipeline",
+            layout: "auto",
+            vertex: {
+                module: shaderModule,
+                entryPoint: "main_vertex",
+            },
+            fragment: {
+                module: shaderModule,
+                entryPoint: "main_fragment",
+                targets: [{
+                    format: params.targetFormat,
+                }],
+            },
+            primitive: {
+                cullMode: "none",
+                topology: "triangle-strip",
+            },
+        });
+
+        this.noiseSampler = this.device.createSampler({
+            label: "DisplacementComposition noisesampler",
+            addressModeU: "repeat",
+            addressModeV: "repeat",
+            addressModeW: "repeat",
+            magFilter: "linear",
+            minFilter: "linear",
+            mipmapFilter: "linear",
+        });
+
+        this.colorSampler = this.device.createSampler({
+            label: "DisplacementComposition colorSampler",
+            addressModeU: "clamp-to-edge",
+            addressModeV: "clamp-to-edge",
+            addressModeW: "clamp-to-edge",
+            magFilter: "linear",
+            minFilter: "linear",
+            mipmapFilter: "linear",
+        });
+    }
+
+    public getRenderBundle(): GPURenderBundle {
+        if (!this.renderBundle) {
+            this.renderBundle = this.buildRenderBundle();
+        }
+        return this.renderBundle;
+    }
+
+    public destroy(): void {
+        // nothing to do
+    }
+
+    public setColorTextureView(textureView: GPUTextureView): void {
+        this.colorTextureView = textureView;
+        this.renderBundle = null;
+    }
+
+    public setNoiseMapTextureView(textureView: GPUTextureView): void {
+        this.noiseMapTextureView = textureView;
+        this.renderBundle = null;
+    }
+
+    public setDisplacementTextureView(textureView: GPUTextureView): void {
+        this.displacementTextureView = textureView;
+        this.renderBundle = null;
+    }
+
+    private buildRenderBundle(): GPURenderBundle {
+        const bindgroup = this.device.createBindGroup({
+            label: "DisplacementComposition bindgroup 0",
+            layout: this.renderPipeline.getBindGroupLayout(0),
+            entries: [
+                {
+                    binding: 0,
+                    resource: { buffer: this.displacementParametersBuffer.bufferGpu },
+                },
+                {
+                    binding: 1,
+                    resource: this.colorTextureView,
+                },
+                {
+                    binding: 2,
+                    resource: this.colorSampler,
+                },
+                {
+                    binding: 3,
+                    resource: this.noiseMapTextureView,
+                },
+                {
+                    binding: 4,
+                    resource: this.noiseSampler,
+                },
+                {
+                    binding: 5,
+                    resource: this.displacementTextureView,
+                },
+            ],
+        });
+
+        const renderBundleEncoder = this.device.createRenderBundleEncoder({
+            label: "DisplacementComposition renderbundle encoder",
+            colorFormats: [this.targetFormat],
+        });
+        renderBundleEncoder.setPipeline(this.renderPipeline);
+        renderBundleEncoder.setBindGroup(0, bindgroup);
+        renderBundleEncoder.draw(4);
+        return renderBundleEncoder.finish({ label: "DisplacementComposition renderbundle" });
+    }
+}
+
+export {
+    DisplacementComposition
+};
+

package/src/displacement/displacement-parameters-buffer.ts

@@ -0,0 +1,44 @@
+/// <reference types="@webgpu/types"/>
+
+type DisplacementParameters = {
+    readonly offsetX: number;
+    readonly offsetY: number;
+    readonly scale: number;
+};
+
+type Parameters = {
+    readonly device: GPUDevice;
+    readonly initialParameters: DisplacementParameters;
+};
+
+class DisplacementParametersBuffer {
+    private readonly device: GPUDevice;
+
+    public readonly bufferGpu: GPUBuffer;
+    private needsUpdate: boolean = true;
+
+    public constructor(params: Parameters) {
+        this.device = params.device;
+
+        this.bufferGpu = this.device.createBuffer({
+            label: "DisplacementParametersBuffer buffer",
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+
+        this.setParameters(params.initialParameters);
+    }
+
+    public setParameters(params: DisplacementParameters): void {
+        this.device.queue.writeBuffer(this.bufferGpu, 0, new Float32Array([params.offsetX, params.offsetY, params.scale]));
+    }
+
+    public destroy(): void {
+        this.bufferGpu.destroy();
+    }
+}
+
+export {
+    DisplacementParametersBuffer
+};
+