@footgun/cobalt 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 0.6.2
+* use preferred canvas format in more places
+
+# 0.6.1
+* use preferred canvas format in more places
+
 # 0.6.0
 * use preferred canvas format in various places instead of hardcoding to bgra8unorm, which doesn't seem to work on linux
   because that defaults to bgra8unorm-srgb

package/bundle.js

@@ -7269,10 +7269,19 @@ function createTexture(device, label, width, height, mip_count, format, usage) {
   };
 }
 
+// src/get-preferred-format.js
+function getPreferredFormat(cobalt) {
+  if (cobalt.canvas)
+    return navigator.gpu?.getPreferredCanvasFormat();
+  else
+    return cobalt.context.getPreferredFormat();
+}
+
 // src/create-texture-from-url.js
-async function createTextureFromUrl(c, label, url, format = "rgba8unorm") {
+async function createTextureFromUrl(c, label, url, format) {
   const response = await fetch(url);
   const blob = await response.blob();
+  format = format || getPreferredFormat(c);
   const imageData = await createImageBitmap(
     blob
     /*, { premultiplyAlpha: 'none', resizeQuality: 'pixelated' }*/
@@ -7303,7 +7312,8 @@ async function createTextureFromUrl(c, label, url, format = "rgba8unorm") {
 }
 
 // src/create-texture-from-buffer.js
-function createTextureFromBuffer(c, label, image, format = "rgba8unorm") {
+function createTextureFromBuffer(c, label, image, format) {
+  format = format || getPreferredFormat(c);
   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);
@@ -7687,14 +7697,6 @@ function destroy(bloom_mat) {
   bloom_mat.bind_groups_textures.length = 0;
 }
 
-// src/get-preferred-format.js
-function getPreferredFormat(cobalt) {
-  if (cobalt.canvas)
-    return navigator.gpu?.getPreferredCanvasFormat();
-  else
-    return cobalt.context.getPreferredFormat();
-}
-
 // src/scene-composite/scene-composite.wgsl
 var scene_composite_default = `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>,}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;}fn GTTonemap_point(x:f32)->f32{let m:f32=0.22;let a:f32=1.0;let c:f32=1.33;let P:f32=1.0;let l:f32=0.4;let l0:f32=((P-m)*l)/a;let S0:f32=m+l0;let S1:f32=m+a*l0;let C2:f32=(a*P)/(P-S1);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);}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 gamma_corrected_color=pow(mapped_color,vec3<f32>(1.0/2.2));return vec4<f32>(gamma_corrected_color+hdr_color.rgb,1.0);}`;
 
@@ -13802,7 +13804,7 @@ var LightsTexture = class {
       width: gridSize.x * lightsTextureProperties.resolutionPerLight,
       height: gridSize.y * lightsTextureProperties.resolutionPerLight
     };
-    const format = "rgba8unorm";
+    const format = lightsTextureProperties.textureFormat;
     this.texture = device.createTexture({
       label: "LightsTextureMask texture",
       size: [lightTextureSize.width, lightTextureSize.height],
@@ -14147,7 +14149,8 @@ async function init9(cobalt, node) {
       resolutionPerLight: MAX_LIGHT_SIZE,
       maxLightSize: MAX_LIGHT_SIZE,
       antialiased: false,
-      filtering: "nearest"
+      filtering: "nearest",
+      textureFormat: getPreferredFormat(cobalt)
     }
   });
   return {
@@ -14435,16 +14438,17 @@ var spritesheet_default = {
 async function init11(cobalt, node) {
   const { canvas, device } = cobalt;
   let spritesheet, colorTexture, emissiveTexture;
+  const format = getPreferredFormat(cobalt);
   if (canvas) {
     spritesheet = await fetchJson(node.options.spriteSheetJsonUrl);
     spritesheet = readSpriteSheet(spritesheet);
-    colorTexture = await createTextureFromUrl(cobalt, "sprite", node.options.colorTextureUrl, "rgba8unorm");
-    emissiveTexture = await createTextureFromUrl(cobalt, "emissive sprite", node.options.emissiveTextureUrl, "rgba8unorm");
+    colorTexture = await createTextureFromUrl(cobalt, "sprite", node.options.colorTextureUrl, format);
+    emissiveTexture = await createTextureFromUrl(cobalt, "emissive sprite", node.options.emissiveTextureUrl, format);
     canvas.style.imageRendering = "pixelated";
   } else {
     spritesheet = readSpriteSheet(node.options.spriteSheetJson);
-    colorTexture = await createTextureFromBuffer(cobalt, "sprite", node.options.colorTexture, "rgba8unorm");
-    emissiveTexture = await createTextureFromBuffer(cobalt, "emissive sprite", node.options.emissiveTexture, "rgba8unorm");
+    colorTexture = await createTextureFromBuffer(cobalt, "sprite", node.options.colorTexture, format);
+    emissiveTexture = await createTextureFromBuffer(cobalt, "emissive sprite", node.options.emissiveTexture, format);
   }
   const quads = createSpriteQuads(device, spritesheet);
   const uniformBuffer = device.createBuffer({

package/package.json

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

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

@@ -1,7 +1,10 @@
-import createTexture from './create-texture.js'
+import createTexture      from './create-texture.js'
+import getPreferredFormat from './get-preferred-format.js'
 
 
-export default function createTextureFromBuffer (c, label, image, format='rgba8unorm') {
+export default function createTextureFromBuffer (c, label, image, format) {
+
+    format = format || getPreferredFormat(c)
 
     const usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
     const mip_count = 1

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

@@ -1,10 +1,13 @@
-import createTexture from './create-texture.js'
+import createTexture      from './create-texture.js'
+import getPreferredFormat from './get-preferred-format.js'
 
 
-export default async function createTextureFromUrl (c, label, url, format='rgba8unorm') {
+export default async function createTextureFromUrl (c, label, url, format) {
     const response = await fetch(url)
     const blob = await response.blob()
 
+    format = format || getPreferredFormat(c)
+
     const imageData = await createImageBitmap(blob/*, { premultiplyAlpha: 'none', resizeQuality: 'pixelated' }*/)
     
     const usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT

package/src/light/light.js

@@ -1,3 +1,4 @@
+import getPreferredFormat from "../get-preferred-format.js";
 import * as publicAPI from './public-api.js'
 import { Viewport } from "./viewport";
 import { LightsRenderer } from './lights-renderer.js';
@@ -83,6 +84,7 @@ async function init(cobalt, node) {
             maxLightSize: MAX_LIGHT_SIZE,
             antialiased: false,
             filtering: "nearest",
+            textureFormat: getPreferredFormat(cobalt),
         },
     });
 

package/src/light/texture/lights-texture.ts

@@ -45,7 +45,7 @@ class LightsTexture {
             height: gridSize.y * lightsTextureProperties.resolutionPerLight,
         };
 
-        const format = "rgba8unorm";
+        const format = lightsTextureProperties.textureFormat;
         this.texture = device.createTexture({
             label: "LightsTextureMask texture",
             size: [lightTextureSize.width, lightTextureSize.height],

package/src/sprite/spritesheet.js

@@ -1,6 +1,7 @@
 import createSpriteQuads       from './create-sprite-quads.js'
 import createTextureFromBuffer from '../create-texture-from-buffer.js'
 import createTextureFromUrl    from '../create-texture-from-url.js'
+import getPreferredFormat      from '../get-preferred-format.js'
 import readSpriteSheet         from './read-spritesheet.js'
 import spriteWGSL              from './sprite.wgsl'
 import round                   from 'round-half-up-symmetric'
@@ -50,13 +51,15 @@ async function init (cobalt, node) {
 
     let spritesheet, colorTexture, emissiveTexture
 
+    const format = getPreferredFormat(cobalt)
+
     if (canvas) {
         // browser (canvas) path
         spritesheet = await fetchJson(node.options.spriteSheetJsonUrl)
         spritesheet = readSpriteSheet(spritesheet)
 
-        colorTexture = await createTextureFromUrl(cobalt, 'sprite', node.options.colorTextureUrl, 'rgba8unorm')
-        emissiveTexture = await createTextureFromUrl(cobalt, 'emissive sprite', node.options.emissiveTextureUrl, 'rgba8unorm')
+        colorTexture = await createTextureFromUrl(cobalt, 'sprite', node.options.colorTextureUrl, format)
+        emissiveTexture = await createTextureFromUrl(cobalt, 'emissive sprite', node.options.emissiveTextureUrl, format)
         
         // for some reason this needs to be done _after_ creating the material, or the rendering will be blurry
         canvas.style.imageRendering = 'pixelated'
@@ -65,8 +68,8 @@ async function init (cobalt, node) {
         // sdl + gpu path
         spritesheet = readSpriteSheet(node.options.spriteSheetJson)
 
-        colorTexture = await createTextureFromBuffer(cobalt, 'sprite', node.options.colorTexture, 'rgba8unorm')
-        emissiveTexture = await createTextureFromBuffer(cobalt, 'emissive sprite', node.options.emissiveTexture, 'rgba8unorm')
+        colorTexture = await createTextureFromBuffer(cobalt, 'sprite', node.options.colorTexture, format)
+        emissiveTexture = await createTextureFromBuffer(cobalt, 'emissive sprite', node.options.emissiveTexture, format)
     }
     
     const quads = createSpriteQuads(device, spritesheet)