Open Devices

For some of the Xperia™ devices, we provide Android™ Open Source Project (AOSP) device configurations on GitHub. This means that the software will be open for you as a developer to use and contribute to. This is a way for us to support the open Android community, and it is also a tool for us to facilitate and verify contributions to AOSP.

This project has been discontinued

As we take on new projects, some of the older ones are no longer updated from our side. This also means that when external domains we link to are no longer maintained or expire we might not have been alerted to it. However, this doesn’t mean that we want you to stop using, exploring or contributing to the projects.

WebGL

With the introduction of application stores, the interest for creating applications for smartphones are bigger than ever. So far, the focus from the application developers has been on creating native applications that can be downloaded and installed from application stores such as Android™ Market. However, with the next set of web standards like HTML 5, CSS 3 and WebGL, it will be possible to create web applications for smartphones with capabilities that was only possible with native applications before. This in combination with the fact that the future graphical stacks for smartphones will be hardware accelerated, which will enable the creation of compelling 3D user experiences. This could be, for example, 3D games, medical visualisation, 3D content creation or 3D virtual environments using web technologies.

What is WebGL?

WebGL is a low-level API JavaScript API defined by the Khronos Group. The API is based on OpenGL ES 2.0 and enables support for 3D graphics. WebGL enables application developers to take advantage of capabilities provided by graphical processor units which is a standard component on all modern smartphones. For end users this means that they will be able to enjoy more interactive and responsive applications without any installing any plug-in modules in the web browser.

  • New! Check out ST Ericsson’s WebGL tips for NovaThor U8500 ModAp part 1.
  • New! Learn more in ST Ericsson’s WebGL tips for NovaThor U8500 ModAp part 2.

Developing 3D web applications for touch-enabled devices

Anders Isberg from Sony Mobile’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 a smartphone supporting WebGL.

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

Many 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

One thing to keep in mind when developer for mobile devices is the difference in processing power compared to desktop computers. However, even if the processing power is not in parity with desktop computers for mobile devices, 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 2012 or 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 Mobile, 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.

WebGL in Xperia™ smartphones – available as open source

Did you know that Sony’s WebGL implementation for the Xperia™ phones running Android™ 4.0 (Ice Cream Sandwich) and above is available as open source?. Anders Edenbrandt, Senior Software Architect, explains more below.When we announced added support for WebGL in our Android 2.3 (Gingerbread) phones, we have received a lot of feedback from the community. Most of the feedback was very encouraging, but we also received comments saying that WebGL needs to get a wider deployment within the Android ecosystem, for the market to take off. This is something we completely agree with.

As a way of encouraging this, and in line with our continuous support of the open developer community and open standards like WebGL and HTML 5, as well as our ambition to be transparent, we decided to publish our implementation of WebGL for Android 4.0 as open source. This way, it’s free for anyone who is interested in using it as is, but it’s of course also there as a base for anyone who would like to contribute in further development of the code.

The reason for publishing the implementation of WebGL for Android 4.0, and not the solution we used for our Android 2.3 phones, is that the WebKit code for Android 4.0 is much more recent, and therefore the required modifications are more manageable.

What is required to enable support for WebGL in Android 4.0?

We have published the code to enable support for WebGL in Android 4.0 on the Sony Mobile Dev Github. You don’t need any particular access rights to download the source code, but you must be a fairly advanced developer. To make use of the code, you must be able to build your own Android™ operating system. The code consists of the following files:

  • Patched WebKit files to enable WebGL with the hardware accelerated compositing enabled.
  • New files that implements the binding between the WebKit and OpenGL on Android.

To enable WebGL, the changes must be applied to the WebKit component in the Android ICS-MR1 release. Right now the code only supports Android 4.0. Please note the work on the code is still in progress, and you can expect changes in the code base until we have launched our first commercial Android 4.0 software for our Xperia™ phones.

We hope to see a lot of interest in this, and many contributions as well. If you would like to contribute to the work with the code, or if you have any questions or comments, feel free to get go to our WebGL thread on the XDA Forum.

Sony is part of the the W3C Core Mobile Web Platform Community Group

At Mobile World Congress 2012, the W3C Core Mobile Web Platform Community Group (coremob) was announced by Facebook. Sony is part of this group, and the group will work to accelerate the development of standards for mobile web technologies. We are excited to be part of this, as we believe web apps will be increasingly important in the future, as more and more people are starting to access the web directly from their mobile devices.

Developing mobile web apps have many advantages. It’s a fast and easy way to reach a large audience without the need to develop versions for different operating systems, and a mobile app can be easily accessed via links and search engines. Also, updates for new features are instant and can reach 100% of your user base.

The purpose of the coremob group is to support the community in the development of modern mobile web applications. This is done by accelerating the improvement and standardisation of mobile web technologies, in order to reduce the fragmentation of mobile web browsers.

Ringmark, Facebook’s mobile web browser test suite

Facebook has developed a test suite for mobile web browsers, called Ringmark, which is soon going to be open-sourced and donated to the coremob group. Ringmark provides an easy method to check web browser capabilities, by simply visiting a URL on your mobile web browser. The structure of Ringmark is introduced on Facebook’s HTML5 blog:

“Ring Zero represents the base functionality that most mobile phones have today. Ring One represents what functionality is needed to unlock the most common apps that developers want to build; specifically, 2D games, music and video apps, and camera apps.”

Many of the Xperia™ that has been released the last years are all capable enough to pass Ring Zero already, and we are working hard to improve our degree of compliance. If you’re interested, you can test the capabilities of the web browser on your phone, by going to rng.io!

It’s crucial, but not sufficient, to have better mobile browsers to ensure success for mobile web apps. A ubiquitous distribution solution is also required, and Facebook’s platform for mobile is one of the best available discovery solutions for mobile web developers. Facebook’s platform is a system of tools and features that bring social discovery to mobile apps and games.

Get to know the Facebook Mobile Platform

Facebook’s Mobile Platform provides many valuable features for developers that want to improve the discovery, distribution, and engagement of their applications. The platform has gained momentum in a short time, sending more than 60 million visitors to mobile apps and games every month. One important part is the Open Graphprotocol, which makes it easy for users to share back to their Timeline and spread the word about your app through users and their friend’s News Feeds. In addition, a range of SDKs and APIs allow developers to create rich social experiences for their mobile users.

There is also support for accepting payments for digital goods or services within your app in the form of Facebook Credits. Facebook announced integration of the mobile payments solution with a group of mobile operators, providing a seamless three-step carrier-billing flow for mobile web apps using Facebook Credits.

To get started developing web apps for Facebook on a range of different platforms, check out Facebook’s Mobile Web Tutorial and the Facebook Android™ SDK . You can also register your web app to start using the Facebook mobile platform today.

Make use of new Ice Cream Sandwich (ICS) features to enhance the web user experience

Another interesting addition of tools to enhance future web experiences is included in ICS (Android 4.0). It introduces several new features and APIs, which open up new possibilities for developers. Below we have listed a few features that are especially useful when developing your mobile web apps and games.

  • Device orientation – one of the most exciting new features is that it will be possible to use a new Device orientation API. With this JavaScript API, it will be possible to utilise data from accelerometers, gyroscopes or compasses in the smartphone. The device orientation gives a completely new dimension on how to develop applications. Previously, the application developer was limited to using touch events to let the end user interact with the application. But, with the device orientation API, it will be possible to control the application based on the orientation and rotation of the device. Check out device orientation in the demo video above, or try it out yourself from your smartphone!
  • Multi touch – Once ICS is available, it will be possible to start to develop web applications that are using multi touch events. This should be good news to all game developers, since it opens for faster interaction and more advanced user interfaces.
  • Camera capture – The Camera capture API leverage on the HTML input element, where a new capture attribute is introduced. This will enable the possibility for web applications to capture photos from the built in camera.
  • HTML5 video – HTML5 video is introduced in ICS. This feature enables playback of video in the web browser. It’s strongly recommended for developers that are rendering video to start using the HTML 5 video element instead of Adobe Flash, since Adobe announced they’re stopping the investment in Adobe Flash for Android.
  • CSS 3D transforms – CSS 3D transforms is an exciting feature that makes it possible to make transformations of objects in 3D space. This can also be done with WebGL, which is a 3D-rendering technology for web browsers, but if you feel that learning WebGL takes too much time, this is an easy way to enhance the rendering. For smartphones, this is a very useful feature since 3D transformation is an excellent mechanism to make more information visible for the end user on a small screen without overloading the end user with information.

More information