# How to change the color of the triangle according to the orientation of the camera and the normal vector of the triangle

**URL:** https://discourse.vtk.org/t/how-to-change-the-color-of-the-triangle-according-to-the-orientation-of-the-camera-and-the-normal-vector-of-the-triangle/14253
**Category:** Support
**Tags:** code
**Created:** [July 18, 2024, 6:14am UTC](https://discourse.vtk.org/t/how-to-change-the-color-of-the-triangle-according-to-the-orientation-of-the-camera-and-the-normal-vector-of-the-triangle/14253 "2024-07-18T06:14:04Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![yangyang117](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/y/da6949/32.png) [@yangyang117](https://discourse.vtk.org/u/yangyang117)
#### Post date: [July 18, 2024, 6:14am UTC](https://discourse.vtk.org/t/how-to-change-the-color-of-the-triangle-according-to-the-orientation-of-the-camera-and-the-normal-vector-of-the-triangle/14253/1 "2024-07-18T06:14:04Z")

</div>

Hello, I am looking for a way to change the display color of the triangular patch based on its normal vector and camera orientation, as shown in the following picture. If the normal vector is facing the camera, it is displayed in blue; if the normal vector is in the same direction as the camera, it is displayed in yellow.

 ![法向量](https://discourse.vtk.org/uploads/default/original/2X/0/0b97d632b8c0a105c1f79024a8d74d205723375d.jpeg)

I should be able to set up settings through ShaderProperty by searching for information, but I found some information online and couldn’t solve it. Does anyone know what to do?  
readingfiles:  
[https://examples.vtk.org/site/Cxx/Shaders/ColorByNormal/](https://examples.vtk.org/site/Cxx/Shaders/ColorByNormal/)  
[https://gitlab.kitware.com/vtk/vtk/-/blob/master/Rendering/OpenGL2/Testing/Cxx/TestUserShader.cxx](https://gitlab.kitware.com/vtk/vtk/-/blob/master/Rendering/OpenGL2/Testing/Cxx/TestUserShader.cxx)  
[https://gitlab.kitware.com/vtk/vtk/-/blob/master/Rendering/OpenGL2/Testing/Cxx/TestUserShader2.cxx](https://gitlab.kitware.com/vtk/vtk/-/blob/master/Rendering/OpenGL2/Testing/Cxx/TestUserShader2.cxx)  
[https://gitlab.kitware.com/vtk/vtk/-/blob/master/Rendering/OpenGL2/Testing/Python/TestUserShader2.py](https://gitlab.kitware.com/vtk/vtk/-/blob/master/Rendering/OpenGL2/Testing/Python/TestUserShader2.py)

> [@Drawing perfectly uniform stipple lines.](https://discourse.vtk.org/t/drawing-perfectly-uniform-stipple-lines/6768/7):
>
> Hello, Well, then what do you mean by writing shaders “properly in VTK”? I mean, if you program compiles and you get your shader working, you got it “properly in VTK”. VTK simply forwards whatever you wrote to OpenGL via a mapper object and that’s that… You don’t have access to VTK data from inside the shader context, if that’s what you’re looking for. Maybe you can pass information of your original data set via some mechanism (alpha channel?), but I’m speculating. Sorry if I’m missing som…

---

<div class="post-metadata">

### Author: ![Paulo\_Carvalho](https://discourse.vtk.org/user_avatar/discourse.vtk.org/paulo_carvalho/32/370_2.png) [@Paulo\_Carvalho](https://discourse.vtk.org/u/Paulo_Carvalho)
#### Post date: [July 18, 2024, 2:15pm UTC](https://discourse.vtk.org/t/how-to-change-the-color-of-the-triangle-according-to-the-orientation-of-the-camera-and-the-normal-vector-of-the-triangle/14253/2 "2024-07-18T14:15:13Z")

</div>

Hello,

You’ve found exactly the kind of material that I would suggest you to read. What exactly you didn’t understand in the examples?

best,

PC

---

<div class="post-metadata">

### Author: ![yangyang117](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/y/da6949/32.png) [@yangyang117](https://discourse.vtk.org/u/yangyang117)
#### Post date: [July 19, 2024, 1:04am UTC](https://discourse.vtk.org/t/how-to-change-the-color-of-the-triangle-according-to-the-orientation-of-the-camera-and-the-normal-vector-of-the-triangle/14253/3 "2024-07-19T01:04:50Z")

</div>

by the examples, it shows that the color of triangle is defined by normal, i fond that it is defiend by  
" ```  
diffuseColor = abs(myNormalMCVSOutput);\n

```auto
in https://examples.vtk.org/site/Cxx/Shaders/ColorByNormal/, but how can i change the triangle color by its normal and camera normal?
① how to define the triangle color instead of diffusecolor
② how to get the camera's normal in shaders priority.

Based on your response, I guess I need to make modifications using the OpenGL language. Could you please provide the relevant code?

Or is there another way to make the two faces of a triangle appear differently under lighting, such as making one side brighter and the other side darker? I tried to modify DiffuseColor, but it didn’t work.
```

---

<div class="post-metadata">

### Author: ![Paulo\_Carvalho](https://discourse.vtk.org/user_avatar/discourse.vtk.org/paulo_carvalho/32/370_2.png) [@Paulo\_Carvalho](https://discourse.vtk.org/u/Paulo_Carvalho)
#### Post date: [July 20, 2024, 2:21pm UTC](https://discourse.vtk.org/t/how-to-change-the-color-of-the-triangle-according-to-the-orientation-of-the-camera-and-the-normal-vector-of-the-triangle/14253/4 "2024-07-20T14:21:51Z")

</div>

Hello,

Please, take a look at this: [How to get the viewing angle relative to the normal in a GLSL fragment shader? - Stack Overflow](https://stackoverflow.com/questions/49583086/how-to-get-the-viewing-angle-relative-to-the-normal-in-a-glsl-fragment-shader). It has even a browser-runnable example in WebGL.

GLSL code for the vertex shader (the shader in which you can do geometry computations). Notice the `out` modifier of the `viewNV` vector, signaling you want to communicate it to other shaders down the rendering pipeline:

```cpp
in vec3 inPos;
in vec3 inNV;

out vec3 viewNV;

uniform mat4 u_projectionMat44;
uniform mat4 u_viewMat44;
uniform mat4 u_modelMat44;

void main()
{   
    viewNV = mat3(u_viewMat44 * u_modelMat44) * inNV;

    vec4 pos = u_viewMat44 * u_modelMat44 * vec4( inPos, 1.0 );
    gl_Position = u_projectionMat44 * pos;
}

```

You actually need only the `viewNV` information, but writing to the built-in `gl_Position` variable is required in order to have a valid vertex shader.

Next, here’s the GLSL code for the fragment (pixel) shader (the shader where you can calculate the pixel color). Notice it receives the `viewNV` vector (the `in` modifier) previously computed in the vertex shader:

```cpp
in vec3 viewNV;

void main()
{
    vec3 N = normalize(viewNV);
    vec3 L = vec3(0.0, 0.0, 1.0);
    float NdotL = dot(N, L);

    vec3 color = vec3(NdotL, 0.0, 1.0-NdotL);

    gl_FragColor = vec4( color.rgb, 1.0 );
} 

```

The fragment shader above will give redder hues for pixels of faces facing the camera and more violet hues for faces more edge-on.

I hope this helps,

PC

---

<div class="post-metadata">

### Author: ![yangyang117](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/y/da6949/32.png) [@yangyang117](https://discourse.vtk.org/u/yangyang117)
#### Post date: [July 24, 2024, 6:17am UTC](https://discourse.vtk.org/t/how-to-change-the-color-of-the-triangle-according-to-the-orientation-of-the-camera-and-the-normal-vector-of-the-triangle/14253/5 "2024-07-24T06:17:34Z")

</div>

Thank you. I will try it. 😀

---

<div class="post-metadata">

### Author: ![yangyang117](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/y/da6949/32.png) [@yangyang117](https://discourse.vtk.org/u/yangyang117)
#### Post date: [July 29, 2024, 6:17am UTC](https://discourse.vtk.org/t/how-to-change-the-color-of-the-triangle-according-to-the-orientation-of-the-camera-and-the-normal-vector-of-the-triangle/14253/6 "2024-07-29T06:17:22Z")

</div>

Thank you for your answer.  
by looking for the vtk function, i found that the actor can use SetBackfaceProperty, which can solve the problem. anyway, thank you for your answer.

the complete code is  
vtkSmartPointer backProperty = vtkSmartPointer::New();  
backProperty-\>SetColor(colors-\>GetColor3d(“Red”).GetData());  
actor-\>SetBackfaceProperty(backProperty);
