glslCanvas Documentation

GlslCanvas automatically provides several built-in uniforms to your shaders:

• u_time (float): Elapsed time in seconds.
• u_resolution (vec2): Viewport dimensions.
• u_mouse (vec2): Mouse position. Update this using sandbox.setMouse({x:[value], y:[value]}).
• u_tex[number] (sampler2D): Textures loaded via the data-textures attribute (e.g., u_tex0, u_tex1).

You can initialize a shader without writing JavaScript by using specific HTML attributes on a <canvas> element with the class glslCanvas.

Attributes:

• data-fragment: The fragment shader source code as a string.
• data-fragment-url: A URL to the fragment shader file.
• data-vertex: The vertex shader source code as a string.
• data-vertex-url: A URL to the vertex shader file.
• data-textures: A comma-separated list of texture URLs (e.g., data-textures="texture.jpg,map.png"). These are assigned to u_tex0, u_tex1, etc.

All initialized glslCanvas elements are stored in the global window.glslCanvases array.

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

You can include GlslCanvas in your project via a CDN script tag or by using npm.

CDN: Add the following script tag to your HTML:

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

npm:

npm install glslCanvas

Use the .setUniform(name, ...values) method to pass data to your shaders. GlslCanvas automatically determines the type based on the arguments provided.

• Floats: sandbox.setUniform("u_brightness", 0.5)
• vec2: sandbox.setUniform("u_position", 0.2, 0.3)
• vec3: sandbox.setUniform("u_color", 1, 0, 0)
• Textures: If the value is a String, it is treated as a URL for a texture: sandbox.setUniform("u_texture", "data/texture.jpg")

// 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");

You can update the shader source code dynamically using the .load() method on your GlslCanvas instance.

• To load only a fragment shader: sandbox.load(fragmentSourceString)
• To load both fragment and vertex shaders: sandbox.load(fragmentSourceString, vertexSourceString)

// 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(){\ngl_Position = a_position;\n}\n";
sandbox.load(string_frag_code, string_vert_code);

To control the canvas programmatically, create a <canvas> element and pass it to the GlslCanvas constructor.

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