MENU


Typed Arrays and Buffer Objects

JavaScript is a loosely typed language. To process large quantities of data of the same type efficiently, the data types have to be specified for arrays. This is where typed arrays come in. The only way to create a typed array is by using the 'new' operator.

View Bytes Description
Int8Array 1 Signed integer
Uint8Array 1 Unsigned integer
Int16Array 2 Signed integer
Uint16Array 2 Unsigned integer
Int32Array 4 Signed integer
Uint32Array 4 Unsigned integer
Float32Array 4 Signed float
Float64Array 8 Signed float

Methods, Properties Description
get(index) Gets the index-th element.
set(index,value) Sets value to the index-th element.
set(array,offset) Sets the elements of array from offset-th element.
subset(begin,end) Returns a subset of the array.
length The number of elements.
BYTES_PER_ELEMENT The number of bytes per element.
Example: 
var v1=new Float64Array(4);  //4 elements
var v2=new Float32Array([0.3,0.3,  -0.3,0.3,  -0.3,-0.3]);
var v3=new Float32Array(v2); // copies v2
alert(v3.length);  // yields 6



A buffer object is a memory area allocated by WebGL to hold the vertices. By using a buffer object, multiple vertices can, at once, be passed to a vertex shader through one of its attribute variables, as WebGL draws the primitive. There are five steps involved in using a buffer object.

Step 1: Create a buffer object.
This is done by calling createBuffer().

Step 2: Bind the buffer object to a target.
This is done by calling bindBuffer(target,buffer), where target can be ARRAY_BUFFER(vertex data) or ELEMENT_ARRAY_BUFFER(index values to vertex data, see the example at 14.4.3).

Step 3: Write data into the buffer object.
This is done by calling bufferData(target,data,usage). 'target' can be ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER. 'data' is the typed array to be passed in. 'usage' can be STATIC_DRAW (specified once, used many times), STREAM_DRAW (specified once, used a few times), or DYNAMIC_DRAW (specified repeatedly, used many times).

Step 4: Assign the buffer object to an attribute variable.
This is done by calling vertexAttribPointer(location, size, type, normalized, stride, offset). 'size' can be 1 to 4 and specifies the number of components per vertex. 'type' can be UNSIGNED_BYTE (Uint8Array), SHORT (Int16Array), UNSIGNED_SHORT (Uint16Array), INT (Int32Array), UNSIGNED_INT(Uint32Array), FLOAT(Float32Array). 'normalized' can be true or false, and indicates whether nonfloating data should be normalized to [0,1] or [-1,1]. 'stride' specifies the number of bytes between different vertex data elements, or zero for default stride. 'offset' specifies in bytes the starting location of the vertex data in the buffer object.

Step 5: Enable assignment.
This is done by calling enableVertexAttribArray(location).

A red point appears whenever and wherever the mouse is clicked on the canvas.
RESETRUNFULL
<!DOCTYPE html><html>
<head>
<script src="/shared/webgl-library.js"></script>
<script>
var VS_SOURCE=`
   attribute vec4 p;
   void main(){
      gl_Position = p; 
      gl_PointSize=30.0;
   }`;
var FS_SOURCE=`
   precision mediump float;
   uniform vec4 c;
   void main(){
      gl_FragColor=c;
   }`;

var n=0;
var points=new Array();

function initialize_webgl(){
   var canvas = document.getElementById("myCanvas");
   var gl = canvas.getContext("webgl");
   initShaders(gl,VS_SOURCE,FS_SOURCE);
   gl.clearColor(0.0,0.0,0.0,1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   canvas.onclick=function(ev){draw_point(ev,canvas,gl);};
}
function draw_point(ev,canvas,gl){
   // Stores the locations of the mouse click in points[]
   var x=ev.clientX;
   var y=ev.clientY;
   var rect=ev.target.getBoundingClientRect();
   x=((x-rect.left)-canvas.height/2)/(canvas.height/2);
   y=(canvas.width/2-(y-rect.top))/(canvas.width/2);
   points.push(x);
   points.push(y);
   n++;
	
   // Use a buffer object to pass points[] to the attribute p
   var pL=gl.getAttribLocation(gl.program, 'p');
   if (pL<0) alert("Failed to get the location of p");
   var b=gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER,b);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points),gl.STATIC_DRAW);
   gl.vertexAttribPointer(pL,2,gl.FLOAT,false,0,0);
   gl.enableVertexAttribArray(pL);
	
   // Specifies the pixel/fragment color
   var cA=[1.0,0.0,0.0,1.0];
   var cL=gl.getUniformLocation(gl.program,'c');
   if (cL<0) alert("Failed to get the location of c");
   gl.uniform4fv(cL,cA);
   
   gl.clearColor(0.0,0.0,0.0,1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.drawArrays(gl.POINTS,0,n);  // draws n points
   gl.deleteBuffer(b); // frees the memory
}</script>
</head>
<body onload="initialize_webgl()">
   <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

Here are some other related functions:

isBuffer(buffer) returns true if 'buffer' is a defined buffer object.

deleteBuffer(buffer) deletes the specified buffer object.

bufferSubData(target, offset, data) updates a portion of the buffer object, starting at 'offset', with 'data'.

disableVertexAttrib Array(location) disables attribute assignment.

getVertexAttrib(location,pname) and getUniform(program,location) return the values passed to the attribute or uniform attributes, or information about the variables. 'pname' can be:
CURRENT_VERTEX_ATTRIB,
VERTEX_ATTRIB_ARRAY_BUFFER_BINDING,
VERTEX_ATTRIB_ARRAY_ENABLED,
VERTEX_ATTRIB_ARRAY_SIZE,
VERTEX_ATTRIB_ARRAY_STRIDE,
VERTEX_ATTRIB_ARRAY_TYPE, or
VERTEX_ATTRIB_ARRAY_NORMALIZED.