How to stretch screen in one direction?

Help & Support
1

I would like to stretch the screen in one direction (depending on orientation sensor).
So like the fov is set to a smaller value, but only for one direction (e.g. the height).

I tried to set a manual aspectRatio of the camera. But that doesn’t work.

I can calculated the amount of needed stretch. Suppose this is 1.5. How can I stretch only the height a factor of 1.5?
Anybody an idea how I can do that?

2

Hi @simmania,

Have you tried setting Fill Mode to None and Resolution Mode to Fixed:

image
image858×183 8.75 KB

And then try using setCanvasResolution() to set a custom width and height:
https://developer.playcanvas.com/api/pc.Application.html#setCanvasResolution

3

You could also change the projection matrix of the camera with a custom calculation via https://developer.playcanvas.com/api/pc.CameraComponent.html#calculateProjection

Example of usage from Zappar

    /**
     * Override default camera's projection matrix with one provided by Zappar.
    */
    const camera = this.entity.camera;
    if (camera) {
        camera.calculateProjection = (mat) => {
            mat.copy(projectionMatrix);
            const data = projectionMatrix.data;
            camera.horizontalFov = false;
            camera.fov = (2.0 * Math.atan(1.0 / data[5]) * 180.0) / Math.PI;
            camera.aspectRatio = data[5] / data[0];
            camera.farClip = data[14] / (data[10] + 1);
            camera.nearClip = data[14] / (data[10] - 1);
        };
        this.updateBackgroundTexture(this.pipeline);
    }
1 Like
4

I’m having a hard time getting setCanvasResolution() to work as I want it. So I guess I have to try this projection matrix stuff.