```html
<script src="/js/WebCLGL.class.js"></script>
<h3>For a simple A+B</h3>
```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
var arrayResult = gpufor({"float* A": arrayA, "float* B": arrayB}, "n",
"float sum = A[n]+B[n];"+
"return sum;");
var num = 0.01;
// CPU
var arrayResult = [];
for(var n = 0; n < _length; n++) {
var sum = arrayA[n]+arrayB[n]+num;
arrayResult[n] = sum;
}
// GPU
var arrayResult = gpufor({"float* A": arrayA, "float* B": arrayB, "float num": num}, "n",
"float sum = A[n]+B[n]+num;"+
"return sum;");
- <a href="https://rawgit.com/stormcolor/webclgl/master/demos/gpufor_numbers/index.html"> gpufor A+B+number</a><br />
<h3>Using arrays type vector</h3>
```js
var arrayResult = gpufor({"float* A": arrayA, "float4* B": arrayB}, "n",
"float _A = A[n];"+
"vec4 _B = B[n];"+
"float sum = _A+_B.z;"+
"return sum;");
var arrayResult = gpufor({"float4* A": arrayA, "float4* B": arrayB}, "n", "FLOAT4",
"vec4 _A = A[n];"+
"vec4 _B = B[n];"+
"vec4 sum = _A+_B;"+
"return sum;");
- <a href="https://rawgit.com/stormcolor/webclgl/master/demos/gpufor_vectors_output/index.html"> gpufor vector output</a><br />
<h3>Output datatypes</h3>
For to change the return precision from 0.0->1.0 by default to -1000.0->1000.0 set the gpufor precision variable:
```js
gpufor_precision = 1000.0;
var arrayResult = gpufor...
<canvas id="graph" width="512" height="512"></canvas>
```js
var gpufG = gpufor( 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",
"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)];']},
// GRAPHIC PROGRAM
{"type": "GRAPHIC",
"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
]}
);
var tick = function() {
window.requestAnimFrame(tick);
gpufG.processKernels();
var gl = gpufG.getCtx();
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, 512, 512);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//gpufG.setArg("pole1X", 30);
gpufG.processGraphic("posXYZW", gl.POINTS);
};| Variable type | Value |
|---|---|
| float* | Array, Float32Array, Uint8Array, WebGLTexture, HTMLImageElement |
| float4* | Array, Float32Array, Uint8Array, WebGLTexture, HTMLImageElement |
| float | 30 |
| float4 | [30.0, 10.0, 5.0, 100.0] |
| mat4 | 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]); |
| float*attr | Array, Float32Array, Uint8Array, WebGLTexture, HTMLImageElement |
| float4*attr | Array, Float32Array, Uint8Array, WebGLTexture, HTMLImageElement |
| Use float4 instead vec4 only in the definition of the variables (not in code). |
var gpufG = gpufor( document.getElementById("graph"),
{'float4* posXYZW': null,
"float4* data": null,
"float*attr currentId": null,
"float*attr otherId": null,
'float4*attr currentVertexPos': null,
'float4*attr currentVertexNormal': null,
'float4*attr currentVertexTexture': null,
'indices': null,
'mat4 PMatrix': null,
'mat4 cameraWMatrix': null,
'mat4 nodeWMatrix': null,
'float textureWidth': null,
'float4* ImgB': null},
{"type": "KERNEL",
"config": ["x", ["posXYZW"],
// head
'',
// source
'float cId = currentId[x];'+
'vec4 currentPosition = posXYZW[x];'+
'float anyData = data[x].x;'+
'float oId = otherId[x];'+
'vec2 xb = get_global_id(oId, uBufferWidth, 6.0);'+ // uBufferWidth is built-in variable
'vec4 otherPosition = posXYZW[xb];'+
'float otherData = data[xb].x;'+
'vec2 texCoord = get_global_id(vec2(64.0, 128.0), textureWidth);'+
'vec4 textureColor = ImgB[texCoord];'+
'...'
]},
{"type": "GRAPHIC",
"config": [ // vertex head
'',
// vertex source
'float cId = currentId[];'+
'float oId = otherId[];'+
'vec4 vp = currentVertexPos[];'+
'vec4 vn = currentVertexNormal[];'+
'vec4 vt = currentVertexTexture[];'+
'vec2 x = get_global_id(cId, uBufferWidth, 6.0);'+
'vec4 currentPosition = posXYZW[x];'+
'float anyData = data[x].x;'+
'vec2 xb = get_global_id(oId, uBufferWidth, 6.0);'+
'vec4 otherPosition = posXYZW[xb];'+
'float otherData = data[xb].x;'+
'...',
// fragment head
'',
// fragment source
'vec2 texCoord = get_global_id(vCoord, textureWidth);'+
'vec4 textureColor = ImgB[texCoord];'+
'...'
]}
);*attr for indicate arguments of type "attributes" (Graphic program only).
* Allow update values and to be written by a kernel program; *attr no.
* Allow access to another ID; *attr Only can access to own ID.
For to access to any * value in graphic program must use before get_global_id.
- SCEJS use WebCLGL as low level layer. You can See this for other advanced examples.
```
<h4>v3.3</h4>
- Now is required initialisation through gpufor
- WEBGL_draw_buffers extension is now required
- FrameBuffer/RenderBuffer reconfiguration (x4-x5 more fast in same hardware)
<h4>v3.2</h4>
(Graphic mode only)
- Using return instead gl_FragColor in fragment of Graphic program
<h4>v3.1</h4>
(Graphic mode only)
- Allow write in more than final variable if client hardware allow (WEBGL_draw_buffers extension)
- webCLGL.enqueueNDRangeKernel allow webCLGLBuffer or Array of webCLGLBuffer for destination
- webCLGLWork.enqueueNDRangeKernel not require any argument (nor webCLGL.copy required)
- gpufor not require update call
<h4>v3.0</h4>
- Changed *kernel in VertexFragmentPrograms(VFP) to *attr for indicate arguments of type "attributes". <br />
- Deleted optional geometryLength argument in enqueueNDRangeKernel & enqueueVertexFragmentProgram. It is indicated through glsl code with next available methods: <br />
get_global_id(ID, bufferWidth, geometryLength) (in Kernels & vertex of VFP) (The last get_global_id(ID) is removed) <br />
get_global_id(vec2(row, col), bufferWidth) (in Kernels & fragment of VFP) <br />
get_global_id() (only in Kernels fot to get) <br />
<br />
Changed method setUpdateFromKernel to setAllowKernelWriting in WebCLGLWork <br />
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent