gl-compute demo

Canvas

Exhibiting the results of StageRender. This is totally optional. It helps debugging your results, keep in mind that only normalized values (ie [0,1]) will be shown properly.

In your projects using gl-compute, once your kernels are final you should disable the render stage given its processing cost.

Current example is iterative, processing the stages will yield incremental results.

Play around with the shaders bellow, update them and reprocess the stages.

This canvas is showing upscaled pixels, the colored squares are actually one pixel wide. Depending on your inputs, or more exacly, the size of the stage's output you should readjust the scale factor when using this visualization helper.

Check console to see the raw results being processed, along with some benchmark statistics.

StageA

Vertex Shader:

Fragment Shader:

Here you can configure the kernels for your computations. The vertex shader is a simple pass through sending a screen sized quad to the fragment shader. You can still modify it.

Results will be passed over to the next stage ("StageB"). Full cycle's last stage results is also available in this first stage via a uniform named after the last stage name ("StageB")

StageB

Vertex Shader:

Fragment Shader:

This intermediate stage may access results from the previous stage following its name. The uniforms are made available automatically. Currently, declaring a gl-compute generated uniform in the shaders will result in error.

Use your browser's shader editor to check uniforms made available.

StageRender

Vertex Shader:

Fragment Shader:

This stage is not part of the computations. It helps visualizing the results of any stage of the computation, and do some further processing if convenient (ie. flip the vertical axis).

Internally data fed to WebGL is disposed following OpenGL's convention (left > right / bottom > top), we usually expect top > bottom. Always keep this in mind when interpreting the data order you are feeding gl-compute.

# gl-compute ## WebGL Compute Framework A compute framework on top of WebGL. Based on some [#stack.gl](http://www.stack.gl) modules. This framework will allow to create custom kernels for each stage of a algorithm intended to run in parallel on the GPU. Stages are defined given the need in a phase of a algorithm of the results of a previous phase. Additionally the full algorithm may then be looped over, providing the last phase results to the first according to your needs. The objective is to have a featured, easy to understand and use framework, following parallel processing conventions is not necessarily the aim of this project (though they may appear here and there). You may also have interest in existing projects that served as inspiration: [webclgl](https://github.com/stormcolor/webclgl) / [webgl-matrix-demo](https://github.com/watmough/webgl-matrix-demo) / [three.js - gpgpu flocking](http://jabtunes.com/labs/3d/gpuflocking/webgl_gpgpu_flocking6.html). ### [DEMO](http://www.euclidiana.pt/gnonio/gl-compute) **** ### Install - `npm install gl-compute` - `var glCompute = require('gl-compute')` *as a module for your projects* - `browserify node_modules/gl-compute/demo/js/index.js -o node_modules/gl-compute/demo/js/bundle.js` *as a Demo to try out* **** ### Features - Plug-in to any project: just tell gl-compute which object contains your data and it's location (objects' attribute) - Multiple Data sources: provide a configurable amount of inputs to each phase of your algorithm - Input data update: ability to set input data as dirty - Automatic uniform glsl code generation: link inputs via gl-compute config and code the kernels not bothering with uniform declaration (reduces code management) - Configurable outputs: similarly to inputs plug-in interface - Update inplace: output data may be directly written to source input object - Output callback: configure your custom function once output data has been written **** ### Todo - Provide some canned shaders for common pre and post processing tasks (ie. input data 1 component > output data 4 components > output reduction to 1 component) - If maturing enough, link up to #stack.gl compute feature requests **** ### Usage #### Stage Setup Options Stages must be fed to gl-compute in the order of computations, a render stage (optional) provided lastly. The computation cycle will pass the results of one stage to the next according to given name (see bellow). The last computation stage will pass it's results back to the first stage as needed (looped algorithms). (Logically, first stage data will be empty in the first pass, no data available from last stage). ``` var data = { dataA: inputA, dataAOut: emptyFloats, dataB: inputB, dataBOut: emptyFloats, dataC: inputC, dataCOut: emptyFloats, dataD: inputD, dataDOut: emptyFloats, dataROut: emptyUInts } Example callback function var callback = function() { console.log( this.output.object[this.output.location] ) } var options = { type : Stage Type - 'COMPUTE' (for the actual computations) or 'RENDER' (optional for visualization purposes only) draw : Draw Flag - to activate/deactivate this stage on demand shape : Stage Shape - These are the dimensions of this stages' output shaderSources : Shader Sources - to use in this stage (create them and don't worry about uniform declaration check uniforms option bellow) uniforms : Stage Inputs - Data input to be fed to gl-compute { uniformName : { type: 'sampler2D', object: object, location: string, shape: array, flip: boolean } These will be made into texture uniforms and fragment shader source will be generated and added correspondingly Each named property here becomes the uniform name to be made available in the shader Both the sampler2D uniform and a ivec2 containing the shape of the input is generated GLSL naming conventions apply The code generation includes a header and comments for your reference (ie. Stage Name and generation/compilation loop) Use your browser's shader editor to check the complete GLSL code being compiled output : Stage Output - definitions of the target object where data will be saved { write: boolean, object: object, location: string, onUpdated: function } Write Output Flag - This is where the most performance impact occurs, use sparingly when intermediate results are required Object Reference Attribute name where the data buffer lies callback to a function when new data has been writen } Inititalise Stages - Provide options as an object, stages will be named here compute.preInit( { nameOfStage1: stageOptions1, nameOfStage2: stageOptions2, renderStage: stageRender } ) ```