@footgun/cobalt 0.7.0 → 0.7.1

package/esbuild.js

@@ -12,5 +12,5 @@ esbuild.build({
         glsl({ minify: true })
     ],
     outfile: 'bundle.js',
-    minify: false,
+    minify: true,
 })

package/examples/01-primitives/main.js

@@ -15,6 +15,28 @@ async function main () {
     const viewportHeight = constants.GAME_HEIGHT
     Global.renderer = await Cobalt.init(canvas, viewportWidth, viewportHeight)
 
+    // pasting about:gpucrash into a chrome tab causes all the webgpu contexts to crash.
+    // useful for testing context loss
+    Global.renderer.device.lost.then(async (info) => {
+        console.warn("WebGPU device lost.", info);
+        
+        Cobalt.reset(Global.renderer)
+
+        Global.renderer = await Cobalt.init(canvas, viewportWidth, viewportHeight)
+
+        const pNode = await Cobalt.initNode(Global.renderer, {
+            type: 'cobalt:primitives',
+            refs: {
+                // key is the var name defined in this node
+                // value is the var name in the cobalt resources dictionary
+                color: 'FRAME_TEXTURE_VIEW',
+            },
+            options: { }
+        })
+   
+        resizeViewport(Global.renderer, window.innerWidth, window.innerHeight)
+    })
+
     // instantiate all resource nodes
     
     const pNode = await Cobalt.initNode(Global.renderer, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@footgun/cobalt",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "type": "module",
   "main": "bundle.js",
   "description": "A 2D WebGpu renderer",

package/src/bloom/bloom.js

@@ -1,31 +1,28 @@
-import bloomWGSL     from './bloom.wgsl'
 import createTexture from '../create-texture.js'
-
+import bloomWGSL from './bloom.wgsl'
 
 // ported from https://github.com/rledrin/WebGPU-Bloom
 
 // TODO: investigate dynamic ubo offsets again. I feel like that could be more efficient
 // good example of this: https://github.com/austinEng/webgpu-samples/blob/main/src/sample/animometer/main.ts
 
-
 const BLOOM_MIP_COUNT = 7
 
-const MODE_PREFILTER      = 0
-const MODE_DOWNSAMPLE     = 1
+const MODE_PREFILTER = 0
+const MODE_DOWNSAMPLE = 1
 const MODE_UPSAMPLE_FIRST = 2
-const MODE_UPSAMPLE       = 3
-
+const MODE_UPSAMPLE = 3
 
 export default {
     type: 'cobalt:bloom',
     refs: [
         { name: 'emissive', type: 'textureView', format: 'rgba16', access: 'read' },
-        { name: 'hdr',      type: 'textureView', format: 'rgba16', access: 'read' },
-        { name: 'bloom',    type: 'textureView', format: 'rgba16', access: 'readwrite' },
+        { name: 'hdr', type: 'textureView', format: 'rgba16', access: 'read' },
+        { name: 'bloom', type: 'textureView', format: 'rgba16', access: 'readwrite' },
     ],
     // @params Object cobalt renderer world object
     // @params Object options optional data passed when initing this node
-    onInit: async function (cobalt, options={}) {
+    onInit: async function (cobalt, options = {}) {
         return init(cobalt, options)
     },
 
@@ -43,22 +40,21 @@ export default {
         // do whatever you need when the dimensions of the renderer change (resize textures, etc.)
         resize(cobalt, node)
     },
-    
-    onViewportPosition: function (cobalt, node) { },
-}
 
+    onViewportPosition: function (cobalt, node) {},
+}
 
-function init (cobalt, nodeData) {
+function init(cobalt, nodeData) {
     const { device } = cobalt
     const viewportWidth = cobalt.viewport.width
     const viewportHeight = cobalt.viewport.height
 
     const bloom_mat = {
         compute_pipeline: null,
-        bind_group: [ ],
-        bind_group_layout: [ ],
-        bind_groups_textures: [ ],
-        buffers: [ ],  // buffers that we should destroy when cleaning up
+        bind_group: [],
+        bind_group_layout: [],
+        bind_groups_textures: [],
+        buffers: [], // buffers that we should destroy when cleaning up
     }
 
     const layout = device.createBindGroupLayout({
@@ -69,8 +65,8 @@ function init (cobalt, nodeData) {
                 storageTexture: {
                     access: 'write-only',
                     format: 'rgba16float',
-                    viewDimension: '2d'
-                }
+                    viewDimension: '2d',
+                },
             },
             {
                 binding: 1,
@@ -78,8 +74,8 @@ function init (cobalt, nodeData) {
                 texture: {
                     sampleType: 'float',
                     viewDimension: '2d',
-                    multisampled: false
-                }
+                    multisampled: false,
+                },
             },
             {
                 binding: 2,
@@ -87,13 +83,13 @@ function init (cobalt, nodeData) {
                 texture: {
                     sampleType: 'float',
                     viewDimension: '2d',
-                    multisampled: false
-                }
+                    multisampled: false,
+                },
             },
             {
                 binding: 3,
                 visibility: GPUShaderStage.COMPUTE,
-                sampler: { }
+                sampler: {},
             },
             {
                 binding: 4,
@@ -101,7 +97,7 @@ function init (cobalt, nodeData) {
                 buffer: {
                     type: 'uniform',
                     //minBindingSize: 24 // sizeOf(BloomParam)
-                }
+                },
             },
             {
                 binding: 5,
@@ -109,32 +105,36 @@ function init (cobalt, nodeData) {
                 buffer: {
                     type: 'uniform',
                     //minBindingSize: 4 // sizeOf(lode_mode Param)
-                }
+                },
             },
-        ]
+        ],
     })
 
     bloom_mat.bind_group_layout.push(layout)
 
-    bloom_mat.bind_groups_textures.push(createTexture(
-        device,
-        'bloom downsampler image 0',
-        viewportWidth / 2,
-        viewportHeight / 2,
-        BLOOM_MIP_COUNT,
-        'rgba16float',
-        GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
-    ))
-
-    bloom_mat.bind_groups_textures.push(createTexture(
-        device,
-        'bloom downsampler image 1',
-        viewportWidth / 2,
-        viewportHeight / 2,
-        BLOOM_MIP_COUNT,
-        'rgba16float',
-        GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
-    ))
+    bloom_mat.bind_groups_textures.push(
+        createTexture(
+            device,
+            'bloom downsampler image 0',
+            viewportWidth / 2,
+            viewportHeight / 2,
+            BLOOM_MIP_COUNT,
+            'rgba16float',
+            GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
+        ),
+    )
+
+    bloom_mat.bind_groups_textures.push(
+        createTexture(
+            device,
+            'bloom downsampler image 1',
+            viewportWidth / 2,
+            viewportHeight / 2,
+            BLOOM_MIP_COUNT,
+            'rgba16float',
+            GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
+        ),
+    )
 
     // link bloom_mat.bind_groups_textures[2]) to bloom_mat.bloomTexture
     //bloom_mat.bind_groups_textures.push(bloom_mat.bloomTexture)
@@ -152,7 +152,7 @@ function init (cobalt, nodeData) {
     */
 
     const compute_pipeline_layout = device.createPipelineLayout({
-        bindGroupLayouts: bloom_mat.bind_group_layout
+        bindGroupLayouts: bloom_mat.bind_group_layout,
     })
 
     const compute_pipeline = device.createComputePipeline({
@@ -173,9 +173,7 @@ function init (cobalt, nodeData) {
     return bloom_mat
 }
 
-
-function set_all_bind_group (cobalt, bloom_mat, node) {
-
+function set_all_bind_group(cobalt, bloom_mat, node) {
     const { refs } = node
 
     const { device } = cobalt
@@ -185,20 +183,23 @@ function set_all_bind_group (cobalt, bloom_mat, node) {
     const bloom_knee = node.options.bloom_knee ?? 0.2
     const combine_constant = node.options.bloom_combine_constant ?? 0.68
 
-    const dat = new Float32Array([ bloom_threshold,
-                                bloom_threshold - bloom_knee,
-                                bloom_knee * 2.0,
-                                0.25 / bloom_knee,
-                                combine_constant,
-                                // required byte alignment bs
-                                0, 0, 0
-                                ])
+    const dat = new Float32Array([
+        bloom_threshold,
+        bloom_threshold - bloom_knee,
+        bloom_knee * 2.0,
+        0.25 / bloom_knee,
+        combine_constant,
+        // required byte alignment bs
+        0,
+        0,
+        0,
+    ])
 
     const params_buf = device.createBuffer({
         label: 'bloom static parameters 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
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     })
 
     bloom_mat.buffers.push(params_buf)
@@ -211,98 +212,117 @@ function set_all_bind_group (cobalt, bloom_mat, node) {
     bloom_mat.params_buf = params_buf
 
     // Prefilter bind group
-    bloom_mat.bind_group.push(create_bloom_bind_group(
-        device,
-        bloom_mat,
-        bloom_mat.bind_groups_textures[0].mip_view[0],
-        refs.emissive.data.view,
-        refs.hdr.data.view, // unused here, only for upsample passes
-        refs.hdr.data.sampler,
-        params_buf,
-        MODE_PREFILTER << 16 | 0, // mode_lod value
-    ));
-
-    // Downsample bind groups
-    for ( let i=1; i < BLOOM_MIP_COUNT; i++) {
-        // Ping
-        bloom_mat.bind_group.push(create_bloom_bind_group(
+    bloom_mat.bind_group.push(
+        create_bloom_bind_group(
             device,
             bloom_mat,
-            bloom_mat.bind_groups_textures[1].mip_view[i],
-            bloom_mat.bind_groups_textures[0].view,
+            bloom_mat.bind_groups_textures[0].mip_view[0],
+            refs.emissive.data.view,
             refs.hdr.data.view, // unused here, only for upsample passes
             refs.hdr.data.sampler,
             params_buf,
-            MODE_DOWNSAMPLE << 16 | (i - 1), // mode_lod value
-        ))
+            (MODE_PREFILTER << 16) | 0, // mode_lod value
+        ),
+    )
+
+    // Downsample bind groups
+    for (let i = 1; i < BLOOM_MIP_COUNT; i++) {
+        // Ping
+        bloom_mat.bind_group.push(
+            create_bloom_bind_group(
+                device,
+                bloom_mat,
+                bloom_mat.bind_groups_textures[1].mip_view[i],
+                bloom_mat.bind_groups_textures[0].view,
+                refs.hdr.data.view, // unused here, only for upsample passes
+                refs.hdr.data.sampler,
+                params_buf,
+                (MODE_DOWNSAMPLE << 16) | (i - 1), // mode_lod value
+            ),
+        )
 
         // Pong
-        bloom_mat.bind_group.push(create_bloom_bind_group(
+        bloom_mat.bind_group.push(
+            create_bloom_bind_group(
+                device,
+                bloom_mat,
+                bloom_mat.bind_groups_textures[0].mip_view[i],
+                bloom_mat.bind_groups_textures[1].view,
+                refs.hdr.data.view, // unused here, only for upsample passes
+                refs.hdr.data.sampler,
+                params_buf,
+                (MODE_DOWNSAMPLE << 16) | i, // mode_lod value
+            ),
+        )
+    }
+
+    // First Upsample
+    bloom_mat.bind_group.push(
+        create_bloom_bind_group(
             device,
             bloom_mat,
-            bloom_mat.bind_groups_textures[0].mip_view[i],
-            bloom_mat.bind_groups_textures[1].view,
+            bloom_mat.bind_groups_textures[2].mip_view[BLOOM_MIP_COUNT - 1],
+            bloom_mat.bind_groups_textures[0].view,
             refs.hdr.data.view, // unused here, only for upsample passes
             refs.hdr.data.sampler,
             params_buf,
-            MODE_DOWNSAMPLE << 16 | i, // mode_lod value
-        ))
-    }
-
-    // First Upsample
-    bloom_mat.bind_group.push(create_bloom_bind_group(
-        device,
-        bloom_mat,
-        bloom_mat.bind_groups_textures[2].mip_view[BLOOM_MIP_COUNT - 1],
-        bloom_mat.bind_groups_textures[0].view,
-        refs.hdr.data.view, // unused here, only for upsample passes
-        refs.hdr.data.sampler,
-        params_buf,
-        MODE_UPSAMPLE_FIRST << 16 | (BLOOM_MIP_COUNT - 2), // mode_lod value
-    ))
+            (MODE_UPSAMPLE_FIRST << 16) | (BLOOM_MIP_COUNT - 2), // mode_lod value
+        ),
+    )
 
     let o = true
 
     // Upsample
-    for (let i = BLOOM_MIP_COUNT-2; i >= 0; i--) {
+    for (let i = BLOOM_MIP_COUNT - 2; i >= 0; i--) {
         if (o) {
-            bloom_mat.bind_group.push(create_bloom_bind_group(
-                device,
-                bloom_mat,
-                bloom_mat.bind_groups_textures[1].mip_view[i],
-                bloom_mat.bind_groups_textures[0].view,
-                bloom_mat.bind_groups_textures[2].view,
-                refs.hdr.data.sampler,
-                params_buf,
-                MODE_UPSAMPLE << 16 | i, // mode_lod value
-            ))
+            bloom_mat.bind_group.push(
+                create_bloom_bind_group(
+                    device,
+                    bloom_mat,
+                    bloom_mat.bind_groups_textures[1].mip_view[i],
+                    bloom_mat.bind_groups_textures[0].view,
+                    bloom_mat.bind_groups_textures[2].view,
+                    refs.hdr.data.sampler,
+                    params_buf,
+                    (MODE_UPSAMPLE << 16) | i, // mode_lod value
+                ),
+            )
             o = false
         } else {
-            bloom_mat.bind_group.push(create_bloom_bind_group(
-                device,
-                bloom_mat,
-                bloom_mat.bind_groups_textures[2].mip_view[i],
-                bloom_mat.bind_groups_textures[0].view,
-                bloom_mat.bind_groups_textures[1].view,
-                refs.hdr.data.sampler,
-                params_buf,
-                MODE_UPSAMPLE << 16 | i, // mode_lod value
-            ))
+            bloom_mat.bind_group.push(
+                create_bloom_bind_group(
+                    device,
+                    bloom_mat,
+                    bloom_mat.bind_groups_textures[2].mip_view[i],
+                    bloom_mat.bind_groups_textures[0].view,
+                    bloom_mat.bind_groups_textures[1].view,
+                    refs.hdr.data.sampler,
+                    params_buf,
+                    (MODE_UPSAMPLE << 16) | i, // mode_lod value
+                ),
+            )
             o = true
         }
     }
 }
 
-
-function create_bloom_bind_group (device, bloom_mat, output_image, input_image, bloom_image, sampler, params_buf, mode_lod) {
-
-    const dat2 = new Uint32Array([ mode_lod ])
+function create_bloom_bind_group(
+    device,
+    bloom_mat,
+    output_image,
+    input_image,
+    bloom_image,
+    sampler,
+    params_buf,
+    mode_lod,
+) {
+    const dat2 = new Uint32Array([mode_lod])
 
     const lod_buf = device.createBuffer({
         label: 'bloom static mode_lod buffer',
         size: dat2.byteLength,
         mappedAtCreation: true,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     })
 
     bloom_mat.buffers.push(lod_buf)
@@ -317,43 +337,42 @@ function create_bloom_bind_group (device, bloom_mat, output_image, input_image,
         entries: [
             {
                 binding: 0,
-                resource: output_image
+                resource: output_image,
             },
             {
                 binding: 1,
-                resource: input_image
+                resource: input_image,
             },
             {
                 binding: 2,
-                resource: bloom_image
+                resource: bloom_image,
             },
             {
                 binding: 3,
-                resource: sampler
+                resource: sampler,
             },
             {
                 binding: 4,
                 resource: {
-                    buffer: params_buf
-                }
+                    buffer: params_buf,
+                },
             },
             {
                 binding: 5,
                 resource: {
-                    buffer: lod_buf
-                }
-            }
-        ]
+                    buffer: lod_buf,
+                },
+            },
+        ],
     })
 }
 
-
-function draw (cobalt, bloom_mat, commandEncoder) {
+function draw(cobalt, bloom_mat, commandEncoder) {
     const MODE_PREFILTER = 0
     const MODE_DOWNSAMPLE = 1
     const MODE_UPSAMPLE_FIRST = 2
     const MODE_UPSAMPLE = 3
-    
+
     let bind_group_index = 0
 
     const compute_pass = commandEncoder.beginComputePass({
@@ -362,7 +381,6 @@ function draw (cobalt, bloom_mat, commandEncoder) {
 
     compute_pass.setPipeline(bloom_mat.compute_pipeline)
 
-
     // PreFilter
     compute_pass.setBindGroup(0, bloom_mat.bind_group[bind_group_index])
     bind_group_index += 1
@@ -372,9 +390,9 @@ function draw (cobalt, bloom_mat, commandEncoder) {
     compute_pass.dispatchWorkgroups(mip_size.width / 8 + 1, mip_size.height / 4 + 1, 1)
 
     // Downsample
-    for (let i=1; i < BLOOM_MIP_COUNT; i++) {
+    for (let i = 1; i < BLOOM_MIP_COUNT; i++) {
         mip_size = get_mip_size(i, bloom_mat.bind_groups_textures[0])
-    
+
         // Ping
         compute_pass.setBindGroup(0, bloom_mat.bind_group[bind_group_index])
         bind_group_index += 1
@@ -386,33 +404,29 @@ function draw (cobalt, bloom_mat, commandEncoder) {
         compute_pass.dispatchWorkgroups(mip_size.width / 8 + 1, mip_size.height / 4 + 1, 1)
     }
 
-
     // First Upsample
     compute_pass.setBindGroup(0, bloom_mat.bind_group[bind_group_index])
     bind_group_index += 1
     mip_size = get_mip_size(BLOOM_MIP_COUNT - 1, bloom_mat.bind_groups_textures[2])
     compute_pass.dispatchWorkgroups(mip_size.width / 8 + 1, mip_size.height / 4 + 1, 1)
 
-    
     // Upsample
-    for (let i=BLOOM_MIP_COUNT - 2; i >= 0; i--) {
+    for (let i = BLOOM_MIP_COUNT - 2; i >= 0; i--) {
         mip_size = get_mip_size(i, bloom_mat.bind_groups_textures[2])
-    
+
         compute_pass.setBindGroup(0, bloom_mat.bind_group[bind_group_index])
         bind_group_index += 1
         compute_pass.dispatchWorkgroups(mip_size.width / 8 + 1, mip_size.height / 4 + 1, 1)
     }
 
-
     compute_pass.end()
 }
 
-
-function get_mip_size (current_mip, texture) {
+function get_mip_size(current_mip, texture) {
     let width = texture.size.width
     let height = texture.size.height
 
-    for (let i =0; i < current_mip; i++) {
+    for (let i = 0; i < current_mip; i++) {
         width /= 2
         height /= 2
     }
@@ -420,31 +434,34 @@ function get_mip_size (current_mip, texture) {
     return { width, height, depthOrArrayLayers: 1 }
 }
 
-
-function resize (cobalt, nodeData) {
+function resize(cobalt, nodeData) {
     const { device } = cobalt
     const bloom_mat = nodeData.data
     destroy(bloom_mat)
 
-    bloom_mat.bind_groups_textures.push(createTexture(
-        device,
-        'bloom downsampler image 0',
-        cobalt.viewport.width / 2,
-        cobalt.viewport.height / 2,
-        BLOOM_MIP_COUNT,
-        'rgba16float',
-        GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
-    ))
-
-    bloom_mat.bind_groups_textures.push(createTexture(
-        device,
-        'bloom downsampler image 1',
-        cobalt.viewport.width / 2,
-        cobalt.viewport.height / 2,
-        BLOOM_MIP_COUNT,
-        'rgba16float',
-        GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
-    ))
+    bloom_mat.bind_groups_textures.push(
+        createTexture(
+            device,
+            'bloom downsampler image 0',
+            cobalt.viewport.width / 2,
+            cobalt.viewport.height / 2,
+            BLOOM_MIP_COUNT,
+            'rgba16float',
+            GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
+        ),
+    )
+
+    bloom_mat.bind_groups_textures.push(
+        createTexture(
+            device,
+            'bloom downsampler image 1',
+            cobalt.viewport.width / 2,
+            cobalt.viewport.height / 2,
+            BLOOM_MIP_COUNT,
+            'rgba16float',
+            GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
+        ),
+    )
 
     // link bloom_mat.bind_groups_textures[2]) to bloom_mat.bloomTexture
     bloom_mat.bind_groups_textures.push(nodeData.refs.bloom.data)
@@ -463,13 +480,10 @@ function resize (cobalt, nodeData) {
     set_all_bind_group(cobalt, bloom_mat, nodeData)
 }
 
+function destroy(bloom_mat) {
+    for (const t of bloom_mat.bind_groups_textures) t.texture.destroy()
 
-function destroy (bloom_mat) {
-    for (const t of bloom_mat.bind_groups_textures)
-        t.texture.destroy()
-    
-    for (const b of bloom_mat.buffers)
-        b.destroy()
+    for (const b of bloom_mat.buffers) b.destroy()
 
     bloom_mat.buffers.length = 0