Utilizing Normal Mapping with ShaderMaterial, TangentSpace, and fromGeometry in Three.js

Question

Utilizing Normal Mapping with ShaderMaterial, TangentSpace, and fromGeometry in Three.js

I've been struggling to understand normal mapping with Three.js. Despite my efforts, I can't seem to get it right.

Below is the code I've been working on:

Javascript:

var bufferGeometry = new THREE.BufferGeometry();
bufferGeometry.fromGeometry(  new THREE.BoxGeometry(2,2,2) );

var positionAttributes = bufferGeometry.getAttribute('position');
var uvAttributes = bufferGeometry.getAttribute('uv');

// Rest of the JavaScript code...

Vertex shader:

 // Vertex shader code here...

Fragment shader:

 // Fragment shader code here...

Here is the outcome:
https://i.sstatic.net/3akfc.png

However, the end result doesn't look quite right. I've referenced a tutorial at , but I'm still unable to achieve the desired effect in Three.js. Any suggestions or insights would be greatly appreciated!

javascript graphics three.js 3d light

Answer 1

Answer №1

Ensure that the tangent space matrix is correctly specified by updating it to:

mat3 toTangentSpace = mat3( tang, bitang, norm );

The structure of a 4*4 matrix is as follows:

  c0  c1  c2  c3            c0  c1  c2  c3
[ Xx  Yx  Zx  Tx ]        [  0   4   8  12 ]     
[ Xy  Yy  Zy  Ty ]        [  1   5   9  13 ]     
[ Xz  Yz  Zz  Tz ]        [  2   6  10  14 ]     
[  0   0   0   1 ]        [  3   7  11  15 ]

In GLSL, accessing columns in this manner:

vec4 c0 = m44[0].xyzw;
vec4 c1 = m44[1].xyzw;
vec4 c2 = m44[2].xyzw;
vec4 c3 = m44[3].xyzw;

An initialization method for a 4*4 matrix involves:

mat4 m44 = mat4(c0, c1, c2, c3);

A 3*3 matrix appears like this:

                         x   y   z 
[ Xx  Yx  Zx ]        [  0   4   8 ]     
[ Xy  Yy  Zy ]        [  1   5   9 ]     
[ Xz  Yz  Zz ]        [  2   6  10 ]

In GLSL, column access can be achieved using:

vec3 x = m33[0].xyz;
vec3 y = m33[1].xyz;
vec3 z = m33[2].xyz;

The initialization process for a 3*3 matrix looks like this:

mat3 m33 = mat3(x, y, z);

Please note, the memory layout for a 4*4 matrix is represented like this:

[ Xx, Xy, Xz, 0, Yx, Yy, Yz, 0, Zx, Zy, Zz, 0, Tx, Ty, Tz, 1 ]

And for a 3*3 matrix, the memory image is structured like this:

[ Xx, Xy, Xz, Yx, Yy, Yz, Zx, Zy, Zz, Tx, Ty, Tz ]

Refer to the following resources for further information:

GLSL 4×4 Matrix Fields
How to calculate Tangent and Binormal?
GLSL Programming/Vector and Matrix Operations
Data Type (GLSL)

Answer 2

Ensure that the tangent space matrix is correctly specified by updating it to:

mat3 toTangentSpace = mat3( tang, bitang, norm );

The structure of a 4*4 matrix is as follows:

  c0  c1  c2  c3            c0  c1  c2  c3
[ Xx  Yx  Zx  Tx ]        [  0   4   8  12 ]     
[ Xy  Yy  Zy  Ty ]        [  1   5   9  13 ]     
[ Xz  Yz  Zz  Tz ]        [  2   6  10  14 ]     
[  0   0   0   1 ]        [  3   7  11  15 ]

In GLSL, accessing columns in this manner:

vec4 c0 = m44[0].xyzw;
vec4 c1 = m44[1].xyzw;
vec4 c2 = m44[2].xyzw;
vec4 c3 = m44[3].xyzw;

An initialization method for a 4*4 matrix involves:

mat4 m44 = mat4(c0, c1, c2, c3);

A 3*3 matrix appears like this:

                         x   y   z 
[ Xx  Yx  Zx ]        [  0   4   8 ]     
[ Xy  Yy  Zy ]        [  1   5   9 ]     
[ Xz  Yz  Zz ]        [  2   6  10 ]

In GLSL, column access can be achieved using:

vec3 x = m33[0].xyz;
vec3 y = m33[1].xyz;
vec3 z = m33[2].xyz;

The initialization process for a 3*3 matrix looks like this:

mat3 m33 = mat3(x, y, z);

Please note, the memory layout for a 4*4 matrix is represented like this:

[ Xx, Xy, Xz, 0, Yx, Yy, Yz, 0, Zx, Zy, Zz, 0, Tx, Ty, Tz, 1 ]

And for a 3*3 matrix, the memory image is structured like this:

[ Xx, Xy, Xz, Yx, Yy, Yz, Zx, Zy, Zz, Tx, Ty, Tz ]

Refer to the following resources for further information:

GLSL 4×4 Matrix Fields
How to calculate Tangent and Binormal?
GLSL Programming/Vector and Matrix Operations
Data Type (GLSL)

Utilizing Normal Mapping with ShaderMaterial, TangentSpace, and fromGeometry in Three.js

Answer №1

Similar questions

Discovering the ways to retrieve Axios response within a SweetAlert2 confirmation dialog

The Ionic framework has a defined variable

Securing AJAX Requests: Encrypting GET and POST Requests in JavaScipt using Node.js

Discontinuing the mobx autorun feature upon componentWillUnmount

What is the best method to transfer information from a What You See Is What You Get editor to a database using Vue.js?

What is the process of memory allocation for variables in Javascript?

Using BeautifulSoup to Retrieve JPEG from an Image Tag's Src Attribute

How can I use an input array to filter data in mongodb?

The issue with viewing next/image properly only occurs on desktops using a responsive layout. I would like for the image

How can I combine an onkeypress and onclick event listener in one method?

When the program is executed, immediately use .trigger('click')

A step-by-step guide on storing JSON data into a variable using NodeJS

enabling input field while making asynchronous requests with jQuery

The issue with mocking collections using JSON files in Backbone is that it is not properly triggering the success callbacks in

Receiving alerts about props passed in MUI styled components triggering React's lack of recognition

A current issue lies in the fact that node.js is failing to update

How can Javascript be used to interact with buttons and select options?

Alter the component and then refresh it

Error message: Act must be used when rendering components with React Testing Library

A Python program that creates an HTML webpage