8:00 – 5:00 SR
- DB backups
- Add ‘.’ and ‘-‘ to the scripting regex
- 10:55 – on hold
- JavaScript – working my back through the constructor/prototype patterns in Pro JS for Web Developers. I am not getting how the WebGL Sim.js objects hang together.
8:00 – 5:00 SR
8:00 – 10:00, 1:00 – 5:00 SR
8:00 – 4:00 SR
8:00 – 4:00 SR
8:00 – 4:00
8:00 – SR
8:00 – 4:00 SR
8:00 – 5:00 SR
8:00 – 4:00 SR
First, the shaders. Data comes into the vertex shader and is then copied over to the varying variable(s)
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'attribute vec4 a_Color;\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
' gl_PointSize = 5.0;\n' +
' v_Color = a_Color;\n' +
'}\n';
// Fragment shader program
var FSHADER_SOURCE =
'#ifdef GL_ES\n' +
' precision mediump float;\n' +
'#endif\n' +
'varying vec4 v_Color;\n' + // Receive the data from the vertex shader
'void main() {\n' +
' gl_FragColor = v_Color;\n' +
'}\n';
Then we create the data:
// Create a buffer object
g_vertexBuffer = gl.createBuffer();
g_colorBuffer = gl.createBuffer();
if (!g_vertexBuffer || !g_colorBuffer) {
var msg = 'Failed to create the buffer object';
console.log(msg);
alert(msg);
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, g_vertexBuffer);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
var msg = 'Failed to get the storage location of a_Position';
console.log(msg);
alert(msg);
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Position);
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, g_colorBuffer);
var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
if (a_Position < 0) {
var msg = 'Failed to get the storage location of a_Color';
console.log(msg);
alert(msg);
return -1;
}
// Assign the buffer object to a_Color variable
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 0, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Color);
// clear everything at the end
gl.bindBuffer(gl.ARRAY_BUFFER, null);
Last, we enter the drawing loop. First, we get the handles to the attributes, then sequentially bind, enable and overwrite their data buffers
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
// Clear
gl.clear(gl.COLOR_BUFFER_BIT);
// make some new vertex data
for(var i = 0;i < (n*2); ++i){
vertexDataArray[i] = Math.random()*2.0 - 1.0; // make some new vertex positions
}
// Write date into the vertex buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, g_vertexBuffer);
gl.enableVertexAttribArray(a_Position);
gl.bufferData(gl.ARRAY_BUFFER, vertexDataArray, gl.STATIC_DRAW); // use the new vertex positions
// Write date into the vertex buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, g_colorBuffer);
gl.enableVertexAttribArray(a_Color);
gl.bufferData(gl.ARRAY_BUFFER, colorDataArray, gl.STATIC_DRAW); // write the same color values
gl.bindBuffer(gl.ARRAY_BUFFER, null);
// Draw the points
gl.drawArrays(gl.POINTS, 0, n);
8:00 – SR
8:00 – 4:00 SR
8:00 – 4:00 SR


8:00 – 4:00 SR
8:00 – 4:00 SR
8:00 – 5:00 SR
You must be logged in to post a comment.