Is WebGL the Technology of the Future? What’s AexolGL?

By  on  

Many companies and people from the IT world claim that WebGL is the technology of future. Is this a correct statement? WebGL has many advantages, one of its biggest is that it is a technology that could revolutionise the gaming experience. With WebGL we can play 3D games directly in the browser without downloading any plugins. In the era of easy Internet access, web based projects have great commercialization potential, which is tempting to big players from the gaming market. What are the negatives then? First of all WebGL technology is not that easy.

Need of Frameworks

WebGL technology is not easy for developers and it is almost impossible to code in without a framework. In comes the AexolGL engine. We came up with the idea to create a framework which would make writing a WebGL code easy and enjoyable. Our goal was to do all the hard work for the developer and I think we have succeeded. Using AexolGL ensures developers don't have to worry about complicated GL functions. AexolGL comes with simple RenderTree and GameObjects:

//Treemethod
world = newScene()
shad = basicShader({})
shad.setParent(world) 
mat = new Material({color:[1.0,1.0,1.0]}) 
mat.setParent(shad)
sphereMesh = Mesh.sphere() 
sphereMesh.setParent(sphereMesh) 
sphere1 = new Aex() 
sphere1.setParent(sphereMesh) 
sphere2 = new Aex() 
sphere2.setParent(sphereMesh) 
sphere2.move(0,2,0)

//GameObject method
sphere3 = new GameObject(world, { 
	mesh: Mesh.sphere(30).scaleUniform(50.0), 
	shader: basicShader({}), 
	material: new Material({color:[1.0,1.0,1.0]}) 
})
sphere3.rotate(0,90,0)

Enhanced Texture Performance

Obviously WebGL has its flaws. There are some fields in which it needs to be improved or even reimagined. A good example is WebGL's texture performance, which is a little archaic, you need to share memory between textures and runtime events. AexolGL binds textures to a mesh, draws an object and then finally unbinds textures. With this texture system you can have the maximum number of textures per mesh. Furthermore it improves performance on older and integrated graphic cards.

Infinite Degrees of Freedom Pivot System

AexolGL pivots are created to set up 3D objects matrixes. Let's take a car as an example. It has 4 wheels (usually). A wheel rotates around its X axis when you accelerate or brake. You also need to rotate it around its Y axis to turn. If you have a flat tire, you will have to remove it and put it inside the trunk. How to handle these events? The solution is AexolGL's Pivot system, with which you can create as many local coordinate systems as you want.

speedOfWheel = newPivot() speedOfWheel.add(car.tire).add(car.inner_rim).add(car.Material__80).setPivot(car.tire.position)
turnOfWheel = newPivot() turnOfWheel.add(speedOfWheel.setPivotToCenter()

Reflections Made Nice and Easy

What makes 3D scenes so beautiful? The answer is simple ­ realism.

WebGL Reflection

More detailed examples at http://gl.aexol.com

AexolGL offers many visual features which could enhance your projects. Create beautiful reflection maps from images or snap them inside a 3D environment. Reflections are especially useful in regard to realistic metal or car paint element depiction.

WebGL Scene

Point Lights with Shadows

We are aware that our 3D world can not seem real without shadows. That's why we have created shadowing features like real-time point light shadowing and hard shadows system, which give you free reign over creating shadows.

Cubic Z­Buffer implementation

Snap the whole environment in one cube for later use as an environment, shadow or reflection map. Create a Zbuffercube and put it in the desired place.

A Long Lasting Project

Nowadays many WebGL engines are created and soon abandoned. Although our WebGL engine is totally free, we will keep extending its functionality. It's not a GitHub project with few collaborators, but a scientific project that will be continued eternally. Can we guarantee it? YES, we are a games & apps development studio, we have spent a long time testing different game engines, trying to find the one that would best suit our projects. Finally we learned that if we want to have a perfect engine, we must create it ourselves.

The Silent Race

When we started creating our web engine, WebGL was supported only by Firefox and Google Chrome. Now its becoming more and more popular. In Q1 of 2014 Unity stated its commitment to Mozilla's vision of high performance, plugin­free web experience. We didn't have to wait long for Cupertino's giant response. In March of 2014 Apple silently joined the race and started supporting WebGL technology in their Safari browser, with iOS 8 on the horizon, WebGL seems poised to become the technology of the future.

Artur Czemiel

About Artur Czemiel

Artur is a mobile devloper, owner of Aexol - apps studio based in Poland. His background is 3D graphics & FX production. When he’s not being online, you will find him listening to Bob Marley or experimenting with oriental kitchen.

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    CSS Selection Styling

    The goal of CSS is to allow styling of content and structure within a web page.  We all know that, right?  As CSS revisions arrive, we're provided more opportunity to control.  One of the little known styling option available within the browser is text selection styling.

  • By
    Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations...

Discussion

  1. WebGL is certainly a fun thing to play around with. I’ve been toying with ThreeJS and you can do some really cool stuff very easily with it. Rendering basic shapes is very easy, and adding basic animations isn’t too hard to do.

    http://lukepettway.name/demo/threejs/extrude.html

  2. WebGL has the potential to completely transform the gaming world. Moreover, advent of a helpful framework will certainly act as a catalyst. But this is still in its infancy but in coming times, it is certainly going to become huge and as I said earlier will change the gaming scenario.

  3. Can’t understand much of the WebGL or AxolGL, but what i got is much exciting as if it comes popular then we will not require a zillion dollars machine, we can play awesome games with ordinary computer. Is that what the both GLs are for? or something else? However, nice piece of information.

  4. Could you expand on the texture section? Is that instead of leaving all textures bound forever? I though bind-draw-unbind was pretty much the normal technique..

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!