vdGlslCanvas v0.0.18

Important: this is a fork by Videodromm from glslCanvas (Patricio Gonzalez Vivo) to rename uniforms for shadertoy.com compatibility

The name glslCanvas is vdGlslCanvas is this repository

VDGlslCanvas 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 VDGlslCanvas.js on your page by adding this line to your HTML:

<script type="text/javascript" src="https://rawgit.com/videodromm/vdGlslCanvas/master/build/VDGlslCanvas.js"></script>

or if you are using npm package manager on your console do:

npm install vdGlslCanvas

The easy way

1. Create a canvas element in your HTML.
2. Add the class name vdGlslCanvas to the canvas.
3. Assign it a shader...
   • through a url using the attribute data-fragment-url
   • or directly writing your code inside the data-fragment attribute

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

That's all! vdGlslCanvas 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 vdGlslCanvas:

• 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: iChannel0, iChannel1, iChannel2, etc.

All the catched .vdGlslCanvas element whill be stored in the windows.vdGlslCanvases array.

The JS way

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

var canvas = document.createElement("canvas");
var sandbox = new VDGlslCanvas(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:

• iGlobalTime: a float representing elapsed time in seconds.
• iResolution: a vec2 representing the dimensions of the viewport.
• iMouse: a vec2 representing the position of the mouse, defined in Javascript with .setMouse({x:[value],y:[value]).
• iChannel[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]). VDGlslCanvas will parse the value you provide to determine its type. If the value is a String, VDGlslCanvas 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:

• Install node and npm
• Install gulp globally

npm install
npm install -g gulp

• Fork and clone this repository

git clone https://github.com/videodromm/vdGlslCanvas.git

• "Gulp" while you edit it

cd vdGlslCanvas
gulp

• Push to your local fork and make your pull request

Thank you