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
    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    Digg-Style Dynamic Share Widget Using the Dojo Toolkit

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

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!