Camera coordinates math problem

Help & Support
1

Hi everyone,
I’ve been struggling for a couple of days with a bit more complicated issue, this is the scenario:
I have a camera that can rotate with mouse drag inside an inverted sphere with a 360 image.
I need to convert from the mouse click coordinate, where would that raycast or fake the raycast, on the actual texture so I can get the pixel colors.
I already have the texture and I know the sphere radius (1), I just need somehow to convert from mouseXY to the XY coordinate on the texture then I can grab the color from a hidden canvas with the texture.

2

It’s probably easier to visualize like this:
based on yaw and pitch of the camera (there is no roll), to calculate where the pixel on the texture would correspond.
On start, the camera starts at 0,0 rotation which is 0, tex_height/2

image
image795×498 18.8 KB

3

Hi @hhoria,

If I understand correctly, let me know: would knowing the -180 to 180 angle ranges in both X and Y axis solve this for you? Since that can be mapped from 0 to 1 tex coordinates easily.

I am thinking since you are already converting mouse x,y coordinates to sphere rotation, maybe just get the current euler angles of the sphere and map them to the -180 to 180 range. Would that work for you?

4

Well, yes
the main issue is, I have the pitch an yaw of the camera, I would need the same pitch and yaw for mouse coordinate…

5

Are you able to share an example project with your setup to take a look?

1 Like
6

Unfortunately, it’s a private project. But i think i found a way to simplify everything.
What I actually need is, the 3 angles between an entity’s position.forward and a point in space …

7

Something like this

but for yaw and pitch in regards to the entity’s forward direction.

8

Or even better,
I can get the direction from entity forward and the point in space, I just need to project it on the 3 main planes, bottom, left and back/front and get the 3 projection’s angles with the forward vector, something like this does.

9

Maybe this helps

image
image1061×524 72 KB

I need to find the pitch angle and yaw angle from the blue forward direction and the black sphere’s world coordinates.
The blue axis is always pointing in the same direction

10

This may be of help:

Also in general you can find the Unity C# implementation for each method, and attempt to convert it to Javascript/PlayCanvas.

11

If it’s just yaw and pitch you need, I do something similar here in the orbit camera: https://playcanvas.com/editor/code/438243?tabs=5665660&line=308

Used as:

    var cameraQuat = this.entity.getRotation();
    this.yaw = this._calcYaw(cameraQuat);
    this.pitch = this._calcPitch(cameraQuat, this.yaw);
1 Like
12

Well, that wasn’t really working since that would always point to the center of the camera, whereas in my case, where i mouse raycast on the sphere would almost never hit the camera center and i needed those angles.
I actually found another way, simpler and probably dumber, but it works :slight_smile:
in the center of the sphere, i have an entity that will always look at the raycas point and i have all the angles i need on that entity. Even if the camera stays fixed and I move the mouse left/right/up/down, i get the correct angles. Even if i rotate the camera slightly to the right for instance and move the mouse to the left I’m getting the correct angles

Thanks everybody !

1 Like
13

It’s the same process but instead of use the camera forward, you use the vector of your raycast instead :grimacing: