@footgun/cobalt 0.1.0

package/src/sprite/public-api.js

@@ -0,0 +1,215 @@
+import sortedBinaryInsert      from './sorted-binary-insert.js'
+import uuid                    from '../uuid.js'
+import { FLOAT32S_PER_SPRITE } from './constants.js'
+
+
+// returns a unique identifier for the created sprite
+export function addSprite (cobalt, renderPass, name, position, scale, tint, opacity, rotation, zIndex) {
+
+    const spritesheet = renderPass.refs.spritesheet.data.spritesheet
+    renderPass = renderPass.data
+
+    const spriteType = spritesheet.locations.indexOf(name)
+
+    // find the place in our spriteData where this sprite belongs.
+    const insertIdx = sortedBinaryInsert(zIndex, spriteType, renderPass)
+
+    // shift down all the data in spriteData from insertIdx to spriteCount-1
+    // https://stackoverflow.com/questions/35563529/how-to-copy-typedarray-into-another-typedarray
+    const offset = (insertIdx + 1) * FLOAT32S_PER_SPRITE
+    renderPass.spriteData.set(
+        renderPass.spriteData.subarray(insertIdx * FLOAT32S_PER_SPRITE, renderPass.spriteCount * FLOAT32S_PER_SPRITE),
+        offset
+    )
+
+    copySpriteDataToBuffer(renderPass, spritesheet, insertIdx, name, position, scale, tint, opacity, rotation, zIndex)
+
+    // shift down all of the sprite indices
+    for (const [ spriteId, idx ] of renderPass.spriteIndices)
+        if (idx >= insertIdx)
+            renderPass.spriteIndices.set(spriteId, idx+1)
+
+    // store the location of this sprite's data in the renderPass's float32array so that we can 
+    // reference it later, when we need to remove or update this sprite component
+    const spriteId = uuid()
+
+    renderPass.spriteIndices.set(spriteId, insertIdx)
+    renderPass.spriteCount++
+    renderPass.dirty = true
+
+    return spriteId
+}
+
+
+export function removeSprite (cobalt, renderPass, spriteId) {
+    renderPass = renderPass.data
+    const removeIdx = renderPass.spriteIndices.get(spriteId)
+
+    // shift up all of the sprites after the remove location by 1
+    for (const [ spriteId, idx ] of renderPass.spriteIndices)
+        if (idx > removeIdx)
+            renderPass.spriteIndices.set(spriteId, idx-1)
+
+    // shift up all the data in spriteData from removeIdx to spriteCount-1
+    // https://stackoverflow.com/questions/35563529/how-to-copy-typedarray-into-another-typedarray
+    let offset = removeIdx * FLOAT32S_PER_SPRITE
+    renderPass.spriteData.set(
+        renderPass.spriteData.subarray((removeIdx + 1) * FLOAT32S_PER_SPRITE, renderPass.spriteCount * FLOAT32S_PER_SPRITE),
+        offset
+    )
+
+    renderPass.spriteIndices.delete(spriteId)
+    renderPass.spriteCount--
+    renderPass.dirty = true
+}
+
+
+// remove all sprites
+export function clear (cobalt, renderPass) {
+    renderPass = renderPass.data
+    renderPass.spriteIndices.clear()
+    renderPass.spriteCount = 0
+    renderPass.instancedDrawCallCount = 0
+    renderPass.dirty = true
+}
+
+
+export function setSpriteName (cobalt, renderPass, spriteId, name, scale) {
+    const spritesheet = renderPass.refs.spritesheet.data.spritesheet
+    renderPass = renderPass.data
+
+    const spriteType = spritesheet.locations.indexOf(name)
+
+    const SPRITE_WIDTH = spritesheet.spriteMeta[name].w
+    const SPRITE_HEIGHT = spritesheet.spriteMeta[name].h
+
+    const spriteIdx = renderPass.spriteIndices.get(spriteId)
+    const offset = spriteIdx * FLOAT32S_PER_SPRITE
+
+    renderPass.spriteData[offset+2] = SPRITE_WIDTH * scale[0]
+    renderPass.spriteData[offset+3] = SPRITE_HEIGHT * scale[1]
+
+    // 12th float is order. lower bits 0-15 are spriteType, bits 16-23 are sprite Z index
+    const zIndex = renderPass.spriteData[offset + 11] >> 16 & 0xFF
+
+    // sortValue is used to sort the sprite by layer, then sprite type
+    //   zIndex      0-255 (8 bits)
+    //   spriteType  0-65,535 (16 bits)
+    const sortValue = (zIndex << 16 & 0xFF0000) | (spriteType & 0xFFFF)
+    renderPass.spriteData[offset+11] = sortValue
+
+    renderPass.dirty = true
+}
+
+
+export function setSpritePosition (cobalt, renderPass, spriteId, position) {
+    renderPass = renderPass.data
+
+    const spriteIdx = renderPass.spriteIndices.get(spriteId)
+    const offset = spriteIdx * FLOAT32S_PER_SPRITE
+
+    renderPass.spriteData[offset]   = position[0]
+    renderPass.spriteData[offset+1] = position[1]
+
+    renderPass.dirty = true
+}
+
+
+export function setSpriteTint (cobalt, renderPass, spriteId, tint) {
+    renderPass = renderPass.data
+
+    const spriteIdx = renderPass.spriteIndices.get(spriteId)
+    const offset = spriteIdx * FLOAT32S_PER_SPRITE
+
+    renderPass.spriteData[offset+4] = tint[0]
+    renderPass.spriteData[offset+5] = tint[1]
+    renderPass.spriteData[offset+6] = tint[2]
+    renderPass.spriteData[offset+7] = tint[3]
+    
+    renderPass.dirty = true
+}
+
+
+export function setSpriteOpacity (cobalt, renderPass, spriteId, opacity) {
+    renderPass = renderPass.data
+
+    const spriteIdx = renderPass.spriteIndices.get(spriteId)
+    const offset = spriteIdx * FLOAT32S_PER_SPRITE
+
+    renderPass.spriteData[offset+8] = opacity
+
+    renderPass.dirty = true
+}
+
+
+export function setSpriteRotation (cobalt, renderPass, spriteId, rotation) {
+    renderPass = renderPass.data
+
+    const spriteIdx = renderPass.spriteIndices.get(spriteId)
+    const offset = spriteIdx * FLOAT32S_PER_SPRITE
+
+    renderPass.spriteData[offset+9] = rotation
+    renderPass.dirty = true
+}
+
+
+export function setSpriteScale (cobalt, renderPass, spriteId, name, scale) {
+    const spritesheet = renderPass.refs.spritesheet.data.spritesheet
+    renderPass = renderPass.data
+
+    const spriteIdx = renderPass.spriteIndices.get(spriteId)
+    const offset = spriteIdx * FLOAT32S_PER_SPRITE
+
+    const SPRITE_WIDTH = spritesheet.spriteMeta[name].w
+    const SPRITE_HEIGHT = spritesheet.spriteMeta[name].h
+
+    renderPass.spriteData[offset+2] = SPRITE_WIDTH * scale[0]
+    renderPass.spriteData[offset+3] = SPRITE_HEIGHT * scale[1]
+
+    renderPass.dirty = true
+}
+
+
+export function setSprite (cobalt, renderPass, spriteId, name, position, scale, tint, opacity, rotation, zIndex) {
+    const spritesheet = renderPass.refs.spritesheet.data.spritesheet
+    renderPass = renderPass.data
+
+    const spriteIdx = renderPass.spriteIndices.get(spriteId)
+    copySpriteDataToBuffer(renderPass, spritesheet, spriteIdx, name, position, scale, tint, opacity, rotation, zIndex)
+
+    renderPass.dirty = true
+}
+
+
+// copy sprite data into the webgpu renderpass
+function copySpriteDataToBuffer (renderPass, spritesheet, insertIdx, name, position, scale, tint, opacity, rotation, zIndex) {
+    
+    if (!spritesheet.spriteMeta[name])
+        throw new Error(`Sprite name ${name} could not be found in the spritesheet metaData`)
+
+    const offset = insertIdx * FLOAT32S_PER_SPRITE
+
+    const SPRITE_WIDTH = spritesheet.spriteMeta[name].w
+    const SPRITE_HEIGHT = spritesheet.spriteMeta[name].h
+
+    // sortValue is used to sort the sprite by layer, then sprite type
+    //   layer       can be a value up to 255 (8 bits)
+    //   spriteType  can be a value up to 65,535 (16 bits)
+    const spriteType = spritesheet.locations.indexOf(name)
+    const sortValue = (zIndex << 16 & 0xFF0000) | (spriteType & 0xFFFF)
+
+    renderPass.spriteData[offset]   = position[0]
+    renderPass.spriteData[offset+1] = position[1]
+    renderPass.spriteData[offset+2] = SPRITE_WIDTH * scale[0]
+    renderPass.spriteData[offset+3] = SPRITE_HEIGHT * scale[1]
+    renderPass.spriteData[offset+4] = tint[0]
+    renderPass.spriteData[offset+5] = tint[1]
+    renderPass.spriteData[offset+6] = tint[2]
+    renderPass.spriteData[offset+7] = tint[3]
+    renderPass.spriteData[offset+8] = opacity
+    renderPass.spriteData[offset+9] = rotation
+    // we used to set emissive intensity per-sprite, but now we use the alpha channel in the emissions texure,
+    // which enables us to adjust emission strength on a per-pixel basis. Copying it into the sprite data is a leftover
+    //renderPass.spriteData[offset+10] = emissiveIntensity
+    renderPass.spriteData[offset+11] = sortValue
+}

package/src/sprite/read-spritesheet.js

@@ -0,0 +1,103 @@
+// take a texturepacker json hash export and convert it into a Float32Array
+// copied into the renderer's vertex buffer
+//
+// @return Float32Array vertices (interleaved positions and uvs)
+export default function readSpriteSheet (spritesheetJson) {
+
+    // a sprite is a quad (2 triangles) so it has 6 vertices
+    // each vertex has 5 float32 (interleaved vec3 position, vec2 uv)
+    const spriteFloatCount = 5 * 6
+
+    // each key in the spritesheet is a unique sprite type
+    const spriteCount = Object.keys(spritesheetJson.frames).length
+    
+    const vertices = new Float32Array(spriteCount * spriteFloatCount)
+
+    /*
+    stores mapping between sprite name and first vertex index. e.g.,
+        [
+            'hero_run-0',      // 1st vertex index is at 0
+            'bullet_travel-0'  // 1st vertex index is at 6
+            'bob_idle-1'       // 1st vertex index is at 12
+        ]
+    these will alway be multiples of 6, because there are 6 vertices per sprite
+    */
+    const locations = [ ]
+
+    const spriteMeta = { }
+
+    let i = 0
+
+    for (const frameName in spritesheetJson.frames) {
+        const frame = spritesheetJson.frames[frameName]
+
+        locations.push(frameName)
+
+        spriteMeta[frameName] = frame.sourceSize
+
+        // iterate over each sprite and fill it's position and u,v coords in the output
+
+        // calculate normalized vertex coordinates, accounting for trimmed space
+        const minX = -0.5 + (frame.spriteSourceSize.x / frame.sourceSize.w)
+        const minY = -0.5 + (frame.spriteSourceSize.y / frame.sourceSize.h)
+
+        const maxX = -0.5 + ((frame.spriteSourceSize.x + frame.spriteSourceSize.w) / frame.sourceSize.w)
+        const maxY = -0.5 + ((frame.spriteSourceSize.y + frame.spriteSourceSize.h) / frame.sourceSize.h)
+
+        const p0 = [ minX, minY, 0 ]
+        const p1 = [ minX, maxY, 0 ]
+        const p2 = [ maxX, maxY, 0 ]
+        const p3 = [ maxX, minY, 0 ]
+
+
+        // calculate uvs
+        // u,v coordinates specify top left as 0,0  bottom right as 1,1
+        const minU = 0.0 + (frame.frame.x / spritesheetJson.meta.size.w)
+        const minV = 0.0 + (frame.frame.y / spritesheetJson.meta.size.h)
+        const maxU = 0.0 + ((frame.frame.x + frame.frame.w) / spritesheetJson.meta.size.w)
+        const maxV = 0.0 + ((frame.frame.y + frame.frame.h) / spritesheetJson.meta.size.h)
+
+        const uv0 = [ minU, minV ]
+        const uv1 = [ minU, maxV ]
+        const uv2 = [ maxU, maxV ]
+        const uv3 = [ maxU, minV ]
+
+
+        // quad triangles are  [ p0, p1, p2 ]  ,  [ p0, p2, p3 ]
+        // vertex data is interleaved; a single vertex has a vec3 position followed immediately by vec2 uv
+        vertices.set(p0, i)
+        vertices.set(uv0, i + 3)
+
+        vertices.set(p1, i + 5)
+        vertices.set(uv1, i + 8)
+
+        vertices.set(p2, i + 10)
+        vertices.set(uv2, i + 13)
+
+        vertices.set(p0, i + 15)
+        vertices.set(uv0, i + 18)
+
+        vertices.set(p2, i + 20)
+        vertices.set(uv2, i + 23)
+
+        vertices.set(p3, i + 25)
+        vertices.set(uv3, i + 28)        
+
+        i += spriteFloatCount
+    }
+
+    return { /*spriteCount, */ spriteMeta, locations, vertices }
+}
+
+
+/*
+texturepacker frame structure:
+    "f2.png":
+    {
+        "frame": {"x":15,"y":1,"w":10,"h":15},
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": {"x":22,"y":17,"w":10,"h":15},
+        "sourceSize": {"w":32,"h":32}
+    },
+*/

package/src/sprite/sorted-binary-insert.js

@@ -0,0 +1,45 @@
+import { FLOAT32S_PER_SPRITE } from './constants.js'
+
+
+// return the index into the renderPass. array where the new sprite should be inserted
+export default function sortedBinaryInsert (spriteZIndex, spriteType, renderPass) {
+
+    if (renderPass.spriteCount === 0)
+        return 0
+
+    let low = 0
+    let high = renderPass.spriteCount - 1
+
+    // order is used to sort the sprite by layer, then sprite type
+    //   zIndex      0-255    (8 bits)
+    //   spriteType  0-65,535 (16 bits)
+    const order = (spriteZIndex << 16 & 0xFF0000) | (spriteType & 0xFFFF)
+
+    // binary search through spriteData since it's already sorted low to high
+    while (low <= high) {
+        
+        // the 12th float of each sprite stores the sortValue
+
+        const lowOrder = renderPass.spriteData[low * FLOAT32S_PER_SPRITE + 11]
+        if (order <= lowOrder)
+            return low
+
+        const highOrder = renderPass.spriteData[high * FLOAT32S_PER_SPRITE + 11]
+        if (order >= highOrder)
+            return high + 1
+
+        const mid = Math.floor((low + high) / 2)
+
+        const midOrder = renderPass.spriteData[mid * FLOAT32S_PER_SPRITE + 11]
+
+        if(order === midOrder)
+            return mid + 1
+       
+        if (order > midOrder)
+            low = mid + 1
+        else
+            high = mid - 1
+    }
+
+    return low
+}

package/src/sprite/sprite.js

@@ -0,0 +1,268 @@
+import * as publicAPI          from '../sprite/public-api.js'
+import { FLOAT32S_PER_SPRITE } from './constants.js'
+
+
+// an emissive sprite renderer
+
+
+/*
+Sprites are typically dynamic; they can move, they are animated, they can be colored, rotated etc.
+
+These use a `SpriteRenderPass` data structure which allows for dynamically adding/removing/updating sprites at run time.
+
+Internally, `SpriteRenderPass` objects are rendered as instanced triangles.
+Adding and removing sprites pre-sorts all triangles based on they layer they're on + the type of sprite they are.
+This lines up the data nicely for WebGpu such that they don't require any work in the render loop.
+
+Each type of sprite is rendered as 2 triangles, with a number instances for each sprite.
+This instance data is transfered to the GPU, which is then calculated in the shaders (position, rotation, scale, tinting, opacity, etc.)
+
+All of the matrix math for these sprites is done in a vertex shader, so they are fairly efficient to move, color and rotate, but it's not free.
+There is still some CPU required as the number of sprites increases.
+*/
+
+export default {
+    type: 'cobalt:sprite',
+    refs: [
+        { name: 'spritesheet', type: 'customResource', access: 'read' },
+        { name: 'hdr', type: 'textureView', format: 'rgba16float', access: 'write' },
+        { name: 'emissive', type: 'textureView', format: 'rgba16float', access: 'write' },
+    ],
+
+    // cobalt event handling functions
+
+    // @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.)
+    },
+
+    onViewportPosition: function (cobalt, node) {
+    },
+
+    // optional
+    customFunctions: {
+        ...publicAPI,
+    },
+}
+
+
+// This corresponds to a WebGPU render pass.  It handles 1 sprite layer.
+async function init (cobalt, nodeData) {
+    const { device } = cobalt
+    
+    const MAX_SPRITE_COUNT = 16192  // max number of sprites in a single sprite render pass
+
+    const numInstances = MAX_SPRITE_COUNT
+
+    const translateFloatCount = 2 // vec2
+    const translateSize = Float32Array.BYTES_PER_ELEMENT * translateFloatCount  // in bytes
+
+    const scaleFloatCount = 2 // vec2
+    const scaleSize = Float32Array.BYTES_PER_ELEMENT * scaleFloatCount  // in bytes
+
+    const tintFloatCount = 4 // vec4
+    const tintSize = Float32Array.BYTES_PER_ELEMENT * tintFloatCount // in bytes
+
+    const opacityFloatCount = 4 // vec4. technically we only need 3 floats (opacity, rotation, emissiveIntensity) but that screws up data alignment in the shader
+    const opacitySize = Float32Array.BYTES_PER_ELEMENT * opacityFloatCount  // in bytes
+
+    // instanced sprite data (scale, translation, tint, opacity, rotation, emissiveIntensity)
+    const spriteBuffer = device.createBuffer({
+        size: (translateSize + scaleSize + tintSize + opacitySize) * numInstances, // 4x4 matrix with 4 bytes per float32, per instance
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+        //mappedAtCreation: true,
+    })
+
+    const spritesheet = nodeData.refs.spritesheet.data
+
+    const bindGroup = device.createBindGroup({
+        layout: nodeData.refs.spritesheet.data.bindGroupLayout,
+        entries: [
+            {
+                binding: 0,
+                resource: {
+                    buffer: spritesheet.uniformBuffer
+                }
+            },
+            {
+                binding: 1,
+                resource: spritesheet.colorTexture.view
+            },
+            {
+                binding: 2,
+                resource: spritesheet.colorTexture.sampler
+            },
+            {
+                binding: 3,
+                resource: {
+                    buffer: spriteBuffer
+                }
+            },
+            {
+                binding: 4,
+                resource: spritesheet.emissiveTexture.view
+            },
+        ]
+    })
+
+    return {
+        // instancedDrawCalls is used to actually perform draw calls within the render pass
+        // layout is interleaved with baseVtxIdx (the sprite type), and instanceCount (how many sprites)
+        // [
+        //    baseVtxIdx0, instanceCount0,
+        //    baseVtxIdx1, instanceCount1,
+        //    ...
+        // ]
+        instancedDrawCalls: new Uint32Array(MAX_SPRITE_COUNT * 2),
+        instancedDrawCallCount: 0,
+
+        bindGroup,
+        spriteBuffer,
+
+        // actual sprite instance data. ordered by layer, then sprite type
+        // this is used to update the spriteBuffer.
+        spriteData: new Float32Array(MAX_SPRITE_COUNT * FLOAT32S_PER_SPRITE), 
+        spriteCount: 0,
+
+        spriteIndices: new Map(), // key is spriteId, value is insert index of the sprite. e.g., 0 means 1st sprite , 1 means 2nd sprite, etc.
+
+        // when a sprite is changed the renderpass is dirty, and should have it's instance data copied to the gpu
+        dirty: false,
+    }
+}
+
+
+function draw (cobalt, node, commandEncoder) {
+    const { device } = cobalt
+
+    // on the first render, we should clear the color attachment.
+    // otherwise load it, so multiple sprite passes can build up data in the color and emissive textures
+	const loadOp = node.options.loadOp || 'load'
+
+    if (node.data.dirty) {
+        _rebuildSpriteDrawCalls(node.data)
+        node.data.dirty = false
+    }
+
+    // TODO: somehow spriteCount can be come negative?! for now just guard against this
+    if (node.data.spriteCount > 0) {
+        const writeLength = node.data.spriteCount * FLOAT32S_PER_SPRITE * Float32Array.BYTES_PER_ELEMENT
+        device.queue.writeBuffer(node.data.spriteBuffer, 0, node.data.spriteData.buffer, 0, writeLength)
+    }
+
+    const renderpass = commandEncoder.beginRenderPass({
+        colorAttachments: [
+            // color
+            {
+                view: node.refs.hdr.data.view,
+                clearValue: cobalt.clearValue,
+                loadOp,
+                storeOp: 'store'
+            },
+
+            // emissive
+            {
+                view: node.refs.emissive.data.view,
+                clearValue: cobalt.clearValue,
+                loadOp: 'clear',
+                storeOp: 'store'
+            }
+        ]
+    })
+
+    renderpass.setPipeline(node.refs.spritesheet.data.pipeline)
+    renderpass.setBindGroup(0, node.data.bindGroup)
+    renderpass.setVertexBuffer(0, node.refs.spritesheet.data.quads.buffer)
+
+    // write sprite instance data into the storage buffer, sorted by sprite type. e.g.,
+    //      renderpass.draw(6,  1,  0, 0)  //  1 hero instance
+    //      renderpass.draw(6, 14,  6, 1)  // 14 bat instances
+    //      renderpass.draw(6,  5, 12, 15) //  5 bullet instances
+
+    // render each sprite type's instances
+    const vertexCount = 6
+    let baseInstanceIdx = 0
+
+    for (let i=0; i < node.data.instancedDrawCallCount; i++) {
+        // [
+        //    baseVtxIdx0, instanceCount0,
+        //    baseVtxIdx1, instanceCount1,
+        //    ...
+        // ]
+        const baseVertexIdx = node.data.instancedDrawCalls[i*2  ] * vertexCount
+        const instanceCount = node.data.instancedDrawCalls[i*2+1]
+        renderpass.draw(vertexCount, instanceCount, baseVertexIdx, baseInstanceIdx)
+        baseInstanceIdx += instanceCount
+    }
+
+    renderpass.end()
+}
+
+
+// build instancedDrawCalls
+function _rebuildSpriteDrawCalls (renderPass) {
+    let currentSpriteType = -1
+    let instanceCount = 0
+    renderPass.instancedDrawCallCount = 0
+
+    for (let i=0; i < renderPass.spriteCount; i++) {
+
+        // 12th float is order. lower bits 0-15 are spriteType, bits 16-23 are sprite Z index
+        const spriteType = renderPass.spriteData[i * FLOAT32S_PER_SPRITE + 11] & 0xFFFF
+
+        if (spriteType !== currentSpriteType) {
+            if (instanceCount > 0) {
+                renderPass.instancedDrawCalls[renderPass.instancedDrawCallCount * 2]     = currentSpriteType
+                renderPass.instancedDrawCalls[renderPass.instancedDrawCallCount * 2 + 1] = instanceCount
+                renderPass.instancedDrawCallCount++
+            }
+
+            currentSpriteType = spriteType
+            instanceCount = 0
+        }
+
+        instanceCount++
+    }
+
+    if (instanceCount > 0) {
+        renderPass.instancedDrawCalls[renderPass.instancedDrawCallCount * 2]     = currentSpriteType
+        renderPass.instancedDrawCalls[renderPass.instancedDrawCallCount * 2 + 1] = instanceCount
+        renderPass.instancedDrawCallCount++
+    }
+}
+
+
+function destroy (node) {
+    node.data.instancedDrawCalls = null
+    
+    node.data.bindGroup = null
+
+    node.data.spriteBuffer.destroy()
+    node.data.spriteBuffer = null
+
+    node.data.spriteData = null
+    node.data.spriteIndices.clear()
+    node.data.spriteIndices = null
+}
+
+
+async function fetchJson (url) {
+    const raw = await fetch(url)
+    return raw.json()
+}
+