@footgun/cobalt 0.1.0

package/src/primitives/primitives.wgsl

@@ -0,0 +1,54 @@
+struct TransformData {
+    view: mat4x4<f32>,
+    projection: mat4x4<f32>
+};
+
+@binding(0) @group(0) var<uniform> transformUBO: TransformData;
+
+struct Fragment {
+    @builtin(position) Position : vec4<f32>,
+    @location(0) Color : vec4<f32>,
+};
+
+@vertex
+fn vs_main(@location(0) vertexPosition: vec2<f32>,
+           @location(1) vertexColor: vec4<f32>) -> Fragment {
+    
+    var sx: f32 = 1.0; //sprites.models[i_id].scale.x;
+    var sy: f32 = 1.0; // sprites.models[i_id].scale.y;
+    var sz: f32 = 1.0;
+
+    var rot: f32 = 0.0; //sprites.models[i_id].rotation;
+
+    var tx: f32 = 1.0; //sprites.models[i_id].translate.x;
+    var ty: f32 = 1.0; //sprites.models[i_id].translate.y;
+    var tz: f32 = 0;
+
+    var s = sin(rot);
+    var c = cos(rot);
+
+    // https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html
+
+    var scaleM: mat4x4<f32> = mat4x4<f32>(sx, 0.0, 0.0, 0.0,
+                                         0.0,  sy, 0.0, 0.0,
+                                         0.0, 0.0, sz, 0.0,
+                                           0,   0,   0, 1.0);
+
+    // rotation and translation
+    var modelM: mat4x4<f32> = mat4x4<f32>(c,   s, 0.0, 0.0,
+                                         -s,   c, 0.0, 0.0,
+                                        0.0, 0.0, 1.0, 0.0,
+                                         tx,  ty,  tz, 1.0) * scaleM;
+
+    var output : Fragment;
+
+    output.Position = transformUBO.projection * transformUBO.view * modelM * vec4<f32>(vertexPosition, 0.0, 1.0);
+    output.Color = vertexColor;
+
+    return output;
+}
+
+@fragment
+fn fs_main(@location(0) Color: vec4<f32>) -> @location(0) vec4<f32> {
+    return Color;
+}

package/src/primitives/public-api.js

@@ -0,0 +1,325 @@
+import { vec2 } from '../deps.js'
+
+
+function line (cobalt, node, start, end, color, lineWidth=1) {
+    
+    const delta = vec2.sub(end, start)
+
+    const unitBasis = vec2.normalize(delta)
+    const perp = perpendicularComponent(unitBasis)
+
+    const halfLineWidth = lineWidth / 2
+    
+    let i = node.data.vertexCount * 6 // 2 floats position + 4 floats color per vertex
+
+    // triangle 1
+    // pt 1
+    node.data.vertices[i + 0] = start[0] + perp[0] * halfLineWidth
+    node.data.vertices[i + 1] = start[1] + perp[1] * halfLineWidth
+
+    // pt1 color
+    node.data.vertices[i + 2] = color[0]
+    node.data.vertices[i + 3] = color[1]
+    node.data.vertices[i + 4] = color[2]
+    node.data.vertices[i + 5] = color[3]
+
+    // pt 2
+    node.data.vertices[i + 6] = start[0] - perp[0] * halfLineWidth
+    node.data.vertices[i + 7] = start[1] - perp[1] * halfLineWidth
+
+    // pt2 color
+    node.data.vertices[i + 8] = color[0]
+    node.data.vertices[i + 9] = color[1]
+    node.data.vertices[i + 10] = color[2]
+    node.data.vertices[i + 11] = color[3]
+
+    // pt 3
+    node.data.vertices[i + 12] = end[0] + perp[0] * halfLineWidth
+    node.data.vertices[i + 13] = end[1] + perp[1] * halfLineWidth
+
+    // pt3 color
+    node.data.vertices[i + 14] = color[0]
+    node.data.vertices[i + 15] = color[1]
+    node.data.vertices[i + 16] = color[2]
+    node.data.vertices[i + 17] = color[3]
+    
+
+    // triangle 2
+    // pt 2
+    node.data.vertices[i + 18] = start[0] - perp[0] * halfLineWidth
+    node.data.vertices[i + 19] = start[1] - perp[1] * halfLineWidth
+
+    // pt2 color
+    node.data.vertices[i + 20] = color[0]
+    node.data.vertices[i + 21] = color[1]
+    node.data.vertices[i + 22] = color[2]
+    node.data.vertices[i + 23] = color[3]
+    
+    // pt 3
+    node.data.vertices[i + 24] = end[0] + perp[0] * halfLineWidth
+    node.data.vertices[i + 25] = end[1] + perp[1] * halfLineWidth
+
+    // pt3 color
+    node.data.vertices[i + 26] = color[0]
+    node.data.vertices[i + 27] = color[1]
+    node.data.vertices[i + 28] = color[2]
+    node.data.vertices[i + 29] = color[3]
+
+    // pt 4
+    node.data.vertices[i + 30] = end[0] - perp[0] * halfLineWidth
+    node.data.vertices[i + 31] = end[1] - perp[1] * halfLineWidth
+
+    // pt4 color
+    node.data.vertices[i + 32] = color[0]
+    node.data.vertices[i + 33] = color[1]
+    node.data.vertices[i + 34] = color[2]
+    node.data.vertices[i + 35] = color[3]
+
+
+    node.data.vertexCount += 6
+
+    node.data.dirty = true
+}
+
+
+// return component of vector perpendicular to a unit basis vector
+// (IMPORTANT NOTE: assumes "basis" has unit magnitude (length==1))
+function perpendicularComponent (inp) {
+    return [ -inp[1], inp[0] ]
+}
+
+
+export default {
+    line,
+
+    ellipse: function (cobalt, node, center, halfWidth, halfHeight, numSegments, color, lineWidth=1) {
+        
+        const [ x, y ] = center
+
+        // angle between each segment
+        const deltaAngle = 2 * Math.PI / numSegments
+
+        // Generate points for the ellipsoid
+        for (let i = 0; i < numSegments; i++) {
+            // Angle for this and the next segment
+            const angle = i * deltaAngle
+            const nextAngle = (i + 1) * deltaAngle
+
+            // Calculate x and y for the current and next points on the ellipse
+            const currX = x + halfWidth * Math.cos(angle)
+            const currY = y + halfHeight * Math.sin(angle)
+            const nextX = x + halfWidth * Math.cos(nextAngle)
+            const nextY = y + halfHeight * Math.sin(nextAngle)
+
+            line(cobalt, node, [ currX, currY ], [nextX, nextY ], color, lineWidth)
+        }
+    },
+
+    filledEllipse: function (cobalt, node, center, halfWidth, halfHeight, numSegments, color) {
+
+        const [ x, y ] = center
+
+        // angle between each segment
+        const deltaAngle = 2 * Math.PI / numSegments
+
+        // Generate points for the ellipsoid
+        for (let i = 0; i < numSegments; i++) {
+            // Angle for this and the next segment
+            const angle = i * deltaAngle
+            const nextAngle = (i + 1) * deltaAngle
+
+            // Calculate x and y for the current and next points on the ellipse
+            const currX = x + halfWidth * Math.cos(angle)
+            const currY = y + halfHeight * Math.sin(angle)
+            const nextX = x + halfWidth * Math.cos(nextAngle)
+            const nextY = y + halfHeight * Math.sin(nextAngle)
+
+            // Add vertices for the triangles (first point is always the center)
+            // First triangle vertex (center of ellipse)
+
+            const stride = 18 // 2 floats position + 4 floats color per vertex * 3 vertices
+            const vi = (node.data.vertexCount * 6) + (i * stride)
+
+            // position
+            node.data.vertices[vi + 0] = x
+            node.data.vertices[vi + 1] = y
+
+            // color
+            node.data.vertices[vi + 2] = color[0]
+            node.data.vertices[vi + 3] = color[1]
+            node.data.vertices[vi + 4] = color[2]
+            node.data.vertices[vi + 5] = color[3]
+            
+
+            // Second triangle vertex (current point on ellipse)
+        
+            // position
+            node.data.vertices[vi + 6] = currX
+            node.data.vertices[vi + 7] = currY
+
+            // color
+            node.data.vertices[vi + 8] = color[0]
+            node.data.vertices[vi + 9] = color[1]
+            node.data.vertices[vi + 10] = color[2]
+            node.data.vertices[vi + 11] = color[3]
+
+            
+            // Third triangle vertex (next point on ellipse)
+            // position
+            node.data.vertices[vi + 12] = nextX
+            node.data.vertices[vi + 13] = nextY
+
+            // color
+            node.data.vertices[vi + 14] = color[0]
+            node.data.vertices[vi + 15] = color[1]
+            node.data.vertices[vi + 16] = color[2]
+            node.data.vertices[vi + 17] = color[3]
+        }
+
+        node.data.vertexCount += (3 * numSegments)
+
+        node.data.dirty = true
+    },
+
+    // @param Number angle rotation (radians)
+    box: function (cobalt, node, center, width, height, color, angle=0, lineWidth=1) {
+        const [ x, y ] = center
+        
+        const halfWidth = width / 2
+        const halfHeight = height / 2
+
+        const topLeft = [ x - halfWidth, y - halfHeight ]
+        const topRight = [ x + halfWidth, y - halfHeight ]
+        const bottomLeft = [ x - halfWidth, y + halfHeight ]
+        const bottomRight = [ x + halfWidth, y + halfHeight ]
+
+        if (angle !== 0) {
+            // rotate the point by <angle> rads around origin
+            //      point    origin   rads     out 
+            _rotate(topLeft, center, angle, topLeft)
+            _rotate(topRight, center, angle, topRight)
+            _rotate(bottomLeft, center, angle, bottomLeft)
+            _rotate(bottomRight, center, angle, bottomRight)
+        }
+
+        line(cobalt, node, topLeft, topRight, color, lineWidth)
+        line(cobalt, node, bottomLeft, bottomRight, color, lineWidth)
+        line(cobalt, node, topLeft, bottomLeft, color, lineWidth)
+        line(cobalt, node, topRight, bottomRight, color, lineWidth)
+    },
+
+    
+
+    // @param Number angle rotation (radians)
+    filledBox: function (cobalt, node, center, width, height, color, angle=0) {
+        const [ x, y ] = center
+        
+        const halfWidth = width / 2
+        const halfHeight = height / 2
+
+        const topLeft = [ x - halfWidth, y - halfHeight ];
+        const topRight = [ x + halfWidth, y - halfHeight ];
+        const bottomLeft = [ x - halfWidth, y + halfHeight ];
+        const bottomRight = [ x + halfWidth, y + halfHeight ];
+
+        if (angle !== 0) {
+            // rotate the point by <angle> rads around origin
+            //      point    origin   rads     out 
+            _rotate(topLeft, center, angle, topLeft)
+            _rotate(topRight, center, angle, topRight)
+            _rotate(bottomLeft, center, angle, bottomLeft)
+            _rotate(bottomRight, center, angle, bottomRight)
+        }
+
+        let i = node.data.vertexCount * 6 // 2 floats position + 4 floats color per vertex
+
+
+        // triangle 1
+        // pt 1
+        node.data.vertices[i + 0] = topLeft[0]
+        node.data.vertices[i + 1] = topLeft[1]
+
+        // pt1 color
+        node.data.vertices[i + 2] = color[0]
+        node.data.vertices[i + 3] = color[1]
+        node.data.vertices[i + 4] = color[2]
+        node.data.vertices[i + 5] = color[3]
+
+        // pt 2
+        node.data.vertices[i + 6] = bottomLeft[0]
+        node.data.vertices[i + 7] = bottomLeft[1]
+
+        // pt2 color
+        node.data.vertices[i + 8] = color[0]
+        node.data.vertices[i + 9] = color[1]
+        node.data.vertices[i + 10] = color[2]
+        node.data.vertices[i + 11] = color[3]
+
+        // pt 3
+        node.data.vertices[i + 12] = topRight[0]
+        node.data.vertices[i + 13] = topRight[1]
+
+        // pt3 color
+        node.data.vertices[i + 14] = color[0]
+        node.data.vertices[i + 15] = color[1]
+        node.data.vertices[i + 16] = color[2]
+        node.data.vertices[i + 17] = color[3]
+        
+
+        // triangle 2
+        // pt 2
+        node.data.vertices[i + 18] = bottomLeft[0]
+        node.data.vertices[i + 19] = bottomLeft[1]
+
+        // pt2 color
+        node.data.vertices[i + 20] = color[0]
+        node.data.vertices[i + 21] = color[1]
+        node.data.vertices[i + 22] = color[2]
+        node.data.vertices[i + 23] = color[3]
+        
+        // pt 3
+        node.data.vertices[i + 24] = bottomRight[0]
+        node.data.vertices[i + 25] = bottomRight[1]
+
+        // pt3 color
+        node.data.vertices[i + 26] = color[0]
+        node.data.vertices[i + 27] = color[1]
+        node.data.vertices[i + 28] = color[2]
+        node.data.vertices[i + 29] = color[3]
+
+        // pt 4
+        node.data.vertices[i + 30] = topRight[0]
+        node.data.vertices[i + 31] = topRight[1]
+
+        // pt4 color
+        node.data.vertices[i + 32] = color[0]
+        node.data.vertices[i + 33] = color[1]
+        node.data.vertices[i + 34] = color[2]
+        node.data.vertices[i + 35] = color[3]
+
+
+        node.data.vertexCount += 6 // 2 triangles in a box, baby
+
+        node.data.dirty = true
+    },
+
+    clear: function (cobalt, node) {
+        node.data.vertexCount = 0
+        node.data.dirty = true
+    },
+}
+
+
+function _rotate (a, b, rad, out) {
+    //Translate point to the origin
+    let p0 = a[0] - b[0],
+        p1 = a[1] - b[1],
+        sinC = Math.sin(rad),
+        cosC = Math.cos(rad);
+
+    //perform rotation and translate to correct position
+    out[0] = p0 * cosC - p1 * sinC + b[0];
+    out[1] = p0 * sinC + p1 * cosC + b[1];
+    return out;
+}
+

package/src/scene-composite/scene-composite.js

@@ -0,0 +1,168 @@
+import * as Cobalt        from '../cobalt.js'
+import sceneCompositeWGSL from './scene-composite.wgsl'
+
+
+export default {
+    type: 'cobalt:bloom',
+    refs: [
+        { name: 'hdr',      type: 'textureView', format: 'rgba16', access: 'read' },
+        { name: 'bloom',    type: 'textureView', format: 'rgba16', access: 'read' },
+        { name: 'combined', type: 'textureView', format: 'rgba8unorm', 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.)
+        //destroy(node)
+    },
+
+    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) { },
+}
+
+
+function init (cobalt, node) {
+  const { options, refs } = node
+
+    const { device } = cobalt
+    const format = Cobalt.getPreferredFormat(cobalt) // bgra8unorm
+
+    const bloom_intensity = options.bloom_intensity ?? 40.0
+    const bloom_combine_constant = options.bloom_combine_constant ?? 0.68
+    const dat = new Float32Array([ bloom_intensity, bloom_combine_constant ])
+    const params_buf = device.createBuffer({
+        label: 'scene composite params buffer',
+        size: dat.byteLength, // vec4<f32> and f32 and u32 with 4 bytes per float32 and 4 bytes per u32
+        mappedAtCreation: true,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    })
+
+    new Float32Array(params_buf.getMappedRange()).set(dat)
+
+    params_buf.unmap()
+
+    const pipeline = device.createRenderPipeline({
+        layout: 'auto',
+        vertex: {
+          module: device.createShaderModule({
+            code: sceneCompositeWGSL,
+          }),
+          entryPoint: 'vert_main',
+        },
+        fragment: {
+          module: device.createShaderModule({
+            code: sceneCompositeWGSL,
+          }),
+          entryPoint: 'frag_main',
+          targets: [
+            {
+              format,
+            },
+          ],
+        },
+        primitive: {
+          topology: 'triangle-list',
+        },
+    })
+
+    const bindGroup = device.createBindGroup({
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [
+          {
+            binding: 0,
+            resource: refs.hdr.data.sampler,
+          },
+          // color
+          {
+            binding: 1,
+            resource: refs.hdr.data.view,
+          },
+          // emissive
+          {
+            binding: 2,
+            resource: refs.bloom.data.mip_view[0],
+          },
+          {
+            binding: 3,
+            resource: {
+                buffer: params_buf,
+            },
+          },
+        ],
+    })
+
+    return {
+        bindGroup,
+        pipeline,
+        params_buf,
+    }
+}
+
+
+// combine bloom and color textures and draw to a fullscreen quad
+function draw (cobalt, node, commandEncoder) {
+
+    const passEncoder = commandEncoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: node.refs.combined.data.view, //getCurrentTextureView(cobalt)
+          clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
+          loadOp: 'clear',
+          storeOp: 'store',
+        },
+      ],
+    })
+
+    const { pipeline, bindGroup } = node.data
+
+    passEncoder.setPipeline(pipeline)
+    passEncoder.setBindGroup(0, bindGroup)
+    passEncoder.draw(3)
+    passEncoder.end()
+}
+
+
+function resize (cobalt, node) {
+    const { pipeline, params_buf } = node.data
+    const { device } = cobalt
+
+    node.data.bindGroup = device.createBindGroup({
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [
+          {
+            binding: 0,
+            resource: node.refs.hdr.data.sampler,
+          },
+          // color
+          {
+            binding: 1,
+            resource: node.refs.hdr.data.view,
+          },
+          // emissive
+          {
+            binding: 2,
+            resource: node.refs.bloom.data.mip_view[0], //bloom_mat.bind_groups_textures[2].mip_view[0],
+          },
+          {
+            binding: 3,
+            resource: {
+                buffer: params_buf,
+            },
+          },
+        ],
+    })
+}
+

package/src/scene-composite/scene-composite.wgsl

@@ -0,0 +1,94 @@
+
+struct BloomComposite {
+  bloom_intensity: f32,
+  bloom_combine_constant: f32,
+}
+
+@group(0) @binding(0) var mySampler : sampler;
+@group(0) @binding(1) var colorTexture : texture_2d<f32>;
+@group(0) @binding(2) var emissiveTexture : texture_2d<f32>;
+@group(0) @binding(3) var<uniform> composite_parameter: BloomComposite;
+
+struct VertexOutput {
+  @builtin(position) Position : vec4<f32>,
+  @location(0) fragUV : 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 vert_main(@builtin(vertex_index) VertexIndex : u32) -> VertexOutput {
+
+  var output : VertexOutput;
+  output.Position = vec4<f32>(positions[VertexIndex], 0.0, 1.0);
+  output.fragUV = vec2<f32>(uvs[VertexIndex]);
+
+  return output;
+}
+
+
+// can be optimized into lut (compute can gen it)
+fn GTTonemap_point(x: f32) -> f32{
+  let m: f32 = 0.22; // linear section start
+  let a: f32 = 1.0;  // contrast
+  let c: f32 = 1.33; // black brightness
+  let P: f32 = 1.0;  // maximum brightness
+  let l: f32 = 0.4;  // linear section length
+  let l0: f32 = ((P-m)*l) / a; // 0.312
+  let S0: f32 = m + l0; // 0.532
+  let S1: f32 = m + a * l0; // 0.532
+  let C2: f32 = (a*P) / (P - S1); // 2.13675213675
+  let L: f32 = m + a * (x - m);
+  let T: f32 = m * pow(x/m, c);
+  let S: f32 = P - (P - S1) * exp(-C2*(x - S0)/P);
+  let w0: f32 = 1.0 - smoothstep(0.0, m, x);
+  var w2: f32 = 1.0;
+  if (x < m+l) {
+    w2 = 0.0;
+  }
+  let w1: f32 = 1.0 - w0 - w2;
+  return f32(T * w0 + L * w1 + S * w2);
+}
+
+// this costs about 0.2-0.3ms more than aces, as-is
+fn GTTonemap(x: vec3<f32>) -> vec3<f32>{
+  return vec3<f32>(GTTonemap_point(x.r), GTTonemap_point(x.g), GTTonemap_point(x.b));
+}
+
+
+fn aces(x: vec3<f32>) -> vec3<f32> {
+  let a: f32 = 2.51;
+  let b: f32 = 0.03;
+  let c: f32 = 2.43;
+  let d: f32 = 0.59;
+  let e: f32 = 0.14;
+  return clamp((x * (a * x + b)) / (x * (c * x + d) + e), vec3<f32>(0.0), vec3<f32>(1.0));
+}
+
+
+@fragment
+fn frag_main(@location(0) fragUV : vec2<f32>) -> @location(0) vec4<f32> {
+
+  let hdr_color = textureSample(colorTexture, mySampler, fragUV);
+  let bloom_color = textureSample(emissiveTexture, mySampler, fragUV);
+  
+  let combined_color = ((bloom_color * composite_parameter.bloom_intensity) * composite_parameter.bloom_combine_constant);
+
+  let mapped_color = GTTonemap(combined_color.rgb);
+  //let mapped_color = aces(combined_color.rgb);
+  let gamma_corrected_color = pow(mapped_color, vec3<f32>(1.0 / 2.2));
+
+  return vec4<f32>(gamma_corrected_color + hdr_color.rgb, 1.0);  
+}

package/src/sprite/constants.js

@@ -0,0 +1 @@
+export const FLOAT32S_PER_SPRITE = 12 // vec2(translate) + vec2(scale) + vec4(tint) + opacity + rotation + emissiveIntensity + sortValue 

package/src/sprite/create-sprite-quads.js

@@ -0,0 +1,60 @@
+export default function createSpriteQuads (device, spritesheet) {
+
+    // u,v coordinates specify top left as 0,0  bottom right as 1,1
+    
+    /*
+    const vertices = new Float32Array([
+    //      position         tex     
+    //    x     y    z     u     v 
+        -0.5, -0.5, 0.0,  0.0, 0.0,
+        -0.5,  0.5, 0.0,  0.0, 1.0,
+         0.5,  0.5, 0.0,  1.0, 1.0,
+
+        // triangle 2 (2nd half of quad)
+        -0.5, -0.5, 0.0,  0.0, 0.0,
+         0.5,  0.5, 0.0,  1.0, 1.0,
+         0.5, -0.5, 0.0,  1.0, 0.0,
+    ])
+    */
+
+    const vertices = spritesheet.vertices
+
+    const usage = GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+
+    const descriptor = {
+        size: vertices.byteLength,
+        usage,
+        // make this memory space accessible from the CPU (host visible)
+        mappedAtCreation: true
+    }
+
+    const buffer = device.createBuffer(descriptor)
+
+    new Float32Array(buffer.getMappedRange()).set(vertices)
+
+    buffer.unmap()
+
+    const bufferLayout = {
+        arrayStride: 20,
+        stepMode: 'vertex',
+        attributes: [
+            // position
+            {
+                shaderLocation: 0,
+                format: 'float32x3',
+                offset: 0
+            },
+            // uv
+            {
+                shaderLocation: 1,
+                format: 'float32x2',
+                offset: 12
+            }
+        ]
+    }
+
+    return {
+        buffer,
+        bufferLayout,
+    }
+}