Published
Edited
May 28, 2018
draw = {
var arrayNodeId = [0];
var arrayNodePosXYZW = [-20.0, 10.0, 0.0, 0.0]
var arrayNodeVertexColor = [0.3, 0.9, 0.9, 1,0];
var gpufG = new webclgl.gpufor(graph, // target canvas
// VALUES
{"float4* posXYZW": arrayNodePosXYZW,
"float*attr nodeId": arrayNodeId,
"float4*attr nodeVertexCol": arrayNodeVertexColor,
"mat4 PMatrix": new Float32Array(),
"mat4 cameraWMatrix": new Float32Array(),
"mat4 nodeWMatrix": new Float32Array()},
// KERNEL PROGRAM 1 (update "dir" & "posXYZW" in return instrucction)
{"type": "KERNEL",
"name": "PARTICLE_KERNEL",
"viewSource": false,
"config": ["n", ["posXYZW"],
// head
'',
// source
'vec4 currentPos = posXYZW[n];\n'+
'return vec4(currentPos);\n'],
},
// GRAPHIC PROGRAM
{"type": "GRAPHIC",
"name": "PARTICLE_GRAPHIC",
"viewSource": false,
"config": [
// vertex head
'varying vec4 vVertexColor;',
// vertex source
'vec2 xx = get_global_id(nodeId[], uBufferWidth, 1.0);'+
'vec4 nodePosition = posXYZW[xx];\n'+ // now use the updated posXYZW
'vec4 nodeVertexColor = nodeVertexCol[];\n'+
'mat4 nodepos = nodeWMatrix;'+
'nodepos[3][0] = nodePosition.x;'+
'nodepos[3][1] = nodePosition.y;'+
'nodepos[3][2] = nodePosition.z;'+
'vVertexColor = nodeVertexColor;'+
'gl_Position = PMatrix * cameraWMatrix * nodepos * vec4(1.0, 1.0, 1.0, 1.0);\n'+
'gl_PointSize = 12.0;\n',
// fragment head
'varying vec4 vVertexColor;',
// fragment source
'return vVertexColor;\n'],
"drawMode": 0,
"depthTest": true,
"blend": false,
"blendEquation": "FUNC_ADD",
"blendSrcMode": "SRC_ALPHA",
"blendDstMode": "ONE_MINUS_SRC_ALPHA"
});
/*Utility funcions to generate the projection matrix*/
var getProyection = function() {
return perspectiveProjection(45, width / 512, 0.1, 400.0);
};
var perspectiveProjection = function(fovy, aspect, znear, zfar) {
var top = Math.tan(fovy * Math.PI / 360) * znear;
var bottom = -top;
var left = aspect * bottom;
var right = aspect * top;
var X = 2*znear/(right-left);
var Y = 2*znear/(top-bottom);
var A = (right+left)/(right-left);
var B = (top+bottom)/(top-bottom);
var C = -(zfar+znear)/(zfar-znear);
var D = -2*zfar*znear/(zfar-znear);
return new Float32Array([ X, 0, A, 0,
0, Y, B, 0,
0, 0, C, D,
0, 0, -1, 0]);
};
var transpose = function(m) {
return new Float32Array([ m[0], m[4], m[8], m[12],
m[1], m[5], m[9], m[13],
m[2], m[6], m[10], m[14],
m[3], m[7], m[11], m[15] ]);
};
/*Draw*/
gpufG.processKernels();
var gl = gpufG.getCtx();
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, width, 512);
gl.clearColor(1.0, 1.0, 1.0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//gpufG.setArg("PMatrix", new Float32Array([1.2822378873825073, 0, 0, 0, 0, 2.4142136573791504, 0, 0, 0, 0, -1.0005000829696655, -1, 0, 0, -0.2000500112771988, 0]));
gpufG.setArg("PMatrix", transpose(getProyection()));
gpufG.setArg("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])));
gpufG.setArg("nodeWMatrix", 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]));
//gpufG.setArg("pole1X", 30);
gpufG.processGraphic("posXYZW");
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
