In the latest software upgrade we did for the 2011 Xperia™ phones, we’ve included WebGL™ support. By doing so, Sony Ericsson is the first mobile phone manufacturer to support WebGL for the Android web browser. WebGL basically makes it possible to extend the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within the web browser. Read more about Sony Ericsson’s WebGL support after the jump, and find out about special considerations to keep in mind when developing 3D web applications targeting touch-enabled devices.
In this article, Anders Isberg from Sony Ericsson’s Technology Reseach department explains more about WebGL and what to think of when you develop 3D web applications for touch-enabled devices. If you scroll down, you will also find three WebGL examples that you can browse to from the Android browser, if you have the latest software on your 2011 Xperia™ phone. You can also check out how it looks in the video above.
***
Earlier this year, I made a blog post about an internal WebGL research project on how WebGL could be implemented in phones. Based on the feedback we received back then, we decided to launch support for WebGL in the latest software upgrade we rolled out for the 2011 Xperia™ phones during this autumn and winter. Now let’s take a closer look at what WebGL support means for mobile.
Anders Isberg, Sony Ericsson.
What is required to implement a WebGL application?
Unlike other 3D web technologies, WebGL will not require any plug-in modules. Once the device is WebGL enabled, no further installations are required, and developers can go ahead and explore the WebGL™ functionality. To learn how to develop WebGL applications, we recommend visiting one of the following online resources that gives an introduction on WebGL application development, for example, Learning WebGL or the Khronos WebGL Tutorial.
Due to the fact that WebGL is a low level API, the technical threshold is rather high if you are new to developing WebGL applications. However, there is no reason to be scared by this. There are several JavaScript frameworks available that make it easier to create WebGL applications. Several of these can be found on the Khronos WebGL Wiki.
Navigating and interacting with 3D web applications
Most of the existing WebGL applications available on the web are tailored for a desktop environment. Consequently, those applications are making use of the W3C DOM Mouse and Keyboard events to navigate and control the WebGL application. However, on a mobile device, the touch events must be used to navigate and control the 3D scene. The Android web browser supports three basic touch events that can be used to navigate and control the WebGL application:
touchstart: generated when the finger is placed on a selected DOM element.
touchmove: generated when a finger is moved over a DOM element.
touchend: generated when the finger is removed from a DOM element.
The following code example shows how an event listener is assigned to touchmove event on a WebGL accelerated HTML Canvas element:
// Add an event listener on the WebGL™ canvas
webglcanvas.addEventListener('touchmove', onTouchMove);
function onTouchMove (event) {
// Cancel the default event handler
event.preventDefault();
// Readout the current X and Y coordinate relative the viewport
var currentX = event.targetTouches[0].clientX;
var currentY = event.targetTouches[0].clientY;
}
In many cases, the same code used to handle mouse movements can be reused for touch events. There are also frameworks available to simplify the handling of touch events. For example, there is a jQuery plugin that unifies touch and mouse events across platforms, as well as a Mobile jQuery that has support for high level events like swipe.
Considerations when developing for mobile
Devices such as Xperia™ PLAY, Xperia™ arc, Xperia™ neo and Xperia™ pro are equipped with a 1 GHz Snapdragon™ processor and an Adreno™ 205 graphics processor, so even if the processing power is not in parity with desktop computers, there are enough processing capabilities to create astonishing 3D web applications. Check out the video in the beginning to see some examples of WebGL running on a 2011 Xperia™ phone. You can also check out these examples by browsing to them from the Android browser on your 2011 Xperia™ phone, if you have the latest software. Just click one of the links to the demos below. Please be patient while the demos are loading, it might take some time.
WebGL-based interactive 3D demo of the Sony Ericsson logo.
WebGL-based interactive 3D demo of Walt Disney.
WebGL-based interactive 3D demo of two Ninjas.
When working with WebGL in mobile devices, it is important to take a look under the hood to get good performance. It is essential to consider how the shaders are written, how many polygons that are used in the 3D model, and to select textures carefully. At Developer World, we have published a blog post called Optimising shader performance for the Xperia™ PLAY, which includes several useful tips that can be used to enhance the performance.
One limitation in the Android browser is that web workers are not supported. For some WebGL frameworks that could be a limiting factor. For example, the WebGL framework three.js implements resource loading with web workers. In the WebGL examples listed earlier you can see how this can be solved by using a JavaScript shim layer that emulates web workers. More information about this topic is available at the Google Code Web Workers Emulation project site.
Hopefully this has given you enough information (and confidence!) to get you started with your own WebGL project! Good luck!
Anders Isberg
Master Engineer Technology Research
Sony Ericsson
