Blocks

This page contains a list of every block, its inputs, and what it does. You might be thinking "wow, that probably took a while to write"

    WebGPU available? :: boolean #4287f5

This returns true if WebGPU is available in the current context, and false otherwise.

    Connected to GPU? :: boolean #4287f5

This returns true if there is an active connection to the GPU, and false otherwise(after a DeviceLost error is thrown)

    Def shader [shaderName] using bind group layout [bindGroupLayout] :: hat #4287f5

This creates a new shader with the code underneath the hat, compiled when the compile shaders block is run.

Inputs:

    shaderName - The name by which the shader is referenced, for example in the run shader block. Does not allow inputs.

    bindGroupLayout - The bind group layout that this shader will use, references a bind group layout definition

    compile shaders :: #4287f5

Compiles all of the shaders in your project. This can be pretty slow depending on the number and length of your shaders, so you should probably only run this whenever you update your shaders or the first time your project is run.

    when error thrown :: hat #4287f5

This hat is run whenever an error is thrown. More info at the errors page.

    clear current error :: #4287f5

Resets the error reporter to the default of { }

    Error :: reporter #4287f5

This reports the current error when an error is thrown, in the format: {"name":"errorName","body":"errorBody","source":"errorSource","full":"fullError"}

    name - The name of the error thrown, this doesn't contain spaces(unless it's a webgpu error, which might)

    body - A short description of the error

    source - The block or process that caused this error

    full - The full error, along with what may have caused it

    Reconnect to GPU :: #4287f5

If you somehow lose connection to the webgpu adapter(whether that be by accidentally making a permenant loop or something else), you can use this block to reconnect and continue using it. You will need to recreate all buffers, bind groups, etc.

    Run shader [shaderName] with using bind group [bindGroup] dimensions x: [dimX] y: [dimY] z: [dimZ] :: #4287f5

This block will run whatever is in the compute function of your shader.

Inputs

    shaderName - The name of the shader to run. Allows inputs.

    bindGroup - The bind group to use to provide resources to your shader. Takes a name which references a bind group definition.

    dimX, dimY, dimZ - The number of workgroups to dispatch per axis. This gets passed to the compute shader as a vector, you can reference it with num_workgroups. Your compute shader is run once for each location in these dimensions. Allows inputs.

    Create bind group layout called [bindGroupLayoutName] {
        Entries... :: #166af2
    } :: color #4287f5

Creates a bind group layout.

Inputs

    bindGroupLayoutName - The name that will be used to reference the bind group layout

    entries - Put bind group layout entry blocks here to define the layout.

    Add bind group layout entry with binding [bindingNumber] for type (bindingType v) and descriptor [bindGroupLayoutEntryDescriptor] :: #4287f5

Adds an entry to the bind group layout definition the block is inside of.

Inputs

  • bindingNumber - The binding number you are describing. A binding number is a slot in the list of possible inputs you can give your shader.
  • bindingType - The type of resource you are going to put in this slot. Here's the possible values for this:
    • buffer - Essentially just a list, but instead of items it sometimes has individual bytes. A buffer can only have numbers in it.
    • storageTexture - A texture which you can read from and write to. More info on the advanced page.
  • bindGroupLayoutEntryDescriptor - Fancy name, fairly simple input. Takes an input of an entry descriptor block. This input describes how this slot will be used, and the type of descriptor depends on the bindingType.

Entry descriptor blocks

An entry descriptor block describes a bind group layout entry, which block to use depends on the bindingType of the entry.

    Buffer layout entry descriptor with usage type (usageType v) :: #4287f5 reporter

    usageType - How this buffer will be used. Possible values:

    • read-only-storage is for a buffer that will only be read from
    • storage is for a buffer that will be written to and possibly read from
    • uniform is essentially read-only-storage except it's optimized for buffers that won't change much(or at all)
    Texture layout entry descriptor with usage type (usage v) and format (format v) :: reporter #4287f5

    usage - How this texture will be used. Possible values:

    • write-only - This texture can only be written to by a shader.
    • read-only - This texture can only be read from by a shader.
    • read-write - This texture can be read from and written to by a shader.
    Create bind group called [bindGroupName] using layout [bindGroupLayoutName] {
        Entries... :: #166af2
    } :: #4287f5

Creates a bind group, which binds various resources to binding slots. Similar to the create bind group layout block where you put the entries inside of it.

Inputs

    Add bind group entry with binding [bindingNumber] of type (bindingType v) using resource named [resourceName] :: #4287f5

Binds a given resource to a binding slot in the bind group this block is inside of.

Inputs

    bindingNumber - The slot to bind the resource to

    bindingType - The type of resource to bind here. Valid types:

    • buffer
    • storageTexture

    resourceName - The name of the resource, corresponds to a resource definition of the previously specified type.

Resource definitions

    Create buffer called [bufferName] with size\(in bytes\) [size] and usage flags [usageFlags] :: #4287f5

Creates a buffer.

Inputs

    bufferName - The name by which this buffer will be referenced.

    size - The size of the buffer, in bytes.

    usageFlags - Flags using the buffer usage block which describe how the buffer can be used.

    Buffer usage (usage v) :: reporter #4287f5

This block is an individual flag for how a buffer can be used, and multiple can be strung together using the usage | block.

Inputs

    usage - This block's flag. Possible values:

    • COPY_SRC - This can be the source buffer in the copy data block.
    • COPY_DST - This can be the destination buffer in the copy data block, and you can write data to it using the write data block.
    • MAP_READ - You can read from this buffer using the read buffer block.
    • MAP_WRITE - You can write to this buffer when it's been mapped. Currently unimplemented, so dw about it
    • QUERY_RESOLVE - No clue, but I haven't needed to use it anywhere and there's nothing implemented that uses it so dw about this
    • STORAGE - This buffer can be written and read from by your shader.
    • UNIFORM - This buffer will only be read from by your shader.
    Create texture called [texture] with dimensions [width] [height], color format (colorFormat v) and usage [usage] :: #4287f5

This is similar to the create buffer block, except it creates a texture. Shocking, I know.

Inputs

    texture - The name of the texture to create

    width/height - The size of the texture, in pixels

    colorFormat - The number of channels and bits per channel. There's a lot, see the webgpu spec.

    usage - Similar to the usage input for the create buffer block, this takes in usage flags. See the texture usage block.

    Texture usage (usage v) :: reporter #4287f5

This block is an individual flag for how a texture can be used, and multiple can be strung together using the usage | block.

Inputs

    usage - This block's flag. Possible values:

    • COPY_SRC - This can be the source texture in the copy texture to buffer block.
    • COPY_DST - This can be the destination texture in the write texture data block.
    • TEXTURE_BINDING - I don't think this is usable in compute shaders, but it's here just in case.
    • STORAGE_BINDING - This lets you bind this texture in a bind group.
    Usage [a] | [b] :: reporter #4287f5

This just lets you string together usage flags. Put a flag or another usage block in the inputs. This is equivilant to a binary OR operator.

Inputs

    a - An individual usage flag or another of this block.

    b - An individual usage flag or another of this block.

    Copy texture [texture] to buffer [buffer] with dimensions [width] [height] :: #4287f5

This copies data from a texture to a buffer.

Inputs

    texture - The texture to copy data from. Must have a flag of COPY_SRC.

    buffer - The buffer to copy data to. Must have a flag of COPY_DST.

    width/height - The dimensions to copy, in pixels(I think, idrk).

    Copy elements with dimensions [width], [height] from offset [offset] in buffer [buffer] to texture [texture] :: #4287f5

This copies data from a buffer to a texture.

Inputs

    width/height - The dimensions of the data to copy.

    offset - The offset, in bytes, to start reading from.

    buffer - The buffer to read the data from. Must have a usage flag of COPY_SRC.

    texture - The texture to write the data to. Must have a usage flag of COPY_DST.

    Write [amount] elements of data from array [array] to buffer [bufferName] from offset [off1] to offset [off2] :: #4287f5

This writes data from an arraybuffer to a buffer.

Inputs

  • amount - For a typed array(currently the only available kind of array), this is in elements(aka list items). Otherwise in bytes.
  • array - The name of the arrayBuffer to get the data from.
  • bufferName - The buffer to write to.
  • off1 - The offset to start reading from, see note in amount.
  • off2 - The offset to start writing to, see note in amount.
    Copy [numBytes] bytes of data from buffer [srcBuffer] from position [pos1] to buffer [dstBuffer] at position [pos2] :: #4287f5

Allows you to copy data from one buffer to another. The first buffer must have a usage of COPY_SRC, the second buffer must have a usage of COPY_DST.

Inputs

    numBytes - The amount of bytes to copy from the first buffer to the second. Must be a multiple of 4. Allows inputs.

    srcBuffer - The buffer to copy data from. Must have a usage flag of COPY_SRC.

    pos1 - The index at which to start copying data. Must be a multiple of 4. Allows inputs.

    dstBuffer - The buffer to copy data to. Must have a usage flag of COPY_DST

    pos2 - The index at which to start pasting data. Must be a multiple of 4. Allows inputs.

    Read buffer [buffer] to arraybuffer [arrayBuffer]:: #4287f5

Gets the data from the specified buffer, and copies it to a new arrayBuffer.

Note: This has a 1 frame delay when reading, which can't really be avoided. If I'm feeling silly in the future I might add a second block for this..

Inputs

    buffer - The buffer to read. Must have a usage flag of MAP_READ.

    arrayBuffer - The arraybuffer to write to. Will be created if it doesn't already exist.

    Write texture data from (costume v) to texture [texture] :: #4287f5

This writes texture data from a costume to a texture.

Inputs

    costume - The costume to get the data from.

    texture - The texture to write the data to. Must have a flag of COPY_DST.

    List arraybuffers :: reporter #4287f5

This returns a stringified array of all available arraybuffers. This includes arraybuffers from miyo's arraybuffer extension.

    Create arraybuffer called [name] with length [length] :: #4287f5

Creates a new arraybuffer, initialized to all zeroes. See the mdn reference

Inputs

    name - The name of the arraybuffer to create.

    length - The length of the arraybuffer, in bytes.

    Create arraybuffer and view called [name] from array [data] of type (type v) :: #4287f5

Creates a new view and arraybuffer from the given data.

Inputs

    name - The names of the arraybuffer and view to create

    data - The data to use when creating the view and arraybuffer.

    type - A typedArray type.

    Delete arraybuffer [arrayBuffer] :: #4287f5

Deletes an arraybuffer.

Inputs

    arrayBuffer - The arraybuffer to delete

    Resize arraybuffer (arrayBuffer v) to [size] bytes :: #4287f5

Resizes an arraybuffer, see javascript's ArrayBuffer.prototype.resize()

Inputs

    arrayBuffer - The arraybuffer to resize

    size - The new size, in bytes

    List views :: reporter #4287f5

Lists all arraybuffer views.

    View arraybuffer (arrayBuffer v) as (type v) called [name] :: #4287f5

Creates a new arraybuffer view of the given type, see the mdn reference.

Inputs

    arrayBuffer - The arraybuffer to view

    type - The type of the TypedArray view to create.

    name - The name of the view to create

    Delete view [view] :: #4287f5

Deletes the given view.

Inputs

    view - The view to delete

    Set item [index] of view [view] to [value] :: #4287f5

Sets the value in a view.

Inputs

    index - The index of the value to set.

    view - The view to manipulate.

    value - The value to set the index to.

    Copy data from array [array] to view [view] from index [index] :: #4287f5

Copies data from a stringified array to the given view. See TypedArray.prototype.set().

    array - The array of data to get the data from.

    view - The view to copy the data into.

    index - The index to start copying data into.

    Fill items [start] to [end] of view [view] with [value] :: #4287f5

Fills items in a view with the given value. See TypedArray.prototype.fill().

Inputs

    start - The index to start filling at, inclusive.

    end - The index to stop filling at, exclusive.

    view - The view to manipulate.

    Item [index] of arraybuffer view [view] :: reporter #4287f5

Returns the data at the index of the given view.

Inputs

    index - The index to read, 0 indexed.

    view - The view to read.

    Items [start] to [end] of view [view] :: reporter #4287f5

Returns a stringified subarray of a view. See TypedArray.prototype.slice().

Inputs

    start - The index to start reading at, inclusive.

    end - The index to stop reading at, exclusive.

    view - The view to read data from.

    Get view [view] as array :: reporter #4287f5

Returns a stringified array representation of a view. Equivilant to JSON.stringify(Array.from(TypedArray)).

Inputs

    view - The view to read.

    (property) of view [view] :: reporter #4287f5

Gets a proprety from a view. See TypedArray.prototype properties.

    property - The property to get. Possible values:

    • BYTES_PER_ELEMENT - Number of bytes per element. See mdn.
    • byteLength - Length of the view, in bytes. See mdn.
    • length - Length of the view, in elements. See mdn
    Declare (variableType v) variable as [variableName] with value [value]: (type v) :: #4287f5

This allows you to declare a variable. Not much else to it.

Inputs

    variableType - How the variable will be used. This also dictates where it can be declared. Does not allow inputs. Values:

    • var - This value can be changed, it is declared inside of a function or some other non-uniform control flow.
    • let - This value cannot be changed, it is declared inside of a function or some other non-uniform control flow. Different from javascript let!
    • const - This value cannot be changed, it is declared in uniform control flow.

    variableName - The name that you can use to reference the variable. Does not allow inputs.

    value - The initial value for this variable. Allows inputs.

    type - The type of this variable. This accepts inputs(you can use the create type block), but it also has a menu. Values:

    • i32 - 32 bit integer.
    • u32 - Unsigned 32 bit integer.
    • f32 - 32 bit float.
    • bool - Boolean value.
    • auto - The type will be automatically determined, but the type still cannot be changed. For example, you can't give it an initial value of 3(an integer) with type auto, then try to set it to 3.14159.
    Bind shader resource #[bindingNumber] to variable [variableName] with settings [usageSettings] type [type] :: #4287f5

Binds a resource provided from the bind type block so it can be used in your shader.

Inputs

    bindingNumber - The bindingNumber input of the corresponding bind type block. Does not allow inputs

    variableName - The name that you can use to reference the binding. Does not allow inputs

    usageSettings - How the variable will be used. Takes an input of variable usage blocks corresponding to the resourceUsage input of the resource's definition.

    type - The variable's type. Accepts an input of create type blocks.

    Variable usage (usage v) next [] :: reporter #4287f5

A block that can be used to describe how a variable will be used.

Inputs

    usage - The individual descriptor. Allows inputs. Values:

      These settings describe how you can access the variable:

    • read - You can read from this variable
    • write - You can write to this variable
    • read_write - You can read and write. Not sure what the difference is between this and the above two.
    • These settings describe when you can access the variable:

    • function - You can only access it from the same function that it is declared? Not too sure.
    • private - I assume you can only access this in the same scope it is declared, I have no idea.
    • workgroup - The variable is accessible in across the workgroup, regardless of local invocation.
    • uniform - This is used with the uniform usage type in input buffers.
    • storage - This is used with the storage usage type in input buffers.
    Variable [varName] (operation v) [value] :: #4287f5

This block lets you perform operations on variables.

Inputs

    varName - The name of the variable. This also accepts inputs, so you could put the In array get block here and change a value in the array.

    operation - The operation to perform here. I'm not explainingall these, go look at this page, it's basically the same. Does not allow inputs.

    value - The value to use in the operation. Allows inputs.

    Get variable [variableName] :: reporter #4287f5

Gets the variable. There's not much to this.

Inputs

    variableName - The variable name. Does not allow inputs.

    Pointer to variable [variable] :: reporter #4287f5

Returns a pointer to the given variable. If you use c this is &someVar, same thing with rust/wgsl. This is required for some blocks.

Inputs

    variable - The variable to point to.

    In object [objectName] get index [index] :: reporter #4287f5

Gets an index in an object, usually an array

Inputs

    objectName - The name of an object variable, or an object input. Allows inputs.

    index - The index you want to get from the object. Allows inputs.

    In object [objectName] get property [property] :: reporter #4287f5

This allows you to get a value, or multiple values, from an object. An object, in this case, is a struct(not yet added) or vector. For vectors, you can add multiple properties to return another vector, which is called swizzling. For example you could get xzyx from vec3(1,2,3), which would return vec4(1,3,2,1).

Inputs

    objectName - The name of the object, or an input object. Allows inputs.

    property - The property, or properties, to get from the object. Does not allow inputs.

    Construct type (type v) with values [values] :: reporter #4287f5

Allows you turn to a type into a value.

Inputs

    Create type (type v) of [subtype] length\(array only!\) [length] :: reporter #4287f5

Creates a type of the subtype. For example, with a type input of vec3 and a subtype input of a base type block with an input of bool, it would make a vec3 of boolean values.

Inputs

    type - The type to create. Does not allow inputs. Values:

    subtype - What the type will be made out of. Accepts inputs, you can use the base type block, the text input, or another one of this block.

    length - Array only. How long the array will be. Allows inputs(but the length must be constant).

    Matrix type with [columns] columns and [rows] rows :: reporter #4287f5

Creates a matrix type with the specified dimensions. If you don't know what a matrix is, idk google it or something man, how did you get this far in the first place

Inputs

    columns - The number of columns in the matrix, must be at least 2 and no more than 4

    rows - The number of rows in the matrix, must be at least 2 and no more than 4

    Texture type of (format v) with access (access v) :: reporter #4287f5

This creates a texture type. Not much to it, the settings input when binding must be empty.

Inputs

    format - Same as other notes on the color format, read the webgpu spec

    access - How this texture will be used. Possible values:

    • read
    • write
    • read_write
    Declare struct [name] {
        Properties... :: #166af2
    } :: #4287f5

A struct is like a class but without a constructor. It also exists in a lot of other languages, just google it.

Inputs

    Add property called [property] with type (type v) to struct :: #4287f5

This adds a property to the struct it is placed in.

Inputs

    property - The name of the property to add.

    type - The type of the property to add. You can put a custom type in here or use the dropdown.

    Type of struct [struct] :: reporter #4287f5

This block allows you to use a struct as a type.

Inputs

    struct - The name of the struct to use as a type.

    Base type (type v) :: reporter #4287f5

Returns a base type that can be used in the create type block, construct type block, or whatever else accepts a type input.

Inputs

    type - The type. Just returns the type. Does not allow inputs. Values:

    • i32 - 32 bit integer.
    • u32 - Unsigned 32 bit integer.
    • f32 - 32 bit float.
    • bool - Boolean value.
    WGSL builtin (funcName v) with args [args] :: reporter #4287f5

WGSL has a lot of builtin functions for vectors and other things. You can use them with this block.

Inputs

    funcName - The function name. Does not allow inputs. Almost all of the functions here are implemented, but some of the atomic, texture, and other misc functions aren't because they're not applicable/idk what they do

    args - The arguments for the function. You can either use the text and enter comma seperated inputs or use function arg input blocks.

    Function arg input [input], next [] :: reporter #4287f5

Allows you to provide inputs to functions, or the construct type block.

Inputs

    input - The value for that input. Allows inputs.

    Compute shader with workgroup size [dimensions] {
        
    } :: #4287f5

This is the important part of your shader which will run when you use the run shader block. It will cause an error if you don't have one of these in your shader.

Inputs

    dimensions - An array with a maximum of 3 values. This is how many local threads in your workgroup(this is kinda complicated, look at this diagram from webgpu fundamentals for more info) are dispatched on each axis, allowing you to run large computations quickly and at the same time. There are some limits on this though:

    • Cannot exceed 256 total
    • 256 on the x axis max
    • 256 on the y axis max
    • 64 on the z axis max

    You should try to use 64 unless you want to for some other reason. idk, look at this page. Oh also, Does not allow inputs.

You are provided with some information about when the compute shader is run. These cannot be accessed outside of your compute shader.:

    local_invocation_id(vec3 of u32) - The position in the local threads of the running of your compute shader.

    workgroup_id(vec3 of u32) - The postion in the workgroups dimensions(defined in the x, y, and z inputs of the run shader block) of the running of your compute shader.

    global_invocation_id(vec3 of u32) - A unique id for each thread, basically workgroup_id * workgroup_size + local_invocation_id.

    num_workgroups(vec3 of u32) - What was used in the run shader block for the dimensions as a vec3.

    local_invocation_index(u32) - idk man just go read the beginning of webgpu fundamentals compute shaders, i'm basically just repeating that anyways.

    for [varName] in range [start], [end] {

    } :: #4287f5

Just a for loop, nothing special.

Inputs

    varName - The name of the variable to create(this will be an i32!) and increment. Does not allow inputs.

    start - The starting value for the variable. Allows inputs.

    end - The loop stops if the variable is more than this number after running the code in the c. Allows inputs.

    While [condition] {

    } :: #4287f5

This is a while loop. You might be thinking, "derpygamer2142, why didn't you just do the repeat until block with a not statement 🤓🤓🤓", well it's because you can't use boolean variables in that(without the addon shut up) and stuff.

Inputs

    condition - The condition to check. If it's false, the loop stops. Allows inputs.

    break :: cap #4287f5

Just a break block. It exits out of any loop.

    continue :: cap #4287f5

Continues to the next iteration of a while or for loop. tbh i'm not sure if you can even use this, i don't know what the fuck "continuing" is or transferring control means. the documentation is cringe.

    Def function [funcName] that returns type (type v) with args [args] {

    } :: #4287f5

Defines a function that can be used later in your shader. No recursion allowed!

Inputs

    funcName - The name that you can use to reference the function. Does not allow inputs.

    type - The return type, menu is all base types and void. Void means it doesn't return anything. Allows inputs.

    args - The arguments that the function uses. Accepts an input of def arg blocks.

    Def arg [argName]: (type v), next [] :: reporter #4287f5

Defines an argument for your function.

Inputs

    argName - The argument's name. Does not allow inputs.

    type - The argument's type, when your function is run the corresponding input must be this type. Allows inputs.

    Get function arg [argName] :: reporter #4287f5

Basically the get variable block but with function arguments.

Inputs

    argName - The name of the argument to get. Does not allow inputs.

    Return [value] :: cap #4287f5

Makes the function return the value.

Inputs

    value - The value to return. If left blank will not return anything. Allows inputs.

    Run function [funcName] with args [args] :: #4287f5
    Run function [funcName] with args [args] :: reporter #4287f5

Runs the function specified. There's two of them because you probably want to use the value it returns.

Inputs

    funcName - The name of the function to run. Does not allow inputs.

    args - The arguments to pass to the function. Accepts an input of function arg input blocks, or comma seperated values in the text input.

    Create atomic of type (type v) :: reporter #4287f5

Creates an atomic type, which can be put in the type input of the declare variable block. Atomic variables allow you to read and write to a variable without introducing a race condition, see advanced.

Inputs

    type - Either an i32 or u32. The type of variable this atomic will be.

    Load atomic [atomic] :: reporter #4287f5

Reads an atomic variable in a thread safe way.

Inputs

    atomic - A pointer to an atomic variable.

    Perform operation (operation v) on atomic [atomic] with value [value] :: #4287f5
    Perform operation (operation v) on atomic [atomic] with value [value] :: reporter #4287f5

This performs the given operation on an atomic variable. See the wgsl spec.

    operation - The operation to perform. Possible values:

    • atomicStore
    • atomicAdd
    • atomicSub
    • atomicMax
    • atomicMin
    • atomicAnd
    • atomicOr
    • atomicXor
    • atomicExchange
    • atomicCompareExchangeWeak

    atomic - A pointer to an atomic variable.

    value - An i32 or u32 value to use in the operation.

    Barrier (barrierType v) :: #4287f5

A control barrier that pauses certain threads based on the barrierType. See the wgsl spec.

Inputs

    barrierType - The type of control barrier to use. Possible values:

    • storageBarrier - Pauses threads that are reading/writing to a storage variable until they have all reached this barrier.
    • textureBarrier - Pauses all threads that are reading/writing to a texture until they have reached this barrier.
    • workgroupBarrier - Pauses threads that are reading/writing to a workgroup variable until they have all reached this variable.
    Arbitrary WGSL [code] :: #4287f5
    Arbitrary WGSL [code] :: reporter #4287f5

This block allows you to add arbitrary WGSL to your shaders. If you feel like doing this, check the resources page.

Inputs

    code - The code to add to your shader. This doesn't do semicolons for you.

Supported non-gpu.sb3 blocks

    if < > {

    } :: control

    if < > {

    } else {

    } :: control

If, if-else.

    () + () :: math
    () - () :: math
    () * () :: math
    () / () :: math

These two input math blocks

    () > () :: math
    < () < () >
    () = () :: math

Comparison blocks

    < > and < > :: math
    < > or < > :: math
    not < > :: math

Boolean operators

    () mod ()
    [abs v] of ()

Mod, operator blocks.

Wow, that's a lot of blocks.

If you see something incorrect, missing, or you have any questions DM derpygamer2142 on discord.

-->

Previous page: advanced

Next page: quirks