WebGL Fundamentals

12:31 PM

So, the long Diwali vacations are over and we are back to business. I left the journey at the verge of starting to learn WebGL. And god it was tiring. Today, I managed to create a simple figure, and apply some basic operations like translate, scale and rotate on the figure.

So, to create a WebGL program, you need to do quite a lot of setup. 
  • First you need to create a HTML Canvas element, since all of the magic that WebGL does happens inside this.
  • Then you need to get the webgl context of this element.
  • WebGL is basically a rasterization engine, that runs on 2 shaders, Vertex and Fragment. The vertex shader tells the GPU the position of each vertex on the screen, and the fragment shader is used to determine the colour of each pixel.
  • You need to create these 2 shader programs, which are written in GLSL, a shader language, which is written in a C/C++ type syntax. 
  • Then you need to compile these shaders, and create a program and link those shaders with it.
  • Then you need to bind the global variables your shaders use, and populate the buffer ( what to draw on screen) with positions of your vertexes.
  • Finally you need to draw the pixel position, using GL primitive triangles.
This may sound like you need to code much, but actually there are all built in methods to do these tasks. You just need to execute them.

This is today's final program, You can translate using arrow keys, rotate using a & d, and scale using i,j,k and l.


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