___________ ________.____
\_ _____/___________ / _____/| |
| __) \_ __ \__ \ / \ ___| |
| \ | | \// __ \\ \_\ \ |___
\___ / |__| (____ /\______ /_______ \
\/ \/ \/ \/
This is a small lib for WebGl shader effects.
- It is not intended for moving vertices or 3d work.
- It is good for creating animated and interactive graphics within fragment shaders and rendering to frame buffers for multiple shader passes and also stacking graphical layers for compositions.
Usage
// import the fragl lib // get canvas const canvas = document; // pass canvas to fragl constructor const fragl = args
So thats the basic setup, contructor args are all optional, if no canvas is given then it will create a canvas element and it will be stored at fragl.domElement
// defautls const args = canvas: canvasDomEl clearColor: 0000 imageLoadColor = 255 150 150 255 size: width: windowinnerWidth height: windowinnerHeight trasparent: false premultipliedAlpha: false antialias: false depth: false
- canvas
- canvas dom el
- clearColor
- 4 part array (rgba) values between 0 and 1
- imageLoadColor
- 4 part array (rgba) values between 0 and 255;
- size
- object of width and height
- trasparent
- Boolean that indicates if the canvas contains an alpha buffer.
- premultipliedAlpha
- Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied
- antialias
- Boolean that indicates whether or not to perform anti-aliasing.
- depth
- Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.
And to resize the FraGL renderer
fragl
Creating render layers
//.createRenderLayer( 'name'= String, args = Object ); const renderLayer = fragl
Updating uniforms
renderLayeruniforms'u_res'value = width height
Create a texture from an image
const texture = fragl.textureFromImage('./path/to/image.jpg');
Creating render texture
const renderTexture = fragl; renderLayeruniforms'u_texture'value = renderTexturetexture
and to resize
renderTexture
Rendering
// render to canvas renderLayer // render to renderTexture renderLayer
an example
{ renderLayer1 renderLayer2uniforms'u_texure'value = renderTexturetexture renderLayer2 }
Vertex Shader
Something like this should be the base for your vertex shader
precision highp float;attribute vec2 a_position;attribute vec2 a_texcoord; varying vec2 vUv; void