How to calculate the normal from partial derivatives? about webgl-noise

[stegu]

The normal map you showed at the end looks OK to me. Your pattern is washed out because of clamping issues, but I see no general problem with the normal map - except for scaling. Sobel filters estimate the actual change from one point to another at a specified distance, while analytic derivatives give you the local idealized rate of change across one unit of distance (1.0). So, you need to multiply your gradient with a factor that tells how the noise is scaled and mapped to texture space. For example, if you paint a pattern using 0.3*noise(4.0*u, 6.0*v), the local gradient in texture coords is 0.3*vec2(4.0,6.0) times the analytic gradient. This is the equivalent of an "inner derivative" for multidimensional functions. Sort out the scaling issues and you should be fine! (I think.) /Stefan G

[stegu]

dFdx and dFdy are precisely what the Sobel operator estimates, so if you have code that uses the Sobel filter kernels, dFdx and dFdy in fragment shader code should be drop-in replacements. As for analytic derivatives of noise, they are computed in texture space, so there you might need to apply a transformation to the gradient to get it in the correct coordinate system. If this doesn't answer your question, let me know and I'll try again. I'm not sure I understand exactly how you use the Sobel operators. /Stefan Gustavson

[piranha771]

Okay I may have been confusing with this sobel stuff.
Currently I use sobel to build normals out of noise. It's super simple:

float3 height_to_normal(sampler2D tex, float size, float2 uv, float strength) 
{
	float step = 1.0/_Resolution;

	// Get 8 UVs around the current UV;
	float2 tlv = float2(uv.x - step, uv.y + step); 
	float2 lv  = float2(uv.x - step, uv.y 	    );
	float2 blv = float2(uv.x - step, uv.y - step);	
	float2 tv  = float2(uv.x 	,uv.y + step); 
	float2 bv  = float2(uv.x 	,uv.y - step);
	float2 trv = float2(uv.x + step, uv.y + step); 
	float2 rv  = float2(uv.x + step, uv.y       );
	float2 brv = float2(uv.x + step, uv.y - step);

	// Get the values from these 8 UVs
	float tl = tex2D(tex, tlv).a; 
	float l  = tex2D(tex, lv ).a;
	float bl = tex2D(tex, blv).a;	
	float t  = tex2D(tex, tv ).a; 
	float b  = tex2D(tex, bv ).a;
	float tr = tex2D(tex, trv).a; 
	float r  = tex2D(tex, rv ).a;
	float br = tex2D(tex, brv).a;

	// Do the sobel operation
	float dx = tl + 2.0 * l + bl - tr - 2.0 * r - br;
	float dy = tl + 2.0 * t + tr - bl - 2.0 * b - br;

	// Convert to normal
	return normalize(float3(dx, -dy, 1.0/strength));
}

So what it does is this:

This is what I'm currently doing. But I saw in your wiki page that it is possible to calculate the normal map directly from the analytical derivative, so I can skip the noise2normal stuff and use the analytical derivative to create a normal map instead.

  	// 2-D tiling simplex noise with rotating gradients and analytical derivative.
  	// The first component of the 3-element return vector is the noise value,
  	// and the second and third components are the x and y partial derivatives.
  	//
  	float3 psrdnoise(float2 pos, float2 per, float rot)

What to do with the derivatives to get a normal map?

I tried to normalize them normalize(float3(dx, dy, 1.0)) but its not a valid normal map.

[piranha771]

analytic derivatives give you the local idealized rate of change across one unit of distance (1.0)
[...]
you paint a pattern using 0.3noise(4.0u, 6.0v), the local gradient in
texture coords is 0.3vec2(4.0,6.0) times the analytic gradient.

This was the answer I was looking for! Thank you so much!
Works and looks perfect now :)

[stegu]

Glad I could help. Good luck, and have fun!

[stegu]

Even though the issue was resolved, I am keeping the thread open because it's informative.