Hi is it possible to have 3d models as part of the UI eg. custom 3d buttons (cube, sphere, etc…) for UI instead of 2D?
Not part of the canvas, no.
However, you can use multiple cameras and render to a texture to potentially get somewhere close to the effect you want.
Also, you can have 3D elements that are not part of the UI canvas act as buttons and controls. You could parent them to the camera as well.
Yes you can, Im doing it currently
Add a SCREEN component and disable the “screen space” so it’s rendered on the 3D space. Place it on front of the main camera, or inside of the camera so it’s visible regardless of where the camera has moved.
Load the 3D model inside of the screen component - you’ll have to scale up x100 since the screen component uses a different scale. Remove “world” layer from the entity and set it to “UI”. Also make sure the camera has the “UI” layer on it.
Now you can make the 3D element interactive doing raycasts, OR what I do, place a transparent button on top of it and use it for the trigger, and play the 3D animation (eg, moving the button) if you have these
5 Likes
This is not working at all. Maybe I’m doing something wrong? I have the model on the UI layer, as a child of a screen entity with disabled “screen space”. The screen entity is in front of the camera. But the model seems transparent now.
Here’s a pic of my setup
Here’s an example of rendering 3D to a render texture and then using it for the UI element system Multiple Camera Layers | Learn PlayCanvas
This issue does pretty much the same thing Resolution Scaling | Learn PlayCanvas
Hm…the trick is simply to use 2 cameras and one additional layer? One dedicated camera to the 3d elements on the screen? Understood. Yeah, this works. It seems different than @Yohami_Zerpa’s solution though, which I couldn’t make it work.
EDIT
Yep got it working, pretty simple. I think I got the idea here. Every time I can’t get something to show up, add a new layer. Done.
Not necessarily a new layer each, but they do all need to be on a different layer to the world and UI. Maybe I will try to do an example project of this later.
Here’s an example I’ve whipped up today:
https://developer.playcanvas.com/en/tutorials/render-3d-world-to-ui/
4 Likes
Hi @yaustar !
a question, is it’s possible on your example, do same stuff but with transparent backgrounds?,
I mean, in a case where we want to make appear some 3d element over a 2d element, but only the 3d element and not like your case where you use the camera color?, I try to use transparent color buffer, clear depth buffer etc… but didn’t work. Is any way to make the image render be transparent?
thanks!
Yes, its possible. As the example is rendering out to a texture, you have to make sure that the render texture has the alpha channel. And what you ae applying the texture to (eg a material) also is handling opacity
Hey we have a 3D screen now where we can do this easily! Or was it always available and I never noticed?? I guess it wasn’t available before otherwise you would have mentioned. But such a great feature was sneakily added and not even mentioned! I can anchor the model wherever I want and treat it like an image…awesome!
3D screen doesn’t render in Screen Space. It renders in World Space which is why it wasn’t mentioned before because all the requests were for rendering 3D models in Screen Space for the UI.
3D screens for World Space have been available since the UI system was released.
Actually easiest solution is to just render the world layer last
The 3D screen thing is awesome that you can anchor stuff but doesn’t solve the problem that UI elements will cover the model. Simply place the world sublayer last solves the problem :D.
Hello @mrkarate ,
Could you please share the solution to this problem if solved? I also facing the same problem.
Hi If someone is still looking out to find the solution for a transparent background. In Yauster’s solution change the format of texture to pc.PIXELFORMAT_RGBA8 from pc.PIXELFORMAT_R8_G8_B8.
1 Like