Jump to content

Texture mapping direction based on vertex colour


Recommended Posts


Would it be possible to somehow have textures mapped onto meshes and the direction / orientation of these textures dictated by the vertex colour?

Assuming I have a piece of furniture:

  • X = Red (the top & the long rails between legs)
  • Y = Green (the short rails between legs)
  • Z  = Blue (the legs)

I would then specify how the texture could be applied by using something (which doesn't yet exist) like: coordinatesIndex = vertexColor

I wouldn't have a clue where to start and am happy to pay to have someone do this for me. Are offers of paid work allowed here? If not, I will amend this post.

Thank you.

Link to comment
Share on other sites

Hi NasimiAsl,

Yes, I know about UV, I am exporting from Blender and so use two UV maps, one for AO and one for textures - I want to avoid generating the UV for textures.

The reason I am looking for texture placement per vertexcolor is to save time. It is far faster to set vertex colour for multiple meshes or parts of meshes than to UV unwrap each individually.

I use this method of texture orientation per vertex colour when rendering in Blender and it works well.

Link to comment
Share on other sites

In case I am not explaining well enough in what i am looking for, I attach two images; one showing vertex color and another rendered in wood.

This is rendered in Blender and there are no UV maps on this piece, the texture placement is driven by the vertex colour.



Link to comment
Share on other sites

Really do not understand what is happening here, I must be missing something. The four vertices of the top of the table all have the same vertexColor (1, 0, 0) and so provide exactly the same coordinates to the texture placement so how is the texture spread over the table top??? :wacko:


there are no UV maps on this piece

Does not make sense to me.

Link to comment
Share on other sites

Hi JohnK,

Yes, you are right.

The vertex colour (in the setup I have in Blender) just says... if it's red slap the texture on along the X axis, if it's blue put the on the Z axis etc.

The vertex colours to not hold any UV coordinates, just a single colour that determines the XYZ rotation of the texture applied to it.

I hope this makes it easier to understand - any more questions, just ask.

Link to comment
Share on other sites


beat you too it ^_^... back off Nasimi these are my beer tokens!!! lol <3

I am enabling tri-plane projection on it here soon which should make it match up to the blender render and then making alternative zones for radial projections.

also working with @babbleon to fix his model as there are some duplicate faces and things that need to be cleaned up and then we will see what we got. ^_^.


Link to comment
Share on other sites

 -> just fixed the projection to account for normal's.

could clean up the 'ring' sides a little still... but yeah this is it for the most part.  To really dig in now I would need to add light/shadow support and reflections etc.



P.S. -> the model has a few of extra faces inside its geometry and a couple identical faces.

Link to comment
Share on other sites

Hi Pryme8,

I have had a good mess about with your wonderful creation!

I created a playground here:


I added BABYLON.Texture.TRILINEAR_SAMPLINGMODE to the texture  which improves it no end.

I can't quite work out the relationship between (I have altered this from your code):

color = texture2D(texture0, (vPosition.zx+rChannel.xy)*((ratio*rChannel.z))*vec2(0.7, 0.7)).rgb;

...and the supposed physical size of the timber. I am assuming the timber sample is 500mm wide (X) x 2500mm long (Y).

Chrome thows an error if I use a larger (as in file size) texture as it doesn't load quickly enough but I think I can work around that.

So, next is how do we use this in StandardMaterial so we can have shadows, lighting etc.

Amazing job, well done!

Link to comment
Share on other sites

I would use the if statements, I tried to mix the values like you were doing and for some reason I keep dropping an error with the mix function which is odd... So not sure what to do with the modified one to fix it but I will look at it more today.

anyways if you need to make sure they blend better https://gist.github.com/patriciogonzalezvivo/20263fe85d52705e4530
I can enable this type of logic with the layout we got today for you.

Ill also look at adding light support.

Ill fix this up some more for you today and try to fix the blending values.


*EDIT* I replied to this when I first woke up... now that I have had some coffee It makes more sense.   I know whats happening Ill fix it up and get it to you today.


Link to comment
Share on other sites


@babbleon this is what is happening with the normal weights for some reason.

Here are the normal values themselves https://www.babylonjs-playground.com/indexstable#F04MZ7#7
Seems like there is something up with the model.  The values on some of the surfaces do not see correct, but maybe I am tripping.  I am pretty sure the side planks should not change in value though.


Link to comment
Share on other sites

This was modeled and has a mirror modifier, ie. I just modeled 1/4 of the table of you're looking down on top.

Also, the faces were set to smooth, and I then applied a bevel modifier.

On export, all these modifier get applied and so together probably affect the normals.

Link to comment
Share on other sites


This is a sample of the normals
maybe I need to normalize the normals... ^_^.

Link to comment
Share on other sites

So yea, I got some hacking to do...
But I will get this 100% for you hopefully by the end of the day.

here is a simplified version of the color blending string though:

color = 
		((texture2D(texture0, (vPosition.zy+rChannel.xy)*((ratio*rChannel.z))*vec2(0.5, 0.5)).rgb)*absNormal.x)+
		((texture2D(texture0, (vPosition.zx+rChannel.xy)*(ratio*rChannel.z)).rgb)*absNormal.y)+
		((texture2D(texture0, (vPosition.yx+rChannel.xy)*(ratio*rChannel.z)).rgb)*absNormal.z);

I am glad you understood the shader well enough to effectively set up the long version of this.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...