“JOURNEY THROUGH MIDDLE EARTH”--CHROME EXPERIMENT

Google has launched a Chrome experiment called The Hobbit: The Desolation of Smaug. Earlier, bringing interactive multimedia based experiences to mobiles and tablets used to look like a huge task. 

The biggest constraint was the limited API support, poor performance, limitation in HTML 5 audio on devices and lack of seamless inline video playback.

Earlier this year Google and Warner Bros. started a project for mobile web experience, The Hobbit. So, now Google has come up with The Hobbit’s sequel. The experience is optimized for Chrome, Android on new Nexus device to support WebGL, (which is a JavaScript API for rendering interactive 3D and 2D graphics), WebRTC ,(which enables a real time communication such as video conferencing in the browser), Web Audio, (which is a high level JavaScript API for processing and synthesizing audio).

The Journey through Middle Earth, the latest Chrome experiment, demonstrates what is now possible on mobile web. The experiment starts with an interactive map of Middle Earth, built with HTML, CSS and Java Script. This feature allows you to zoom into a 3D map of Middle Earth. Once zoomed-in, you can know more about the place, who lives there etc.

In this experiment the focus is on Nexus devices and 5 popular Android Smart Phones. This experiment had many outcomes which are listed below:

Use low -poly Models :

Using low –poly models helps in reducing download time as well as the time it takes to 

initialize the scene.

Use low-res textures :

To reduce load time on mobile devices, load different textures that were half the size of the textures on desktop.

Simplify materials and lighting :

The choice of materials can also affect performance and must be managed wisely on mobile.

Optimize JavaScript performance :

When building games on mobile a lot of time is spent on the CPU, especially physics and skeletal animals. One trick that helps sometimes, depends on the simulation is to only run these expensive calculations every other frame. Use available JavaScript optimization techniques when it comes to garbage collection , object pooling and object creation.

Objects as building blocks :

Re-using objects ensures that objects are instantiated and uploaded at the start of the experiment and not in the middle of it.

Render the WebGL canvas at half the size and scale up with CSS :

The bigger the canvas you use to draw your 3D screen, the more pixels have to be drawn on every frame which affects performance and size of WebGL canvas optimizes performance.

VERDICT:

Overall experience from this project is that the WebGL on mobiles work really well, especially on newer and high-end devices. The multi-device web is rapidly evolving and we are looking forward to it. This sequel entangles with modern web technologies which proves that how powerful browsers on mobile could be. It will be out in December, so just Wait and Watch.

Author : Iman Majeed

Browse More Articles

Tweet