Hello, I wanted to know if it’s possible to style a second camera viewport. For example rounding the corners, or even using a picture and put the camera viewport inside an image like this one.
This is how it looks in the game at the moment
That’s a good question, though I don’t see an out of the box solution. If you are using the camera viewport rect property to have your two cameras render one after the other at the same window.
One solution would be to grab the output of your camera as a render target and create an HTML image which you can use in your DOM. From there you can style your image as you like using CSS styles. Though I am not sure what would be the performance hit in this case, might be a bit slow.
Here is an explanation/example on how to do that:
I don’t know if it’s the rect property. I only used the property in the editor that is called Viewport. There are 4 variables there called X, Y, W, H. I haven’t tried anything with HTML yet in the project, but if you think it could work I might give it a try.
1 Like
Yes, the viewport property internally is called rect.
if you would like to apply CSS styles then yes HTML is the way to go. If you could get away with the border radius (rounded corners) and you are ok doing the shadow only then you can use a simple masked element. Overlay it on top of your 2nd camera viewport and matching its size.
That will give the impression that it is a shadow coming from the viewport.
This happens when I put the image element
And when I set the mask to true it does this
EDIT: if I remove the World tag of the image element, then I can’t even see the image. I’ll try with the html thing although I don’t know where to start from.
Actually I take it back, you can’t use masking to produce shadows or anything since only 1-bit masks are supported right now.
So yes you need to start understanding how you can grab a texture from your 2nd camera and render it on a HTML element. Check the link I’ve posted above on how to start doing that and also search the forum, there are plenty of topic on the subject.
There’s no texture in my second camera. I want to put my 2nd camera in another canvas element or div element. Sth that I can use to round the corners.
I’m trying this but this is the result
That white div is a canvas I made that it’s being loaded in my game. I positioned it there with position absolute but I can’t get the second camera to be displayed in that canvas.
A camera doesn’t have a texture or an image, you can’t use it like that.
You will need to study render targets, that’s how a camera renders to a pc.Texture which you can later use in an HTML element.
Here is an example on how a camera’s output is being used to get a texture and apply it to a model.
https://playcanvas.com/project/560797/overview/tutorial-render-to-texture
A camera renders to a texture? I thought it renders to a canvas, that’s why playcanvas games are inside a canvas element
The application is rendered to a canvas.
A Playcanvas camera can also render to a render target, that’s an offscreen element, to be able to do things like what you want to do here 
I’m getting an error now
This is the code from the project you’ve sent me, I changed the layer to one that I just created to try this
var colorBuffer = new pc.Texture(this.secondcam.graphicsDevice, {
width: 256,
height: 256,
format: pc.PIXELFORMAT_R8_G8_B8,
autoMipmap: true
});
colorBuffer.minFilter = pc.FILTER_LINEAR;
colorBuffer.magFilter = pc.FILTER_LINEAR;
var renderTarget = new pc.RenderTarget(this.secondcam.graphicsDevice, colorBuffer, {
depth: true
});
var layer = this.app.scene.layers.getLayerByName("secondcam");
layer.renderTarget = renderTarget;
Sorry can’t help you on this context, I am not sure the code will work by copy/pasting. You will have to understand step by step what’s going on behind the since since you are attempting something complex.
I’d propose to fork the example project I’ve sent and try to work on that first. Reworking it to instead of rendering the texture on a model’s surface to render it on an HTML element.
As soon as you are confident that it works there and you understand how it works, start moving the code in your active project.
I mean, I copied it and then changed the graphicsdevice variable so instead of being the root node, is the 2nd camera. The problem is that the example takes the whole Root element’s graphicsDevice variable, maybe that’s the problem, and I can’t take the camera’s.
I’m gonna try with a fork of the project. But after hours trying to make this work I feel like it’s gonna be impossible XD
Take it step by step, you are attempting something complex but it can be a great learning experience.
Hey Leonidas, I’m able to render the camera view into an image element but the problem is that the material overrides the image I use for that image element. So the rounded corners don’t stay.
Are you using the PlayCanvas UI system? If so, try using image masking https://developer.playcanvas.com/en/user-manual/user-interface/image-elements/
Yes