[SOLVED] X, Y Position of Entity in Pixels - Possible?

Help & Support
1

Hi all!

This might sound like a strange question, and I’m pretty sure I know the answer, but just wanted to confirm - if I have an entity on the canvas say at position (3, 3, 0), is it possible to get the equivalent x, y position in pixels of that object, ignoring the z of course?

I’m trying to dynamically overlay a 2D sprite on top of a 3D entity based on where the 3D entity is on the canvas, but I realize that this might not be possible because of camera considerations, etc. Am I right in assuming that this is nonsensical thing to want to be able to do?

Thanks!

2

You can use camera.worldToScreen to get the screen position of an entity.

2 Likes
3

Awesome, thanks yaustar! I’ll give it a shot and let you know if I have any issues. :slight_smile:

4

Hey Yauster (and anyone else who might be reading this),

Seems I’m having some issues with this worldToScreen functionality. After getting the screen coords of the 3D entity and applying those coords to the 2D sprite, it doesn’t end up where it should. In my actual project it seems to be a lot closer, but I set up a test project so you could see how I’m doing it, and the position in this case is way off. Here’s the project link:

https://playcanvas.com/project/497594/overview/world-to-screen-test

Any idea what I’m doing wrong? I want the sprite to appear directly on top of the entity.

Thanks in advance!

5

@will will be able to answer this. I believe the sprite.js script uses a different coordinate space to the screen. If you want to use the sprite.js script, then you would have to do another conversion from screen to ‘sprite’ space (for lack of a better term) which is a bit tricky as you have to also deal with anchors.

6

Okay thanks yauster! I’ll see if Will can chime in about this.

7

worldToScreen won’t return accurate results until update is called for the first time. You shouldn’t call it in initialize. I think the issue is that in initialize, the canvas is not yet even set to the right resolution (I think it’s defaults to 300x150 resolution). So the returned coordinates are in that resolution in initialize.

1 Like
8

Finally managed to pull it off (it was bugging me a lot that I couldn’t work it out).

https://playcanvas.com/editor/scene/542493

It’s not perfect as it assumes that the sprite is anchored the top left and there are probably edges cases that I’ve missed.

1 Like
9

Nice! Thanks yauster! :slight_smile:

10

how to bring 3d entities like sphere to screen space ?

11

Can you provide an example of what you mean by this? Are you thinking of projecting a 2D screen space coordinate to the world? Or rendering 3D objects in screen space (e.g treating like UI objects)?

12

Rendering 3d objects to screen space

13

Technically, it isn’t possible but there are ways to fake it.

  1. Does it have to be a 3D object? If it doesn’t move/rotate etc, then an image/sprite could suffice.
  2. Have a second camera that renders last (and therefore on top of the rest of the scene). You can also use masks so that the cameras are only rendering certain objects in the scene (example: https://developer.playcanvas.com/en/tutorials/camera-model-masking/) .
  3. Always update the position of a 3D object to be relative to the camera orientation and position so it looks like it is in ‘screen space’.
  4. This also should be possible using the new layer system that is in testing at the moment so it might be worth waiting a little while for that.

1 is the easiest way if you have the right criteria. Then 4 if you can wait, then 2 is your next best bet.

Edit: To position the 3D objects in ‘screen space’, you have to use the camera’s screenToWorld function and add your own ‘anchoring’ to edges code to ensure it doesn’t get rendered off screen if the user resizes the window.