How to apply texture to custom mesh (plane)

[bluepeanut]

Hi,

I made a custom plane using BABYLON.VertexData.

And then I want to apply the floor texture image to my plane, but it's not working properly.

Here's my scene.

http://www.babylonjs-playground.com/#1YIME0#1

I'm a very beginner of Babylon.js so I'm not familiar with uv map of meshes, so I suspect a misuse of uv mapping.

I refered to this article: https://blogs.msdn.microsoft.com/eternalcoding/2013/06/27/babylon-js-a-complete-javascript-framework-for-building-3d-games-with-html-5-and-webgl/

And if there are other ways to make custom plane efficiently please let me know how to do that. 

Help me for this situation

[GameMonetize]

Hello and welcome,

your uvs are all the same. uvs define the coordinates of every vertex on the texture. in your example, (1, 0) represents the upper right corner of your texture. just change the uv per vertex an you are good to go:)

 

[jerome]

example (not pertinent) : http://www.babylonjs-playground.com/#1YIME0#2

moreover it seems your texture image file is not loaded (CORS issue maybe ?

[bluepeanut]

Thanks for your kind opinions.

Now I understood something about uv mapping.

But still I can't get it work properly. In my thought, uv map positions should follow the vertices positions If I want to get a planar texture.

So I set the uv map just like a vertices with normalization.

http://www.babylonjs-playground.com/#1YIME0#3

But it seems that texture is showing with triangular faces of my plane.

Is there something wrong with my uv mapping concept?

I want this texture showing planar, like it is real floor.

Furthermore, my texture url doesn't seem to be applied even though it's working in my local code.

I applied 'http' texture url instead because of CORS issue but still...

Please take a look at my code once again... Thanks!!

[NasimiAsl]

hi yes your uv map is wrong

it is hard to find and calculate uv for your custom object 

  for make that you have like this    [0. ,0.] [ 0.,.5]  [.5,0.] [1.,1.]

this work after you make it

but if this problem is  just for plan  you can make your uv in shader

http://www.babylonjs-playground.com/#FT2RY#48

[bluepeanut]

Thank you for your example of new ShaderBuilder example!

It works like a charm but I think I need to understand how to use uv map exactly.

Is it possible to make the formula of making a uv map for each custom plane?

And I'm searching for a tutorial about the uv map of textures that I can learn about it as a reference.

Please give me a hand.

[NasimiAsl]

about UV

Uv is a Square started with this corner 0.0  1,0  0,1  1,1

all vertex in Geometry get point of this Square and all face set inside the Square so all area in Square can texture any face you have

when we create geometry in bJs we use mathematical to make uv  and others 

but when we haven't any formula for make it automatic( mathematic ) like your shape you need make it with 3D Applications like Maya Max Blender ...

in that applications have some way to make UV like Planar and Cube UV or Cylinder UV or Sphere UV or You Use the hand Tools for make it 

and Export it for BabylonJs

anyway the shader Builder UV Map Like Planar Way set All Texture Like Plan On The Geometry

".Map({path:'/textures/ground.jpg',uv:'vec2(pos.x*.1,pos.z*0.1)'})"
    

in this way you set Planar UV on X an Z Faces and  scale that