Why normal map is blue and purple in color?

Clash Royale CLAN TAG#URR8PPP

up vote
3
down vote

favorite

I am learning about normal mapping I understood that RGB values converted into XYZ,but my question is how it is converted, and why the normal map is blue and purple in color ?

shader unity

share|improve this question

asked 7 hours ago

Abhinay SIngh Negi

233

add a comment | 

up vote
3
down vote

favorite

I am learning about normal mapping I understood that RGB values converted into XYZ,but my question is how it is converted, and why the normal map is blue and purple in color ?

shader unity

share|improve this question

asked 7 hours ago

Abhinay SIngh Negi

233

add a comment | 

up vote
3
down vote

favorite

up vote
3
down vote

favorite

I am learning about normal mapping I understood that RGB values converted into XYZ,but my question is how it is converted, and why the normal map is blue and purple in color ?

shader unity

share|improve this question

asked 7 hours ago

Abhinay SIngh Negi

233

I am learning about normal mapping I understood that RGB values converted into XYZ,but my question is how it is converted, and why the normal map is blue and purple in color ?

shader unity

shader unity

share|improve this question

asked 7 hours ago

Abhinay SIngh Negi

233

share|improve this question

asked 7 hours ago

Abhinay SIngh Negi

233

share|improve this question

share|improve this question

asked 7 hours ago

Abhinay SIngh Negi

233

asked 7 hours ago

Abhinay SIngh Negi

233

asked 7 hours ago

Abhinay SIngh Negi

233

233

add a comment | 

add a comment | 

2 Answers
2

active

oldest

votes

up vote
5
down vote

Because a normal map is covering vectors from -1 to 1 it makes sense to stretch this range into 0->1 so all of it can be fit inside the range of RGB.

So usually we apply a transform on the normal to convert it into something we can see.

vec3 colour = vec3(0.5) + normal * 0.5;

The blue colour is because normal maps are supposed to be used relative to the primitive (triangle/etc) normal with a default (0,0,1) direction to indicate no deviation from the triangle normal. Usually the fragment shader needs to rotate this normal in relation to the current per-pixel normal at runtime.

share|improve this answer

answered 6 hours ago

PaulHK

1,53938

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Is this code vec3 colour = vec3(0.5) + normal * 0.5; is converting RGB to XYZ ?
  – Abhinay SIngh Negi
  3 hours ago
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @AbhinaySInghNegi no, colour is RGB and normal is XYZ, so this is converting XYZ to RGB. If you want RGB to XYZ you use vec3 normal = (colour - vec3(0.5)) * 2.0;
  – bram0101
  1 hour ago
  

  
  
  
  

add a comment | 

up vote
5
down vote

Only tangent space normal maps are primarily blue. This is because the colour blue represents a normal of (0,0,1) which would be an unchanged normal when the triangle lies in the plane x and y, i.e. perpendicular to the surface. The tangent, x and bi-tangent, y (also referred to as bi-normal) are encoded in the red and green channels and these form to create the a tangent space normal for a point on the surface of the triangle.

If a tangent space normal map was to encode a colour only in red (1.0, 0.0, 0.0) this would generate a tangent-space normal parallel to the triangle surface. This is never seen because it would mean that the triangle would only ever be lit at 90degrees from the surface and view vector at which point you wouldn't be able to see the triangle anyway.

World space normal maps encode the unit normal over a sphere so can be primarily different colours once encoded from [-1, 1] to [0, 1] per channel.

A comparison can be seen here:

In practise normal maps are usually encoded in a 2 channel format such as BC5 which actually only stores the x and y with the z being reconstructed as we know it's a unit vector. This allows you to maintain higher precision with more bits without increasing the file size.

share|improve this answer

answered 5 hours ago

Syntac_

32117

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["$", "$"], ["\\(","\\)"]]);
);
);
, "mathjax-editing");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "633"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcomputergraphics.stackexchange.com%2fquestions%2f8061%2fwhy-normal-map-is-blue-and-purple-in-color%23new-answer', 'question_page');

);

Post as a guest

Name Email

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
5
down vote

Because a normal map is covering vectors from -1 to 1 it makes sense to stretch this range into 0->1 so all of it can be fit inside the range of RGB.

So usually we apply a transform on the normal to convert it into something we can see.

vec3 colour = vec3(0.5) + normal * 0.5;

The blue colour is because normal maps are supposed to be used relative to the primitive (triangle/etc) normal with a default (0,0,1) direction to indicate no deviation from the triangle normal. Usually the fragment shader needs to rotate this normal in relation to the current per-pixel normal at runtime.

share|improve this answer

answered 6 hours ago

PaulHK

1,53938

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Is this code vec3 colour = vec3(0.5) + normal * 0.5; is converting RGB to XYZ ?
  – Abhinay SIngh Negi
  3 hours ago
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @AbhinaySInghNegi no, colour is RGB and normal is XYZ, so this is converting XYZ to RGB. If you want RGB to XYZ you use vec3 normal = (colour - vec3(0.5)) * 2.0;
  – bram0101
  1 hour ago
  

  
  
  
  

add a comment | 

up vote
5
down vote

Because a normal map is covering vectors from -1 to 1 it makes sense to stretch this range into 0->1 so all of it can be fit inside the range of RGB.

So usually we apply a transform on the normal to convert it into something we can see.

vec3 colour = vec3(0.5) + normal * 0.5;

The blue colour is because normal maps are supposed to be used relative to the primitive (triangle/etc) normal with a default (0,0,1) direction to indicate no deviation from the triangle normal. Usually the fragment shader needs to rotate this normal in relation to the current per-pixel normal at runtime.

share|improve this answer

answered 6 hours ago

PaulHK

1,53938

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Is this code vec3 colour = vec3(0.5) + normal * 0.5; is converting RGB to XYZ ?
  – Abhinay SIngh Negi
  3 hours ago
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @AbhinaySInghNegi no, colour is RGB and normal is XYZ, so this is converting XYZ to RGB. If you want RGB to XYZ you use vec3 normal = (colour - vec3(0.5)) * 2.0;
  – bram0101
  1 hour ago
  

  
  
  
  

add a comment | 

up vote
5
down vote

up vote
5
down vote

Because a normal map is covering vectors from -1 to 1 it makes sense to stretch this range into 0->1 so all of it can be fit inside the range of RGB.

So usually we apply a transform on the normal to convert it into something we can see.

vec3 colour = vec3(0.5) + normal * 0.5;

The blue colour is because normal maps are supposed to be used relative to the primitive (triangle/etc) normal with a default (0,0,1) direction to indicate no deviation from the triangle normal. Usually the fragment shader needs to rotate this normal in relation to the current per-pixel normal at runtime.

share|improve this answer

answered 6 hours ago

PaulHK

1,53938

Because a normal map is covering vectors from -1 to 1 it makes sense to stretch this range into 0->1 so all of it can be fit inside the range of RGB.

So usually we apply a transform on the normal to convert it into something we can see.

vec3 colour = vec3(0.5) + normal * 0.5;

The blue colour is because normal maps are supposed to be used relative to the primitive (triangle/etc) normal with a default (0,0,1) direction to indicate no deviation from the triangle normal. Usually the fragment shader needs to rotate this normal in relation to the current per-pixel normal at runtime.

share|improve this answer

answered 6 hours ago

PaulHK

1,53938

share|improve this answer

share|improve this answer

answered 6 hours ago

PaulHK

1,53938

answered 6 hours ago

PaulHK

1,53938

answered 6 hours ago

PaulHK

1,53938

1,53938

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Is this code vec3 colour = vec3(0.5) + normal * 0.5; is converting RGB to XYZ ?
  – Abhinay SIngh Negi
  3 hours ago
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @AbhinaySInghNegi no, colour is RGB and normal is XYZ, so this is converting XYZ to RGB. If you want RGB to XYZ you use vec3 normal = (colour - vec3(0.5)) * 2.0;
  – bram0101
  1 hour ago
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Is this code vec3 colour = vec3(0.5) + normal * 0.5; is converting RGB to XYZ ?
  – Abhinay SIngh Negi
  3 hours ago
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @AbhinaySInghNegi no, colour is RGB and normal is XYZ, so this is converting XYZ to RGB. If you want RGB to XYZ you use vec3 normal = (colour - vec3(0.5)) * 2.0;
  – bram0101
  1 hour ago
  

  
  
  
  

Is this code vec3 colour = vec3(0.5) + normal * 0.5; is converting RGB to XYZ ?
– Abhinay SIngh Negi
3 hours ago

Is this code vec3 colour = vec3(0.5) + normal * 0.5; is converting RGB to XYZ ?
– Abhinay SIngh Negi
3 hours ago

@AbhinaySInghNegi no, colour is RGB and normal is XYZ, so this is converting XYZ to RGB. If you want RGB to XYZ you use vec3 normal = (colour - vec3(0.5)) * 2.0;
– bram0101
1 hour ago

@AbhinaySInghNegi no, colour is RGB and normal is XYZ, so this is converting XYZ to RGB. If you want RGB to XYZ you use vec3 normal = (colour - vec3(0.5)) * 2.0;
– bram0101
1 hour ago

add a comment | 

up vote
5
down vote

Only tangent space normal maps are primarily blue. This is because the colour blue represents a normal of (0,0,1) which would be an unchanged normal when the triangle lies in the plane x and y, i.e. perpendicular to the surface. The tangent, x and bi-tangent, y (also referred to as bi-normal) are encoded in the red and green channels and these form to create the a tangent space normal for a point on the surface of the triangle.

If a tangent space normal map was to encode a colour only in red (1.0, 0.0, 0.0) this would generate a tangent-space normal parallel to the triangle surface. This is never seen because it would mean that the triangle would only ever be lit at 90degrees from the surface and view vector at which point you wouldn't be able to see the triangle anyway.

World space normal maps encode the unit normal over a sphere so can be primarily different colours once encoded from [-1, 1] to [0, 1] per channel.

A comparison can be seen here:

In practise normal maps are usually encoded in a 2 channel format such as BC5 which actually only stores the x and y with the z being reconstructed as we know it's a unit vector. This allows you to maintain higher precision with more bits without increasing the file size.

share|improve this answer

answered 5 hours ago

Syntac_

32117

add a comment | 

up vote
5
down vote

Only tangent space normal maps are primarily blue. This is because the colour blue represents a normal of (0,0,1) which would be an unchanged normal when the triangle lies in the plane x and y, i.e. perpendicular to the surface. The tangent, x and bi-tangent, y (also referred to as bi-normal) are encoded in the red and green channels and these form to create the a tangent space normal for a point on the surface of the triangle.

If a tangent space normal map was to encode a colour only in red (1.0, 0.0, 0.0) this would generate a tangent-space normal parallel to the triangle surface. This is never seen because it would mean that the triangle would only ever be lit at 90degrees from the surface and view vector at which point you wouldn't be able to see the triangle anyway.

World space normal maps encode the unit normal over a sphere so can be primarily different colours once encoded from [-1, 1] to [0, 1] per channel.

A comparison can be seen here:

In practise normal maps are usually encoded in a 2 channel format such as BC5 which actually only stores the x and y with the z being reconstructed as we know it's a unit vector. This allows you to maintain higher precision with more bits without increasing the file size.

share|improve this answer

answered 5 hours ago

Syntac_

32117

add a comment | 

up vote
5
down vote

up vote
5
down vote

Only tangent space normal maps are primarily blue. This is because the colour blue represents a normal of (0,0,1) which would be an unchanged normal when the triangle lies in the plane x and y, i.e. perpendicular to the surface. The tangent, x and bi-tangent, y (also referred to as bi-normal) are encoded in the red and green channels and these form to create the a tangent space normal for a point on the surface of the triangle.

If a tangent space normal map was to encode a colour only in red (1.0, 0.0, 0.0) this would generate a tangent-space normal parallel to the triangle surface. This is never seen because it would mean that the triangle would only ever be lit at 90degrees from the surface and view vector at which point you wouldn't be able to see the triangle anyway.

World space normal maps encode the unit normal over a sphere so can be primarily different colours once encoded from [-1, 1] to [0, 1] per channel.

A comparison can be seen here:

In practise normal maps are usually encoded in a 2 channel format such as BC5 which actually only stores the x and y with the z being reconstructed as we know it's a unit vector. This allows you to maintain higher precision with more bits without increasing the file size.

share|improve this answer

answered 5 hours ago

Syntac_

32117

Only tangent space normal maps are primarily blue. This is because the colour blue represents a normal of (0,0,1) which would be an unchanged normal when the triangle lies in the plane x and y, i.e. perpendicular to the surface. The tangent, x and bi-tangent, y (also referred to as bi-normal) are encoded in the red and green channels and these form to create the a tangent space normal for a point on the surface of the triangle.

If a tangent space normal map was to encode a colour only in red (1.0, 0.0, 0.0) this would generate a tangent-space normal parallel to the triangle surface. This is never seen because it would mean that the triangle would only ever be lit at 90degrees from the surface and view vector at which point you wouldn't be able to see the triangle anyway.

World space normal maps encode the unit normal over a sphere so can be primarily different colours once encoded from [-1, 1] to [0, 1] per channel.

A comparison can be seen here:

In practise normal maps are usually encoded in a 2 channel format such as BC5 which actually only stores the x and y with the z being reconstructed as we know it's a unit vector. This allows you to maintain higher precision with more bits without increasing the file size.

share|improve this answer

answered 5 hours ago

Syntac_

32117

share|improve this answer

share|improve this answer

answered 5 hours ago

Syntac_

32117

answered 5 hours ago

Syntac_

32117

answered 5 hours ago

Syntac_

32117

32117

add a comment | 

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcomputergraphics.stackexchange.com%2fquestions%2f8061%2fwhy-normal-map-is-blue-and-purple-in-color%23new-answer', 'question_page');

);

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Name Email

Name

Email

Name Email

Name

Email