I am developing a 2d mobile game that has a large deformable terrain (a lot like worms). I am rendering the terrain using a gray scale bitmap (in a fragment shader) which serves as a texture position map. If the pixel in the bitmap is black i render the pixel with a ground (tiled) texture else i render the background texture.

This works very well but now i would like to add rocks and static images to the terrain. The rocks will look like this
enter image description here

So my idea was to extend the grayscale bitmap to a RGB bitmap and use the green channel to mark the rock shape and the blue channel to mark the location of static images (which are not tiled).

Since the static images are not repeatable i would have to create blue rectangles which are exactly the same size as the static image. Could this be done any other way?

For the rocks i would use a similar approach but with the green channel so if the pixel in the bitmap is green i would render that pixel with a rock texture (the bitmap shape is blurred on the edge to render the black border). The rock texture is the dark gray color close to the black border on the picture. But the problem is that the rock is now a solid color with a black border and i would like to get as close to the picture as possible. Is it possible to create a texture to get the same type of shading as on the picture? Or is there any other way of doing this?



It's probably simpler to just render the rocks and static images as sprites, using alpha blending to composite them over each other and the ground.

To make the sprites destructible, the shader for the sprites could sample your mask texture using a second UV set that's automatically generated based on the sprite's position, so that it looks at the correct area of the mask. In destroyed areas you'd replace the sprite's color with transparency, so that any areas marked as background in the mask texture wouldn't be drawn.

  • \$\begingroup\$ if i render the rock as a sprite i cannot dynamically adjust the size of the rock and would need a few different sprites of rocks so you dont notice the pattern. And since there are going to be a lot of rocks the performance will drop - i am currently rendering the whole terrain on one quad in a single call. I would like to use the bitmap for the whole terrain and magically blend different textures so the outcome will be as close as possible to the picture i attached. \$\endgroup\$ – jernej Jun 1 '13 at 14:53
  • \$\begingroup\$ @jernej You can scale/rotate the sprites to make the rock bigger or smaller, and you'd need a few different rock textures anyway, with either approach. And adding a bunch of complicated pixel shader logic to render overlapping shaded rocks is going to slow things down too - quite possibly more so than drawing a bunch of sprites. Keep in mind that when you draw a sprite you only add expense to the pixels it touches, while adding code to the fullscreen quad shader adds expense for every pixel on screen. \$\endgroup\$ – Nathan Reed Jun 1 '13 at 18:53
  • \$\begingroup\$ i should really do a benchmark to see if its better to split the terrain/rock geometry (there would be 2-3 additional texture lookups for the rock but only if the pixel in the bitmap is green - about 15% of the terrain). The only problem with your approach is that i can not generate a rock with a custom shape - but a simple solution for this is to create the shape with small (overleaping) rocks. \$\endgroup\$ – jernej Jun 1 '13 at 23:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.