solved Texture mapping direction based on vertex colour

[babbleon]

Hello,

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.

[NasimiAsl]

r u know about UV (that is one of uniforms on the any geometry ) that have all coordonate 

[babbleon]

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.

[babbleon]

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.

[JohnK]

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???

Quote

there are no UV maps on this piece

Does not make sense to me.

[babbleon]

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.

[Pryme8]

You would have to make a 'tri-planar' projection texture.

Totally doable.

Sounds like this was a procedural wood though and not texture samples.  How savey are you with glsl?

[babbleon]

Hi Pryme8,

I used a bitmap texture, not procedural. I am not at all savvy with glsl.

As I said in the first post, i am happy to pay someone to do this for me. Beer tokens are waiting for the right coder!

[Pryme8]

Beer tokens!!! woot Im in.

please msg me links to the bmp and the fbx/obj/babylon file you are using.

[babbleon]

Thanks Pryme8, have just sent you a message.

[NasimiAsl]

i understand that  you wanna replace uv by vertex color

in texture2D( samplarName , uv ) to texture2D( samplarName , vertexColor )

let me test it in PG

[Pryme8]

http://pryme8.github.io/shaderStuff/tri-plane-no-uv

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. ^_^.

 

[NasimiAsl]

ok fine  this is your hunt i just walk around and make noise :DD

like Vegetarian animal from the back of the fence

 

just a bit  that can be work :  https://www.babylonjs-playground.com/#1LFQYH#1 

that is yummy

[Pryme8]

@babbleon
 -> 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.

https://github.com/Pryme8/Pryme8.github.io/blob/master/shaderStuff/tri-plane-no-uv/index.html
http://pryme8.github.io/shaderStuff/tri-plane-no-uv/




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

[babbleon]

Amazing! It's late here so will look properly tomorrow morning.

Thank you!

[Pryme8]

Where you at? Ill keep that in mind when msging you.

[babbleon]

England, the land of rain and fog.

[Pryme8]

https://en.wikipedia.org/wiki/Lost_Coast

Your not the only one... ^_^.  It used to be foggy like 300+ days of the year here, but yeah global warming I guess?

[babbleon]

Hi Pryme8,

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

I created a playground here:

https://www.babylonjs-playground.com/indexstable#F04MZ7#1

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!

[babbleon]

PS. Tweaked playground here with smoother transitions between mapping directions:

https://www.babylonjs-playground.com/indexstable#F04MZ7#3

Something wrong with my maths as texture is brighter than it should be and the blended areas are brighter still compared to the original.

[Pryme8]

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.

https://www.babylonjs-playground.com/indexstable#F04MZ7#5
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.

 

[Pryme8]

https://www.babylonjs-playground.com/indexstable#F04MZ7#6

@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.

 

[babbleon]

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.

[Pryme8]

[0,-0.0669,-0.9977,-0.4989,0.0669,-0.8641,-0.4989,-0.0669,-0.8641,-0.4989,-0.0669,0.8641,0,0.0669,0.9977,0,-0.0669,0.9977,-0.9977,-0.0669,0,-0.8641,0.0669,0.4989,-0.8641,-0.0669,0.4989,0.8641,-0.0669,0.4989,0.9977,0.0669,0,0.9977,-0.0669,0,0.4989,-0.0669,-0.8641,0,0.0669,-0.9977,-0.8641,-0.0669,-0.4989,-0.9977,0.0669,0,0.4989,-0.0669,0.8641
,0.8641,0.0669,0.4989,0.8641,-0.0669,-0.4989,0.4989,0.0669,-0.8641,-0.8641,0.0669,-0.4989,-0.0638,0.9973,-0.0368,0.0638,0.9973,-0.0368,-0.0638,0.9973,0.0368,-0.4989,0.0669,0.8641,0.8641,0.0669,-0.4989,0.4989,0.0669,0.8641,0,-0.2615,0.9652,-0.4826,-0.2615,0.8359,-0.4321,-0.5032,0.7484,0,-0.7082,0.706,-0.353,-0.7082,0.6114,0,-0.864,0.5034,-0.2517,-0.864,0.436
,-0.1352,-0.9627,0.2341,0,-0.9973,0.0737,-0.0368,-0.9973,0.0638,-0.8359,-0.2615,0.4826,-0.7484,-0.5032,0.4321,-0.6114,-0.7082,0.353,-0.436,-0.864,0.2517,-0.2341,-0.9627,0.1352,-0.0638,-0.9973,0.0368,-0.9652,-0.2615,0,-0.8642,-0.5032,0,-0.706,-0.7082,0,-0.5034,-0.864,0,-0.2704,-0.9627,0,-0.0737,-0.9973,0,-0.8359,-0.2615,-0.4826,-0.7484,-0.5032,-0.4321
,-0.6114,-0.7082,-0.353,-0.436,-0.864,-0.2517,-0.2341,-0.9627,-0.1352,-0.0638,-0.9973,-0.0368,-0.4826,-0.2615,-0.8359,-0.4321,-0.5032,-0.7484,-0.353,-0.7082,-0.6114,-0.2517,-0.864,-0.436,-0.1352,-0.9627,-0.2341,-0.0368,-0.9973,-0.0638,0,-0.2615,-0.9652,0,-0.5032,-0.8642,0,-0.7082,-0.706,0,-0.864,-0.5034,0,-0.9627,-0.2704,0,-0.9973,-0.0737,0.4826,-0.2615,-0.8359
,0.4321,-0.5032,-0.7484,0.353,-0.7082,-0.6114,0.2517,-0.864,-0.436,0.1352,-0.9627,-0.2341,0.0368,-0.9973,-0.0638,0.8359,-0.2615,-0.4826,0.7484,-0.5032,-0.4321,0.6114,-0.7082,-0.353,0.436,-0.864,-0.2517,0.2341,-0.9627,-0.1352,0.0638,-0.9973,-0.0368,0.9652,-0.2615,0,0.8642,-0.5032,0,0.706,-0.7082,0,0.5034,-0.864,0,0.2704,-0.9627,0,0.0737,-0.9973,0
,0.8359,-0.2615,0.4826,0.7484,-0.5032,0.4321,0.6114,-0.7082,0.353,0.436,-0.864,0.2517,0.2341,-0.9627,0.1352,0.0638,-0.9973,0.0368,0.4826,-0.2615,0.8359,0.4321,-0.5032,0.7484,0.353,-0.7082,0.6114,0.2517,-0.864,0.436,0.1352,-0.9627,0.2341,0.0368,-0.9973,0.0638,0,-0.5032,0.8642,0,-0.9627,0.2704,0,0.9973,0.0737,-0.1352,0.9627,0.2342,-0.0368,0.9973,0.0638
,0,0.9627,0.2704,-0.2517,0.864,0.436,0,0.7082,0.706,-0.353,0.7082,0.6114,-0.4321,0.5032,0.7484,0,0.2615,0.9652,-0.4826,0.2615,0.8359,-0.2342,0.9627,0.1352,-0.436,0.864,0.2517,-0.6114,0.7082,0.353,-0.7484,0.5032,0.4321,-0.8359,0.2615,0.4826,-0.2704,0.9627,0,-0.0737,0.9973,0,-0.5034,0.864,0,-0.706,0.7082,0,-0.8642,0.5032,0
,-0.9652,0.2615,0,-0.2342,0.9627,-0.1352,-0.436,0.864,-0.2517,-0.6114,0.7082,-0.353,-0.7484,0.5032,-0.4321,-0.8359,0.2615,-0.4826,-0.1352,0.9627,-0.2342,-0.0368,0.9973,-0.0638,-0.2517,0.864,-0.436,-0.353,0.7082,-0.6114,-0.4321,0.5032,-0.7484,-0.4826,0.2615,-0.8359,0,0.9627,-0.2704,0,0.9973,-0.0737,0,0.864,-0.5034,0,0.7082,-0.706,0,0.5032,-0.8642
,0,0.2615,-0.9652,0.1352,0.9627,-0.2342,0.0368,0.9973,-0.0638,0.2517,0.864,-0.436,0.353,0.7082,-0.6114,0.4321,0.5032,-0.7484,0.4826,0.2615,-0.8359,0.2342,0.9627,-0.1352,0.436,0.864,-0.2517,0.6114,0.7082,-0.353,0.7484,0.5032,-0.4321,0.8359,0.2615,-0.4826,0.0737,0.9973,0,0.2704,0.9627,0,0.5034,0.864,0,0.706,0.7082,0,0.8642,0.5032,0
,0.9652,0.2615,0,0.2342,0.9627,0.1352,0.0638,0.9973,0.0368,0.436,0.864,0.2517,0.6114,0.7082,0.353,0.7484,0.5032,0.4321,0.8359,0.2615,0.4826,0.1352,0.9627,0.2342,0.0368,0.9973,0.0638,0.2517,0.864,0.436,0.353,0.7082,0.6114,0.4321,0.5032,0.7484,0.4826,0.2615,0.8359,0,0.864,0.5034,0,0.5032,0.8642]

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

[Pryme8]

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.