Moving Road Effect Using a Normal Map, similar to Car Materials Example

Hey there,

I’m having a look at this example; the effect of a moving road under the car is nicely created using GridHelper.

This got me thinking, is it possible to create this same effect but using a normal map? This way the user can change the road from say, cobblestone map to asphalt map to whatever one can imagine.
My first guess would be to create a large plane under the car and somehow have a normal map that appears only near the car and fades out into the horizon, so that the normal map is not applied on the whole plane. Also the normal map would need to move when the car is moving and mirror itself when reaching the edges of the map.

I couldn’t find anything out there that creates this effect. Would it even be possible? I’d appreciate any tips or feedback on how to create such an effect (or similar).

2 Likes

I would disagree about this. The speed of the road is not synchronized with the speed of the wheels.

Moving floor – this should be possible. I have never done it, but I cannot foresee any significant problem.

BTW, I truly enjoyed the artistic feel of the illustration!

1 Like

I think what you have in mind is absolutely possible and fairly simple.

Take a look at the first three examples in my Aviation webpage regarding grid mapping. As they show, you can use a single grid or a nested grid (with 2 or 3 levels). Based on the example, you probably just need a simple single grid. The hardest part will be finding a nice cobblestone image with normal map.

As shown on the webpage, I use them as the underlying basis for everything from simple textures to an animated ocean. Add some headlights (spotlights) to illuminate the road. You may want to add a little animation to the suspension - depending on the size of the stones.

You can create the circular viewing area by setting the camera range to the desired distance.

Check this beautifully showcased example:

Here is the section of their website where they’re using the moving ground effect:

2 Likes

For the effect to be truely convincing, the circumferential speed of the tyre surface would have to match the grid velocity. In the linked example the tyres rotate too fast, giving the appearance of constant slippage.

1 Like

Thanks for the replies and feedback!

@PavelBoytchev @vielzutun.ch Yes i agree, the wheel rotation and floor speed are not realistic. A driven wheel actually has some slippage but the slippage in the example is exaggerated; in any case, i’m referring to the visual illusion of movement. I’d like to fool the eye that the model is moving around in an infinite space even though the model is actually stationary. You can find another example of this effect here

@phil_crowther I had loads of fun flying around in your examples! The “scrolling maps” follow the same principle that i’m aiming for. @Fennec That website is very well done, and the section you shared creates exactly the effect im looking for. From what I understand, in both examples the subject (plane or horse) is above a tiled texture that scrolls infinitely.

Id like to create this effect but for a tiled normal map applied on a single plane. Also, i’d like to keep the normal map visible only in the vicinity of the subject and have the tiled normal maps translate and rotate based on the subject’s speed and direction of travel. (check the attached image)

I understand how to achieve some of these requirements but not all. I can load a normal map to plane using THREE.TextureLoader and tile it using THREE.RepeatWrapping, but im not sure how to translate (“scroll”) and rotate it, as well as fade it out. Im trying to understand if this would solve the translation and rotation issue, but i still have no idea how to fade out of the normal map.

@PavelBoytchev here’s another illustration :wink:

2 Likes

For texture scrolling I’d try the .offset property of a texture.

For fading, I would either go with a custom shader; or will add another layer just above the ground. This layer will have a hole with blured contour. The moving ground will be seen through this hole.

I’d also use a fog if a non-circular ground is also OK.

4 Likes

An option with @PavelBoytchev 's ideas:

6 Likes

Looks beautiful and much better than I have imagined…

1 Like

I like the synched velocities. :+1:

And the seemenigly endless (repeat almost unnoticeable) floor pattern.

1 Like