Is it possible to tile a texture across the caps of an extrusion (solved)

[JohnK]

Trying to help this topic

The problem is scaling texture on the caps of an extrusion.

What is needed is something like this on the caps

what I get is

http://www.babylonjs-playground.com/#TF811Y#5

any suggestions

 

[NasimiAsl]

you most correct the uv 

but we have  shader Builder solution 

http://www.babylonjs-playground.com/#TF811Y#6

 

[JohnK]

@NasimiAsl magic

[JohnK]

@jerome Sorry to be pinging you twice in a couple of days but I am trying to solve this issue for a newbie, lhx880619 (see first post) and have NasimiAsl's brilliant magic solution but was wondering if a muggle solution was better for lhx880619. Do you have one?

[NasimiAsl]

you can set your uv when you wanna crate extrude face (in face top and bottom )

you notic just vertex position (x and z ) and calculate uv with that uv.x = position.x and uv.y = position.z

* need change Extrude geometry maker function

 

[JohnK]

@NasimiAslI think both your solutions are amazing and if it was my problem I would use your shaderBuilder solution. However this newbie, lhx880619, is trying to transition from three.js where he can do what he needs in three simple code lines so I do not think he is ready for delving into vertexData.  However it looks like the only way would be a re-write of the extrusion cap code so perhaps there is not a simple way. I will show lhx880619 your solution and see what he says.

[jerome]

mmmh... currently the cap the computed from the model shape barycenter what is fast (especially when the mesh is dynamically morphed) but doesn't fit the needs for people just wanting a fixed mesh and more versatility in the cap management.

This means I will have to implement something like a staticCap feature, a cap computed from a triangulation algo with some predictible positions, so uvs, if possible.

For now,  the capping algo can't do this unfortunately. The best choices are either to use the powerful shaderBuilder, either to design your own cap from a mesh appart, then to merge it to a un-capped extrusion

[Wingnut]

Wingnut has a dumb idea, as usual.  Use a decal.  Unfortunately, decals are not really dynamically updatable, and they are square/rect-only, at this point.

If a decal could be shaped by the shape data of an extrudeShape, we might have a chance.  But decals are a clipping festival inside their code, and I'm not sure if they can handle being ANY shape with ANY number of shape-points.  They would HAVE TO match shape and size perfectly, or else they might wrap onto sides of mesh, too.

John... this reminds us of Neshville, again, eh?  (No, NOT the country music town in Tennessee USA). Nesh 108. Overhead cam, black background, screen-grab RTT frame, send it thru Nesh's image thickener, use as cap. 

[Wingy slides a texture into the gel-frame of a spotlight, and tries to use this "slide projector" to project an image onto a cap, but then laughs at himself.   Then he accidentally stares into the spotlight and burns his retinas.] 

[JohnK]

@jerome, @NasimiAsl and @Wingnut as usual I miss the obvious and get tied in knots. There is a simple solution that I have used before and completely forgotten about and that is PolygonMeshBuilder. Mind you it is easily forgotten as the documentation is very little, just the class. However I am working on this. Also working on a possible PR for MeshBuilder that includes MeshBuilder.CreatePolygon and MeshBuilder.ExtrudePolygon. Both will use PolygonMeshBuilder under the hood but will look more like the normal methods of building a mesh. Should a PR be OK then will of course do the documentation.

PG using PolygonMeshBuilder is http://www.babylonjs-playground.com/#PTTMVI

[NasimiAsl]

i think we need Wall and some stair stuff too

[Wingnut]

Hi guys.  Yeah, that's a good idea... IF it can handle the birdData.

http://www.babylonjs-playground.com/#165IV6#36

The bird data FROM the polygonMeshBuilder demo... is the perfect demo data for capping tests... because of its "back-bays" (like an overhead view of a lake with lots of bays).  There's surely a more-tech-correct name for back-bays, though.  heh

I think... writing meshBuilder code that can "cap the bird"... is no small (bird) feat. If I were you, I would keep a medical team nearby... while you work on this.   

MeshBuilder.CreatePolygon + MeshBuilder.ExtrudePolygon == ExtrudeShape, yes?  *shrug*

It almost seems like it needs some kind of AI "mesh crawler"... so that the wagon-wheel-style cap.... can be avoided. 

Folks might tend to say... in a knee-jerk reaction... "Wingnut, we're talking about UV mapping on the cap, not capping styles".  But those two subjects are intimately co-mingled (quite related), I think.

If you can cap the bird (with re-usable code), John... it's a steak dinner on me. 

[JohnK]

9 hours ago, Wingnut said:

MeshBuilder.CreatePolygon + MeshBuilder.ExtrudePolygon == ExtrudeShape, yes?  *shrug*

No quite, MeshBuilder.ExtrudePolygon by itself will be a limited form of extrusion. ExtrudeShape allows you to do rotation and scaling along the extrusion path. ExtrudePolygon will only allow a linear extrusion normal to the polygon by a set depth, currently no texture on "bottom cap" (no drawing picture of a bottom cap please). ExtrudePolygon will not use ExtrudeShape but just another way of calling PolygonMeshBuilder with a depth parameter added. CreatePolygon will call PolygonMeshBuilder without a depth parameter.  The idea is if they look like the usual creation functions they might get more use but they are no more than a call to existing code.

In meantime have added PolygonMeshBuilder documentation

Hey Wingy am I getting close to the steak dinner https://www.babylonjs-playground.com/#1ZAXRO#3

EDIT Texture on bottom was a lighting problem (adapting another PG and forgot to check lighting dhhh ) https://www.babylonjs-playground.com/#1ZAXRO#5

[Wingnut]

Oh man, you got it, JK!  Holy crap... well done.  Check out the wireframe of that cap. 

How the hell... hmm.  What a cap!  You're a God, John!

Well shut my mouth wide open!  Coooooooooool.  It's done with code, right? 

Congrats, ya won, and ya did it in short-order!  Amazing.  Drop me a PM with a PayPal-allowed email address or mailing address... whatever the best method for you.

Can your methods help Nesh108 do his thing... with less code?

[JohnK]

I cannot really take the credit all I did was re-discover PolyMeshBuilder which uses the earcut function and as it says in babylon.max.js

// All the credit goes to this project and the guy who's behind it https://github.com/mapbox/earcut
// Huge respect for a such great lib. 
// Earcut license:
// Copyright (c) 2016, Mapbox

Earcut is the function that does all the hard work of triangulating a polygon

[Wingnut]

Fantastic.  Ya know... being honorable and forthright about code origins... gets you FOUR steak dinners!     These days, it seems that those characteristics are more rare than proper-working earcut code. 

I'm pinging-in @Nesh108 to make sure he sees this.

All this stuff is good good good!  Exciting and useful new tools!

Ya know those foam rubber #1 hand-things?  Well, a guy could make a website... that accepts these extruded models (and a handful of money) as inputs, and produces one of them foam rubber thingies... as output. 

Let's see... texture.convertToFlatTexturedFoamThing(scale).  We might need some helper funcs, too, like mixMonomers() and foamCutter.onSuccess, etc. 

[jerome]

Earcut is a third party library that was integrated into BJS at the time Canvas2d was released, so it's (and should be) responsible for all the triangulation processes : https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.earcut.ts

It's soon the time I come back to some BJS dev, I think, as the list of requests for features and other fixes about what I provided so far gets longer and longer ;-)

[Nesh108]

@Wingnut thanks for the ping! And yeah, we should totally create rubberhandify.com  

@JohnK awww that is a pretty sweet solution. Too bad I've finished my little project already

[Wingnut]

@Nesh108, when you're a BJS inventor, you're NEVER finished.    We just want to steal your edge detector numbers and feed them into the polywollydoodle() func that John is torturing, and see what happens.  PolyMeshBuilder might trim some code from your thingy, which looked pretty fat, last time I looked. 

How about THIS image?

Hey Mickey, you're so fine... etc.  First person to deliver the shape data for that pic... gets one of John's steak dinners!  errr... no. 

Wha-da-ya-think?  No more than 4k of shape data?  Too much?  Not enough?  hmm.

[Nesh108]

@Wingnut Something like this?

 

[Wingnut]

hehe.  Cooooool!  How many shape points is that?  Didja happen to notice?

I'm wandering off-topic, aren't I?  This thread was about tiling on the caps.  Sorry guys.