Page History

Introduction

Goal of this guide is to help the artists in the process of implementing rain effects for body parts and windscreen, for both exteriors and interiors views.

Requirements

Software

3D Studio Max 2012 with the lastest rFactor 2 plugins
Photoshop CC 2018
NDO2/Quixel Suite

Assets

Car body needs to be mapped.
UVW template of the car body @ 4K resolution.
Car Wiper Animation fully implemented and ready.
rF2_CarRainFx_Template.zip (click to download the zipped .PSD template)
raindrop_desc.json (click to download the template)

Step 1 - Implementing Rain Drops Effects in the Body Parts

1.1 - How it works

The dynamic rain effects are composed by different elements (drops, streakes etc) that are being rendered on the Diffuse Map UV channel (CH1). This means the artist doesn't need to create any specific UV mapping for this effect, but all we need is a color map to tell the engine what islands in the mapping are referring to Top, Left, Right and Front/Back body parts. Colors are:

RED (255,0,0) ; TOP
GREEN (0,255,0); RIGHT
BLUE (0,0,255) ; LEFT
YELLOW (255,255,0); FRONT/BACK

1.2 - Creating the Body Rain Map

Open the UVW Template of the car body you are working on, be sure it's a 4096*4096 map, because this is the resolution we need for the code to work at its best.
Save the file as "CarModName_RainBodyColorMap.PSD"
Create a New Layer and rename it as "TOP Parts"
Create a New Layer and rename it as "RIGHT Parts"
Create a New Layer and rename it as "LEFT Parts"
Create a New Layer and rename it as "FRONT/BACK Parts"

...

You can now select the "RIGHT Parts" Layer and using the Polygonal Lasso Tool, start creating masks for every island which is RIGHT projected. Use the SHIFT key to create multiple selections. Once you have all your selections ready you can press SHIFT+BACKSPACE (FILL) and then set the dialog; Contents to COLOR, Mode set to NORMAL, Opacity set to 100%. Pick the RED GREEN color from the color picker (0,255,0) and press ok to fill all the selections with GREEN color

You can now select the "LEFT Parts" Layer and using the Polygonal Lasso Tool, start creating masks for every island which is LEFT projected. Use the SHIFT key to create multiple selections. Once you have all your selections ready you can press SHIFT+BACKSPACE (FILL) and then set the dialog; Contents to COLOR, Mode set to NORMAL, Opacity set to 100%. Pick the RED BLUE color from the color picker (0,0,255) and press ok to fill all the selections with BLUE color

You can now select the "FRONT/BACK Parts" Layer and using the Polygonal Lasso Tool, start creating masks for every island which is FRONT or BACK projected. Use the SHIFT key to create multiple selections. Once you have all your selections ready you can press SHIFT+BACKSPACE (FILL) and then set the dialog; Contents to COLOR, Mode set to NORMAL, Opacity set to 100%. Pick the RED YELLOW color from the color picker (255,255,0) and press ok to fill all the selections with YELLOW color

...

The document is now ready to export the Map, but before to do so let's save the .PSD for any future usage and archive.

We need 2 identical maps, with a size of 512*512px (you need to downsize the template map before to save these maps, but keep the 4K source for any other future usage and livery), with same attributes, just saved as two different files. Both files needs to be saved into the "teams" folder of the specific car mod we are working on.

...

Since the MovementDirection is (1,0) this will be the resulting vector ( take in mind PIC BASE):

Step 2 - Implementing Rain Drops Effects in the Windscreen IN and OUT

2.1 - How it works and Goals

The RainFX on the glass has a dedicated code that does use a group of Maps (Wiper Arcs, Diffuse and Normals) to render all the various elements of the effect, respecting the wiper kinematics. The Art involved needs to be extremely constant and streamlined, since our underneath presets are expecting specific raster inputs to drive the effect as its best. Artists are free to experiment and introduce dedicated art per car, but we do suggest to use our RainFX Template as a base, which has been developed on top of the effect preset and have been deeply tested. If you introduce new art, please, be sure it's 100% compliant with the original requirements (contact the responsible of the Art Direction for any further information). The Shaders targeting such technology are called "Windscreen Inside Shader" and "Windscreen Outside Shader".

...

In order to achieve constancy between all cars, and also between the two different POV (inside and outside), we have to streamline as much as possible the way we work these UV maps.

These are core points to achive our goal:

Always use the dedicated Shaders for the car Glass parts; "Windscreen Inside Shader" and "Windscreen Outside Shader".
Always use the livemapper and REFMAP0 for all the Glass parts.
Always maximize the usage of the canvas. Keep in mind that the average real world size of the texture is 2mt*2mt, so this means that most of the time your (average car) windshield will use the entire area on the top.
Always map both Glass interior and exterior mesh, at the same time, and 100% same mapping, so that you get constancy between the effect, when visibile from the outside as well as what you get when sitting in the cockpit.
Always respect scaling between parts; NEVER change the world scale between the different UV islands on the map. This will avoid rain drops looking of different sizes along the different glass parts.
Use BOX projection at constant scale.
If the car has a back glass, you can put this on the bottom area of the UV canvas, respecting same rules listed above.

2.2 - Shader and Materials Setup

We'll be using these settings for both Inside and Outside shaders:

...

PS: For the open wheelers, where we don't have a closed cockpit, we'll be using just the Windscreen Outside Shader, since technically speaking, the entire car windscreen is outside, and doesn't need the boosted effects we do have for the internal version.

2.3 - Windscreen and Windows UV Mapping

Select both both the Exterior and Interior mesh. Hide any polygons which is not mapped with the Windscreen shaders;

...

At this stage be sure you are keeping a constant scale between islands, and fine tune the mapping using the CheckerPattern as a guide (see picture above). Mapping is now done.

2.3B (ADDENDUM) - Windscreen and Vertex Illumination Painting

A problem to solve, to make the final effect more realistic, it's to tell our RainFX code, where our windows are positioned around the car, so that we can render the streaks effects, building up and rolling in the correct position.

...

Now, after Red for the Back, you have just to repeat the procedure (you can re-use the same Vertex Paint in the stack), and paint the remaining windows. Black for the Front, Green for the Left, Blue for the Right. After this task you should have this;

Task is done!

2.3C - FRONTAL Windscreen UVW template creation

Before moving to the next task, we need a UVW template (4096*4096) showing the main windscreen (in and out) in the canvas. This is important as it's our main reference for the art creation.

...

Now we have everything we need from the UVWs, and mapping is also complete, so we can move to the next Task.

2.4 - Create a visual projection reference of the wiper animation

This is a delicate task, as much of the final quality of the effect depends on how we are translating the Wiper arc animation on the windscreen, to a static Arc map, which is describing such motion through a shape (mask) and a color gradient (motion).

...

Now that we have all the animations file, we can save all the projects and move to Photoshop, with the next Task.

2.5 - Create Wiper/s Animation Reference Image

Open Photoshop CC and let's import all the animation files in a stack;

...

We now have the base reference ready to build up our Art Set and move to the next Task.

2.6 - Create Wiper/s Arc Masks

We can start creating an easy rectangular gradient, from full RED (255,0,0) to full Transparent. Create a Rectangle long enough to be shaped into the wanted Arc mask. IMPORTANT; If you have a wiper that does go side to side, but starts from the middle on the windscreen, the gradient always must be from side to side, describing the entire arc on the windscreen, with the full transparency on a side, and full red on the other side. Never use a symmetric gradient, with the full transparency in the middle. If you have single wiper system, that does Start&Park in the middle of the windscreen, you will still want an arc gradient from down to down (like for any other wiper system), and then you'll force the mask to start at 50%, through the use of the key points (we'll see these later in the guideline);

...

Now you have both Right and Left Arc Mask, ready to be saved for the game engine. We need a .PNG format, default settings, saved with its own transparency. Both Arcs needs to be saved into the "teams" folder, of the car mod you are working on;

Name for the files are;

RIGHT ARC; veh_wipers_arc_alpha_0.png
LEFT ARC; veh_wipers_arc_alpha_1.png

PS: if you have just a single wiper system, you save just as "veh_wipers_arc_alpha_0.png"

2.7 - Create Rain Buildup Diffuse Map/s

Before to start we need to remember that all these events in the Diffuse, they all need to stay INSIDE the Arc Masks. Every pixel outside that area will be dropped.

...

Last art Task, but probably the more important for the quality of the effect, it's the Normal map generation. Let's move to it!

2.8 - Generate Rain Buildup Normal Map/s

The normal "distortion" is basically the main aspect of the art, that does produce and visualize the water effect on the glass parts. This mean that we want extremely high quality normal maps, with no artifacts, and with proper frequencies for the different we've put on the Diffuse maps.

...

Now you have both Right and Left Normal maps, ready to be saved for the game engine. We need a .PNG format, default settings. Both Normals needs to be saved into the "teams" folder, of the car mod you are working on;

Names for the files are;

RIGHT Diffuse; veh_wipers_arc_normal_0.png
LEFT Diffuse; veh_wipers_arc_normal_1.png

...

It's now time to hit the game engine, loading the car in Mod Dev.

2.9 - Mod Dev - Sync Wipers to Arc Masks

Our last step is to sync our Arc masks, to the wiper animations. To do so, we have a system, in Mod Dev, that does allow us to set and save a number of Key Points, along the animation, to force the Arc Mask to stay in sync with the wiper. This will fine tune the wiper/rain interaction to a perfect match.

...

The sections of the Editor we are interested for are;

Wiper

Manual Wiper -------------------------------------→ ON / OFF -----------------------------→ Does switch the manual control of the wiper that we need to check and set the Keys (Sync Points)
Save Wiper Sync Points -----------------------→ Button ----------------------------------→ Click that button to save the Key into a .dat file, stored in the car "teams" we are working with.
Wiper % --------------------------------------------→ Spinner + Read Out ------------------------------→ This is a readout from the manual control. It does show the percentage of wiper animation, from 0% to 200% (0% start - 100% lock up - 200% down)

Wiper 0 (Left Wiper)

Add Wiper 0 Synch Point -----------------------------------→ Button --------------------→ Click this button to add a Key (Synch Point) at the current wiper position, that you read in the Wiper % readout (manual control needs to be ON)
Wiper 0 Animation : 0% Texture Gradient---------------→ Spinner ------------------→ allow to change the Texture Gradient position (Arc mask), to match the real Wiper position. Value from 0 to 1 (Gradient all down / all up)
Wiper 0 Animation : 100% Texture Gradient------------→ Spinner ------------------→ allow to change the Texture Gradient position (Arc mask), to match the real Wiper position. Value from 0 to 1 (Gradient all down / all up)
Wiper 0 Animation : 200% Texture Gradient------------→ Spinner ------------------→ allow to change the Texture Gradient position (Arc mask), to match the real Wiper position. Value from 0 to 1 (Gradient all down / all up)

Wiper 1 (Right Wiper)

Add Wiper 1 Synch Point--------------------------------.---→ Button --------------------→ Click this button to add a Key (Synch Point) at the current wiper position, that you read in the Wiper % readout (manual control needs to be ON)
Wiper 1 Animation : 0% Texture Gradient---------------→ Spinner------------------→allow to change the Texture Gradient position (Arc mask), to match the real Wiper position. Value from 0 to 1 (Gradient all down / all up)
Wiper 1 Animation : 100% Texture Gradient------------→ Spinner -----------------→allow to change the Texture Gradient position (Arc mask), to match the real Wiper position. Value from 0 to 1 (Gradient all down / all up)
Wiper 1 Animation : 200% Texture Gradient------------→ Spinner -----------------→allow to change the Texture Gradient position (Arc mask), to match the real Wiper position. Value from 0 to 1 (Gradient all down / all up)

At the end of the setup process, in this specific case in the guide, we will end with something like that;

Wiper 0 (Left Wiper)

Add Wiper 0 Synch Point
Wiper 0 Animation : 0% Texture Gradient : 0.00
Wiper 0 Animation : 53% Texture Gradient : 0.65 (new sync point)
Wiper 0 Animation : 80% Texture Gradient : 0.94 (new sync point)
Wiper 0 Animation : 100% Texture Gradient : 1.00
Wiper 0 Animation : 117% Texture Gradient : 0.97 (new sync point)
Wiper 0 Animation : 140% Texture Gradient : 0.71 (new sync point)
Wiper 0 Animation : 200% Texture Gradient : 0.00

Wiper 1 (Right Wiper)

Add Wiper 1 Synch Point
Wiper 1 Animation : 0% Texture Gradient : 0.00
Wiper 1 Animation : 39% Texture Gradient : 0.59 (new sync point)
Wiper 1 Animation : 53% Texture Gradient : 0.78 (new sync point)
Wiper 1 Animation : 80% Texture Gradient : 0.95 (new sync point)
Wiper 1 Animation : 100% Texture Gradient : 1.00
Wiper 1 Animation : 117% Texture Gradient : 0.96 (new sync point)
Wiper 1 Animation : 140% Texture Gradient : 0.82 (new sync point)
Wiper 1 Animation : 200% Texture Gradient : 0.00

...

The Rain Implementation is now done, and with all files in place it will look and work always as its best!

Step 3 - Checklist Ingame

3.1 - Check Ingame

Check that your job is working in all conditions and features;

How it looks in the Windscreen and check the Wiper/Texture Gradient sync
How it looks on the Left Side Window. Check constancy in the scale
How it looks on the Right Window. Check constancy in the scale
How it looks from the esterior. Check that it does match the visual experience we had watching from the cockpit.
Check the rain on the body, when parked and in motion. Check that the streaks are moving the right direction.