Sometimes unlit material can look different in the mobile preview than PC. Colors are washed up or overburned and It’s really hard to tweak the emissive color to achieve the same look. This short tip describes how to get almost the same colors on mobile as on PC platform.
Let’s take a look at the screen from the first version of Fast Stylized Procedural Sky for mobile:
It’s wrong … Why it looks so bad? After a short investigation, I’ve found that it is related to the tone mapper that is not implemented in the mobile ES2 version of the material and the bloom effect makes it worst.
There are a lot of documents about different approaches to tone-mapping on the internet so I’m not going to duplicate the information but only focus on solving the problem using one of them. Let’s try ACES Filmic Tone Mapping Curve described by Krzysztof Narkowicz:
float3 ACESFilm( float3 x )
{
float a = 2.51f;
float b = 0.03f;
float c = 2.43f;
float d = 0.59f;
float e = 0.14f;
return saturate((x*(a*x+b))/(x*(c*x+d)+e));
}
We should apply the tone mapper on the final color that will be set to Emissive Color link. To implement this we need to use a custom node that will be evaluated only on the ES2 mobile platform.
I’ve used this method in my Fast Stylized Procedural Sky package and it works perfectly mobile clouds looks almost the same as on PC.
