Xperia™ phones first to support WebGL™

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.

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

More information:

Comments 57

Sort by: Newest | Oldest | Most popular

  1. Pingback #1

    [...] November, we announced that we were the first phone manufacturer in the world to support WebGL in the native Android web browser on Xperia™ phones. As a next step, we are now very excited to release our WebGL implementation for our coming [...]

  2. Pingback #2

    [...] November, we announced that we were the first phone manufacturer in the world to support WebGL in the native Android web browser on Xperia™ phones. As a next step, we are now very excited to release our WebGL implementation for our coming [...]

  3. By Magaly Márquez

    #3

    Why in Mexico is not disponible this update? How can I download and install it?

  4. Pingback #4

    [...]  |  Sony Ericsson  | Email this | Comments [...]

  5. Pingback #5

    [...]  |  Sony Ericsson  | Email this | Comments This entry was posted in Uncategorized by admin. [...]

  6. By Ebubekir Abdullah Uyar

    #6

    Dear Mr. Anders,

    I think it is great to see developers like yourself help Sony Ericsson to be the first in tecnological improvements like these. For several years I have been a really proud user of Sony Ericsson and for a year and a few months now an even more proud user of an Xperia (X10) smartphone. But to tell you the truth: the fact that Sony Ericsson forgot us and excluded our phones (the first Xperia phones) of the latest improvements really disappoints me. I have send multiple mails to different department of Sony Ericsson but each time i got the same answer: there are no plans to update the X10 for now and that I can follow Sony Ericsson on all social media. There might not have been sold a lot of these phones but it would do me and all my fellow X10 users a great pleasure to see you guys really listen to your customers and release an update for our phones to. As an developer i thought you might be able to help us in this case, if thats not the case i’m sorry for wasting your time.

    With kind regards,
    Ebubekir Uyar (Amsterdam/The Netherlands)

  7. Pingback #7

    [...] La última versión del software Xperia™ también trajo el soporte para WebGL al navegador de los Xperia™, siendo los primeros terminales Android en soportarlo. WebGL hace posible ampliar las funcionalidades del lenguaje JavasScript para permitir generar gráficos 3D interactivos en el navegador web. Para más documentación e información de desarrollo, os recomiendo consultar el artículo al respecto en el blog de desarrollo de SonyEricsson. [...]

  8. By Chege Nganga

    #8

    anyone who can guide me on installating 3rd party software on my X8? Its an andriod app from in-voice

  9. Pingback #9

    [...]  |  Sony Ericsson  | Email [...]

  10. Pingback #10

    [...] Firefox on Android has supported WebGL for a while now, but now WebGL’s appeared in a live release of the stock Android browser for the first time, thanks to Sony Ericsson. [...]

  11. By سعد الحوشان

    #11

    I have nothing to do with web development, but having you guys behind my phone’s software makes me happy. Thank you for your good job :-).

  12. By Anonymous

    #12

    I would like to suggest a new idea for a Sony Xperia mobile model. I could not find any link to create a new thread to post this idea so therefore am posting this as a comment.
    I would like to suggest a model that allows the user to use the phone for daily purposes as well as enjoying their music. The idea involves creating a phone that has a slide out mini turntable pad that allows users to mix/scratch songs and practice being a DJ. Design wise it would be similar to a slide out keyboard pad but instead would have two turntables that can be used and rotated by the user by using their thumb. It would probably be very similar to the PlayStation control pad that slides out at the moment with the analog sensors used as the turntables which would also be a bit more larger in size. I think it would be a successful product for the young generation and people who like their music.

    • By Joe Padre

      #13

      Hi Raj,
      Thanks for the comment. I personally think that’s a fantastic idea with lots of potential. Will pass your suggestion on to the right team in the company.
      Regards,
      Joe from Developer World

      • By Anonymous

        #14

        Thanks Joe. Is there an email address or some page where I can submit similar ideas in the future?

  13. Pingback #15

    [...] Sony Ericsson tại đây: Sony Ericsson logo & Walt Disney & two Ninjas. Tham khảo: Sony Ericsson Chủ đề tương tự: Tất cả dòng Sony Ericsson Xperia 2011 [...]

  14. Pingback #16

    [...] No problem at all with this device, all working as it should, but after all, this is a device with a new Android build and also one of the first devices with WebGL support. [...]

  15. Pingback #17

    [...] демонстрации новых возможностей на сайте для разработчиков компания опубликовала несколько 3D-демонстраций. [...]

Show more comments

1-17 of 57 comments. Show all comments