The tangents attribute of [buffer geometry objects in threejs] can be added to a geometry by calling the compute tangents method of a geometry object instance. I have been piecing together some things as to what this is for, and thus far it would seem that this is something that will come into play when making use of normal maps as a way to address a problem that will come up for indexed geometry. You see when making use of an index to reuse points in the position attribute this will result in also only having as many vertex normals as there are position attribute points. This issue can then result in an typically undesired outcome with shading with materials that use light sources, or materials like the normal material. So then there are two general ways of addressing this, one of which is to not use an index, then other is to use a normal map. So with that said in order to use this normal map I will likely want to have a tangent attribute.
In this post then I will be going over what it is that I have together thus far in terms of demos that have to do with the subject of these tangent attributes, and with that everything that goes along with it, which thus far would seem to be to make use of the normal map option of various mesh material options.
Thus far it would seem that the use of tangent attributes will come into play when working out normal maps to be used with one of the mesh materials. Speaking of which there is my main blog post on materials in general that you might want to check out if you want to learn more about materials in general. However for the sake of staying on topic, there is just using the mesh normal material as that supports the features that I want in order to make use of a normal map and with that the tangent attribute of a geometry.
I assume that you all ready know a fair amount about buffer geometry objects in general, if not you might want to read up more on this subject then. There is first knowing what the deal is with position, normal, and uv attributes as well as the index that is used to reuse points in the position attribute.
The source code examples that I have made for this post can be found in the folder that corresponds to this post in my test threejs repository on Github. With that said there is also a folder for each of the other posts that I have wrote on threejs thus far on this website as well.
The revision number that I was using for the demos in this post was r152, and thus followed the style rules I have set for that revision.
As always I like to start out my post with at least one if not more basic examples of the main subject of the post. With that said in this section I will be starting out with just that. One way to quickly get started would be to just call the compute tangents method, and if I do so with a built in geometry this will often work as the various attributes are there with maybe a few exceptions. When it comes to custom geometry though I will need a position, normal, uv, and index buffer attributes set up first.
One problem that seems to happen when making an indexed geometry is that when reusing points this results in less vertex normals compared to what the situation would be with a non indexed geometry. This will then result in shading that will not work the way that one would typically expect. Maybe a good way to just start out with what the situation here is to begin with would be to just start with a TetrahedronGeometry and then a custom geometry in which I am trying to get the same look with shading. Only when making my custom geometry I will be adding an index, where the TetrahedronGeometry is very much not indexed.
So then once agian I am working out a kind of Tetrahedron Geometry in that it is just four triangles, but by way of resuing points by adding an index, and thus using the same four points in the position attribute rather than having a non indexed geometry of 12 points. So when I call compute vertex normals I end up with four vertex normals as well, which presents the problem. So then in order to address this I can call the compute tangents method to create a tangent attribute after setting up the uv attribute. Now that I have that I can use a normal map to address this, but first I need a texture. So with that said I set up a data texture to just have somehting to work with to find out what the effect is with this.
It is then clear that by working out what the propper RGB values are for the texture I can then adjust the shading to get the object to look the way that it should if it where not indexed.
That will be it then for tangent attributes of buffer geometry objects in threejs for now then. I might get around to expanding this post more at some point if I gain more ground in this area. I do however have a lot of other posts on threejs that I aim to expand on more so, and I can not say that this is something that comes up that much for me thus far. In any case I do at least have the general idea of what this is about worked out to say the least, tangent attributes have a lot to do with normal maps, and normal maps are something of interest when I work out an indexed geometry.