×

Slang Playground

Welcome to Slang Playground. Here you can write, compile and run Slang shaders locally within your browser. The Slang compiler runs locally in your browser and no data is sent to any server.

Compiling Shaders (the "Compile" button)

You can compile shaders to many targets supported by Slang here, including SPIR-V, HLSL, GLSL, Metal, and WGSL. Generating DXIL requires DXC, which doesn't run in the browser so it's not supported here.

Run Shaders (the "Run" button)

In addition to compiling shaders, this playground can also run simple shaders via WebGPU. The playground supports running two types of shaders:

• Image Compute Shader: This is a compute shader that returns a pixel value at a given image coordinate, similar to ShaderToys. An image compute shader must define a imageMain function, see the "Circle" demo for an example.
• Print Shader: This is a shader that prints text to the text output window. A print shader must define a printMain function, see the "Simple Print" demo for an example.

Shader Commands

WebGPU shaders in browser can use certain commands to specify how they will run. Requires import playground;.

[playground::ZEROS(512)]

Initialize a float buffer with zeros of the provided size.

[playground::BLACK(512, 512)]

Initialize a float texture with zeros of the provided size.

[playground::URL("https://example.com/image.png")]

Initialize a texture with image from URL.

[playground::RAND(1000)]

Initialize a float buffer with uniform random floats between 0 and 1.

[playground::TIME]

Gives a float uniform the current time in milliseconds.

[playground::MOUSE_POSITION]

Gives a float4 uniform mouse data.

• xy: mouse position (in pixels) during last button down.
• abs(zw): mouse position during last button click.
• sign(mouze.z): button is down
• sign(mouze.w): button is clicked

[playground::SLIDER(0.3, 0.0, 1.0)]

Control a float uniform with a provided default, minimum, and maximum.

[playground::COLOR_PICK(0.5, 0.5, 0.5)]

Control a float3 color uniform with a provided default color.

[playground::CALL::SIZE_OF("RESOURCE-NAME")]

Dispatch a compute pass using the resource size to determine the work-group size.

[playground::CALL(512, 512, 1)]

Dispatch a compute pass with the given grid of threads. The number of work-groups will be determined by dividing by the number of threads per work-group and rounding up.

[playground::CALL::ONCE]

Only dispatch the compute pass once at the start of rendering.

Playground functions

The playground shader also provides the following functions:

void printf<each T>(String format, expand each T values) where T : IPrintf

Prints the values formatted according to the format. Only available in print shaders.