Get uv texture point on sphere

Questions
1

Hello guys i was searching for getting texture point on mesh
what i have found is using raycast
i used PICKINGINFO.getTextureCoordinates() to get uv point and it worked fine but on plane only
here’s an example : Babylon.js Playground
in this example i can update uv texture data on another plane

I tried to do the same but with using sphere not plane i got wrong results because i couldn’t get the correct uv data from sphere using the same function PICKINGINFO.getTextureCoordinates()

also i tried another formula to convert my hitpoint of sphere to uv point
ref : UV mapping - Wikipedia

image
image1004×199 14.5 KB

my question now how can i get uv point on sphere mesh using user hitpoint (raycast) ?

1 Like
2

Can i ask what makes you say it doesn’t work on anything other than plane?
I haven’t used this function for a long time, but i remember it did work correctly on other meshes

1 Like
3

BTW - this is a really great demo! Once you realize what needs to be done :slight_smile: did you make it just for this?

1 Like
4

Does this help https://playground.babylonjs.com/#QRMTXQ#1

1 Like
5

I’ve got a plane, box, and sphere UV projections methods to update meshes if you are interested in any of that @Karim_Mohammed.

Might not be useful but I figured given your demo you might be interested.

1 Like
6

i just made this so i can cut part of texture (in square shape) and paste it to another mesh

7

yes sure it’s very good
honestly i didn’t try to use normal sphere before and apply this method on it
all this time i was trying to create sphere using PhotoDome
like this
var Sphere = new BABYLON.PhotoDome( “sphere”,“URL”, {resolution:50,size: 70 }, scene)
and i was getting wrong uv points actually i think it was Upside down

anyway after i use normal sphere i can now cut any square shape on sphere using me cubes
but Unfortunately i found area on sphere it get wrong result of uv points
Example:
normal area should be like this
image
strange one (wrong)
image
image
image
as the image explains it gives me wrong texture square !!

Is there is any Explanations ?

8

for sure i’m interested
could you please share it ?

9

Here is a mesh to mesh projection. I use it for my plane projection an others I have a more refined one but this is the one I could find quickly.

function projectMeshUV(meshA, meshB, rayDir, scene, disposeRef = true, skipTo = 0, stopAt = false){
    var rayLength = rayDir.length();
    rayDir = rayDir.normalize();
    
    var positions = meshA.getVerticesData(BABYLON.VertexBuffer.PositionKind);
    var uvs = meshA.getVerticesData(BABYLON.VertexBuffer.UVKind);

    function predicate(mesh){
        if (mesh == meshB){
            return true;
        }
        return false;
    } 
    var trim;
    
    if(stopAt!=false){
       trim = positions.length-(stopAt*3);
    }else{
        trim = 0;
    }

    //console.log(positions.length-trim, "positions.length-trim");

    for(var i=(skipTo*3); i<(positions.length-trim); i+=3){
       // console.log('casting-Ray', i/3);
        let id = i/3 || 0;
        id*=2;

        let origin = new BABYLON.Vector3(positions[i], positions[i+1], positions[i+2]);
        let ray =  new BABYLON.Ray(origin, rayDir, rayLength);
        let hit = scene.pickWithRay(ray, predicate);
        
        if(!hit.pickedMesh){
            ray = new BABYLON.Ray(origin, rayDir.scale(-1), rayLength);
            hit = scene.pickWithRay(ray, predicate);
        }             

        //BABYLON.RayHelper.CreateAndShow(ray, scene, new BABYLON.Color3(1, 1, 0.1));

        if(!hit.pickedMesh){continue;}

        //console.log(hit);

        let uvh = hit.getTextureCoordinates();
  
        uvs[id] = uvh.x;
        uvs[id+1] = uvh.y;      
    }
 
    meshA.updateVerticesData(BABYLON.VertexBuffer.UVKind, uvs);

    if(disposeRef){meshB.dispose();}
}

you can see it in use here: http://pryme8.com/toss-game/

mesha is the target, meshb is the uv ref (like a plane) and the ray dir is the direction and length of the rays.

let me see if I can dig up the sphere one, sorry its been years.

1 Like
10

Do not let the white lines cross https://playground.babylonjs.com/#QRMTXQ#3

and the part of the sphere the texture is taken from depends on the orientation of the boxes, ie it can come from the larger part of the sphere not the part that looks like it is enclosed by the boxes.

1 Like
11

This is the explanation:

Babylon.js Playground

When crossing the lines between two edges, babylon needs to decide from which side to take the rest. Try imagining a triangle on a plane, with one point at the top of the plane. Now move this point to the bottom - the triangle changes completely - two points stay the same, but the surface it covers has no intersection with the surface the older triangle had.

2 Likes
12

thanks for your answer @RaananW
so is there any way to cut it correctly ?

13

Perhaps by adding more uv points. Than you calculate if the connection between two boxes crosses the split and add that one as an additional uv point.
Unfortunately I haven’t worked with uv’s that much, so this is just an idea based on my limited knowlage.