Fixing texture repeat

[luka_friend]

Hi!

I am a newbie to babylon js, and I already have problems. I have loaded textures to my object (stick/bar)  and problem is when I resize my object,  texture resizes too. I tried to apply texture after scaling object, but texture resizes anyway.  I really don't want to create a new texture for every object just because its size changes. 

So, my questions are: 

Is there a way in babylon js to set its size to be fixed?

Or is there a way to set texture to repeat itself rather than scale itself to wrap the object.

 

 

 

Image is attached (mind the upper bar is longer and its texture is scaled <-- that's my problem).

[RaananW]

Hi,

Check the material tutorial here https://github.com/BabylonJS/Babylon.js/wiki/04-Materials , search for "more about textures"

uScale and vScale is what you are looking for, I guess.

[julien-moreau]

 Hello Luka_friend

 

Considering you have only a diffuse texture, juste load the texture and set uScale / vScale, create a standard material and apply the material to your bars.

Just play with uScale and vScale to see the effect

var myTexture = new BABYLON.Texture(path, scene);myTexture.uScale = myScale;myTexture.vScale = myScale2;var myMaterial = new BABYLON.StandardMaterial('barMaterial', scene)myMaterial.diffuseTexture = myTexture;myBar1.material = myBar2.material = myMaterial;

Bye

[luka_friend]

Ok. First of all I appologise for replying so long. I have a lot of work and little free time for by Babylon js project. 

 

I have tried both of your solutions, and the problem is still the same. The texture always resizes, no matter what I do (yes I set uScale/vScale). 

This time I am posting my code if maybe you see my problem in code. 

 

Code for creating models and applying textures:

for (var i = 0; i < number1; i++) {            var cylinder = BABYLON.Mesh.CreateCylinder("rebarGrayZAxis" + i, length, this.diameter, this.diameter, this.subdivs, this.scene, false);            cylinder.material = this.textures['RebarGray'];    // APPLYING MY TEXTURE            cylinder.position.z = z1;            cylinder.position.y = y1;            cylinder.position.x = x1 + (i * divisions);            cylinder.rotation.x = Math.PI / 2;        }        divisions = length / number2;        for (var i = 0; i < number2; i++) {            // Rebar name, height, diamTop, diamBottom, tessellation, [optional height subdivs], scene, updatable            var cylinder = BABYLON.Mesh.CreateCylinder("rebarGrayXAxis" + i, width, this.diameter, this.diameter, this.subdivs, this.scene, false);            cylinder.material = this.textures['RebarGray'];  APPLYING MY TEXTURE ()            cylinder.position.z = z2;            cylinder.position.y = y2;            cylinder.position.z = z2 + (i * divisions);            cylinder.rotation.x = Math.PI / 2;            cylinder.rotation.y = Math.PI / 2;        }

And my code for texture load - init:

    var myTexture = new BABYLON.Texture("Images/Textures/rebar.jpg", scene);    myTexture.uScale = 2.0;    myTexture.vScale = 2.0;    textures['Gray'] = new BABYLON.StandardMaterial('barMaterial', scene)    textures['Gray'].diffuseTexture = myTexture;

[RaananW]

Hi Luka,

 

would be great to see this demo in babylon's playground, this way we can help you better with the issue.  Go here - http://www.babylonjs-playground.com/ , create the scene and press save. The paste the url here and we can work on that together.

 

I don't see you scaling the objects, I assume the different is in the way the mesh is built. What is the difference between length and width ? This seems to be the only difference between the two cylinder types you are creating.

[luka_friend]

Ok. Here is my example URL: http://www.babylonjs-playground.com/#1EJRYH#2

 

I tried to add my own textures but I didn't know how to upload them, so I just used texture of the tree from official Babylon js website tutorial.  

 

You can see the difference in the size of leaves. 

 

And for Raananw: Yes you assumed correctly. What I meant by resizing was setting higher value (length) for 2nd bar the the first one - I created second bar longer than first one (there was no scaling afterward). I appologise for my misuse of words.

[RaananW]

Hi Luka,

 

http://www.babylonjs-playground.com/#1EJRYH#4

 

This is a simple hack (not really "clean" I might add) to achieve what you wanted. if you are scaling it is much easier - you know exactly the factor you should scale your v(or u) values with.

And no need to apologize, it is simply about understanding what you mean :-)

[luka_friend]

Thank you, I really appreciate quick response, but your solution implies that I need 2 standard materials (or in another words each new materal for  bar with different length). So if I want to have 40 bars with different lengths, this would meant 40 new standard materials.   And this is a lot of unnecessary overload of code(not mentioning the additional code if user want's copy bars and then resize them).

 

But if you have any solution (even crazy one) about how to achieve having only 1 standard material for diffrent bar lengths, I am open for ideas.

 

Thanks

[julien-moreau]

You can implement a function that computes a planar mapping algorithm on your object (texture coordinates). Then, each mesh will have the same texture coordinates. Like it is explained here : http://wiki.secondlife.com/wiki/Video_Tutorial/Planar_texture_mapping

 

I think medium crazy ^^

[luka_friend]

Thanks I will try your suggestion.

[GameMonetize]

bjs supports planar mapping and texture projection btw

[julien-moreau]

Oh god, yes !

Can you try myTexture.coordinatesMode = BABYLON.Texture.PLANAR_MODE; ?

[luka_friend]

Oh god, yes !

Can you try myTexture.coordinatesMode = BABYLON.Texture.PLANAR_MODE; ?

Still the same problem. Didn't work!

[ozRocker]

Did anyone ever get this working? myTexture.coordinatesMode = BABYLON.Texture.PLANAR_MODE doesn't work for me either.  It has no effect.

[NasimiAsl]

http://www.babylonjs-playground.com/#1EJRYH#6

that is a solution like planar ( i don't know why that not work )  but this is alternative solution

[ozRocker]

53 minutes ago, NasimiAsl said:

http://www.babylonjs-playground.com/#1EJRYH#6

that is a solution like planar ( i don't know why that not work )  but this is alternative solution

Strange...I can't get it to work.  I'm using the latest babylon 3.0 beta (I just re-downloaded the JS file ) and I get an error "BABYLON.CustomMaterial is not a constructor"

[NasimiAsl]

maybe that is cache ? clear your browsers data

[ozRocker]

16 minutes ago, NasimiAsl said:

maybe that is cache ? clear your browsers data

Yes, my browser cache is cleared.  console is saying:

BJS - [17:00:43]: Babylon.js engine (v3.0-beta) launched
Uncaught TypeError: BABYLON.CustomMaterial is not a constructor

 

[NasimiAsl]

that work for me dear i don't know why

[Dad72]

CustomMateriel is not integrated into BABYLON same. it must be added in <script>

<script src="https://preview.babylonjs.com/materialsLibrary/babylon.customMaterial.min.js"></script>

 

[ozRocker]

ok, I got it running, but it doesn't work the same way for instances:

http://www.babylonjs-playground.com/#1EJRYH#7

I have a building which I want to create many instances from.  The buildings will be different height via scaling.y property.  Is there a way for the texture to be fixed scale when using the scaling property?  I don't think there's any other way when using instances

[NasimiAsl]

if you use scale you most use a worldPosition but if you dont use scale but make it in other size you Use A localPosition

http://www.babylonjs-playground.com/#1EJRYH#8

[NasimiAsl]

you can make cube uv map and Cylindrical uv map  too

Cube : http://www.babylonjs-playground.com/#1EJRYH#10

Cylindrical : http://www.babylonjs-playground.com/#1EJRYH#11

http://www.babylonjs-playground.com/#1EJRYH#12

 

[ozRocker]

42 minutes ago, NasimiAsl said:

you can make cube uv map and Cylindrical uv map  too

Cube : http://www.babylonjs-playground.com/#1EJRYH#10

Cylindrical : http://www.babylonjs-playground.com/#1EJRYH#11

http://www.babylonjs-playground.com/#1EJRYH#12

 

@NasimiAsl you are the GrandMaster of shaders!!! Thanks so much mate

[NasimiAsl]

Wait for CustomMaterial Next PullRequest you can do a lot material stuff on that