Interleaved Float32Array and WebGL Buffer

gistfile1.txt

//==============================================================
//Example
var vertex        = [ 1, 1, 0, -1, -1, 0 ];
var somefloat     = [2.0, 18.0];
var componentCnt  = [3,1]; //Define the size of the vertext data for each array, for example: in vertex every 3 floats counts as one
var vertexCnt     = vertex.length / 3; // How many vertices are there

var attrLocOffset = 1;
var interInfo     = interleavedFloatArray( vertexCnt, [vertex,somefloat], componentCnt );
interleavedInstanceFloatBuffer(interInfo ,attrLocOffset);


//==============================================================
//Take a collection of array data and its component lengths and try to merge it
//into a single array that interleaved, this helps optimize data sent to the gpu.
function interleavedFloatArray(vertCnt,aryData,aryCompLen){
  var bFloat	= Float32Array.BYTES_PER_ELEMENT,	// Short for float byte size
      dLen	  = aryData.length,		// Data array Length
      offset	= new Array(dLen),	// Offset for each array in bytes
      iFinal	= 0,								// Length of final array
      stride	= 0,								// Size of single chunk of vertex data
      fi		  = 0,								// Final Index
      i, j, k;									  // Loop Vars

  // Calc some values that helps build a buffer on the gpu
  for(i=0; i < aryData.length; i++){
    iFinal		+= aryData[i].length;
    stride		+= aryCompLen[i] * bFloat;
    offset[i]	= (i != 0)? aryCompLen[i-1] * bFloat + offset[i-1]: 0;
  }

  var final = new Float32Array(iFinal);		// Create a final array to hold all the data.
  for(i=0; i < vertCnt; i++)					    // Loop based on total vertex data that exists
    for(j=0; j < aryData.length; j++)		  // loop per stride of data
      for(k=0; k < aryCompLen[j]; k++)	  // loop per element to put into final
        final[ fi++ ] = aryData[j][ (i*aryCompLen[j]) + k ];

  return { ary:final, dataCount:dLen, stride:stride, offset:offset, compLen:aryCompLen };
}


//==============================================================
//take the interleaved information and create a gl buffer
function interleavedInstanceFloatBuffer(dat,attrLoc){
  // Create GL Buffer
  var buf = gl.ctx.createBuffer();
  gl.ctx.bindBuffer(gl.ctx.ARRAY_BUFFER,buf);
  gl.ctx.bufferData(gl.ctx.ARRAY_BUFFER, dat.ary, gl.ctx.STATIC_DRAW); //gl.ctx.DYNAMIC_DRAW

  // Define how to read the data in the buffer.
  var aLoc;
  for(var i=0; i < dat.dataCount; i++){
    aLoc = attrLoc + i;
    gl.ctx.enableVertexAttribArray( aLoc ); //Enable Attribute
    gl.ctx.vertexAttribPointer( aLoc, dat.compLen[i], gl.ctx.FLOAT, false, dat.stride, dat.offset[i] ); //Define Data
    gl.ctx.vertexAttribDivisor( aLoc, 1 );  //Make this an instanced attribute, remove if you dont need to to be instanced.
  }
  return buf;
}