wasmclgl
================
July 19 2018

GPGPU Javascript library (WEBASM)

Web Assembly version of WebCLGL

WasmCLGL use WebGL2 specification to interpret code.

First version of algorithm was created in 2013 (hosted on Google Code). On this, WebGL is used like OpenCL for GPGPU calculus using the traditional Render To Texture technique.


Features:

- Basic numerical calculus on GPU.

- WebGL graphics allowing write multiple shaders, interconnect and save arguments.

- WebCLGL handle any WebGL operation preparing all neccesary resources (buffers and programs initialization, vertex/fragment programs buffers interconnection, Renders to texture, etc... reducing time to write any advanced shaders.

API Doc WebCLGL

WebGL 2.0 API Quick Reference Guide

Import library

``html
npm install wasmclgl
`
`html


`

Simple A+B

`js
// TYPICAL A + B WITH CPU
var arrayResult = [];
for(var n = 0; n < _length; n++) {
var sum = arrayA[n]+arrayB[n];
arrayResult[n] = sum;
}

// PERFORM A + B WITH GPU
window.addEventListener("wasmclgl", () => {
gpufor_asm({"float A": arrayA, "float B": arrayB}, "n",
"float sum = A[n]+B[n];"+
"return sum;", function(result) {
document.getElementById('DIVC_GPU').innerText = result.join();
});
});
`
- gpufor A+B

Graphical output

Previous examples only execute one program type "KERNEL" (fragment program), write to a hidden buffer "result", perform readPixels over this buffer and return the output.


To represent data that evolve over time you can enable the graphical output indicating one WebGLRenderingContext or canvas element as first argument:

`html

`
`js
var tick = function(gpufG) {
window.requestAnimFrame(tick.bind(null, gpufG));

gpufG.processKernels();

gpufG.clearContext();

//gpufG.setArg("pole1X", 30);

gpufG.processGraphic("posXYZW");
};
`

`js
window.addEventListener("wasmclgl", () => {
new gpufor_asm( document.getElementById("graph"), // canvas or existings WebGL context
{"float4* posXYZW": arrayNodePosXYZW,
"float4* dir": arrayNodeDir,
"float*attr nodeId": arrayNodeId,
"mat4 PMatrix": transpose(getProyection()),
"mat4 cameraWMatrix": transpose(new Float32Array([ 1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, -100.0,
0.0, 0.0, 0.0, 1.0])),
"mat4 nodeWMatrix": transpose(new Float32Array([1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0]))},

// KERNEL PROGRAM (update "dir" & "posXYZW" in return instruction)
{"type": "KERNEL",
"name": "PROG_KERNEL",
"viewSource": false,
"config": ["n", ["dir","posXYZW"],
// head
'',
// source
'vec3 currentPos = posXYZW[n].xyz;'+
'vec3 newDir = dir[n].xyz*0.995;'+
'return [vec4(newDir,0.0), vec4(currentPos,1.0)+vec4(newDir,0.0)];'],
"depthTest": true,
"blend": false,
"blendEquation": "FUNC_ADD",
"blendSrcMode": "SRC_ALPHA",
"blendDstMode": "ONE_MINUS_SRC_ALPHA"},

// GRAPHIC PROGRAM
{"type": "GRAPHIC",
"name": "PROG_GRAPHIC",
"viewSource": false,
"config": [ // vertex head
'',

// vertex source
'vec2 xx = get_global_id(nodeId[], uBufferWidth, 1.0);'+

'vec4 nodePosition = posXYZW[xx];'+ // now use the updated posXYZW
'mat4 nodepos = nodeWMatrix;'+
'nodepos[3][0] = nodePosition.x;'+
'nodepos[3][1] = nodePosition.y;'+
'nodepos[3][2] = nodePosition.z;'+

'gl_Position = PMatrix cameraWMatrix nodepos * vec4(1.0, 1.0, 1.0, 1.0);'+
'gl_PointSize = 2.0;',

// fragment head
'',

// fragment source
'return vec4(1.0, 1.0, 1.0, 1.0);' // color
],
"drawMode": 4,
"depthTest": true,
"blend": false,
"blendEquation": "FUNC_ADD",
"blendSrcMode": "SRC_ALPHA",
"blendDstMode": "ONE_MINUS_SRC_ALPHA"}
, tick);
});
``

- gpufor graphic output

Notes

https://github.com/DanRuta/webassembly-webgl-shaders

https://github.com/HarryLovesCode/WebAssembly-WebGL-2