Home > Android, Games Programming, Graphics, OpenGL, Programming > Android Terrain Test 2 : Clouds

Android Terrain Test 2 : Clouds

So I again went playing with OpenGL ES 2 on Android, this time I added clouds to the terrain:

Clouds_Screenshot

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

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.

Advertisements
  1. amr
    11/03/2013 at 2:18 pm

    Really nice work brother …. keep the good work 🙂

  2. Ricardo
    11/10/2013 at 1:59 pm

    THANKSSSSS !!! JUST THAT I NEEDED , a simple terrain open gl project 😀

  3. 25/10/2013 at 2:18 am

    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.

    • Fuchs
      26/10/2013 at 8:40 pm

      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.

  4. Gowtham GS
    21/03/2014 at 8:43 am

    awesome bro

    • Fuchs
      22/03/2014 at 3:44 pm

      Thanks 🙂

  5. 26/03/2014 at 6:29 pm

    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

    • Fuchs
      26/03/2014 at 6:56 pm

      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.

  6. meg
    29/02/2016 at 11:51 pm

    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

    • Fuchs
      29/02/2016 at 11:56 pm

      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

      • meg
        02/03/2016 at 5:33 pm

        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

  1. No trackbacks yet.

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: