WebGL Textures & Vertices: Beginner's Guide (2015)

WebGL API createBuffer()

The WebGL API method createBuffer() receives no parameters and returns an empty WebGLBuffer object. Prepare the vertex texel array first. Create an empty WebGLBuffer for the vertex texel array as follows. var bufferVT = gl.createBuffer();

WebGL API bindBuffer(ARRAY_BUFFER, WebGLBuffer)

The WebGL API method bindBuffer(Number, WebGLBuffer) assigns the specified buffer, to a target. Two options exist for a target. Use either an ARRAY_BUFFER or an ELEMENT_ARRAY_BUFFER. For the vertex texel array we need an ARRAY_BUFFER. The following listing assigns bufferVT to receive our data representing vertices and texels. However ARRAY_BUFFER can represent data other than vertices and texels. For example colors, normals, or any other values useful to the shaders, may upload within an ARRAY_BUFFER.

Consider ARRAY_BUFFER as a block of data uploaded to the GPU for immediate access. However an ELEMENT_ARRAY_BUFFER points to ARRAY_BUFFER data indirectly. ELEMENT_ARRAY_BUFFER tells the processor the order to process entries from the ARRAY_BUFFER.

gl.bindBuffer

(

gl.ARRAY_BUFFER,

WebGLBuffer

);

Listing 55: WebGL API bindBuffer(ARRAY_BUFFER, WebGLBuffer)

WebGL API bufferData(ARRAY_BUFFER, Float32Array, STATIC_DRAW)

The WebGL API method bufferData(Number, Typed Array, Number) uploads the actual data to the GPU. The first parameter is a WebGL constant. Use either ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER. The array of vertex texel data prepared for each of the book's projects, require ARRAY_BUFFER. The second parameter is the actual Float32Array of vertex and texel data. The name of the formal parameter to getBuffers(), for the Float32Array is aV. The third parameter is a WebGL constant representing buffer usage. Pass either STATIC_DRAW, DYNAMIC_DRAW, or STREAM_DRAW. For data modified once and used multiple times, pass STATIC_DRAW as the third parameter. The following listing demonstrates uploading the Float32Array of data to the GPU.

gl.bufferData

(

gl.ARRAY_BUFFER,

aV,

gl.STATIC_DRAW

);

Listing 56: WebGL API bufferData(ARRAY_BUFFER, Float32Array, STATIC_DRAW)

WebGL API vertexAttribPointer() for Vertices

The WebGL API method vertexAttribPointer() includes a somewhat complicated parameter list. However vertexAttribPointer() provides the greatest opportunity to understand the connection between JavaScript and the vertex shader.

vertexAttribPointer() tells the shader how to process buffer data. In other words, vertexAttribPointer() describes where vertex data appears within the buffer. vertexAttribPointer() sets up the stream of vertex and texel data, which runs through the vertex shader. Additionally vertexAttribPointer() tells the processor which shader attribute to process that data.

Here we assign just vertex data to the shader's attribute a_position. However later the GLEntity class, assigns texel data to the shader's attribute a_tex_coord0, with a similar call to vertexAttribPointer().

A formal declaration of vertexAttribPointer() displays in the following listing. Subsequent paragraphs discuss each parameter by name.

vertexAttribPointer

(

Number index,

Number size,

Number type,

boolean normalized,

Number stride,

Number offset

)

Listing 57: WebGL API vertexAttribPointer() Formal Declaration

The first parameter Number index is the index location of an attribute within the vertex shader. We use the property aPosition. Previously we saved the index of the vertex shader's attribute named a_position to the property aPosition.

The second parameter Number size tells the processor how many array entries to assign to the attribute a_position. We prepared three vertex coordinates for each vertex. One coordinate for the X axis, one for the Y axis, and one for the Z axis. Therefore assign 3 to the second parameter.

The third parameter Number type tells the processor the type of data within the buffer. We prepared the vertex texel array with floating point numbers. Therefore assign gl.FLOAT to the third parameter.

The fourth parameter boolean normalized indicates whether or not the values in the buffer need normalization. Normalized values range between -1.0 and +1.0. The vertex texel arrays prepared for the book's examples provide vertex coordinates with values no less than -1.0 and no greater than +1.0. The array doesn't need normalization. Assign gl.FALSE to the fourth parameter.

The fifth parameter Number stride represents the number of Bytes between attributes in the buffer. We prepared vertex texel arrays with five entries between each set of vertex coordinates. Three entries for each set of X, Y, Z coordinates, plus two entries for each set of S, T texels, equals five. Each entry in the array is a floating point number. WebGL float's require four Bytes each. 3 vertex coordinates, plus 2 texel coordinates, times 4 Bytes per coordinate equals 20 Bytes between vertices.

(3 + 2) * 4 = 20.

Assign 20 to the fifth parameter.

The sixth parameter Number offset tells the processor where to start accessing entries in the buffer. Our first vertex begins at the first entry of the array. Assign 0 to the last parameter.

The following listing shows how method getBuffers() calls the WebGL method vertexAttribPointer(). Once complete the vertex shader's attribute a_position may process a series of vertices, one at a time. The vertices originate with the Float32Array of vertices and texels, prepared for an individual project.

gl.vertexAttribPointer

(

this.aPosition,

gl.FLOAT,

gl.FALSE,

20,

);

Listing 58: WebGL API vertexAttribPointer() for Vertices

Prepare the Element Array Buffer

Create an empty WebGLBuffer for the element array buffer. Call to the WebGL API method createBuffer(), described previously. The following line generates an empty buffer for our indices.

var bIndices = gl.createBuffer();

For the vertex texel array getBuffers() called the WebGL API method bindBuffer(Number, WebGLBuffer), with the parameter ARRAY_BUFFER. However for the element array buffer, call bindBuffer(Number, WebGLBuffer) with the parameter ELEMENT_ARRAY_BUFFER. The element array buffer accesses the vertex texel buffer indirectly. Indices within the ELEMENT_ARRAY_BUFFER point to vertices and texels within the ARRAY_BUFFER. An ELEMENT_ARRAY_BUFFERspecifies accessing an ARRAY_BUFFER through indices. The two buffers work together. An ELEMENT_ARRAY_BUFFER tells the GPU the order to process entries from the ARRAY_BUFFER. The following listing demonstrates binding the empty WebGLBuffer named bIndices as an ELEMENT_ARRAY_BUFFER.

gl.bindBuffer

(

gl.ELEMENT_ARRAY_BUFFER,

bIndices

);

Listing 59: WebGL API bindBuffer(ELEMENT_ARRAY_BUFFER, WebGLBuffer)

WebGL API bufferData(ELEMENT_ARRAY_BUFFER, Uint16Array, STATIC_DRAW)

The WebGL API method bufferData() uploads data to a buffer on the GPU. The first parameter is a WebGL constant. Use either ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER. For our array of element data use the parameterELEMENT_ARRAY_BUFFER. The second parameter is the prepared Uint16Array of index data. getBuffers() formal parameter list uses the name aI for the Uint16Array. The third parameter represents buffer usage with a WebGL constant. Use either STATIC_DRAW, DYNAMIC_DRAW, or STREAM_DRAW. For data modified once and used multiple times, assign STATIC_DRAW to the third parameter. The following listing demonstrates uploading the Uint16Array of data to the GPU.

gl.bufferData

(

gl.ELEMENT_ARRAY_BUFFER,

aI,

gl.STATIC_DRAW

);

Listing 60: WebGL API bufferData(ELEMENT_ARRAY_BUFFER, Uint16Array, STATIC_DRAW)

Prepare Buffers Summary

The method getBuffers() called by the GLControl constructor, prepares WebGL buffers from a Float32Array and a Uint16Array. Method getBuffers() uploads data to the GPU, from the project's Float32Array of vertex and texel data. getBuffers() uploads data to the GPU from a Uint16Array of index entries. The Lighthouse Texture Map section described how to prepare arrays for use with WebGL.

We demonstrated how to generate empty WebGLBuffer objects with the WebGL API method createBuffer(), bind WebGLBuffer objects to either an ELEMENT_ARRAY_BUFFER or ARRAY_BUFFER, and upload data to the GPU with the WebGL API method bufferData(). See the source code for method getBuffers().

The controller calls getImages() after preparing buffers with getBuffers(). Method getImages() begins processing one or more entities. The GLEntity class prepares a matrix and texture for use with WebGL. Next we explain how to prepare textures with WebGL.

All materials on the site are licensed Creative Commons Attribution-Sharealike 3.0 Unported CC BY-SA 3.0 & GNU Free Documentation License (GFDL)

If you are the copyright holder of any material contained on our site and intend to remove it, please contact our site administrator for approval.