Lab 1 - WebGL and Three.js
I don't actually have much to write about the first part of this lab. Although I've only had some very minor previous experience programming in JavaScript, I have quite extensive experience with Java so working with code and changing the small details wasn't that hard. Before I began, I looked through all of the files to try to understand the general idea of the code. I basically did the second part of this lab by copy pasting the code for the cube and then go through it row for row and read up on the methods used so that I could make everything work for a tetrahedron instead. In addition to reading up on the methods, I ran into a few problems when doing the WebGL part, which I'll describe below.
The first thing I had to figure out was how to write the coordinates of the vertices in a correct way. At first I was confused as to why there were more than 8 vertex positions for a cube that has 8 corners. Then I learned that each face needs its own corner vertex when drawing arrays with the TRIANGLES setting in the drawArrays method. I didn't know if the order of the vertices mattered, but noticed that both the cube and the examples on Mozilla Developer Network (MDN) seemed to create every face by adding the corner vertices counter-clockwise so I did the same. Later in one of the lectures, I learned that this does matter because the face has a back side and a front side, and is only visible if looking at it from the right direction. So that was kind of a lucky move on my part which probably saved me a lot of work!
The next problem occurred after I thought that I had done everything right, when nothing appeared on the screen besides the original cube, not even a face or a line. After having gone through everything several times, I found that I had missed to add the method call setMatrixUniforms(). That call was apparently supposed to hand the model-view matrix to WebGL from JavaScript, so no wonder that nothing appeared without it.
With that solved, finally something appeared on the screen! Unfortunately though, all the faces seemed to be stacked at the same place resulting in only one triangle spinning around. This was quite quickly solved by looking over my calculations for where the vertices were supposed to be.
I basically had no problems at all with the Three.js tetrahedron. The hardest part was to calculate the radius of the tetrahedron because I was pretty uncertain on which of all radiuses possible in a tetrahedron to use for the TetrahedronGeometry method.
Below are the sources I found on google and used to look things up:
https://developer.mozilla.org/en-US/docs/Web/WebGL/ http://msdn.microsoft.com/en-us/library/ie/dn302460(v=vs.85).aspx http://threejs.org/docs/ http://learningwebgl.com/blog/?p=28