/glslCanvas

Simple tool to load GLSL shaders on HTML Canvas using WebGL

Primary LanguageJavaScriptMIT LicenseMIT

GlslCanvas is JavaScript Library that helps you easily load GLSL Fragment and Vertex Shaders into an HTML canvas. I have used this in my Book of Shaders and glslEditor.

How to use it?

There are different ways to do this. But first, make sure you are loading the latest version of GlslCanvas.min.js on your page by adding this line to your HTML:

<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.min.js"></script>

The easy way

Make a canvas element in your HTML, make sure the class name is glslCanvas and to assign a shader to it, trought a url using the attribute data-fragment-url or directly writing your code inside the data-fragment attribute.

<canvas class="glslCanvas" data-fragment-url="shader.frag" width="500" height="500"></canvas>

That's all! glslCanvas will automatically load a WebGL context in that <canvas> element, compile the shader and animate it for you.

As you can see, in this example we are loading the fragment shader by setting the attribute data-fragment-url to a url. But there are also a few other ways to load data to our glslCanvas:

  • data-fragment : load a fragment shader by providing the content of the shader as a string
  • data-fragment-url : load a fragment shader by providing a valid url
  • data-vertex : load a fragment shader by providing the content of the shader as a string
  • data-vertex-url : load a fragment shader by providing a valid url
  • data-textures: add a list of texture urls separated by commas (ex: data-textures="texture.jpg,normal_map.png,something.jpg"). Textures will be assigned in order to uniform sampler2D variables with names following this style: u_tex0, u_tex1, u_tex2, etc.

All the catched .glslCanvas element whill be stored in the windows.glslCanvases array.

The JS way

Create a <canvas> element and construct a glsCanvas() sandbox from it.

var canvas = document.createElement("canvas");
var sandbox = new GlslCanvas(canvas);

In the case you need to reload the

Reloading shaders from JS

You can change the content of the shader as many times you want. Here are some examples:

// Load only the Fragment Shader
var string_frag_code = "main(){\ngl_FragColor = vec4(1.0);\n}\n";
sandbox.load(string_frag_code);

// Load a Fragment and Vertex Shader
var string_vert_code = "attribute vec4 a_position; main(){\ggl_Position = a_position;\n}\n";
sandbox.load(string_frag_code, string_vert_code);

Default Uniforms

Some uniforms are automatically loaded for you:

  • u_time: a float representing elapsed time in seconds.
  • u_resolution: a vec2 representing the dimensions of the viewport.
  • u_mouse: a vec2 representing the position of the mouse, defined in Javascript with .setMouse({x:[value],y:[value]).
  • u_tex[number]: a sampler2D containing textures loaded with the data-textures attribute.

You can also send your custom uniforms to a shader with .setUniform([name],[...value]). GlslCanvas will parse the value you provide to determine its type. If the value is a String, GlslCanvas will parse it as the url of a texture.

// Assign .5 to "uniform float u_brightness"
sandbox.setUniform("u_brightness",.5); 

// Assign (.2,.3) to "uniform vec2 u_position"
sandbox.setUniform("u_position",.2,.3);

// Assign a red color to "uniform vec3 u_color"
sandbox.setUniform("u_color",1,0,0); 

// Load a new texture and assign it to "uniform sampler2D u_texture"
sandbox.setUniform("u_texture","data/texture.jpg");

Quick start demo

In the index.html file, you will find handy example code to start.

Demo page: patriciogonzalezvivo.github.io/glslCanvas/

Collaborate

If you'd like to contribute to this code, you need to:

npm install
npm install -g gulp
git clone https://github.com/patriciogonzalezvivo/glslCanvas.git
  • "Gulp" while you edit it
cd glslCanvas
gulp
  • Push to your local fork and make your pull request

Thank you