What's a vertices?
Today I am starting with this tutorial.
First thing, get a browser that can support webGL. I already have one, but if you don't I recommend Minefield. I used it mostly because I had it installed anyway, and it sounds cool. If you don't know what I'm talking about, you should start at tutorial 0.
Anyway, I was going through the code example, and figuring things out along the way. It did some basic stuff like:
<body onload="webGLStart();">
which just loaded the code when it "hit" the body tag.
Inside the body it setup a canvas:
<canvas id="lesson01-canvas" style="border: none;" width="500" height="500">
Then inside the webGLStart(), which was called in the body onload, it got our canvas element:
var canvas = document.getElementById("lesson01-canvas");
I kept on cruising through the code, and got to something I could edit, and see the result!
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];
A vertices is the plural of vertex. Basically the dots that connect the shape, or corners.
By looking at this, I figured out the triangle, and made the top point larger. I was actually looking at it upside down, and still not sure why. Either -1 means down or to the right, and 1 mean up or to the left, or it's flipped later in the code *shrugs* time will tell. See if you can spot the top most point of the triangle, and make it bigger or smaller. Hint: 0, 0, 0 is the center of the triangle.
There was more stuff to setup and a second shape, a square which is the same as the triangle cept it has an extra vertex.
First moment of weakness
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
When I first hit this, and at the time of writing this, sentence, I am lost on this one. This | operator, what's it doing. I've never seen this other than c++ bitwise operator, either that, or I'm forgetting something long buried in my head. But as with most thing in javascript, I must trust that they know what they are doing, move along, and the pieces will fall into place when they are ready to. Also, it doesn't seem like a line that I really have to worry about; I just use it, and it does it's thing, for now. This is what the tutorial said about this line "A simple first step: we clear the canvas in preparation for drawing on it." Um, ok, I know what it does, and it sounds pretty simple. It clears the canvas. This must be done once everytime the screen is to be drawn, inside the:
function drawScene() {
This was setup earlier as:
setInterval(drawScene, 15);
These setup a function to be called every 15 intervals, in this case, the function drawScene(), not sure, probably in milliseconds, but as I'm displaying a static none moving image, it could be 15 seconds, but not likely.
Next line... lost again.
perspective(45, 1.0, 0.1, 100.0);
Nvm, it's not as bad as I though. I changed the 45 to 100, and reloaded, and the shapes zoomed out. I'm sure the other three numbers do something just as cool. Weird, I changed the first parameter to 1000 and it flipped the shapes. Something it not what I thought it was. The first parameter is called the field of view. Starting to make sense of it with this "This perspective function is very useful, but is not built into WebGL, so it’s defined as a utility function further up in the code." So, I can see the inner workings of this function and why it's doing things I did not expect. Excellent.
What's a matrices?
Like vertices, matrices is the plural for matrix. It's beyond me right now, but I think it's how you track the movement of a 3D object. Actually, I think it tracks the movements, or path, of an object as it moves, maybe. Anyway, it looks like a grid of numbers, rows and columns. I think that's all I can handle on matrices at this moment, but I'll come back to them as other pieces fall into place.
Making another side of a cube
I decided, with what I've learned, to try and copy and paste bits of the square to make another side of the square. I was able to tilt the one square I had, SO i figured if I drew another square under it, and lined them up, it would look like another side of the square.
Anyway, I played around with the numbers, and settled on this.
.bmp)
I could of probably of documented more, but I went through a lot of iterations while playing, and noticed a lot of what I was doing is still limited because I'm not using shaders, colour, and doing it in a pretty manual way. I am sure there are better ways so I don't want to spend too much time on it. I want to get to the good stuff!
Pay no attention to that man behind the curtain
The rest of what is covered in this tutorial is the use of a few functions used to make everything work. Stuff that can be copied and pasted and used without understanding; I of course must understand it.
Conclusion
This is all the blogging I can handle. I will keep playing with this and get a better understanding of the matrix in general.
Thanks for blogging this -- it's a great example of places where I can improve the tutorial :-)
ReplyDeleteYou may well have already worked out the stuff below, but I thought I'd let you know just in case...
Re: the vertices, the list contains coordinates for three of them, in the order [x1, y1, z1, x2, y2, z2, x3, y3, z3]. Negative is to the left on the x axis, downwards on the y, and into the screen on the z axis.
Re: gl.clear -- it really isn't important at this point in the lessons (which is why I hand-wave my way around it) but just so that you know, the | is indeed a bitwise or. We're passing a mask to the clear function saying "clear both the color buffer and the depth buffer", which basically means "clear the important stuff". Lesson 8 explains what it actually means in detail :-)
Re: matrices -- they are indeed grids of numbers, and they can be used (for reasons that it's really not worth worrying about until quite a lot later!) to represent sequences of transformations to vertices, or indeed transformations applied to a whole bunch of vertices in one go. So one matrix can represent the operation "rotate everything by 90 degrees around the Z axis, then move it into the screen by 5 units, then double its size" and so on.
HTH
Giles
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
ReplyDeletethe | is a bitwise or operator. Its like how file streams in C++ set up their flag. Recall the typical fstream fs("myfile", ios::in|ios::out|ios::binary); type of declaration
So how it is done in both cases is that ios::in is defined as a value with a single bit set (1,2,4,8, 16 etc), similarly ios::out and ios::binary.
An example of how this works:
//Define 5 constants for 5 conditions or 5 flags
condition1=1; //00001
condition2=2; //00010
condition3=4; //00100
condition4=8; //01000
condition5=16;//10000
//set a single value to indicate which conditions
//are set
setcondtion=condition1|condition3|condition5
(setcondition will end up with a value in binary: 10101)
If you want to test if a condition is set:
setcondition & condition1 would be: 10101 & 00001 giving 00001 and thus setcondtion is a true value (non-zero)
setcondition & condition2 would be: 10101 & 00010
giving 00000 and thus the condition is a false (zero)