Drawing a Sphere using WebGL

4:00 PM

Going off the track for a little bit, I wanted to draw some real 3D shapes. So I started with a circle. Yes, I know, it's a 2D shape you will say. But to be able to draw a sphere, I should at least know how to draw a circle. 

So I tried drawing it with the dividing polygon method. That is, first I drew only the 4 vertices at the ends of the principal axes. After that, I increased the segment count, by drawing another vertex between every two vertex. This new vertex point was calculated using sin and cosine, and multiplied by the radius. Applying this for increasing segment numbers, we get a very good approximation of a circle. 

For the sphere, we need to have 2 angles, Lattitude and Longitude. Longitude are the horizontal lines of the sphere, and lattitude are the horizontal ones. computing x, y and z according to a known formula, here is what happens:


Comments

Post a Comment

Popular posts from this blog

WebGL - Perspective

04:18 PM Yesterday, We created a 3D 'F', that we can rotate, scale and translate. But somewhat was amiss. The 'F' we created was 3D, but it did not have the perspective. All the sides of the F were of the same size, ndependent of how far it was. This representation of 3D is called as Orthographic.  But it is not how we percieve real world objects. In real world, we assume there is an eye at the center of the screen, and we percieve closer objects as larger and far off objects as smaller. This type of representation is called Perspective. Today, I implemented this 3D perspective projection into yesterday's code. Following is how it looks now, the controls are similar, (with added [ and ] keys for z translation ).
Read more

WebGL - Orthographic 3D

11:40 AM Yesterday, we have dived into the visual world of WebGL, and completed the initial setup, and drew a simple 2D "F" figure. Today, I tried creating some 3D magic using WebGL. It was quite similar to 2D. Just needed to add another dimension to the translation and scale matrix.  Rotation was a different thing. Since in 2D, we can have rotation about only one, namely Z-axis. But in 3D, rotations about 3 different axes are possible. Hence we need to create 3 different methods for rotation about X, Y and Z axes. WebGL draws shapes using primitive triangles. We provide it with vertexes of triangles, and it draws them. For example, if we want to draw a rectangle, we would provide it with 2 sets of 3 vertex. One set of 3 vertex draws one triangle, and another draws another. If we provide the vertex such that the triangles have a common hypotenous, we get a rectangle. For the 3D F, I needed 16 rectangles. Hence I needed to supply 16 * 6, 96 vertices. Following ...
Read more

Cursor and Serial Ports

One might think that today was a weekend day, so I might have been able to progress much today. But there is always a roadblock, this one was named college. Taking a formality-only viva, but keeping the students busy without any work, and making them write a 14 page hand written assignment, which will never ever be opened, is some form of punishments college provide. So, enough about the day, what did I do today. Today was as uneventful as yesterday, but atleast I was able to progress a little more today, ( albeit at snail's pace ).  Today, I learned about how via assembly 'out' instruction, we can send data on Serial ports of our computer. Here we are actually writing a near machine level code to directly interact with hardware. How cool is that! So, improving the framebuffer printing I had created in the last post, today I used the Serial ports to send the command to serial port that is concerned with the position of "the blinking cursor" in the framebuffer. We ...
Read more