The custom shader on the object appears distorted when the object is in motion

Question

The custom shader on the object appears distorted when the object is in motion

I am currently working on a basic diffuse lighting shader, and I have encountered an issue where the shading does not update correctly when I apply position or rotation changes to the object. Moving the "Custom Point Light" position seems to work fine, updating the shading on the cube accurately. However, when the cube itself is moved, the shading appears incorrect.

If you uncomment lines 183 and 184 in the code, the rotation is applied, but the shading remains incorrect.

cube.rotation.x += rotSpeed.x;
cube.rotation.y += rotSpeed.y;

Here is the implementation of a PromisedLoad class that handles loading resources asynchronously in JavaScript:

[...]

javascript three.js glsl

Answer 1

Answer №1

One of the issues arises due to the misalignment in the reference systems of vectors and positions in the fragment shader. The vector vNormal is defined in model space, while the position is a point in model space, and the customPointLightPos represents a position in world space.

To rectify this, it is essential to transform the vNormal from model space to view space within the vertex shader. This can be achieved using the normalMatrix provided by THREE.js.
Similarly, to calculate the light vector accurately, you need to transform the position from model space to view space by utilizing the modelViewMatrix.
Finally, transforming the customPointLightPos from world space to view space can be accomplished through the viewMatrix:

vNormal           = normalMatrix * normal;
vec4 viewPos      = modelViewMatrix * vec4(position, 1.0);
vec4 viewLightPos = viewMatrix * vec4(customPointLightPos, 1.0);
lightVec          = normalize(viewLightPos.xyz - viewPos.xyz);

By ensuring that both vectors are aligned to the same reference system, they can be effectively compared and utilized for light calculations.

For a practical demonstration, the suggested modifications to the original code have been applied as shown in the example:

// JavaScript code snippet goes here

// CSS styles snippet goes here

// HTML code snippet goes here

Answer 2

One of the issues arises due to the misalignment in the reference systems of vectors and positions in the fragment shader. The vector vNormal is defined in model space, while the position is a point in model space, and the customPointLightPos represents a position in world space.

To rectify this, it is essential to transform the vNormal from model space to view space within the vertex shader. This can be achieved using the normalMatrix provided by THREE.js.
Similarly, to calculate the light vector accurately, you need to transform the position from model space to view space by utilizing the modelViewMatrix.
Finally, transforming the customPointLightPos from world space to view space can be accomplished through the viewMatrix:

vNormal           = normalMatrix * normal;
vec4 viewPos      = modelViewMatrix * vec4(position, 1.0);
vec4 viewLightPos = viewMatrix * vec4(customPointLightPos, 1.0);
lightVec          = normalize(viewLightPos.xyz - viewPos.xyz);

By ensuring that both vectors are aligned to the same reference system, they can be effectively compared and utilized for light calculations.

For a practical demonstration, the suggested modifications to the original code have been applied as shown in the example:

// JavaScript code snippet goes here

// CSS styles snippet goes here

// HTML code snippet goes here

The custom shader on the object appears distorted when the object is in motion

Answer №1

Similar questions

Is it possible to retrieve local variable JSON arrays using ajax/getJson()?

What steps can be taken to prompt the layout to transition?

Guide to accessing child prop reference in Vue 3 using Element Plus UI library

Extracting specific key-value pairs from JSON data

Step-by-Step Guide: Unveiling a Particular Modal Post-Submission of Form with

Switch the custom audio control button on and off within a v-for loop

In Vue(tify), transitions require children to have keys, but in this case, there are no tags present as children

Navigating through Index in #each in emberjs

Developing a MySQL Community Server-backed RESTful Web Service with the power of jQuery AJAX

What could be causing my table to appear multiple times in the HTML when using jQuery?

Issue with plotted point labels failing to display correctly on X Range Chart for the initial date of each month - Highcharts

Utilize a MongoDB query to locate a single document and include a conditional statement within the update operation

Preventing default events and continuing with jQuery

Using a for loop, how can the property value be set in another object?

A guide to implementing child level filtering of JSON data with Lodash

React - Effective Ways to Update State Following an AJAX Call

Loop through associative array in PHP using JQuery

Error being thrown in Express/Mongoose not being caught and handled

An Unexpected Appearance of Special Characters in a Python dictionary created from AWS and transmitted to JavaScript via a Django view

The CSS for the balise component is failing to load within a particular component