Class: Buffer


new Buffer()

A buffer represents a 2d or 3d geometry and an attribute buffer. A buffer is internally composed of a Float32Array array and a WebGL buffer object. Squareroot does rely on strides, so each geometry is only composed of one array/buffer. A stride is a portion of the array that holds data for all attributes in a specific order. For example if the geometry is composed of 3D vertices, normals and 2D UV coordinates, the stride look like this
vx, vy, vz, nx, ny, nz, u, v
The creation of strides in handled internally by the Buffer class.

More info on strides can be found in the specs.

Please read the basic-setup tutorial to see how to use a buffer
and the understanding-buffers tutorial for an in depth discussion on buffers.




Binds the buffer in gl, which does the same thing as calling gl.bindBuffer directly.



Sets all the data for a given attribute.



Destroys the buffer and clears all data from the array.



used by the {SQR.Renderer}, called when this geometry is drawn. Will call gl.drawArrays or gl.drawElements to draw the geometry using the current shader.



Returns the raw array data



Sets index data.

Name Type Attributes Description
array Array <optional>

either an array or argument list of all the indexes. Used when setting up meshes imported as OBJ or JSON object from Unity, Blender or similar.



returns true if buffer data is indexed and has an index array


iterate(attributeopt, callback)

Iterates over each value for an attribute or over every stride. See example below to see how to move all the vertices by 4 on the y-axis.

Name Type Attributes Description
attribute string <optional>

the name of the attribute to interate over, if null, it will iterate over entire strides

callback SQR.Buffer~iterateCallback

the callback function processing the data.

b.iterate('aPosition', function(i, data, count)) {
	// i+0 = x, i+1 = y, i+2 = z
	// so, to increment the y value do:
	data[i+1] += 4;

layout(layout, size)

Sets the layout of the buffer. A layout describes all the attributes of the geometry and their respective sizes. SQR has a few global functions that ar shorthands for typical layouts, like ex. SQR.v2c3()

Name Type Description
layout object

the layout of the buffer (see desc above) and understanding-buffers

size Number

the size of the buffer i.e. how many vertices it has

var l = { aPosition: 3, aColor: 4, aUV: 2 };
// the `new` keyword is optional, all methods are chainable
var buffer = SQR.Buffer().layout(l, 100).update();



Resizes the data array and/or offsets all the data in the array.


set(attribute, position, arrayopt)

Sets a value for an attribute at a defined position.

Name Type Attributes Description
attribute string

name of the attribute (ex. aPosition)

position Number

the index of this attrbute (related to the size of the buffer)

array Array <optional>

the data in form of an Array or as separate arguments or an object that has a toArray attribute (see example to see all the possible options)

b.set('aPosition', 1, 	[3, 5, 6]);
b.set('aPosition', 1, 	4, 8, 9);
b.set('aPosition', 1, 	new SQR.V3(3, 5, 6));


set the drawing mode for this buffer. Can be any one of the supported webgl drawing modes such as gl.POINTS, gl.LINES or gl.TRIANGLES which is the default.

Reminder: all the gl constants are available through the `` property.


sets the raw data into the array at offset



Updates the webgl buffer with the data from the internal array. When called for the first time it lazily creates the webgl buffer.


Type Definitions

iterateCallback(i, data, count)

This callback for the iterate function allowing processing of the buffer data.

Name Type Description
i Number

the index of the first value for this attribute in the buffer

<p>Example: if a buffer has 2 attributes - aPosition (3d vector) and aUV (2d vector)
this means the stride size is 3 + 2 = 5. In this case i for the first position attribute is
0 and for the second one it is 6. This index points to the index of first component of the attribute
- in case of a position which is a 3d vector - it points to the x component. 
To access the next component - y - add 1 to i, so data[i+1] is the y component.</p>
data Float3dArray

the entire the buffer array. Use the i parameter to read/write data to this array.

count Number

the current index for the attribute - it is incremented by 1 at each iteration