Canvas.Fx rendering example

// create shader processing unit.
var fx = new Canvas.Fx();
fx.shaderProcessingUnitRoot = '../src/';

// define shader code.
var vertexShader = '\
fxMove( fxOutput[ 0 ], fxAttribute0 );\
';
var fragmentShader = '\
fxMove( fxColor, fxUniform0 );\
';

function main() {
    // start Canvas.Fx service.
    fx.start();

    // create and setup target texture buffer.
    fx.createFragmentBuffer( 'buff' );
    fx.updateTextureEmpty( 'buff', 2, 2 );

    // create and setup positions vertex buffer.
    fx.createVertexBuffer( 'position' );
    var bytes = new Float32Array( 24 );
    bytes.set( [
        -0.5,   -0.5,   0.0,    1.0,
        0.5,    -0.5,   0.0,    1.0,
        0.5,    0.5,    0.0,    1.0,

        0.5,    0.5,    0.0,    1.0,
        -0.5,   0.5,    0.0,    1.0,
        -0.5,   -0.5,   0.0,    1.0,
    ] );
    fx.updateVerticesFromBytes( 'position', bytes );

    // create and compile test shader.
    fx.createVertexShader( 'vs' );
    fx.compileVertexShader( 'vs', vertexShader );
    fx.createFragmentShader( 'fs' );
    fx.compileFragmentShader( 'fs', fragmentShader );

    // run frame rendering every 1 second.
    //setInterval( function() { update(); }, 1000 );
    update();
}

function update() {
    // setup rendering state.
    fx.setTargetBuffer( "buff" );
    fx.setVertexShader( "vs" );
    fx.setFragmentShader( "fs" );
    fx.setFragmentUniform( 0, 255, 0, 0, 255 ); // Uint8 vector type.
    fx.render( 2, [ 'position' ] );
}