GPGPU C++ library (CLI & WebASM)
npm install nclglnclgl
=====
July 19 2018
html
npm install nclgl
import "nclgl";
`
OR BROWSER:
`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("nclgl", () => {
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("nclgl", () => {
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
Compilation
emcc $Projectpath$/src/nclgl/main.cpp $Projectpath$/src/nclgl/NCLGLmanager.cpp $Projectpath$/src/nclgl/NCLGLFor.cpp $Projectpath$/src/nclgl/NCLGL.cpp $Projectpath$/src/nclgl/NCLGLKernel.cpp $Projectpath$/src/nclgl/NCLGLVertexFragmentProgram.cpp $Projectpath$/src/nclgl/NCLGLPgrInValue.cpp $Projectpath$/src/nclgl/NCLGLBuffer.cpp $Projectpath$/src/nclgl/NCLGLArgValue.cpp $Projectpath$/src/nclgl/NCLGLUtils.cpp -I$Projectpath$/include/ -I$Projectpath$/include/nclgl/ -O3 -s "EXPORTED_FUNCTIONS=['_main', '_free']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap', 'stringToUTF8']" -g -s ALLOW_MEMORY_GROWTH=1 -s FULL_ES3=1 -s USE_WEBGL2=1 -s WASM=1 -s NO_EXIT_RUNTIME=1 -std=c++1z -o $Projectpath$/dist/nclgl/nclgl.js -DUSE_EMSCRIPTEN=1 -DDEBUG=1
CLI
Simple A+B
`html
cmake-build-release $ ./nclgl "float A=[0.2,0.2,0.2,0.2,0.1,0.1,0.1,0.1]; float B=[0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1];" "idx=n" "float sum = A[n]+B[n];return sum;"
`
`
[0.300000,0.300000,0.300000,0.300000,0.200000,0.200000,0.200000,0.200000]
``
$ cd nclgl/cmake-build-release
$ cmake -DCMAKE_BUILD_TYPE=Release ..
$ make
https://github.com/DanRuta/webassembly-webgl-shaders
https://github.com/HarryLovesCode/WebAssembly-WebGL-2