Loading GLSLCanvas...

Configure Layers
Add Layer Delete Layer
Move Up Move Down

Layer Name

Layer Type

Back to Main Menu

Current Project    Open New Delete

Project Name	Code Editor Theme	Font Size
Lock Framerate	Syntax Highlighting	Tab as Spaces
Text Wrapping	Highlight Refresh Rate	Tab Size
Play Pause Hotkey

Render  Force Save  Export  Import  Play Fullscreen Back to Main Menu

New Project
Select a template:


Cancel    Create

Open Project
Select a project:


Cancel    Open

Render Image
Width
Height
Start Time
End Time

Cancel    Render

Rendering
Cancel

Render Complete
Save Image

Back to Project

No    Yes

GLSL Canvas
Back 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.

Getting Started
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.

Documentation
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.

Type	Name	Description
in vec4	pixelPosition	Fragment pixel position with the format vec4(xy = normalized -1 to 1 coordinate, zw = pixel 0 to RESOLUTION coordinate).
out vec4	pixelColor	Fragment pixel color output.
uniform vec2	RESOLUTION	Resolution size in pixels of destination render texture.
uniform float	TIME	Animation time in seconds, same value as 'Time' in the side panel.
uniform float	FRAMERATE	Current framerate when FPS is not fixed calculated as 1/timeSinceLastFrame.
uniform sampler2D	LayerN	Layer texture. N is a pass/image layer id.
uniform vec4	LayerSizeN	Layer texture resolution with format vec4(xy = size in pixels, zw = 1/size). N is a pass/image layer id.

Copyright Ethan Alexander Shulman 2023