A guide on shading specific faces based on their normal vectors' alignment with the camera's view

Question

A guide on shading specific faces based on their normal vectors' alignment with the camera's view

https://i.sstatic.net/FG4hp.png

I'm currently working on a shader that requires darkening the faces with normals perpendicular to the camera (dot product is 0). How can I calculate this dot product and make sure it works correctly?

uniform float time;
uniform vec3 eye_dir;

varying float darkening;

void main(){

  float product=dot(normalize(eye_dir),normalize(normal.xyz));

  darkening=product;

  gl_Position=
  projectionMatrix*
  modelViewMatrix*
  vec4(position,1.);
}

// Using THREE.js library
this.camera.getWorldDirection(this.eyeDir);
...
cell.material.uniforms.eye_dir = new Uniform(this.eyeDir);

javascript three.js glsl webgl

Answer 1

Answer №1

To achieve your goal, you must determine the vector from the fragment to the camera. The most straightforward method is to perform this calculation in view space (camera space), where the camera's position is at (0, 0, 0).
Convert the position using the modelViewMatrix from model space to view space, and transform the normal using the normalMatrix from model space to view space. Refer to WebGLProgram.

As the result of the dot product equals 1.0 when the vectors are aligned in the same direction, the darkening effect can be calculated as 1.0 - abs(dotproduct).

varying float darkening;

void main(){

    vec4 view_pos = modelViewMatrix * vec4(position, 1.0);

    vec3 view_dir = normalize(-view_pos.xyz); // vec3(0.0) - view_pos;
    vec3 view_nv  = normalize(normalMatrix * normal.xyz);

    float NdotV   = dot(view_dir, view_nv);
    darkening     = 1.0 - abs(NdotV);

    gl_Position   = projectionMatrix * view_pos;
}

It is important to note that calculating the Dot product between eye_dir and normal is not meaningful, as eye_dir is a vector in world space while normal is a vector in model (object) space.

Answer 2

To achieve your goal, you must determine the vector from the fragment to the camera. The most straightforward method is to perform this calculation in view space (camera space), where the camera's position is at (0, 0, 0).
Convert the position using the modelViewMatrix from model space to view space, and transform the normal using the normalMatrix from model space to view space. Refer to WebGLProgram.

As the result of the dot product equals 1.0 when the vectors are aligned in the same direction, the darkening effect can be calculated as 1.0 - abs(dotproduct).

varying float darkening;

void main(){

    vec4 view_pos = modelViewMatrix * vec4(position, 1.0);

    vec3 view_dir = normalize(-view_pos.xyz); // vec3(0.0) - view_pos;
    vec3 view_nv  = normalize(normalMatrix * normal.xyz);

    float NdotV   = dot(view_dir, view_nv);
    darkening     = 1.0 - abs(NdotV);

    gl_Position   = projectionMatrix * view_pos;
}

It is important to note that calculating the Dot product between eye_dir and normal is not meaningful, as eye_dir is a vector in world space while normal is a vector in model (object) space.

A guide on shading specific faces based on their normal vectors' alignment with the camera's view

Answer №1

Similar questions

Monitoring separate upload progress within $q.all() in AngularJS

In order to ensure a valid JSON for parsing in JavaScript, one must reverse the usage of single quotes and double quotes. This adjustment

Using jQuery to animate a DIV sliding in from the side

Issue with Sliding Transition in React Material UI Drawer Component

The request body for MERN full stack development is returning empty

Displaying two THREE.js scenes overlapping each other

What is the best way to implement validation for individual elements within an array that are being displayed on a webpage using a for loop?

Tips for displaying real-time error notifications from server-side validation using AJAX

Merge the values into an array based on their shared id within a JSON object

An unusual problem stemming from jQuery/AJAX arises when variables within a function fail to update while a click

The call stack limit has been exceeded in VueJS/VueX

Encountering error: Unknown flag '-p' when trying to execute yarn build:prod in Angular 6

JavaScript error: Attempting to assign a value to an undefined property, causing a TypeError

Elements powered by jQuery failing to load upon dynamic webpage(s) loading via ajax

Effortlessly move events to a different calendar using the tab menu feature in FullCalendar

Node.js and Express.js fails to transmit files to clients

applying attributes to an element

Generate TypeScript type definitions for environment variables in my configuration file using code

Any suggestions for solving the issue of breaking the line at the end of a <td> within a <table> element using jQuery or JavaScript?

What is the best way to add table pagination at the bottom of a table?