I’m generating some grayscale textures with code and need to convert them to normal maps (in a script) for use with bumped shaders, has anyone tried that? I’d like to do it in the Update function so it needs to be pretty fast. The grayscale step does not need to be stored as a texture if that’s slower than built in arrays i guess.
/P
MMmmm depending on the texture resolution, i dont know, i want some thoughts about this too…
.ORG
A good normal map filter is called “Sobel filter”, it basically takes derivatives in both directions with a 3x3 filter and you get the normal out of that.
A simple way is: for each pixel, take difference in heights horizontally and vertically. Imagine them as vectors, i.e. horizontal to next pixel is (1,0,deltaHeightHorizontal) and vertical to next pixel is (0,1,deltaHeightVertical). These vectors lie on the “plane of the surface” at that pixel. Now doing a cross product of those will give the normal.
Finally, encode the normal so that each component -1.0 = 0, 0.0 = 128, +1.0 = 255.
All this can be done on the GPU of course, by sampling the heightmap and outputting the normal map into the render texture.
Thanks.
I’ll see what i can dig up on “Sobel Filter”.
My first attemt was kind of successful. Just checking grayscale difference of neighboring pixels and generating red+green values for the color from that. Problem is the ‘bumpiness’ isn’t very high so the effect is not very visible. (Left: generated, Right: Converted by Unity)
for(int y=1;y<_source.width-1;y++){
for(int x=1;x<_source.height-1;x++){
float xLeft = _source.GetPixel(x-1,y).grayscale;
float xRight = _source.GetPixel(x+1,y).grayscale;
float yUp = _source.GetPixel(x,y-1).grayscale;
float yDown = _source.GetPixel(x,y+1).grayscale;
float xDelta = ((xLeft-xRight)+1)*.5f;
float yDelta = ((yUp-yDown)+1)*.5f;
_destination.SetPixel(x,y,new Color(xDelta,yDelta,1f,1f));
}
}
I’ll treat them as vectors instead like you propose and see if I can’t do it on the GPU instead 
/P
Trying to get this to work in a fragment program.
At the moment I just want to output the normal color to see how it works, but all I get is the “normal map blue” (0.5,0.5,1). I have a alpha heightmap in _MainTex, 128x128px, and the fragment program looks like this:
half4 frag (v2f i) : COLOR {
float val = tex2D(_MainTex, i.uv).a;
float valX = tex2D(_MainTex, i.uv + float2(1 / 128, 0)).a;
float valY = tex2D(_MainTex, i.uv + float2(0, 1 / 128)).a;
float3 h = float3(1,0,val - valX);
float3 v = float3(0,1,val - valY);
float3 norm = cross(h,v);
return half4(norm.x*0.5+0.5,norm.y*0.5+0.5,norm.z*0.5+0.5,1);
}
I’m not sure what goes on with the cross product so maybe that’s where it goes wrong?
/P
First guess: 1/128 is integer division, so the result is zero. Try 1.0/128.0 perhaps?
Hi, //digs up old thread
Metervara did you figure out why the normal map generated in your first example was so subtle? I’ve experimented with a javascript version here and is working well, but as you posted with your example above its a very subtle effect.
Did you find a way to amplify the effect at all? I hope you dont mind me sampling a bit of your code.
Cheers
AaronC
var bumpTexture : Texture2D;
var bumpSource : Texture2D;
var x: float;
var y: float;
var xLeft: float;
var xRight: float;
var yUp: float;
var yDown: float;
var yDelta: float;
var xDelta: float;
function Start () {
bumpSource=gameObject.renderer.material.GetTexture("_BumpMap");
bumpTexture = new Texture2D (bumpSource.width, bumpSource.height, TextureFormat.ARGB32, false);
for (y=0; y < bumpTexture.height; y++) {
for (x=0; x < bumpTexture.width; x++) {
xLeft = bumpSource.GetPixel(x-1,y).grayscale;
xRight = bumpSource.GetPixel(x+1,y).grayscale;
yUp = bumpSource.GetPixel(x,y-1).grayscale;
yDown = bumpSource.GetPixel(x,y+1).grayscale;
xDelta = ((xLeft-xRight)+1)*0.5;
yDelta = ((yUp-yDown)+1)*0.5;
bumpTexture.SetPixel(x,y,new Color(xDelta,yDelta,1.0,1.0));
}
}
bumpTexture.Apply();
gameObject.renderer.material.SetTexture("_BumpMap",bumpTexture);
}
Sorry to bump old post but I found a solution to enhance this effect and get the result of the “create normal from grayscale” in UNITY importer.
First I added an S-curve on the detals to control more the sharpness of the normal map created in the function. I find it good when the distortion varies between 10 and 20 !
n.SetPixel(x,y,new Color( Mathf.Clamp01(sCurve(xDelta, distortion)) , Mathf.Clamp01(sCurve(yDelta, distortion)),1f,1.0f));
public static float sCurve(float x, float distortion){
return 1f / ( 1f + Mathf.Exp(-Mathf.Lerp(5f,15f,distortion)*(x-0.5f)));
}
And then I pass the resulting texture in this function :
public static Texture2D toNormalMap(Texture2D t){
Texture2D n = new Texture2D(t.width,t.height,TextureFormat.ARGB32,true);
Color oldColor = new Color();
Color newColor = new Color();
for (int x=0; x<t.width; x++){
for (int y=0; y<t.height; y++){
oldColor = t.GetPixel(x,y);
newColor.r = oldColor.g;
newColor.b = oldColor.g;
newColor.g = oldColor.g;
newColor.a = oldColor.r;
n.SetPixel(x,y, newColor);
}
}
n.Apply();
return n;
}
GetPixel is very slow if you use it for every pixel, and for every pixel multiple times!
Here is a similar function with less GetPixel calls (only once/column):
public static Texture2D CalculateNormal(Texture2D sourceImage, float strength = 1f)
{
Mathf.Clamp(strength, 0.0f, 10.0f);
int w = sourceImage.width;
int h = sourceImage.height;
Texture2D res = new Texture2D(w, h);
Color[] current_col = null;
Color[] l_col = null;
Color[] r_col = null;
float sample_l, sample_r, sample_u, sample_d;
float x_vector, y_vector;
for (int x = 0; x < w; x++)
{
//Left column = previous column
if (current_col != null) l_col = current_col;
//Current column = right column
if (r_col != null) current_col = r_col;
else current_col = sourceImage.GetPixels(x, 0, 1, h);
//If left column null, take current column (if x=0)
if (l_col == null) l_col = current_col;
//Right column = next column (everytime except the last run)
if (x < w - 1) r_col = sourceImage.GetPixels(x + 1, 0, 1, h);
else r_col = current_col;
for (int y = 0; y < current_col.Length; y++)
{
//Read pixel (left,right,up,down) from current
sample_l = l_col[y].grayscale * strength;
sample_r = r_col[y].grayscale * strength;
if (y < h - 1) sample_u = current_col[y + 1].grayscale * strength;
else sample_u = current_col[y].grayscale * strength;
if (y > 0) sample_d = current_col[y - 1].grayscale * strength;
else sample_d = current_col[y].grayscale * strength;
//WebGL integer overflow on new Color() without Mathf.Clamp01()
x_vector = Mathf.Clamp01((((sample_l - sample_r) + 1) * 0.5f);
y_vector = Mathf.Clamp01((((sample_d - sample_u) + 1) * 0.5f);
Color col = new Color(x_vector, y_vector, 1f, 1f);
res.SetPixel(x, y, col);
}
}
res.Apply();
return res;
}
public static void SetMaterialNormal(Material mat, Texture2D tex, float value)
{
//URP
mat.EnableKeyword("_NORMALMAP");
mat.SetTexture("_BumpMap", tex);
mat.SetFloat("_BumpScale", value);
}
Because Unity’s grayscale normal map algorithm does not work with tilemaps (visible edges between tiles because of its algorithm), I had to do it manually. sumpfkraut’s algorithm allows for seamless tiling, but its edges are not as sharp against transparent areas. So I modified it slightly.
public Texture2D CalculateNormal(Texture2D sourceImage, float strength)
{
Mathf.Clamp(strength, 0.0f, 10.0f);
int w = sourceImage.width;
int h = sourceImage.height;
Texture2D res = new Texture2D(w, h);
Color[] current_col = null;
Color[] l_col = null;
Color[] r_col = null;
float sample_l, sample_r, sample_u, sample_d;
float x_vector, y_vector;
for (int x = 0; x < w; x++)
{
//Left column = previous column
if (current_col != null) l_col = current_col;
//Current column = right column
if (r_col != null) current_col = r_col;
else current_col = sourceImage.GetPixels(x, 0, 1, h);
//If left column null, take current column (if x=0)
if (l_col == null) l_col = current_col;
//Right column = next column (everytime except the last run)
if (x < w - 1) r_col = sourceImage.GetPixels(x + 1, 0, 1, h);
else r_col = current_col;
for (int y = 0; y < current_col.Length; y++)
{
if (current_col[y].a < 0.05f)
{
res.SetPixel(x, y, new Color(0.5f,0.5f,1f,1f));
continue;
}
//Read pixel (left,right,up,down) from current
sample_l = l_col[y].grayscale * strength;
if (l_col[y].a < 0.05f)
{
//sample_l = current_col[y].grayscale;
sample_l = 0f;
}
sample_r = r_col[y].grayscale * strength;
if (r_col[y].a < 0.05f)
{
sample_r = 0f;
}
if (y < h - 1)
{
sample_u = current_col[y + 1].grayscale * strength;
}
else
{
sample_u = current_col[y].grayscale * strength;
}
if (y > 0)
{
sample_d = current_col[y - 1].grayscale * strength;
}
else
{
sample_d = current_col[y].grayscale * strength;
}
//WebGL integer overflow on new Color() without Mathf.Clamp01()
x_vector = Mathf.Clamp01((((sample_l - sample_r) + 1) * 0.5f));
y_vector = Mathf.Clamp01((((sample_d - sample_u) + 1) * 0.5f));
Color col = new Color(x_vector, y_vector, 1f, 1f);
res.SetPixel(x, y, col);
}
}
res.Apply();
return res;
}
Hope this helps.
I want to congratulate all of you. Very nice work!
Bumping this because someone here might be able to help me, also trying in Unity Answers.
I’m calculating curvature map from a height map in a shader, for small gradients it works nicely but for larger gradients it creates jittering artifacts.
the first step in this shader is using a 3x3 Soble filter to create the normal from the height map, at this point you can see that with large gradients it starts showing the jittering artifacts, which leads to the artifacts in the curvature map as well.
is there a way of getting a smoother normal maps? without passing the normal map through another blur filter? am I missing something in my implementation?
I’ve also tried with different sample distanced for the Soble filter, some help a little bit, but no specific distance solves this issue
The filtered texture is a 1024x1024 render texture - ARGB64 (16 bit per channel)
this is the shader code:
fixed4 frag(v2f i) : SV_Target
{
float3 normal = sobleFilter3x3(_MainTex, _MainTex_TexelSize.x, i.uv, _Scale, _SobleSampleDist);
// calculate curvature
float3 derX = ddx(normal);
float3 derY = ddy(normal);
float3 xn = normal - derX;
float3 xp = normal + derX;
float3 yn = normal - derY;
float3 yp = normal + derY;
float s = tex2D(_MainTex, i.uv);
float3 pos = float3(i.uv.x, i.uv.y, s);
float mag = length(pos);
float curvature = (cross(xn, xp).y - cross(yn, yp).x) * _Scale / mag;
return fixed4((curvature + _Concave).xxx, 1);
}
float3 sobleFilter3x3(sampler2D tex, float texalSize, float2 uv, float scale, float sampleDist)
{
/*
[6][7][8]
[3][4][5]
[0][1][2]
*/
float ts = texalSize;
float s[9];
float2 off = {ts * sampleDist, -ts * sampleDist };// offsets
s[0] = tex2D(tex, uv + float2(off.y, off.y));
s[1] = tex2D(tex, uv + float2(0 , off.y));
s[2] = tex2D(tex, uv + float2(off.x, off.y));
s[3] = tex2D(tex, uv + float2(off.y, 0));
s[5] = tex2D(tex, uv + float2(off.x, 0));
s[6] = tex2D(tex, uv + float2(off.y, off.x));
s[7] = tex2D(tex, uv + float2(0 , off.x));
s[8] = tex2D(tex, uv + float2(off.x, off.x));
float3 normal;
normal.x = scale * -(s[2] - s[0] + 2 * (s[5] - s[3]) + s[8] - s[6]);
normal.y = scale * -(s[6] - s[0] + 2 * (s[7] - s[1]) + s[8] - s[2]);
normal.z = 1.0;
return normalize(normal) * 0.5 + 0.5;
}