Game Development Reference
In-Depth Information
vertexNormalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexNormalBuffer);
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(geometry.normals), gl.STATIC_DRAW);
vertexNormalBuffer.itemSize = 3;
vertexNormalBuffer.numItems = 24;
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
new Uint16Array(geometry.indices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
verticesTextureBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, verticesTextureBuffer);
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(geometry.uvs[materialIndex]),
gl.STATIC_DRAW);
}
The
drawScene
function remains the same, except in the
drawElements
call where
we pass
geometry.indices
which was initialized in the
parseJSON
function, as
shown in the following code snippet:
function drawScene() {
...
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"),
0);
setMatrixUniforms();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLES, geometry.indices.length,
gl.UNSIGNED_SHORT, 0);
}
When we load the image in our browser, we see that the texture is pixelated. We had
briefly discussed filter modes earlier and in the next section, we will dive deep into
the different filter modes.
