Saturday, good mood is a weekend feature.

A new way for web graphics

October 25, 2012by Andrei Petrescuin DevelopmentNo Comments
3dreams_2_620x200_scaled_cropp

I do admit I am a fan of games. So when I heard of WebGL and things it could do, I got a bit excited and started searching more info about it and of course, some examples.

But let’s start with the beginning. What is WebGL? WebGL actually stands for Web Graphics Library and is a Javascript API that can be used to render 3D/2D graphics inside browsers. Now, some will say what’s the use? We already have Flash or Silverlight. But that is a huge mistake (and not even an ok comparison – though I have been asked this several times). Both Flash and Silverlight aren’t included by default in browsers and one has to install plugins in order to view/stream videos, play games on the web or other activities that rely on these technologies and cannot be achieved by normal means. What makes WebGL so nice is the fact that it doesn’t require any plugins (one hint might have been the fact that it is a Javascript API) so things will work from the start with no headaches.

WebGL has been around for some time now, but it started being more known the moment the canvas element was introduced to html5. I will try not to go into too much detail about it and try to keep it simple. Basically, it started being noticed a few years ago but it is still something in development.

How does it work? The canvas element is basically just a container on the page. There, a developer can “draw” almost anything he wants using WebGL. From simple lines and shapes to more complicated drawings and images. The coded needed though is on a low level (C like) so things might seem complicated at start.

There are a lot of examples on the internet of what one can achieve with it. The ones I will show you are some of my favorite ones.

  1. Emberwind

Since I said I like games of course I will start off with an example of a game. http://operasoftware.github.com/Emberwind/
The game was ported on WebGL by Erik Möller. Try it out. What’s interesting is, some will say they don’t notice differences between using Flash or WebGL. The behavior is the same for a client. He gets to experience the game in the same way. But what is nice is that he doesn’t require plugins or anything else that could increase memory usage.

  1. Rome

The next example I will show you is more of a video in which you have some control over where you look: http://www.ro.me/
Are you able to find the chrome logo?
This is an example that tries to show how we can make videos where people can have some control over what they see, where they look, etc. Pretty nice?

  1. Deviantart Muro

This one I find really nice. What do you think of drawing inside a browser, like you do with paint? Give deviantart muro a go: http://muro.deviantart.com/Everything is being done using javascript and canvas. No flash. It has been around for a few years now.

  1. Chrome Experiments

If you want to see more examples of WebGL, visit: http://www.chromeexperiments.com/tag/webgl/ . You can find a lot of interesting experiment that involve WebGL. Which one do you think is really nice?

These are just some examples of what can be achieved using WebGL. To be honest, I really like the direction where it is heading but I think it still needs work and development. What do you think about WebGL?

Tags:

Andrei Petrescu

He’s very specific when it comes to things he likes. He even delivered a complete picture that looks like this: ”A banana flavoured Ice Cream with caramel topping enjoyed on a summer day.”

Pet enjoys multiplayer online games such as WoW and he really likes the cold side of the pillow.

He likes to give help to those around and a smile from a stranger could really make his day. Positive status of others give him a good state of mind and his work will always have the expected results.

What do you think?

*