Configure LayersAdd LayerDelete LayerMove UpMove Down
Back to Main Menu
Code Editor Theme
Highlight Refresh Rate
RenderForce SaveExportImportPlay FullscreenBack to Main Menu
Select a template:
Select a project:
Render CompleteSave ImageBack to Project
GLSL CanvasBack to Main Menu
Welcome to GLSL Canvas, this is a browser app where you can edit and render GLSL fragment shaders.
This about page contains info about the app, a getting started guide and documentation about the features.
Created by Ethan Alexander Shulman.
This app is open source and released under the MIT license.
Download Source Code
v0 July 31, 2023 - Initial release.
The GLSLCanvas main menu is split into 2 parts, the side panel(left) and the canvas(right). The side panel has 6 buttons along the top, '*' opens the project panel, '?' opens this about page,
'Play' compiles and plays the GLSL shader animation, 'Stop' stops the animation, '+' adds a new layer to the project, '-' deletes a layer from the project.
When you first launch GLSLCanvas it will load in the 'Hello GLSL' sample project, at the bottom of the side panel you can see the example code. Press the play button to run the example,
you should see 'Hello' alternating between red, green and blue on the canvas.
To start let's make a new project, open the project panel('*' button) and click 'New' in the top right. You will see a prompt to select a template, you can choose from your existing projects
or built-in templates provided by GLSLCanvas. Select 'Graphing 1D (Template)' and click 'Create', you now have created a new project based on the template. Now you are back in the project menu
of the new project, change 'Project Name' to 'Sqrt Graph' and click 'Back to Main Menu'. Back in the main menu you should see the 'Functions' layer selected and the code below, were going to modify
it to graph the function 'sqrt'. Change 'function0's code from 'return x;' to 'return sqrt(x);', then look for the definition 'FUNCTION_COUNT' and change 4 to 1. That's it, now click Play and you should
see 'sqrt' drawn as a red line.
GLSL shaders automatically have '#version 300es', 'precision highp float;' and 'precision highp int;' added so you don't have to. The table below describes the input/output/uniform variables available
to your shaders.
Fragment pixel position with the format vec4(xy = normalized -1 to 1 coordinate, zw = pixel 0 to RESOLUTION coordinate).
Fragment pixel color output.
Resolution size in pixels of destination render texture.
Animation time in seconds, same value as 'Time' in the side panel.
Current framerate when FPS is not fixed calculated as 1/timeSinceLastFrame.
Layer texture. N is a pass/image layer id.
Layer texture resolution with format vec4(xy = size in pixels, zw = 1/size). N is a pass/image layer id.