(fake) 2D parallax mapping… will burn your cpu

When Alternativa3D showed some demos with their parallax mapping, I always thought it’d be interesting to try it myself without having to resort to PixelBender.

Well, I did, and I wasn’t happy how some things turned out. There was no overlap of objects, and sharp edges would come out looking odd or distorted. Then, taking another look at their demo, I noticed they conveniently used slanted or smooth edges all the time without any possible overlap.

Reading up on some stuff, I decided to make the process iteratable, and liked it much better already. There are some downsides… Most importantly, it’s a cpu-killer and still pretty flawed compared to the real thing (which is a pixel shader). Nonetheless, it was fun to figure out and code, and that’s pretty much the reason why I decided to post it ;)

Oh, and I also rewrote the Bump Map from some time ago, since I needed it to make this demo a bit cooler overall. The code back then was a quick experiment; not exactly a beauty nor reusable whatsoever, which has been taken care of to some extent. Additionally, the lightmaps now support colours and you could just as well write your own.

Check out the demo here and the source here. The images used came from here.

17 thoughts on “(fake) 2D parallax mapping… will burn your cpu

  1. Love it! Why not include some fancy web-cam motion detection to insist on the holographic effect? You know, user moves his head to the right and left to see things differently etc.

    Keep up the great stuff :-)

  2. That’s actually not a bad idea, stephane ;)
    Foreground: As mentioned in the post, it is quite intensive indeed, because of the parallax effect which is iterated. A single-iteration version is already much faster – especially if it’s done with a filter instead of BitmapData.applyFilter (not an option tho because of the iteration). But in any case, if you leave out the parallax effect and use the bump mapping only, you’ll see it’ll run much faster as well (showing the bump mapping, however, wasn’t the point of this post – it just makes the parallax effect more efficient because of added lighting).

  3. Hi Mr.doob :) I actually wanted to try out a version that would run on FP9 (that, and it was easier to do it using the DisplacementMapFilter to get a grip on the concept). I’ve been working on a Pixel Bender version tho, but I can’t get it just right… The pixel-perfect way of doing Parallax Mapping that can handle steep slopes apparently requires a conditional loop, but I hope I can somehow approximate the effect with hard-coded iterations :)

  4. Hehe yeah, I’ve been looking forward to that as well, but nearly forgot about it! I guess it’s a good way to test my patience ;)

  5. Pingback: Parallax Mapping with Pixel Bender (still burning cpu’s) | Der Schmale - David Lenaerts's blog

  6. hi, how can i do to use other lightmap, any like ambient lighting or something? not phong.

    Great work!!!

Leave a Reply

Your email address will not be published. Required fields are marked *