Android Terrain Test 2 : Clouds
So I again went playing with OpenGL ES 2 on Android, this time I added clouds to the terrain:
Not only that but I also learned new things about OpenGL ES 2 and fixed some deadly bugs in my previous code and reorganized the code in a better way.
Here are some screenshots showing the results of using different textures and different configurations for the clouds:
(Wow! this is my first time trying the gallery feature in WordPress 😀 )
Try it on your Android:
FuchsGL_Clouds.apk (866KB) Android 2.3.3+
Source code :
FuchsGL_Clouds Source.zip (884KB) Eclipse project
The WebGL Version:
Once again I made a WebGL version despite the fact that I hate Javascript (yuk) , but what can I say? the portability of WebGL is very tempting, people are usually lazy to download files, with WebGL it only costs a single click ;).
The WebGL version looks better than the Android one, because I could set the background color of the canvas to black which makes the blending of the clouds give nice results:
WebGL Clouds
Here’s the direct link to the WebGL version:
https://drive.google.com/open?id=0B-9zlOMgWVtKUDd1d2RWdlRmak0
It also contains a QR Code for a web version I made for mobile devices, it will (hopefully) fill the screen of the browser, here it’s just in case you’re reading this on a mobile or tablet:
https://dl.dropbox.com/u/12942790/Blog/FWGL_Clouds/mFWGL_Clouds.html (Dtopbox no longer supports direct links)
Source code: the source code in the HTML file above is minimized to reduce size and get performance using the online tool jscompress.com, this way the code get’s smaller without breaking its functionality.
If you want the code here it is as an Aptana Studio project:
FuchsWGL_Clouds Souce.zip (693 KB)
On thing I came across on the internet is this presentation : Debugging and Optimizing WebGL Applications, it contains lots of useful information to get the best performance out of your WebGL game.
Some technical notes:
– Each cloud is rendered as a particle that has it’s own buffers, since the particles here are static it would be better to store all of them in two buffers (array buffer + element array buffer) instead of 2n buffers.
– The clouds are not ordered by depth before rendering.
– I created my own particles using spherical billboards, so each cloud is a quad that always faces the camera, I didn’t use point sprites because I needed rectangular sprites (can it be done?).
– The class CloudRenderer is the main renderer and it renders everything (sorry if the name is misleading).
And that’s it I guess 😀 drop a comment if you have a question or something :D.
What do you think?
Ghoscher's Blog 
Really nice work brother …. keep the good work 🙂
THANKSSSSS !!! JUST THAT I NEEDED , a simple terrain open gl project 😀
Hi – before I jumped into trying it to see, maybe you could comment on your guesses… Do you think your terrain code base would be able to handle rapid (on the order of frame-rate speed) modification of the height field? So an undulating terrain? Maybe with a smaller bitmap/vertex array if not the full size? Thanks for your writeups, very nice work.
Hi, rapid modification will require a dynamic vertex buffer, if the terrain is small I don’t think it’ll be a performance problem.
What exactly are you trying to do? if the modifications are random then you can simply do them in the vertex shader. If you want to implement 3D water then it’s better to search for something more specific other than a terrain, there are lots of algorithms out there to simulate water.
There are also some techniques to optimize terrain rendering like Quad Trees and LOD.
awesome bro
Thanks 🙂
Nice work!
I try to understand how your code works and correct me if I am wrong, you load the height map that you have previously created with L3DT Standard, directly in the res folder .
Do you think could be possible to generate the height map with opengl (or other library) directly in android?
Thanks! have a nice day
Thanks!
You’re right, I’m loading a pre-made height map.
You can generate one in Android at run time and there are lots and lots of procedural height map generation algorithms.
Some algorithms use noise to create a height map while others keep dividing the terrain and elevating parts of it.
Look for “procedural heightmap generation”.
So basically any algorithm should work since it’ll produce a 2D array that can later be rendered.
Things will get a little bit complicated when you want to texture that terrain. usually it’s height dependent and requires you to use multi texturing.
Hi,
Great job 🙂
I just tried your two projects, and if the first run ok, the second one (with clouds) only shows me a ‘black’ island (without texture) and also without clouds…. do you have an idea about this ?
thx
Hi Meg, glad you liked it 🙂
Which one didn’t work? If you’re trying the WebGL version then you might need to wait a little bit until the textures are loaded.
I just tried both the app and the web version and both worked find.
Please let me know
Hi,
It is on the android version. I just put the src into eclipse and start.
It looks like no texture is set. The heights seems to be there, but the mountains stays black. It should be the same withe the clouds, may be they are there but without texture, and therefore we see noting !
thx