Resize emscripten canvas

[amarav]

Could anyone help with resizing a canvas generated by emscripten?

I have a cpp file compiled using emscripten and it generates a html file with a canvas.

I do not know whether the resize needs to be done in javascript or in my main function using emscripten..

Can anyone help with this?

[prideout]

It is probably easier to do in JavaScript. For example, if you want your canvas to encompass the entire page, you can do something like the following.

const handler = () => {
        const dpr = window.devicePixelRatio;
        const width = this.canvas.width = window.innerWidth * dpr;
        const height = this.canvas.height = window.innerHeight * dpr;
        myFilamentView.setViewport([0, 0, width, height]);
};
window.addEventListener('resize', handler);

[amarav]

Thanks @prideout for your immediate response.

I'm a beginner.

What is myFilamentView in this case?

I'm just following the triangle tutorial. I have a canvas with a triangle in the browser. Resize of Canvas should maintain aspect ratio. And how to set the viewport for this?

[cx20]

@amarav

What is myFilamentView in this case?

In the case of the Filament's triangle tutorial, myFilamentView corresponds to this.view below.
https://github.com/google/filament/blob/main/docs/webgl/tutorial_triangle.js#L76

this.view.setViewport([0, 0, width, height]);

Could anyone help with resizing a canvas generated by emscripten?

I'm not very familiar with Emscripten,
For a simple example of resizing Emscripten's Canvas, the following may be helpful.
https://github.com/cx20/webgl-test/blob/master/examples/wasm/square/index.html#L14-L15

I do not know whether the resize needs to be done in javascript or in my main function using emscripten..

If you want to change it in Emscripten, you may be able to use the emscripten_set_element_css_size API, but I think it's easier to change it on the JavaScript side.
https://emscripten.org/docs/api_reference/html5.h.html#c.emscripten_set_element_css_size

[amarav]

@cx20 Thanks for your reply.

canvas: (function() {
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
return canvas;
})(),

I did this in the html file as generated by emscripten. But it is resized to the window size as created in my c++ application.
So browser becomes scrollable and canvas becomes huge. The viewport is not changing with this.... How to achieve it?

[cx20]

@amarav sorry. The sample I presented was not resized. Simply resize the canvas during the initial display.

I'm not sure if this is the right way to do it, but I've confirmed that I can resize it with the following code changes.

<!-- Allow the C++ to access the canvas element --> 
<script type='text/javascript'>
var c = document.getElementById('canvas');
var Module = {
    canvas: c
};
</script>

<!-- Call the javascript glue code (index.js) as generated by Emscripten -->
<script src="index.js"></script>

<script type='text/javascript'>
const gl = c.getContext("webgl");
const handler = () => {
    const dpr = window.devicePixelRatio;
    const width = c.width = window.innerWidth * dpr;
    const height = c.height = window.innerHeight * dpr;
    gl.viewport(0, 0, width, height);
};
window.addEventListener('resize', handler);
</script>

[amarav]

@cx20 Thanks much!

[amarav]

@cx20 , Suppose the triangle.glb is in cloud like a .tar.gz file, how do i decompress the contents and render it?

I need a way to get a .gz file either through drag and drop or through URL and use browser api's to unzip with promise and then to transfer the Uint8Array to filament buffer

Could you please help for this?

[cx20]

@amarav Unfortunately, this is a Filament repository, so I don't think it's a good idea to talk about less relevant topics.
If the topic is that you want to know how to load a glb file by drag and drop in Filament, it may not be a problem.

[amarav]

Yes if i know that i could do it in a similar way... if possible could you give some insights for it?

[cx20]

@amarav Sorry, I don't know how to unpack gzip with JavaScript.

However, normally, if the web server and browser are compatible, the server will automatically compress the file into gzip and the browser will automatically decompress it.

You can check if your web server supports gzip compression at the following site.
https://www.whatsmyip.org/http-compression-test/

[cx20]

@amarav If you want to know about glTF compression extensions, the following links may be helpful.

https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression
https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_mesh_quantization
https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_basisu

[amarav]

ok no problem. thanks for your time and patience