How To Tile Textures Perfectly?

[Rolento]

Hi All

I am experimenting with textures and am having issues with tiling.  I have created several complex (well not that compex) shapes that I am wanting to apply a tiled texture to.  However, when I apply the texture it appears warped (i.e. stretched) which makes it appear really bad.  What I want is for the texture to be applied/tiled using a predefined aspect ratio therefore ensuring the rendered textures appears clear and crisp. 

NOTE: I am aware of the uScale and vScale properties for a material - I can successfully experiment and configure their values to get the desired effect.  However, this requires lots of tweaking (experimentation) and the result is not perfect, furthermore this is not going to work for me because the shapes in my scene will be added at runtime (hence I need an algorithm to set the uScale and vScale values).

Here is a code snipplet I have created that illustrates the problem:

http://www.babylonjs-playground.com/#RF9W9#398

If you uncomment lines 102 and 103 the rendition looks good - but I need to calculate these field values at runtime.  If anyone can help with this issue I would appreciate it.

Thanks

Rolento

[jerome]

have a look at the geometry you built : http://www.babylonjs-playground.com/#RF9W9#399

u will be wrapped on the width points: the whole shape to be extruded contour

v will be wrapped on the length points : the whotle path of extrusion

and you know these values because they are your own : there are 1000 points on the path (v) and something like 66 points in the shape to be extruded (u)

so it's your choice then to select the number of repetition that you want knowing this geometry and what is on the texture image... by default, the texture is stretched along the mesh geometry (so v = 1)

for instance, your path has a length of 200 (z = 1000 /5), you could have chosen the v value of 1000 / 200 = 5 instead of 10 to keep a "good" (whatever it means) ratio : http://www.babylonjs-playground.com/#RF9W9#400

the shape contour is about 15 * PI + 2 * 15 - PI = 74 (almost), so you could have chosen u = 66 / 74 for instance : http://www.babylonjs-playground.com/#RF9W9#403

or twice this value : http://www.babylonjs-playground.com/#RF9W9#404  (repeated twice : one time on the circle, one time on the above plane)

actually if your image is a square szed 1x1, (or a rectangle sized, say, 2x1) and you know both your mesh size and ratio (here 74 x 200) and geometry (66x1000 points), you can choose how to keep or not the initial image ratio applied on your mesh

[EDIT] even better, by keeping the ratio :

the image is a square (1/1), the mesh has a size ratio of 200 / 74 = 2.7

So multiply the u by 2.7 to get back the same ratio : http://www.babylonjs-playground.com/#RF9W9#405

[Rolento]

Hi Jerome

Thanks for the super fast response.  The calculations that you defined are a great help - and TBH I was thinking that this manual measuring of the mesh was what would need to be done to correctly define the uScale and vScale ratios.

> the shape contour is about 15 * PI + 2 * 15 - PI = 74 (almost)

The calculation you defined above is what I was trying to avoid having to do - i.e. I was "hoping" there would be a function that would automatically measure the perimeter mesh length (withful thinking huh)  

The reason I was hoping for the aforementioned function is that if for example I was writing a 3D asteroids game (e.g. Super Startdust) I would want each asteroid to have a random size and shape.  If in this situation I wanted to apply a texture/bump map to the randm mesh created it would be a bit of a nightmare for me  create an algorithm that accurately measures the shape created.  Hence in this situation I guess I would have to create an formula that approximates what the uScale and vScale ratios should be (i.e. no easy way to calculate exact values) - right?

So in summary the problem would be best rsolved using an algorithm that has the ability to calculate the uScale/vScale at runtime when the random object (e.g. in this example a 3D asteroid) is created.  Can you expain how you would address this challenge (i.e. randomly generated meshes - or very complex meshes that would be difficult to measure)?  As I understand the approach you kindly provided in your previous message requires pre-runtime measurements for calculations of the u/v scale.

Thanks in advance...

[jerome]

There's no objective good or bad uScaling ... it's only a user choice. That's why there's no predefined custom uv settings in a mesh geometry, but the wrapping of the whole texture around the whole mesh by default : your shape is 1000 points over 200 units long, mine could be 3 points long over 0.2 units, so your uScaling wouldn't fit my shape.

That said, as you manage how your mesh is designed, you know its geometry, so you know its dimensions on what you intend to apply the texture.

For instance, you could implement such a little function to compute any path length (or perimeter) from successive points (vector3) in an array :

// pseudo JS to show parameter type
var pathLength = function(points: Vector3[]) {
    var current = BABYLON.Vector3.Zero();
    var totalLength = 0.0;
    for (var i = 0; i < points.length - 1; i++) {
        points[i].subtractToRef(points[i + 1], current);  
        totalLength += current.length();
    }
    return totalLength;
}

This would have computed, for example, the real length of your shape2. (don't forget to add at the end of the array, the first point of the array, if the shape is closed)

[Rolento]

Hi Jerome

Much appreciated, this really helps.  Thanks!

[oschakravarthi]

Hi friends,

I have been struggling to find a solution for the same problem. Can you please help me?

Thanks in advance.

,

 

 

[bghgary]

@oschakravarthi It's hard to help without knowing the specifics of your problem. Can you provide more information or better yet a playground of the problem you are having?

[oschakravarthi]

Hi @bghgary , Just now I figured out the solution.  My actual problem is, when I apply an image texture to a wall,  the image is stretching which is not proper in a real case. A marble/granite tile should not stretch. It should be repeated.

The below statement has fixed the issue. 

myTexture.coordinatesIndex = 1; 

Loving BabylonJS. A super framework. I am new to javascript so facing struggles for everything. Choosing an IDE,  (I could not find any IDE with actual intellisense and auto-completion),3D concepts etc. Thank God we are getting amazing support from people like you. 

I am developing an application where the user applies textures to his house in VR mode. He has to choose from a huge set of marble and granite stones. We have to show the thumbnails of those tiles to the user so that he can pick one from them and apply. I could not find any good UI controls (like tree view, grid, tab panel etc) which can be displayed in VR mode. Any suggestions?

 

Thanks in advance.

 

[JohnK]

2 hours ago, oschakravarthi said:

I could not find any good UI controls (like tree view, grid, tab panel etc) which can be displayed in VR mode. Any suggestions?

Not done anything with VR but I believe the Babylon GUI extension should do what you need https://docs.microsoft.com/en-us/windows/uwp/get-started/adding-webvr-to-a-babylonjs-game

[bghgary]

2 hours ago, oschakravarthi said:

Choosing an IDE,  (I could not find any IDE with actual intellisense and auto-completion)

I would recommend vs-code for the editor. If you reference the d.ts files, you should get intellisense. Following the typescript instructions from this might help also.