dystop1a

UV Mapping a BABYLON Cylinder Mesh

Recommended Posts

Hi Everyone! My first post here :D

 

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

 

cylinderunwrap.jpg

 

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. :(

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
On 11/26/2015 at 9:23 PM, Deltakosh said:

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!  :lol: 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 

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.