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
- 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)
usageType - How this buffer will be used. Possible values:
Texture layout entry descriptor with usage type (usage v) and format (format v) :: reporter #4287f5
- 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.
usage - How this texture will be used. Possible values:
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
bindGroupName - The name by which this bind group will be referenced
bindGroupLayoutName - The name of a bind group layout definition to describe this bind group.
entries - Put bind group entry blocks here
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
- buffer
- storageTexture
bindingNumber - The slot to bind the resource to
bindingType - The type of resource to bind here. Valid types:
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
- 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.
usage - This block's flag. Possible values:
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
- 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 - This block's flag. Possible values:
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:
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
- 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.
- 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.
variableType - How the variable will be used. This also dictates where it can be declared. Does not allow inputs. Values:
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:
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
- 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.
- 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.
usage - The individual descriptor. Allows inputs. Values:
These settings describe how you can access the variable:
These settings describe when you can access the variable:
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
type - Accepts an input of a create type block, or you can use the menu for whatever reason.
values - You can use the function arg input block here, or just enter comma seperated 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
- vec2 - 2 values, accesible with xy/rg via the get property block.
- vec3 - 3 values, accesible with xyz/rgb via the get property block.
- vec4 - 4 values, accesible with xyzw/rgba via the get property block.
- array - A list of length values, accesible via the get array block.
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
- read
- write
- read_write
format - Same as other notes on the color format, read the webgpu spec
access - How this texture will be used. Possible values:
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
properties - Struct property blocks describing the properties in this struct.
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
- i32 - 32 bit integer.
- u32 - Unsigned 32 bit integer.
- f32 - 32 bit float.
- bool - Boolean value.
type - The type. Just returns the type. Does not allow inputs. Values:
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
- Cannot exceed 256 total
- 256 on the x axis max
- 256 on the y axis max
- 64 on the z axis max
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:
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.
- atomicStore
- atomicAdd
- atomicSub
- atomicMax
- atomicMin
- atomicAnd
- atomicOr
- atomicXor
- atomicExchange
- atomicCompareExchangeWeak
operation - The operation to perform. Possible values:
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
- 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.
barrierType - The type of control barrier to use. Possible values:
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.