@footgun/cobalt 0.5.0 → 0.6.0

package/esbuild.js

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

package/examples/02-sprites/index.html

@@ -159,7 +159,7 @@ async function main () {
         refs: { },
         options: {
             label: 'bloom + hdr compositing',
-            format: 'bgra8unorm',
+            format: 'PREFERRED_TEXTURE_FORMAT',
             mip_count: 1,
             viewportScale: 1.0,
             usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,

package/examples/03-tiles/index.html

@@ -160,7 +160,7 @@ async function main () {
         refs: { },
         options: {
             label: 'bloom + hdr compositing',
-            format: 'bgra8unorm',
+            format: 'PREFERRED_TEXTURE_FORMAT',
             mip_count: 1,
             viewportScale: 1.0,
             usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,

package/examples/05-bloom/index.html

@@ -178,7 +178,7 @@ async function main () {
         refs: { },
         options: {
             label: 'bloom + hdr compositing',
-            format: 'bgra8unorm',
+            format: 'PREFERRED_TEXTURE_FORMAT',
             mip_count: 1,
             viewportScale: 1.0,
             usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,

package/examples/06-displacement/index.html

@@ -162,7 +162,7 @@ async function main () {
         refs: { },
         options: {
             label: 'bloom + hdr compositing',
-            format: 'bgra8unorm',
+            format: 'PREFERRED_TEXTURE_FORMAT',
             mip_count: 1,
             viewportScale: 1.0,
             usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,

package/examples/08-light/index.html

@@ -174,7 +174,7 @@ async function main () {
         refs: { },
         options: {
             label: 'bloom + hdr compositing',
-            format: 'bgra8unorm',
+            format: 'PREFERRED_TEXTURE_FORMAT',
             mip_count: 1,
             viewportScale: 1.0,
             usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,

package/examples/09-sdl-polar-meters/package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@kmamal/gpu": "^0.2.0",
+    "@kmamal/gpu": "0.2.0",
     "@kmamal/sdl": "^0.11.7",
     "pngjs": "^7.0.0",
     "wgpu-matrix": "^3.4.0"

package/package.json

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

package/packages/graph-editor/.vercel/README.txt

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".vercel" in my project?
+The ".vercel" folder is created when you link a directory to a Vercel project.
+
+> What does the "project.json" file contain?
+The "project.json" file contains:
+- The ID of the Vercel project that you linked ("projectId")
+- The ID of the user or team your Vercel project is owned by ("orgId")
+
+> Should I commit the ".vercel" folder?
+No, you should not share the ".vercel" folder with anyone.
+Upon creation, it will be automatically added to your ".gitignore" file.

package/packages/graph-editor/.vercel/project.json

@@ -0,0 +1 @@
+{"projectId":"prj_jJXTHkZlQjFtTW7K7D94nIPjxcOX","orgId":"team_b8j5PhQ0qhPb9qIqUQzkxmra"}

package/src/cobalt.js

@@ -213,14 +213,6 @@ export function setViewportPosition (c, pos) {
 }
 
 
-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()

package/src/displacement/displacement.js

@@ -1,3 +1,4 @@
+import getPreferredFormat               from '../get-preferred-format.js'
 import { TrianglesBuffer }              from './triangles-buffer.js'
 import { DisplacementParametersBuffer } from './displacement-parameters-buffer.js'
 import { DisplacementComposition }      from './displacement-composition.js'
@@ -102,7 +103,7 @@ async function init (cobalt, node) {
 
     const displacementComposition = new DisplacementComposition({
         device,
-        targetFormat: "bgra8unorm",
+        targetFormat: getPreferredFormat(cobalt),
 
         colorTextureView: node.refs.color.data.view,
         noiseMapTextureView: node.refs.map.view,

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

@@ -1,4 +1,5 @@
-import blitWGSL from './fb-blit.wgsl'
+import blitWGSL           from './fb-blit.wgsl'
+import getPreferredFormat from '../get-preferred-format.js'
 
 
 // blit a source texture into a destination texture
@@ -6,8 +7,8 @@ import blitWGSL from './fb-blit.wgsl'
 export default {
     type: 'cobalt:fbBlit',
     refs: [
-        { name: 'in', type: 'cobaltTexture', format: 'bgra8unorm', access: 'read' },
-        { name: 'out', type: 'cobaltTexture', format: 'bgra8unorm', access: 'write' },
+        { name: 'in', type: 'cobaltTexture', format: 'PREFERRED_TEXTURE_FORMAT', access: 'read' },
+        { name: 'out', type: 'cobaltTexture', format: 'PREFERRED_TEXTURE_FORMAT', access: 'write' },
     ],
 
     // @params Object cobalt renderer world object
@@ -87,7 +88,7 @@ async function init (cobalt, node) {
             entryPoint: 'fs_main',
             targets: [
                 {
-                    format: 'bgra8unorm',
+                    format: getPreferredFormat(cobalt),
                     blend: {
                         color: {
                             srcFactor: 'src-alpha',

package/src/fb-texture/fb-texture.js

@@ -1,4 +1,5 @@
-import createTexture from '../create-texture.js'
+import createTexture      from '../create-texture.js'
+import getPreferredFormat from '../get-preferred-format.js'
 
 
 // Frame buffer textures automatically resize to match the cobalt viewport.
@@ -34,7 +35,9 @@ export default {
 async function init (cobalt, node) {
     const { device } = cobalt
 
-    const { label, mip_count, format, usage, viewportScale } = node.options
+    node.options.format = node.options.format === 'PREFERRED_TEXTURE_FORMAT' ? getPreferredFormat(cobalt) : node.options.format
+
+    const { format, label, mip_count, usage, viewportScale } = node.options
 
     return createTexture(device, label, cobalt.viewport.width * viewportScale, cobalt.viewport.height * viewportScale, mip_count, format, usage)
 }

package/src/get-preferred-format.js

@@ -0,0 +1,7 @@
+// so far this seems to be 'bgra8unorm' on macos/windows, 'bgra8unorm-srgb' on linux
+export default function getPreferredFormat (cobalt) {
+    if (cobalt.canvas)
+        return navigator.gpu?.getPreferredCanvasFormat()
+    else
+        return cobalt.context.getPreferredFormat()
+}

package/src/overlay/overlay.js

@@ -1,5 +1,6 @@
 import * as publicAPI          from '../sprite/public-api.js'
 import createSpriteQuads       from '../sprite/create-sprite-quads.js'
+import getPreferredFormat      from '../get-preferred-format.js'
 import overlayWGSL             from './overlay.wgsl'
 import sortedBinaryInsert      from '../sprite/sorted-binary-insert.js'
 import uuid                    from '../uuid.js'
@@ -142,7 +143,7 @@ async function init (cobalt, nodeData) {
     })
 
     const pipeline = device.createRenderPipeline({
-        label: 'overlay',
+        label: 'overlaysprite',
         vertex: {
             module: device.createShaderModule({
                 code: overlayWGSL
@@ -159,7 +160,7 @@ async function init (cobalt, nodeData) {
             targets: [
                 // color
                 {
-                    format: 'bgra8unorm',
+                    format: getPreferredFormat(cobalt),
                     blend: {
                         color: {
                             srcFactor: 'src-alpha',

package/src/primitives/primitives.js

@@ -1,3 +1,4 @@
+import getPreferredFormat         from '../get-preferred-format.js'
 import primitivesWGSL             from './primitives.wgsl'
 import publicAPI                  from './public-api.js'
 import { FLOAT32S_PER_SPRITE }    from './constants.js'
@@ -15,7 +16,7 @@ const _tmpVec3 = vec3.create(0, 0, 0)
 export default {
     type: 'cobalt:primitives',
     refs: [
-        { name: 'color', type: 'textView', format: 'rgba8unorm', access: 'write' },
+        { name: 'color', type: 'textView', format: 'PREFERRED_TEXTURE_VIEW', access: 'write' },
     ],
 
     // cobalt event handling functions
@@ -108,6 +109,7 @@ async function init (cobalt, node) {
 
     // Create render pipeline
     const pipeline = device.createRenderPipeline({
+        label: "primitives",
         layout: pipelineLayout,
         vertex: {
             module: shaderModule,
@@ -136,7 +138,7 @@ async function init (cobalt, node) {
             entryPoint: 'fs_main',
             targets: [
                 {
-                    format: 'bgra8unorm',
+                    format: getPreferredFormat(cobalt),
                     blend: {
                         color: {
                             srcFactor: 'src-alpha',

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

@@ -1,4 +1,4 @@
-import * as Cobalt        from '../cobalt.js'
+import getPreferredFormat from '../get-preferred-format.js'
 import sceneCompositeWGSL from './scene-composite.wgsl'
 
 
@@ -7,7 +7,7 @@ export default {
     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' },
+        { name: 'combined', type: 'textureView', format: 'PREFERRED_TEXTURE_FORMAT', access: 'write' },
     ],
     // @params Object cobalt renderer world object
     // @params Object options optional data passed when initing this node
@@ -38,7 +38,7 @@ function init (cobalt, node) {
   const { options, refs } = node
 
     const { device } = cobalt
-    const format = Cobalt.getPreferredFormat(cobalt) // bgra8unorm
+    const format = getPreferredFormat(cobalt) // bgra8unorm or bgra8unorm-srgb usually
 
     const bloom_intensity = options.bloom_intensity ?? 40.0
     const bloom_combine_constant = options.bloom_combine_constant ?? 0.68
@@ -55,6 +55,7 @@ function init (cobalt, node) {
     params_buf.unmap()
 
     const pipeline = device.createRenderPipeline({
+        label: 'scenecomposite',
         layout: 'auto',
         vertex: {
           module: device.createShaderModule({

package/src/sprite/spritesheet.js

@@ -113,7 +113,7 @@ async function init (cobalt, node) {
     })
 
     const pipeline = device.createRenderPipeline({
-        label: 'sprite',
+        label: 'spritesheet',
         vertex: {
             module: device.createShaderModule({
                 code: spriteWGSL

package/src/tile/atlas.js

@@ -111,7 +111,7 @@ async function init (cobalt, nodeData) {
     })
 
     const pipeline = device.createRenderPipeline({
-        label: 'tile',
+        label: 'tileatlas',
         vertex: {
             module: device.createShaderModule({
                 code: tileWGSL