Road trip animation in Papervision3D
I have been thinking about doing something like this for some time now, but I had no idea where to start. However, recently, after I experimented with animating vertices in Papervision3D, things started to look brighter, so a couple of days ago I sat down and started coding…
Basic concept here is that there is one Plane and two BitmapData objects – a texture and a terrain. The Plane never moves, but instead the texture and the terrain are scrolled on it.
The texture is assigned as material to the plane. At each frame the texture BitmapData is scrolled by an offset and the material is updated.
The terrain is a grey scale bitmap. It is scrolled in the same way as the texture. Each pixel of the terrain is mapped to a single vertex of the plane – the lighter the pixel color is, the higher the z position of the vertex will be. It is done the the same way as in my previous example. Only this time it is not a generated noise, but rather a map drawn manually, so that is works good with the texture.
Hills and turns. Additionally, each vertex on the plane has its x and z positions rearranged continuously using Math.sin() and Math.cos() functions with different phases – that creates the illusion of uphills, downhills and turns…
Lighting. Finally there is one more bitmap – a light map, that is blended with the texture using MULTIPLY mode to create the effect of light and darkness.
Source. I think it is a pretty nice effect and a good starting point for maybe a car racing game or something. Check the demo, try it in full screen by pressing SPACE and grab the source to see it in detail (also available in a zip bundle containing all the graphical assets I used).
Credits. In this demo I used textures from OpenFootage.net. They have some great stuff in there!
Thanks for the share looks really nice well done.
[...] Bartek Drozdz posted a cool Papervision 3D animation. Basic concept in this animation is that there is one Plane and two BitmapData objects – a texture and a terrain [...]
very nice demo!
love it
Just awesome
[...] trip animation Really nice road animation by Bartek Drozdz from Everyday [...]
Well done. I can totally see this as a starting point for a game.
nice
Awesome man, great work!
Very nice. Thanks for sharing.
That’s pretty impressive. I can think of a lot of possibilities for something like this.
Awesome, this would make a great demo-effect!
That is just excellent! You are sure good at this. Congratulations!
Great stuff!, I love it.
Funny thing is that i wanted do the same thing :)
Nice use of the available resources! :D
well, there is nothing to add. ;-)
Wow. Just wow :D Could be a good base for driving game :)
[...] Cómo hacer para que nuestro usuario experimente el estar siguiente un camino en una carretera?… Este tutorial es la respuesta. Incluye código fuente! [...]
Hi
I am new to AS3 I just downloaded the source & made roadtrip.as the document class (Of course everything is in correct class path ). But when I try to run it is throwing some init error on runtime but not at compile time. Can u explain why this is happening ?
Many thanks in advance.
@Harshal. using the Flash IDE it is possible that is does not work correctly – because of the way I embed assets. I just posted a note on this, and it is here. If you still have problems let me know.
Great work!
So,I use your soure to make my websit!
And thank you very much!
excellent work! except one little detail: the horizon should move too when car/POV turns left or right. i gues it is less complicated thing to do.
have you ever seen the movie “lost highway”??? this reminds me of the intro/outro of that movie so0o0o much! very cool!
@xero yes, I actually named the file “losthighway” :)
Hi.
This looks great!. I just downloaded you source and stuck in into a new Flex project. I also place the papervision library (great white) in my source folder. When I run it, the road seems upside down and is not running like it does in you example.
Any ideas?
Love your work :-)
Found it. For some reason the rotationX of the plane needed to be 89 instead of minus 89…
Might that be a change because of the latest papervision classes?
In the ‘buildPlane’ function:
plane.rotationX = 89;
I also had to change the ‘camera.Zoom’ to 80. Probably because of the same reason.
Once again, I love what you did here. So cool :-)
@Donnie Sometime after I published this example Papervision3d has undergone a major refactoring of the camera classes.
That is the reason why everything is flipped if you now use the latest version from the trunk. But, as you noticed, it is just about changing some values and things get back to normal :)
Great stuff!
How was the “size” value, 21, inside RoadTrip.as derived? Appreciate if you can throw some light.
Interesting!
Thanks for sharing!
I am interested in using this effect with road signs.
Have you done this? How can we work together?ru
Great work. I am kinda going to create games out or all your tutorials.. awesome work. I am looking to create a surfing game with waves to be some by using this theory clubbed with the perlin carpet code. Thanks for this precious resource.
Source compiles right with plane.rotationX = 89;
and camera.Zoom= 80;
[...] Road trip animation in Papervision3D [...]
hi want this.. how can i get ?
there is no .fla
Great work!
Exactly what I was looking for
OMG – Great work! Thanks :)
I’m glad to have visited your blog , I find it interesting and informative.