Jump to content

How To Tile Textures Perfectly?


Recommended Posts

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:


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.



Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

  • 1 year later...

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.


Link to comment
Share on other sites

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

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

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...