Awesome
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.js
on your page by adding this line to your HTML:
<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js"></script>
or if you are using npm package manager on your console do:
npm install glslCanvas
The easy way
- Create a canvas element in your HTML.
- Add the class name
glslCanvas
to the canvas. - Assign it a shader...
- through a url using the attribute
data-fragment-url
- or directly writing your code inside the
data-fragment
attribute
- through a url using the 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 stringdata-fragment-url
: load a fragment shader by providing a valid urldata-vertex
: load a vertex shader by providing the content of the shader as a stringdata-vertex-url
: load a vertex shader by providing a valid urldata-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 touniform sampler2D
variables with names following this style:u_tex0
,u_tex1
,u_tex2
, etc.
All the cached .glslCanvas
elements will 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 case you need to reload the shader:
Reloading shaders from JS
You can change the content of the shader as many times as 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
: afloat
representing elapsed time in seconds.u_resolution
: avec2
representing the dimensions of the viewport.u_mouse
: avec2
representing the position of the mouse, defined in Javascript with.setMouse({x:[value],y:[value])
.u_tex[number]
: asampler2D
containing textures loaded with thedata-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:
- Fork and clone this repository
git clone https://github.com/patriciogonzalezvivo/glslCanvas.git
cd glslCanvas
yarn
- Run rollup in dev mode while you edit
yarn run dev
- Build for production
yarn run build
- Push to your local fork and make your pull request
Thank you