Wasmclgl NPM | npm.io

wasmclgl

July 19 2018

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.

npm install wasmclgl

<script src="/dist/wasmclgl/WASMCLGLFor.class.js"></script>
<script src="/dist/wasmclgl/wasmclgl.js"></script>

// 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

<canvas id="graph" width="512" height="512"></canvas>

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

    gpufG.processKernels();

    gpufG.clearContext();

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

    gpufG.processGraphic("posXYZW");
};

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);
});