As you know, vertex is a data about a point in some space. It always contains point's position, sometimes color, normal to it's surface etc. But position is mandatory. By connecting vertices we can create shapes and objects.
Our objective is to create triangle. So let us write coordinates of three vertices in space that connected will create triangle.
Default coordinates of space in WebGL are as follows:
Whatever is between those coordinates will be displayed.
Now we can make our triangle's coordinates. Let's start from top clockwise. This would be:
top = [0.0, 1.0, 0.0] // x, y, z
right_corner = [1.0, -1.0, 0.0]
left_corner = [-1.0, -1.0, 0.0]
In our case z coordinate may be anything from -1.0 to 1.0, but 0.0 is a straight, simple and non-magic value.
Vertex data is never stored alone - it is always with other vertices' data (as in single array) for performance reasons. So let's put all coordinates into one array.
var triangleVertices = [
0.0, 1.0, 0.0, // top
1.0, -1.0, 0.0, // right
-1.0, -1.0, 0.0 // left
]
Even though it is in a single array, no one has told that we cannot format it nicely.
So, we have our coordinates! What now? It seems like 2.1 is done. So let's do 2.2.
WebGL does not like those dynamic types from javascript. They are distributed across all memory. That's why with advent of WebGL a new type of array was created - a typed array. It stores it's values just like a normal array known from C. So every value is next to each other. Also size of those types are perfectly predictable and thus good for low lewel processing. So without further ado, this is how you can convert js array into typed array.
var triangleVertices = [
0.0, 1.0, 0.0, // top
1.0, -1.0, 0.0, // right
-1.0, -1.0, 0.0 // left
]
var triangleVerticesTypedArray = new Float32Array(triangleVertices)
It will create array of 32 bit float values taken from triangleVertices. Or even better, leaving no error possibility with this one in the future.
var triangleVertices = new Float32Array([
0.0, 1.0, 0.0, // top
1.0, -1.0, 0.0, // right
-1.0, -1.0, 0.0 // left
])
This way we do not have to remember about converted values in the other array, as there is only one array.
Code looks now something like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>noniwoo webgl tutorial</title>
</head>
<body>
<canvas id="canvas1" width="640" height="480"></canvas>
<script>
var canvas = document.getElementById('canvas1')
if( canvas == null )
{
throw "Could not get canvas element!"
}
var gl = canvas.getContext('webgl')
if( gl == null )
{
gl = canvas.getContext('experimental-webgl')
if( gl == null )
{
throw "Could not get webgl context"
}
}
gl.clearColor(1.0, 1.0, 0.0, 1.0)
gl.clear(gl.COLOR_BUFFER_BIT)
var triangleVertices = new Float32Array([
0.0, 1.0, 0.0, // top
1.0, -1.0, 0.0, // right
-1.0, -1.0, 0.0 // left
])
</script>
</body>
</html>
One more question - why float32? Why not float64? Or int32?
Our space is, let's say, continuous - thit is why float. And 32bit because float in GLSL has 32 bits (remember that this data will eventually be processed by shaders which are written in GLSL). And there is no need for better (double) precision in here.
This is how point 2.2 got solved and thus whole point 2. We have our triangle's coordinates.