FlexGL - A declarative JavaScript library for developing WebGL based applications.
Beta Warning: still in pre-beta/alpha quality !!!
A declarative syntax with JavaScript for programming shaders (no need to write in GLSL) !
Flexible management of GPU resources, functions, and programs.
Forward and backward compatibility
//Create context
var fxgl = new FlexGL ( {
container : document . body ,
width : 800 ,
height : 600
} ) ;
//Allocate and manage resources
fxgl . attribute ( 'aVertexPos' , 'vec2' , [ - 1 , 0 , 1 , 1 , 0 , - 1.0 ] )
. uniform ( 'uColor' , 'vec4' , [ 0.5 , 0.0 , 0.5 , 1.0 ] ) ;
//Create Program
var simpleDraw = fxgl . createProgram ( 'drawTriangle' , {
vs : function ( ) {
gl_Position = vec4 ( this . aVertexPos , 0 , 1.0 ) ;
} ,
fs : function ( ) {
gl_FragColor = this . uColor ;
} ,
render : function ( len ) {
this . drawArrays ( this . TRIANGLES , 0 , len ) ;
}
} ) ;
simpleDraw ( 3 ) ; // draw triangle
//change vertices and color
fxgl . attribute . aVertexPos = [
- 0.5 , - 0.5 , 0.5 , - 0.5 , - 0.5 , 0.5 ,
- 0.5 , 0.5 , 0.5 , - 0.5 , 0.5 , 0.5
] ;
fxgl . uniform . uColor = [ 0.0 , 0.5 , 0.5 , 1.0 ]
simpleDraw ( 6 ) ; // draw rectangle