WebGL Textures & Vertices

Beginner's Guide

Page Fifty Eight

Prepare WebGL Buffer-Vertices and Texels

WebGL API createBuffer()

The WebGL API method createBuffer() receives no parameters and returns an empty WebGLBuffer object. 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 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 Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.