playcanvas / engine

Powerful web graphics runtime built on WebGL, WebGPU, WebXR and glTF
https://playcanvas.com
MIT License
9.74k stars 1.36k forks source link

Render targets are no longer resized #5722

Closed kungfooman closed 1 year ago

kungfooman commented 1 year ago

These are some commits that changed some logic, but I don't know right now when this became an issue:

https://github.com/playcanvas/engine/commit/f609b43a31f508ab2dc31cc6da50b0c25633f88d https://github.com/playcanvas/engine/commit/333cfc1f2001bfe6f42baae9241a2319c04c4d60 https://github.com/playcanvas/engine/commit/dcb5a0122bffa8a499d642734da9b258635571c4 https://github.com/playcanvas/engine/commit/9eff30254b4ab1efb8d845c2416393becf19699b https://github.com/playcanvas/engine/commit/d753e00475dc4033f1fe8d4540de9b3eff39a364

Mini bloom example (just save in engine root dir with a /build/playcanvas.js):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PlayCanvas Hello Cube Bloom</title>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src='./build/playcanvas.js'></script>
</head>
<body>
    <canvas id='application'></canvas>
    <script>
        // create a PlayCanvas application
        const canvas = document.getElementById('application');
        const app = new pc.Application(canvas);
        // fill the available space at full resolution
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);
        // ensure canvas is resized when window changes size
        window.addEventListener('resize', () => app.resizeCanvas());
        // create box entity
        const box = new pc.Entity('cube');
        box.addComponent('model', {
            type: 'box'
        });
        app.root.addChild(box);
        // create camera entity
        const camera = new pc.Entity('camera');
        camera.addComponent('camera', {
            clearColor: new pc.Color(0.1, 0.1, 0.1)
        });
        app.root.addChild(camera);
        camera.setPosition(0, 0, 3);
        // create directional light entity
        const light = new pc.Entity('light');
        light.addComponent('light');
        app.root.addChild(light);
        light.setEulerAngles(45, 0, 0);
        // rotate the box according to the delta time since the last frame
        app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));
        const assets = {
            bloom: new pc.Asset('bloom', 'script', { url: './scripts/posteffects/posteffect-bloom.js' })
        };
        const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
        assetListLoader.load(() => {
            // add bloom postprocessing (this is ignored by the picker)
            camera.addComponent("script");
            camera.script.create("bloom", {
                attributes: {
                    bloomIntensity: 1,
                    bloomThreshold: 0.7,
                    blurAmount: 4
                }
            });
        });
        app.start();
    </script>
</body>
</html>

Reproduction: 1) E.g. open devtools and scale very small 2) Reload page (this makes sure we have a small initial width set) 3) Resize as big as it gets

Result:

image

Or maybe I'm just doing something wrong right now?

mvaligursky commented 1 year ago

Nice fine @kungfooman . This PR is causing the different behaviour, I'll investigate: #5651

kungfooman commented 1 year ago

Wow, thank you for the quick fix @mvaligursky! :+1: