Loading GLSLCanvas...



Copyright Ethan Alexander Shulman 2023

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	Capture Mouse	Fullscreen Code

Render  Force Save  Export  Import  Play Fullscreen  Build Standalone Back to Main Menu

Build Standalone
Build a standalone HTML file which will automatically play and render your project, you can embed it in an iframe or share it. More info in the About page.

Launch Menu	Pause Menu
Launch Menu Text	Pause Menu Text
Background Audio File	Background Color
Icon File	Foreground Color
Modes Add Delete	Options Add Delete
Mode Name	Option Name
Mode Audio File	Option Slider
BUILD_MODE_ID =	Option Min
	Option Max Option Default

Saving and Loading Save Load Buffers:

CSS Style Override


Gamepad Mapping
Mapped Input    Stick to Mouse


Back    Build

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    v1 Read patch notes here.


Getting Started
Watch Getting Started Video. 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 300 es', '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 format vec4 xy = coordinate in range -1 to 1, zw = coordinate in range 0 to 1.
out vec4	pixelColor	Fragment pixel color output.
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.
uniform vec2	RESOLUTION	Resolution size in pixels of display.
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 vec2	MOUSE_POSITION	Mouse position on canvas in pixels or if 'Capture Mouse' enabled the movement in pixels.
uniform bool	MOUSE_LEFT	Mouse left button state.
uniform bool	MOUSE_RIGHT	Mouse right button state.
uniform bool	KEY_N	Key state. N is one of the keys listed below.

Supported Keys: ESCAPE, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, MINUS, EQUAL, BACKSPACE, TAB, Q, W, E, R, T, Y, U, I, O, P, BRACKETLEFT, BRACKETRIGHT, ENTER, CONTROLLEFT, A, S, D, F, G, H, J, K, L, SEMICOLON, QUOTE, BACKQUOTE, SHIFTLEFT, BACKSLASH, Z, X, C, V, B, N, M, COMMA, PERIOD, SLASH, SHIFTRIGHT, NUMPADMULTIPLY, ALTLEFT, SPACE, CAPSLOCK, F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, SCROLLLOCK, NUMPAD7, NUMPAD8, NUMPAD9, NUMPADSUBTRACT, NUMPAD4, NUMPAD5, NUMPAD6, NUMPADADD, NUMPAD1, NUMPAD2, NUMPAD3, NUMPAD0, NUMPADDECIMAL, INTLBACKSLASH, F11, F12, NUMPADEQUAL, NUMPADCOMMA, NUMPADENTER, CONTROLRIGHT, NUMPADDIVIDE, ALTRIGHT, NUMLOCK, HOME, ARROWUP, PAGEUP, ARROWLEFT, ARROWRIGHT, END, ARROWDOWN, PAGEDOWN, INSERT, DELETE

Standalone Build
Build standalone will generate a HTML file which plays and renders your project when opened, for example you can embed it on another website or share it. All the project assets like images/JSON are embedded in the file so it doesn't require being on a webserver or have cross-origin security issues. It also allows for basic menu support, you can show a launch menu at the start to select a mode and configure options. The mode/options are provided to your shaders as a preprocessor define allowing you to dynamically swap out shader code depending on what users select.
Mode is provided to shaders as an integer preprocessor define 'BUILD_MODE_ID'. Options are also provided as preprocessor defines, option names are automatically converted for example 'Scale X' would be provided to the shader as the integer preprocessor define 'SCALE_X'.
Audio files are URL safe paths(relative to the standalone html file) of audio files that will be played and looped, 'Background Audio File' is the main audio file, 'Mode Audio File' lets you play a specific audio file during the mode. Audio files are not embedded you must put them alongside the standalone html file. Icon file is the same, it must be a relative path and you must include the file yourself.
Saving and loading when enabled will allow you to save state via the pause menu and load states via the launch menu. Save states work by storing the current mode/options and pass framebuffers to a file which can then be loaded back later. In the build menu under 'Save Load Buffers' you will see fixed resolution pass layers listed with checkboxes, whatever ones are checked will be saved. Note that save states are a fixed format binary file, changing any save layer resolutions or changing your own data structures will break compatibility with the previous save states.
You can use HTML in the Launch/Pause text to add elements like images or links. Warning using HTML tags in any other part like option/mode names will potentially break the standalone file.

Why is there a prompt for unsaved changes everytime I exit? / Lost data on exit?
Summary: It gives the browser time to save your data, you can just click 'Leave Page'. If you still have issues losing data on exit, use the 'Force Save' button in the project panel.

Projects are saved using the IndexedDB API which is completely asynchronous, it provides no way to block and wait for changes to finish. The issue with this is when saving data when exiting the page it will exit before finishing, from my tests both Chrome/Firefox lost data ~70% of the time. To give the browser time to complete the save it displays the popup message saying there are unsaved changes. I would love to customize the message and say 'This popup is just giving the browser time to save, you can leave the page now.', but the browsers removed that ability years ago. Some browser still have issues so to manually save there is a 'Force Save' button in the project panel, click it and wait a few seconds before exiting.


Email xaloezcontact@gmail.com to ask questions, give suggestions or report bugs.
Copyright Ethan Alexander Shulman 2023