ShaderElement is JavaScript Library that extended HTML DOM element and makes possible beautiful rendering by writing code GLSL without JavaScript or WebGL knowledges
<shader style="border: none; width: 300px; height: 300px" color="[0.0, 0.0, 1.0, 1.0]">
uniform vec4 color;
void main(void)
{
gl_FragColor = color;
}
</shader>- Colors : Simple 2D fill shaders without any assets
- Images : shaders working with images as custom uniform
- Sepia : Sepia filter into an extenal GLSL file, show how to update uniform in JavaScript
- SkyBox : SkyBox sample using samplerCube
- Fire : Flame effect using noise function.
- La Calanque : Nice real-time raytracing of calanque place (shader written by XT95), show how to set custom HMTL for backward error.
- Videos : some effects on video
- DisoluteVideo : Disolute effect on video
- Mouse : Display disc on the coordinate of the mouse and animate it when left button is push
- Landscape : Free fly through nice procedural landscape (by David Hoskins) with FPS camera style.
##How to use it? First, load the latest version of ShaderElement on your HTML header page
<head>
<script type="text/javascript" src="http://ricku34.github.io/ShaderElement/build/ShaderElement.min.js"></script>
</head> After that, you can declare shader rendering surface , directly in your <body> section by adding <shader> element
###Where to write GLSL code ?
3 way to map GLSL code to an rendering surface
- Write GLSL code directly inside the
<shader>element - Write and share GLSL code inside the
<script type="x-shader/x-fragment">element in your<head>HTML section, and map it, to an rendering surface by an id through the src attribute
<head>
<script type="text/javascript" src="http://ricku34.github.io/ShaderElement/build/ShaderElement.min.js"></script>
<script type="x-shader/x-fragment" id="DisplayImage">
uniform vec2 resolution;
uniform sampler2D image;
void main(void)
{
gl_FragColor = texture2D(image, gl_FragCoord.xy/resolution);
}
</script>
</head>
<body>
<shader src="DisplayImage"
style="border: none; width: 300px; height: 300px"
image="{ href : './assets/image1.png' }"></shader>
<shader src="DisplayImage"
style="border: none; width: 300px; height: 300px"
image="{ href : './assets/image2.png' }"></shader>
</body> - Write and share GLSL code into external file
<shader src="https://ricku34.github.io/ShaderElement/samples/Sepia.glsl"
style="border: none; width: 300px; height: 300px"
image="{ href : './assets/image1.png' }"
intensity="0.2"></shader>###Uniforms they are 2 kind of Uniforms: ####Built-in Uniforms the built-in Uniforms are automatically managed for you, to use it you just need to declare it in GLSL code
| Uniforms | Description |
|---|---|
uniform float time; |
elapsed time in seconds |
uniform vec2 resolution; |
the dimensions in pixel of the rendering surface |
uniform vec4 mouse |
XY : the coordinate in pixel, W : buttons states |
####Custom Uniforms Custom Uniforms can be initialized directly by DOM attibut inside the shader tag, the attribut value must be a valide JSON. follow the correspondence table of types below :
| GSL | JavaScript | HTML |
|---|---|---|
bool |
Boolean |
<shader shadow="false"/> |
float |
Number |
<shader inrensity="0.8"/> |
vec2 |
Array |
<shader UpVector="[0, -1]"/> |
vec3 |
Array |
<shader AtVector="[0, 0, 1]"/> |
mat4 |
Array |
<shader model="[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]"/> |
sampler2D |
Object |
<shader image="{ href : './image.png' , wrapS : 'MIRRORED_REPEAT' , wrapT : 'REPEAT' }"/> |
####Sampler Javascript Object Here is the list of properties expected for a Sampler JSON :
| Name | Type | default value | description |
|---|---|---|---|
| sample | Image |
n/a | Image in RGBA |
| sample | canvas |
n/a | the rasterize result of an canvas |
| sample | String |
n/a | the id of an existing DOM Image or canvas Element |
| href | String |
n/a | the location of an image |
| wrapS | String |
'CLAMP_TO_EDGE' | must be one of this : 'CLAMP_TO_EDGE', 'REPEAT' or 'MIRRORED_REPEAT' |
| wrapT | String |
'CLAMP_TO_EDGE' | must be one of this : 'CLAMP_TO_EDGE', 'REPEAT' or 'MIRRORED_REPEAT' |
| magFilter | String |
'LINEAR' | must be one of this : 'LINEAR' or 'NEAREST' |
| minFilter | String |
'LINEAR' | must be one of this : 'LINEAR' or 'NEAREST' |
###Customize Error & backward compatiblity
All DOM elements inside <shader> element are removed before compiling the shader, but if one of them is marked as ShaderElement-Error by a class this element will replace the shader if an error are occured
look La Calanque example
- samplerCube uniform support
- Video support
- add mouse event as built-in uniform
- add touch event as built-in uniform
- add gamepad event as built-in uniform
- add keyboard event as built-in uniform