Camera uses wrong aspect ratio while render to texture

Help & Support
1

I try to use RenderTarget for painting in a cubemap.

now i have got some issues which made no sense to me.

i defined a cubemap texture with fixed size and 6 cameras with aspect-ratio = 1
but it seems that it is rendered in screen resolution and also screens ratio.

I use app.graphicsDevice, do i have to use another graphicsDevice?

An imaginable workaround could be sending the aspect ratio to a shader to fix that error inside. but the camera still renders in screen resolution which is probably to expensive!

var renderTarget = new pc.RenderTarget(app.graphicsDevice, cubemap, { depth: true, face: face, width: 128, height: 128 });
var renderTarget2 = new pc.RenderTarget(app.graphicsDevice, cubemap, { depth: true, face: face, width: 128, height: 128 });
var cameraEntity = new pc.Entity();

cameraEntity.addComponent("camera", { fov: 90, nearClip: 0.2, farClip: 10000, aspectRatio: 1,  horizontalFov: false });
var cube = CUBEFACES[key];
cameraEntity.setEulerAngles(cube.euler);
            
            
var effect = new postEffect.ExamplePostEffect(app.graphicsDevice);
cameraEntity.camera.postEffects.addEffect(effect, false);
//cameraEntity.camera.postEffects.effects[0].inputTarget = renderTarget;
cameraEntity.camera.postEffects.effects[0].outputTarget = renderTarget2;
           
cameraEntity.camera.renderTarget = renderTarget;

wrong

1600×1000 214 KB

correct

2

i have made a simple example in the editor.
just gave the active camera 6 cameras as children with 6 directions and different target viewport.

its running surprisingly great, but still use the wrong aspect radio.

have you any ideas how to fix that?

blob.jpg1252×1252 203 KB

https://playcanv.as/b/jNmvrxQo/

3

Could you give link to the project (not published link)?

4

oh, i forgot…

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

5

You are setting Viewport parameters, which are relative to screen size. When canvas resized you need to ensure they are set to appropriate sizes, to ensure they stay square.

But actually you shouldn’t render cubemap like so into cameras to screen. You should create one single camera with 45 degrees field of view, and renderTarget for it with square resolution, and render to it. Then you can use texture of render targets to put in cubemap texture and apply it on some geometry in scene.

6

thanks,
i’ll give it a try

7

i have recreated an reflection scene inspired by another post.

i found a workaround an perhabs the source of the problem:

i realized very late, that the initial aspect ratio ist always correct directly after startup.
it only breaks, when i change the screen size (because of debug tools).

i collect all cubemap cams i an array and listen to window’s “resize” event.

window.addEventListener('resize', function() {
        setTimeout(function() {            
            this.cams.forEach(function (e) {
                e.camera.aspectRatio = 1;
            });
        }.bind(this), 50);
    }.bind(this), true);

the timeout should be replaced with a debounce, but it works fine at the moment.

somehow the camera got a new aspect ration from an event after the graphics device is changed. there is a rendertarget, but there seems to an active listener which is noch used by shadow camera.

but for me its good enough :slight_smile:

thanks a lot.
this engine is a big fun!