WebGL screen not fully rendered on html canvas #472

BladeTransformerLLC · 2024-09-02T15:21:17Z

BladeTransformerLLC
Sep 2, 2024

Hi there,

I have an index.html (code below) for a WebGL three-d app. The style settings make sure the canvas to fill the entire web page (and the canvas to fill the entire document). However, on some environments (eg. mobile phones, Macbook), the WebGL screen is shown only at the bottom-left of the web page (egui windows are rendered correctly).

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>Gauzilla Pro</title>
        <style>
            html,
            body {
                overflow: hidden;
                margin: 0 !important;
                padding: 0 !important;
                height: 100%;
                width: 100%;
            }
            canvas {
                margin-right: auto;
                margin-left: auto;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <canvas id="render_canvas"></canvas>
        <script type="module">
            import init, { run, set_canvas_size } from "./pkg/gauzilla.js";

            async function start() {
                await init();

                resizeCanvas();
                window.addEventListener('resize', resizeCanvas);

                run();
            }

            function resizeCanvas() {
                const canvas = document.getElementById('render_canvas');
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                set_canvas_size(canvas.width, canvas.height);
            }

            start();
        </script>
    </body>
</html>

The set_canvas_size() imported from the wasm module looks like:

static mut CANVAS_WIDTH: u32 = 0;
static mut CANVAS_HEIGHT: u32 = 0;

#[wasm_bindgen]
pub fn set_canvas_size(width: u32, height: u32) {
    unsafe {
        CANVAS_WIDTH = width;
        CANVAS_HEIGHT = height;
    }
}

pub fn get_canvas_width() -> u32 {
    unsafe { CANVAS_WIDTH }
}

pub fn get_canvas_height() -> u32 {
    unsafe { CANVAS_HEIGHT }
}

And the WebGL window is initialized by:

let window = Window::new(WindowSettings {
    title: "test",
    max_size: Some((get_canvas_width(), get_canvas_height())),
    ..Default::default()
})
.unwrap();

Any ideas? (you can try it at https://www.gauzilla.xyz/#5) Thanks.

Answered by asny

Sep 3, 2024

Most likely it's device pixel ratio. On some screens you have a multiplier (device pixel ratio) that takes you from logical pixels (the canvas size) to physical pixels (what three-d expects). You can query the device pixel ratio, then multiply that with your canvas width/height before constructing the screen render target.

View full answer

asny · 2024-09-03T10:10:27Z

asny
Sep 3, 2024
Maintainer

Most likely it's device pixel ratio. On some screens you have a multiplier (device pixel ratio) that takes you from logical pixels (the canvas size) to physical pixels (what three-d expects). You can query the device pixel ratio, then multiply that with your canvas width/height before constructing the screen render target.

1 reply

BladeTransformerLLC Sep 4, 2024
Author

Thanks! I use a framebuffer object to draw stuff into it (and subsequently draw a textured quad attaching the FBO). It turned out I needed to multiply the WebGL viewport of the quad rendering by the DPR.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WebGL screen not fully rendered on html canvas #472

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

WebGL screen not fully rendered on html canvas #472

BladeTransformerLLC Sep 2, 2024

Replies: 1 comment · 1 reply

asny Sep 3, 2024 Maintainer

BladeTransformerLLC Sep 4, 2024 Author

BladeTransformerLLC
Sep 2, 2024

Replies: 1 comment 1 reply

asny
Sep 3, 2024
Maintainer

BladeTransformerLLC Sep 4, 2024
Author