RIbbons ignore texturing. Instead, they assign a color.

[kaitek666]

Hey. 

I don't want to share code that much.. I just want some theory on my problem.

What you can see on attached image, is set of objects defined by the same class. The corner and sides are actually the same, but their ribbon definition is different.
The problem is, that the texture on sides is present, displayed properly etc, unlike corners. Corners on the other hand display color instead of texture.

 

This is a side ribbon (Playground):

var myPaths = [
	[   new BABYLON.Vector3(0, 0, 0),
		new BABYLON.Vector3(0, 0, 25)
	],
	[   new BABYLON.Vector3(25, 0, 0),
		new BABYLON.Vector3(25, 0, 25)
	],
	[
		new BABYLON.Vector3(0, 25, 0),
		new BABYLON.Vector3(0, 25, 25)
	],
	[
		new BABYLON.Vector3(0, 0, 0),
		new BABYLON.Vector3(0, 0, 25)
	]
];

 

And this is my corner ribbon (Playground):

var myPaths = [
	[   new BABYLON.Vector3(0, 0, 25),
		new BABYLON.Vector3(25, 0, 25),
	],
	[
		new BABYLON.Vector3(0, 25, 0),
		new BABYLON.Vector3(0, 25, 0),
	],
	[
		new BABYLON.Vector3(25,0,0),
		new BABYLON.Vector3(25,0,25)
	],

];

 

In both playgrounds linked above, I inserted the same materials config I use in my game. To clarify, these are my options:

var plane = BABYLON.MeshBuilder.CreateRibbon("ribbon", {pathArray: myPaths, sideOrientation: BABYLON.Mesh.DOUBLESIDE, updatable: true, closeArray: true}, scene);

// [...]

var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
materialPlane.diffuseTexture = new BABYLON.Texture(rockTexture, scene);
//rockTexture is predefined by some statements earlier, usually it's a BMP file.
//Its path is 100% correct, because it works on other ribbons, but not on corners.

plane.material = materialPlane;
plane.material.diffuseTexture.uScale = 1;
plane.material.diffuseTexture.vScale = 3.1;
plane.material.diffuseTexture.wAng = 0;
plane.material.backFaceCulling = true;
plane.material.diffuseTexture.vOffset = 0.3;
plane.material.diffuseTexture.uOffset = 0;
plane.material.maxSimultaneousLights = maxLightsPerObject; //predefined as 32
plane.actionManager = new BABYLON.ActionManager(scene);
plane.receiveShadows = true;

plane.convertToFlatShadedMesh();

 

Funny enough, in attached images you can see the same ribbons (corners) with same options, but a different diffuseTexture. The texture won't show. Instead I have this weird plain color. In one case it's blue, and in second case Its color is then.. red? It applies to a texture I've given it previously. If a texture is red, it's red. If a texture is blue, it's blue. It's like it zoomed and blurred it to one pixel and spread all over my shape, giving it a weird color. 

But then, you may say: OMG! BUT IF YOU GO ON A PLAYGROUND, A TEXTURE IS WORKING, WHYYY, FOR GODS SAKE, WHY ARE YOU WASTING OUR TIME?!?!?!?!!11

Gotcha! Playgrounds are working in fact, but my game is a different case. I cannot tell why isn't it working.

 

So, here's my question: What may be a problem in my game, causing this to happen? My code is really complex, and, as I said, I don't want to share it whole.

tl;dr: I have rocks with corners and sides. Sides display textures and corners don't. Both are created with the same class. I'm looking for a fix.

I love this forum. Every question I've asked was answered in a blink of an eye, and I noticed this community is really friendly. I really hope you will help me out with this one as well
Thanks a lot!
Kajtek

[jerome]

not enough time to study your cases now ...

btw, the ribbon has also new (but not documented yet) parameters : uvs and colors

https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.meshBuilder.ts#L125

you can set directly your own uvs !

[Wingnut]

19 hours ago, kaitek666 said:

Funny enough, in attached images you can see the same ribbons (corners) with same options, but a different diffuseTexture. The texture won't show. Instead I have this weird plain color. In one case it's blue, and in second case Its color is then.. red? It applies to a texture I've given it previously. If a texture is red, it's red. If a texture is blue, it's blue. It's like it zoomed and blurred it to one pixel and spread all over my shape, giving it a weird color. 

Hiya K and others.  It's likely, the texture IS showing, but the UVs on the mesh... have somehow been set to all zeroes.  This... would cause the texture's lower left PIXEL... to attempt-to be stretched across entire mesh (causing a single color).

It might be wise to check the UV data on the mesh's vertexData object... see what's shakin' there.  Just some quick thoughts. 

Yeah, I know... WHY okay in playground and not at home?  Not sure about that one.  Sorry.

In fact, you might want to try what Jerome suggested... forcing the ribbon's UVs to whatever you need them to be.  According to console.log(plane.getTotalVertices());  ... you'll need 12 vector2's.  You are working at low-level geometry, so manually setting UVs isn't so unusual, I suspect.  Also, you could build a tasty little piece of math... that "traverses" around the 12 vector2 UV locations... and sets them for you.

Each Vector2 value... will be a float between 0 and 1, inclusive.  As you may know, each value is a percentage, in a way.  Values like new BABYLON.Vector2(.333, .145) indicate that at THIS vertex, a texture should be "mapped" 33% along its X axis, and 14.5% up its Y axis.  (Textures start with 0,0 in lower left corner, and 1,1 in upper right.)

Keep in mind... "the big 4 texture adjusters"...  texture.uOffset (and vOffset), texture.uAng (and vAng and wAng), texture.uScale (and vScale), and texture.wrapU (and wrapV).  All of those can affect your texture-positioning "stuff".    (sorry if you already knew this)

You are trying to make your rocks... BLOW UP GOOD, aren't ya?    Lots of chunks flying?  Bless you!  I love stuff that blows-up good.  heh.  You could use a particleSystem explosion, too (fooling the player).  But, you'll need to use the SPS particle system ... to get some ground-tumbling (hit spacebar in that demo... to explode).  Party on.

 

[kaitek666]

@jerome @Wingnut

Am I doing something wrong?

var plane = BABYLON.MeshBuilder.CreateRibbon("ribbon", {pathArray: myPaths, sideOrientation: BABYLON.Mesh.DOUBLESIDE,
updatable: true, closeArray: true, /* */uvs: BABYLON.Vector2(0.3,0.3)/* */}, scene);

I might not understand how to use uvs or it doesn't work. I tried several values between 0 and 1..

 

 

Also, interesting enough, I noticed that my ribbons actually ARE textured but.. from the wrong side..? Take a look.

 

I can't tell if you can notice, but you can see a texture from the inside (when I wireframed other corner). Second image (a bit rotated) to understand geometry better.

 

[jerome]

the parameter uvs expects a flat array of floats  Vector2: a pair (u and v) per ribbon vertex actually

So if your ribbon has 2 paths of 6 vertices, the uvs array is populated with 2 (u and v) x 6 ( vertices) x 2 (paths) Vector2 floats

the first Vector2 is the u and v value of the first vertex of the first path, the second one the u and v values of the second vertex of the first path, and so on.

 

[EDIT] Vector2 of course, not floats.

[kaitek666]

var uvs = [
[
	[
		new BABYLON.Vector2(0.3,0.3),
		new BABYLON.Vector2(0.3,0.3),
	],
	[
		new BABYLON.Vector2(0.3,0.3),
		new BABYLON.Vector2(0.3,0.3),
	]

],
[
	[
		new BABYLON.Vector2(0.3,0.3),
		new BABYLON.Vector2(0.3,0.3),
	],
	[
		new BABYLON.Vector2(0.3,0.3),
		new BABYLON.Vector2(0.3,0.3),
	]

],
[
	[
		new BABYLON.Vector2(0.3,0.3),
		new BABYLON.Vector2(0.3,0.3),
	],
	[
		new BABYLON.Vector2(0.3,0.3),
		new BABYLON.Vector2(0.3,0.3),
	]

]
];

var plane = BABYLON.MeshBuilder.CreateRibbon("ribbon", {pathArray: myPaths,
sideOrientation: BABYLON.Mesh.DOUBLESIDE, updatable: true, closeArray: true, uvs: uvs}, scene);

Did I understand it right @jerome? If so, it's not working.

[jerome]

it's not an array of arrays of Vector2 but a simple array of successive Vector2.

Just remove the internal arrays and set all your Vector2 one after the other, this should work.

var uvs = [ vec2-1, vec2-2, vec2-3, ... vec2-n]

[kaitek666]

@jerome same result. No matter what values I give it, nothing changes.. :/

var uvs = [
  new BABYLON.Vector2(1, 1),
  new BABYLON.Vector2(1, 1),
  new BABYLON.Vector2(1, 1),
  new BABYLON.Vector2(1, 1),
  new BABYLON.Vector2(1, 1),
  new BABYLON.Vector2(1, 1),
  new BABYLON.Vector2(1, 1),
  new BABYLON.Vector2(1, 1),
  new BABYLON.Vector2(1, 1),
  new BABYLON.Vector2(1, 1),
  new BABYLON.Vector2(1, 1),
  new BABYLON.Vector2(1, 1),
]

var plane = BABYLON.MeshBuilder.CreateRibbon("ribbon", {pathArray: myPaths,
sideOrientation: BABYLON.Mesh.DOUBLESIDE, updatable: true, closeArray: true, uvs: uvs}, scene);

I need some other ideas. What may be ruining my poor ribbons?!

[jerome]

how to use it (random values here) : http://www.babylonjs-playground.com/#21VLCN#9

[kaitek666]

16 minutes ago, jerome said:

how to use it (random values here) : http://www.babylonjs-playground.com/#21VLCN#9

No change after applying code.

[Wingnut]

Hi guys!

kaitek (kajtek?)...being good-at manually setting UVs ... takes some time and practice.  It is best done with ONLY ONE ribbon displayed, NOT flatshaded, NOT backFaceCulled.

Here is another version of K's corner playground.   http://www.babylonjs-playground.com/#21VLCN#14

It is set FRONT sided... and has 6 verts in that mode.  (12 if set DOUBLE-sided).

In the #14 playground above, I used a different picture and built some DEMO uvs, but since I hate manually setting UVs... I didn't try to adjust those... much.  A little, but I suck at it. 

Also, I turned-on boxify(), a little vertex-identifier func I once made. Note: This version of boxify() is a specially-adjusted one for this mesh/demo.   Adding more vertices to our corner mesh... will make boxify() accidentally overlay some blue boxes atop one another, blocking some box numbers from being seen.  Anyway, moving on...

You can set FRONT sided or DOUBLE sided, and the blue boxes will tell which UV is used at which vertex.  In other words, the 0th UV is used at the vert at blue box #0, first UV at box #1, second UV at box #2, etc etc.  Perhaps the blue boxes will help us understand things better.  Not sure.  Again, each UV is a 2-value Vector2.

Also changed to ArcRotateCam.  Remember that you can "slew-around" the target of an arcRotate cam... by control-lefMouseButton dragging.  MouseWheel zooms.  These features are handy for close mesh examining.

I'm learning WITH YOU, K.  I'm not very good at these "plotting" things, but perhaps with enough experimenting, we can BOTH learn this, eh?   

I DID try to get the church picture placed upright on both facets of the corner mesh (plane)... using the first 6 UVs (lines 31-37).  I used values that I THOUGHT would make the picture be upright, and top-to-bottom fitting  (while viewing the FRONT sides of the facets).

I didn't do so well.  On right frontside facet (facing camera), the church building is sideways, and has an offset issue.  On the left frontside facet... I got stripes.  Darned UVs.

Still testing - more experiments ahead.  Feel free to make more playgrounds and show things you learn, K and others.  Thx!

Note:  Pro plotters might THINK that these box number sequences are indicating a clockwise plotting of the right facet, and a COUNTER-clockwise plotting of the left facet (backside vs. frontside).  But clockwise/counter ONLY pertain-to INDICES sequence/order.  My boxify() func is ONLY using vertex POSITIONS order/sequence.  The box numbers do not indicate indices order whatsoever.

[jerome]

of you set the ribbon as flat shadded, it has more vertices and indices, that why it doesn't work with the limit 8 

[Wingnut]

Ahh, 8 limit.  nod.  thx.  In doublesided, this mesh is 12.  hmm.

Here's another front-side test.  I fought-with the UV values some more, and got the LEFT facet looking good... picture upright, and forced the offset/overlap off the top of the mesh (using.7, .3, .73 values).  It is about as "squared-up" as can be, I think. (using the church pic).

So, now, you realize what you must do, right Kaitek?  Yep... you need to make a special image... CUSTOM for this corner shape... and keep my 6 UVs just as they are.  Start with rows of bricks, perhaps.   The left facet looks good, so start by painting rows of bricks across THAT section of the church picture.  Keep them parallel to the foundation of the church, of course.

On the RIGHT facet... do the same... except this time... your rows of bricks must be VERTICAL... paralleling the vertical walls of the church and nearby buildings.  In the finished graphic, your vertical rows and horizontal rows... will meet in a 45 degree line, and their rows should "line up".  If everything goes right, you'll have half of a brick pyramid... and it should look pretty good.  Good corner alignment of brick rows.

Later, you will use this same image template... to do your rock textures for corners... the same way.

Wow, huh?  Make the lower left area of a picture... normal, and upper right... rotated 90 degrees, and separate the two... at a diagonal intersection.

Unreal.  There's got to be an easier way.    Two separate triangles (parented together) with two separate materials?  Then use "the big 4" to adjust the texture on the right triangle?  *nod*.  But, the way the ribbon is currently mapping the picture... is normal, I think.  Maybe. 

[kaitek666]

I've spent really much time in playground trying to understand uvs. I understood them to a level to understand, that this is not a problem in my case.

uvs might come in handy, but I cannot put ANY change into my ribbons. Interesting enough, if a verticle of a ribbon moves in both axis at one time, this happens. If I move points from one point and change only one axis, it doesn't happen.

For example, if I make 2 points:
(0,0,0), (25,0,0)
and move them to:
(0,25,0), (25,25,0)
Texture is shown.

But when I make 2 points:
(0,0,0), (25,0,0)
and move them to:
(0,25,0), (25,25,25)
Texture is a solid color, because I move in more than one axis.

Interesting, isn't it? I elaborated a lot of cases to make sure of my theory. It appears to be true.

I need more ideas, uvs is a good idea, but not a solution..

PS. @Wingnut I like how you called me "Kajtek". It's actualy my real name. How did you know?

[kaitek666]

I finally found a workaround!!!

The first step was creating a simple ribbon, just a square.
I give it a flag updatable as true.
I update my ribbon using new set of points, the good ones.

...and my texture is being displayed correctly!! This is not a solution, just a weird workaround. I'm so happy it worked!!

Thanks @Wingnut and @jerome for much awesome support. You guys are amazing =)

Thanks!

 

Here's a result:

I still need to scale and translate textures on it. It's working tho!!!

[Wingnut]

  You signed your first post... with 'kajtek'... just before the pictures. 

Yeah, interesting, definitely.  I was too scared to move the points around. 

http://www.babylonjs-playground.com/#21VLCN#16

The massive code at the top of THAT playground... is all the code that makes ribbons... behind the scenes.

I hijacked it into the playground... where... a guy can hack on it... right there... in front of the dog and everyone.

Feel like "hacking"?  There ya go.  Re-write the ribbon generator to do exactly what is wanted.    I'll standby with first aid for your inevitable brain tumor.  heh.

Ahh, you got it.  YAY!  Well done.

[Wingnut]

Hey @kaitek666... in case you care, @BangTao and I continued studying your "corners" UV mapping stuff.

Visit at will... it all started here... http://www.html5gamedevs.com/topic/29667-particles-circle-effect/?do=findComment&comment=170734

We totally de-railed (made off-topic) Pouet's thread... and went on an adventure... that YOU started.    Perhaps you want to "read along". 

I hope your project is going well.  Party on.

[kaitek666]

Thanks a lot, @Wingnut! I still needed to understand UVs better, because of displacements I couldn't get along with. I will read and (if I'm brave and clever enough ) reply to this thread. 

Cheers, buddy!