UV Mapping a BABYLON Cylinder Mesh

[dystop1a]

Hi Everyone! My first post here

 

Is there functionality when creating a Babylon Cylinder Mesh to add UV Mapping? for instance I am creating a cylinder object and I want to map a texture to both faces of the cylinder for example can I map a texture like this (or separate image files). 

 

 

Directly to a BABYLON Cylinder Mesh: 

cylinder = BABYLON.Mesh.CreateCylinder("cylinder1", 0.2, 3, 3, 100, 1, scene, false);

Or will I need to create a Blender Model then export out a Babylon Mesh, reason why I want to keep with the builtin Mesh Cylinder lighting and fps speeds seem smoother and faster then importing a external .babylon/.obj mesh. 

 

I am sorry if this has been answered I have been searching for hours without any luck.

[GameMonetize]

Hello

 

you can use MeshBuilder.CreateCylinder to get more powerful options:

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

 

Doc: http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter

[jerome]

or this explanation also : http://www.html5gamedevs.com/topic/17945-creating-a-closed-slice-of-a-cylinder/?p=106379

I should write a doc for this new parameter : hasRings

 

@dystop : don't care about rings, arc, etc

just make a cylinder with a faceUV parameter : 

faceUV[0] is the bottom cap

faceUV[1] is the tubular surface

faceUV[2] is the top cap

 

so set a vector4 for each one : (u1,v1,  u2, v2)

u1 v1 = uvs of the left bottom point of the part of the image you want to clip from your texture

u2 v2 = uvs of the right upper point

[dystop1a]

On 11/26/2015 at 9:23 PM, Deltakosh said:

Hello

you can use MeshBuilder.CreateCylinder to get more powerful options:

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

Doc: http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter

 

On 11/26/2015 at 11:34 PM, jerome said:

or this explanation also : http://www.html5gamedevs.com/topic/17945-creating-a-closed-slice-of-a-cylinder/?p=106379

I should write a doc for this new parameter : hasRings

 

@dystop : don't care about rings, arc, etc

just make a cylinder with a faceUV parameter : 

faceUV[0] is the bottom cap

faceUV[1] is the tubular surface

faceUV[2] is the top cap

 

so set a vector4 for each one : (u1,v1,  u2, v2)

u1 v1 = uvs of the left bottom point of the part of the image you want to clip from your texture

u2 v2 = uvs of the right upper point

Thank you so much guys! exactly what I was after. 

I have been reading through the documentation (I am new to Babylon JS so bit confused here). All help is greatly appreciated. 

Can you assign a Texture directly into the uvFace parameter array (instead of using sprite sheet mapping) or is there another method? I would prefer to use separate textures for each segment. 

var materialface = new BABYLON.StandardMaterial("texture6", scene);materialface.diffuseTexture = new BABYLON.Texture("textures/misc.jpg", scene);  var faceUV = [materialface,  // bottom capmaterialface, // tube ring 1materialface // top cap];

I modified a playground here: 

http://playground.babylonjs.com/#T40FK#12

[jerome]

No you can't.

It needs a single texture for the material. Not necesseraly a sprite sheet actually.

Then you set which part of the texture you want on each mesh surface with faceUV.

 

here's an example : http://playground.babylonjs.com/#T40FK#13

 

the first surface on the texture map is set to (0,0,  0.2, 0.2)

the second to (0,0.3, 1, 0.8)

the third to (0,0.8,  0.2, 1)

 

obviously, these values haven't any real sense, set your own according to your image

[dystop1a]

@jerome - thanks for letting me know! thats a pity you can't.. (doing it this way is going to be very confusing). 

Thanks for the link, I have started looking at these vector4 coordinates what are they calculated in? (or how can I translate that to pixels). 

for example: 0, 0, 1, 1 selects the entire image. 

uv[0] = new BABYLON.Vector4(0, 0, 1, 1); //botuv[1] = new BABYLON.Vector4(0, 0, 0, 0); //mid uv[2] = new BABYLON.Vector4(0, 0, 1, 1); //top

I did see a example that used MultiMaterial so I was trying to apply it to a cylinder without luck - http://playground.babylonjs.com/#T40FK#15

[jerome]

ok, it's simple

u is the ratio of the image width, between 0 and 1

V is the ratio of the image height, between 0 and 1

 

(0,0) is the left lower corner of the image, (1, 1) is the upper right corner.

 

To set a part of the global image to a surface, you just define two corners (bottom left and upper right) u1v1 and u2v2... these two pairs for a surface are your Vector4 : (u1, v1, u2, v2)

 

example : if you want to crop a square in the left bottom (0, 0) of the global image, with its upper right bottom located at 20% of the total texture width and 30% of the total texture height, you get : (0,0, 0.2, 0.3)

 

if you know the positions in pixel, just divide by the total number of pixels on the width and on the height

 

u = pixel_Pos_x / widthNbPixels

v = pixel_Pos_y / heightNbPixels

[jerome]

here, you've got an explanation for the box, but it's exactly the same for the cylinder : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors

 

only the number of faces change

[dystop1a]

ok, it's simple

u is the ratio of the image width, between 0 and 1

V is the ratio of the image height, between 0 and 1

 

(0,0) is the left lower corner of the image, (1, 1) is the upper right corner.

 

To set a part of the global image to a surface, you just define two corners (bottom left and upper right) u1v1 and u2v2... these two pairs for a surface are your Vector4 : (u1, v1, u2, v2)

 

example : if you want to crop a square in the left bottom (0, 0) of the global image, with its upper right bottom located at 20% of the total texture width and 30% of the total texture height, you get : (0,0, 0.2, 0.3)

 

if you know the positions in pixel, just divide by the total number of pixels on the width and on the height

 

u = pixel_Pos_x / widthNbPixels

v = pixel_Pos_y / heightNbPixels

 

 

here, you've got an explanation for the box, but it's exactly the same for the cylinder : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors

 

only the number of faces change

 

Many thanks Jerome!!! I finally....got it working!   thanks for your help. its confusing at first but thanks to your great information above it helped me solve this. 

 

If anyone else is looking to add multiple textures to a Babylon Cylinder Mesh, Make a Square image (whatever size needed 500x500 etc). Split it in 4 segments (four 250x250 parts) then add the graphics to the two lower segments for the top/bot textures.. Please note I am not using a middle texture (but theres room to add it to the top half of the texture map). 

uv[0] = new BABYLON.Vector4(1,0, .5, .5); //botuv[1] = new BABYLON.Vector4(0, 0, 0, 0); //miduv[2] = new BABYLON.Vector4(0,0, .5, .5); //top 

[bentwonk]

What if the cylinder is really a hexagon (tessellation, 6) is there any way to specify new UV for each of the 6 side faces?

[jerome]

Nope because the cylinder side faces share the same vertices.

[hunts]

@dystop1a if I can recollect you used css3 with javascript to build a 3D scene?

[HiteshSahu]

Use https://www.babylonjs-playground.com/#VA2AC#3

with this as UV Map