This is short guide how to create parallax effect using accelerometer on mobile platforms. Some code is related to Android, but all concept is applicable to iOS, etc.
What is parallax effect? There are some more complex definitions but i would define as simple as the following – you move your phone/device in space and some objects inside your application are shifting accordingly to compensate this movement. This allows to create some strong feeling of 3d interface as well as nice interaction effect.
As good example you can check out my live wallpaper (link on market), which is using this effect while rendering particle system of moving objects. More information about this application can be found here.
To create parallax effect we need to grab data from accelerometer sensor (as i found out gyroscope is not present at majority of phones while accelerometer gives enough of data to be happy with it), convert sensor data to relative rotation angles and shift some parts of application interface accordingly. 3 steps:
Brand new version of live wallpaper – Alive Numbers 2 for Android devices. Enjoy smooth OpenGl ES 2.0 animation of minimalistic animated background in couple with customisable embedded widgets. New version has adjustable color schemes and ability to hand-tune widget layout. You can choose from set of base animations and play with a lot of options for every widget.
There is very nice site http://glsl.heroku.com/, where you can find the gallery of complex GLSL shaders (from very simple gradients to very complex rendering systems). You can modify their code at real-time using provided editor:
Current implementation of WebGL is using GL ES 2.0 – the same as all mordern android / iOS phones/tablets. So i decided to test if i can use these shaders at mobile applications – and tested their performance on Sumsung Galaxy Note II. Of course i tested only relatively simple shaders expecting them to run slow…
Android live wallpaper is not a general Activity application – it is special WallpaperService. And you cant implement it in pure C++ using NativeActivity. All my core is cross-platform C++ so i implemented two-way communication between C++ and JAVA. From C++ NativeActivity you can call JAVA classes through JNI and from java service you can call native (c++) methods of engine core.
The tricky part that all this communication involves a lot of different threads. Wallpaper service has its own thread, but rendering should be performed in another one. My native C++ core is launched as third thread and spawns other async threads which could call some java methods. But i got through all this nightmare using mutexed queues of events. As result i got full functionality of my engine at the background of android launcher.
When i only started working with android i wrote small live wallpaper in pure java (with no OpenGL). Wasted only couple of evenings and even lost the source code. But recently i was surprised when discovered that it has more than 100.000 downloads (https://play.google.com/store/apps/details?id=back.livenumbers). It does not even work properly on my Note 2 now.
But the point is that now i have smooth OpenGl ES 2.0 animations/effects in couple with engine functionality. Probably, i will create couple of stylish backs fused with some in-code widgets (like battery indicator, weather forecast, clock, calendar date or something else) as implementation will be relatively easy now using my engine. Any suggestions on this matter are welcome.
Давно я не писал в блог – но есть хороший повод! Чтобы качественно поздравить всех с новым годом, я написал новогодний скринсейвер-открытку (QT OpenGl). Для запуска необходима не древняя видеокарта и монитор побольше. Happy new year 2012!