Issues with tangents in three.js compared to the VertexTangentsHelper with problems on display

After enabling the "vertexTangentsHelper" feature in THREE.js, I've noticed that the tangents on various geometries appear to be incorrect.

I'm questioning whether these tangents are being miscalculated (possibly due to my shader output) or if there is a flaw in the "vertexTangentsHelper" function itself.

From what I understand, vertex tangent vectors should align with the "u" direction of the "uv" map and be perpendicular to the normal and bitangent of the vertex. I have attached some screenshots below to better illustrate my inquiry:

The first image demonstrates CORRECT tangents displayed on a mesh generated using "THREE.PlaneGeometry". All tangents point in the same consistent direction. (The mesh dimensions are 40 x 40 with 4 height segments and 4 width segments, and the tangents are 10 units in length.)

The second image highlights INCORRECT tangents on a mesh built with "THREE.BoxGeometry". The tangents along the edges do not align with those on their respective faces. (The mesh dimensions are 40 x 40 x 40 with 4 height segments and 4 width segments for each face, and again, the tangents measure 10 units.)

What could be causing this inconsistency? Is there an issue within the "computeTangents" function, the "VertexTangentsHelper" function, or perhaps something else I haven't considered? My version of three.js is re70.

javascriptthree.js

Answer №1

It's important to note that THREE.VertexTangentsHelper functions correctly.

In order to calculate the tangent vector for a specific vertex, Geometry.computeTangents() takes the average of the calculated tangent vectors for all triangles sharing that particular vertex.

When dealing with a basic BoxGeometry, there are 8 vertices and 12 faces. To ensure accurate results when using BoxGeometry, it is necessary for the vertices at each corner of the box to be duplicated rather than shared.

This pertains to three.js version r.70

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Running Python in React using the latest versions of Pyodide results in a malfunction

As someone who is new to React and Pyodide, I am exploring ways to incorporate OpenCV functionality into my code. Currently, I have a working piece of code that allows me to use numpy for calculations. However, Pyodide v0.18.1 does not support OpenCV. Fort ...

javascriptpythonreactjspyodide

When utilizing jQuery.Mockjax to simulate the JSON data, the Backbone.Collection.fetch() function consistently results in a 404 error

My setup is pretty straightforward: Main.js: (function($) { "use strict"; var Company = Backbone.Model.extend({ defaults: { title: "", description: "" }, initialize: function() { ...

javascriptjqueryjsonbackbone.js

Conundrum regarding setting up configuration for express-session middleware in Express version 4.x

Hello, I'm currently diving into node.js and still trying to grasp the concept of configurations in sessions. Below is a basic example of how sessions are used in my app: app.js var express = require('express'); var bodyParser = require(&a ...

javascriptnode.jssessionexpress

The challenge of default Vuetify styles within a Nuxt environment

Here is my code snippet: <div class="cd-page__details-wrapper"> <v-text-field label="Outlined" placeholder="Outlined" outlined ></v-text-field> </div> Unfortunately, something unexpecte ...

javascriptvue.jsnuxt.jsvuetify.js

Executing pure JavaScript code in Grails using Groovy

this is a duplicate of Executing groovy statements in JavaScript sources in Grails with a slight variation, my intention is to only render the js-code without enclosing it in script tags picture someone loading a script from my server within their html l ...

javascriptgrails

Example of a simple router template without URL access

I am currently working on a basic example of react router with two simple routes, greetings and signup, set up within a template. Everything seems to be loading fine without any errors, but when I manually enter the /signup route in the address bar, I enco ...

javascriptreactjsreact-router

Are you experiencing issues with your Ajax request?

I've been struggling to retrieve json data from an API. Despite my efforts, the GET request seems to be executing successfully and returning the correct data when I check the Net tab in Firebug. Can anyone offer advice on what could be going wrong or ...

javascriptjqueryajax

Ways to integrate PHP MySQL with NodeJS and SocketIO

Currently, I am working on developing a chat application. I have successfully implemented features like creating accounts, logging in, selecting, viewing, and more using PHP MySQL. Now, I am venturing into the Instant Messaging aspect by utilizing NodeJS a ...

javascriptphpmysqlnode.jsajax

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

I am currently working on a challenging touching gesture and have encountered the following issue: let cachedStartTouches: TouchList; let cachedMoveTouches: TouchList; function onStart(ev: TouchEvent) { // length equals 2 when two fingers pinch start ...

javascripthtmltypescriptdomtouch

Dynamic text displayed on an image with hover effect using JavaScript

Currently, I am in the process of developing a website for a coding course that is part of my university curriculum. The project specifications require the use of JavaScript, so I have incorporated it to display text over images when they are hovered over ...

javascripthtmlcsshover

I am facing issues with jQuery's live and livequery functions when trying to use them with a form that is being loaded dynamically through

Previously, I inquired about a related issue regarding attaching behavior to an element with jQuery after insertion. However, I have not yet found a solution. For clarity's sake, I am posing a new question with a different scenario. Below is the code ...

javascriptjqueryajaxlivelivequery

Creating a Reddit-inspired voting system using Laravel 5.3 and VueJS

Currently in the process of learning Vuejs (not too experienced with Laravel), and my goal is to create a basic voting system for various tasks. I've succeeded in adding, editing, and deleting tasks. However, upon implementing the upvote/downvote feat ...

javascriptphplaravelvue.js

Vue3 - Implementing a seamless communication channel between two child components

Vue 3 has brought about changes in my component structure, as shown below: https://i.sstatic.net/bgtPB.png In this setup, ChildA can communicate with ChildB and requires ChildB to update its state accordingly. In Vue 2, I could send an event from ChildA: ...

javascriptvue.jsevent-handlingvuejs3

Passing a parameter to an AngularJS directive, which triggers the opening of an ngDialog, and subsequently updating the value to reflect changes in the root scope

Struggling with a persistent issue here; Essentially, I have a directive that triggers an ngDialog to open. This directive should be able to receive a variable from the root scope. The directive contains a click event that opens an ngDialog which then use ...

javascriptangularjsng-dialog

The output of VueJs hooks shows a blank refs object first, followed by the referenced elements

Below is the HTML VueJS code sample that I am working with: <div v-for="site in topSites" ref="ts"><a :href="site.url"> ... </div> Update: Here is the full div code: <div v-for="site in topSites& ...

javascripthtmlvue.jsvuejs2vue-component

Retrieve the route from a specific node in the jstree structure

Looking to retrieve the paths of selected nodes in jstree? You'll need the complete path of the nodes. I have a php file that generates the JSON, structured like this: header("Content-Type: application/json; charset=utf8"); echo json_encode(dir_to_ ...

javascriptphpjsonjstree

Tips for Saving JSON Response from Fetch API into a JavaScript Object

I am facing an issue trying to store a Fetch API JSON as a JavaScript object in order to use it elsewhere. The console.log test is successful, however I am unable to access the data. The Following Works: It displays console entries with three to-do items: ...

javascriptjsonapifetch-api

The absence of a property map within String Flowtype has caused an issue

There is an issue with Flowtype when it comes to arrays. type Properties = { films?: Array<any> } render() { const { movies } = this.props; return ( <React.Fragment> <main className="moviedata-container"> { ...

javascriptreactjsflowtype

Is there a potential race condition in React when switching between lists?

I'm currently working on setting up a queue system where users can move items between different lists, such as from "available" to "with client". The queue's state is managed in the root React component like this: this.state = { queue: { a ...

javascriptreactjsrace-conditiondeep-copy

The issue with using useState on arrays is that it is not functioning properly with React Hooks

const [LatestNews, setLatestNews] = useState([]); useEffect(() => { async function fetchLatestData() { const result = await database.collection('latestnews').get(); result.docs.forEach(doc => ...

javascriptreactjsreact-hooks