Hello, is there any way to get the screen coordinates of a 3D object?
Example below: 3D scene with objects, player can change the camera angle/height, the text (Object names) should be displayed on a separate 2D layer.
I don have any idea how to calculate this coordinate for a perspective camera, but a method only for orthography would be suitable.
I understand that you need an offset based on the position, rotation and height of the camera, but I can’t figure out the formula for this.
Here you go
Thanks for the answer, but that’s not at all what I meant.
I need to come up with an offset formula to find the relative coordinates of a 3D object on the screen.
An object can be located in the scene at coordinate x:180 y:300 for example, but be exactly in the center of the screen during the game (player can move, change the angle and tilt of the camera), so with a window resolution of 800x600 its screen coordinate will be 400x300, so thats the coordinate where the text should be, since its placed on a separete layer.
In other words, I need the text to hang above the houses in a scene like this.
So you wan changing coordinates of the houses.I dont think u understand the houses dont move they stay still. It is the player that moves It is impossible to do what u are trying to. You cant change the coordinates of a still house just because your camera is moving. Its just not possible but ill still try so give me time.
Yep its impossible.There is no 3d text in gdevelop that wil come up on the house.btw why do u need it
I know that houses dont move, thats the thing, i need to find ther position on the screen by somehow offsetting it with player position, camera angle etc
Sorry cant Its not in the software of gdevelop
Its possible, but i only figured it out for top down view
You might have the third person camera behaviour then use it!!!
Top down is top down this is 3D
@Phoenix, please don’t supply answers if you don’t understand the question. It’ll only get more confusing for all involved.
@7ToGo, this will involve a fair bit of maths. I put it to ChatGPT (yep, sometimes that’s the quickest way), and here’s the reply it came back with:
To calculate the 2D screen coordinates (x_screen, y_screen) of a 3D point (x, y, z) relative to a camera position and angle, you need to perform a series of transformations. Here’s a step-by-step guide:
Translate the Object Relative to Camera: Translate the coordinates of the object such that the camera is at the origin. This is done by subtracting the camera coordinates from the object coordinates.
( x_{\text{translated}} = x - x_{\text{camera}} )
( y_{\text{translated}} = y - y_{\text{camera}} )
( z_{\text{translated}} = z - z_{\text{camera}} )
Rotate the Object to Align with Camera Angle: Rotate the translated coordinates to align with the camera angle. This involves rotating the coordinates around the camera’s viewing direction.
Let’s denote the camera’s viewing direction as a unit vector ( \vec{v} = (v_x, v_y, v_z) ). Typically, this vector points from the camera towards the scene.
If your camera has a specified angle (e.g., rotation around the y-axis), you’ll need to rotate the translated coordinates accordingly.
Project the 3D Point onto the 2D Screen: This step involves projecting the rotated 3D point onto the 2D plane representing the screen. Typically, this involves perspective projection, which simulates how objects appear smaller as they move farther away from the viewer.
Let’s denote the position of the screen or image plane as ( d ) units away from the camera along the viewing direction.
The screen coordinates ( (x_{\text{screen}}, y_{\text{screen}}) ) can then be calculated using:
[ x_{\text{screen}} = \frac{f \cdot x_{\text{rotated}}}{z_{\text{rotated}}} + \frac{width}{2} ]
[ y_{\text{screen}} = \frac{f \cdot y_{\text{rotated}}}{z_{\text{rotated}}} + \frac{height}{2} ]
Where:
- ( f ) is the focal length of the camera.
- ( width ) and ( height ) are the dimensions of the screen.
- ( x_{\text{rotated}}, y_{\text{rotated}}, z_{\text{rotated}} ) are the rotated coordinates after the translation and rotation.
Note: The addition of ( \frac{width}{2} ) and ( \frac{height}{2} ) is to center the point on the screen. Adjust this if your coordinate system has a different origin.
Handle Clipping: Check if the point falls within the bounds of the screen. If the point is outside the screen bounds, you may need to clip or discard it.
This process is known as the graphics pipeline and forms the basis of rendering 3D scenes onto 2D screens in computer graphics. Keep in mind that different rendering systems might have variations in how they implement these steps, and additional considerations like field of view and aspect ratio may come into play.
A JavaScript version of this:
// Function to calculate screen coordinates
function calculateScreenCoordinates(objectX, objectY, objectZ, cameraX, cameraY, cameraZ, cameraAngle, screenWidth, screenHeight, focalLength) {
// Step 1: Translate the object relative to camera
let translatedX = objectX - cameraX;
let translatedY = objectY - cameraY;
let translatedZ = objectZ - cameraZ;
// Step 2: Rotate the object to align with camera angle
let cosAngle = Math.cos(cameraAngle);
let sinAngle = Math.sin(cameraAngle);
let rotatedX = cosAngle * translatedX - sinAngle * translatedZ;
let rotatedZ = sinAngle * translatedX + cosAngle * translatedZ;
// Step 3: Project the 3D point onto the 2D screen
let screenX = (focalLength * rotatedX) / rotatedZ + screenWidth / 2;
let screenY = (focalLength * translatedY) / rotatedZ + screenHeight / 2;
// Return the screen coordinates
return { x: screenX, y: screenY };
}
// Example usage
let objectX = 10;
let objectY = 5;
let objectZ = 20;
let cameraX = 0;
let cameraY = 0;
let cameraZ = 0;
let cameraAngle = Math.PI / 4; // 45 degrees in radians
let screenWidth = 800;
let screenHeight = 600;
let focalLength = 500;
let screenCoordinates = calculateScreenCoordinates(objectX, objectY, objectZ, cameraX, cameraY, cameraZ, cameraAngle, screenWidth, screenHeight, focalLength);
console.log("Screen Coordinates:", screenCoordinates);
Thank you, but there are points that seem false or do not take into account the capabilities of Gdevelop like “put object around another”, camera rotation possibility etc, although I am very bad at maths so maybe i just dont get it.
This will be much easier in isometry. Essentially all I need is to somehow make the objects rotate around the center of the camera in an ellipse instead of a circle.
The radius of the circle is equal to the distance between the center of the camera and the object on a 2D plane
If we subtract the camera angle from the angle between the player and the object, we get the corresponding angle between them on the screen, as was the case in the chatGPT example.
Essentially I only need to multiply the distance by the offset in this parameter:
But I can’t figure out how to map the camera angle to this 0.5-1 range, where 0.5 is 90 degrees and 1 is both 0 degrees and 180 degrees.
Is there some kind of mathematical function for this?
This is how it looks now, with the events above
You literally used chat gpt. While i think on my own.
You need to use the (int) inorder for that.
@7ToGo Hello, I’m also interested in this.
I also tried myself, but not I couldn’t figure out the magic math formula 
I remembered this old pseudo 3d example. Maybe the calculations from that example can be adapted for this ?
Looks like Pandako got it working!
