Model shifts vertical position after exiting scene viewer

[yuinchien]

Description

On my pixel 2 Chrome browser, after exiting scene viewer and returned to the website, the model would shift downward from center position.

Live Demo

https://googlewebcomponents.github.io/model-viewer/examples/augmented-reality.html
https://glitch.com/~storm-list

Browser Affected

• Chrome
• Edge
• Firefox
• Helios
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

Versions

• model-viewer: vX.X.X
• three.js: rXX

[cdata]

Confirmed, thanks for reporting!

[mrdoob]

Seem like the component is not handling resizes correctly.

I've put together a test where I'm resizing a viewer every frame:
https://model-viewer-tests.glitch.me/resize.html

The model should be visible and in the center all the time.

[mrdoob]

After further testing, horizontal resizing works as expected.
It's after vertical resizing when the component misbehave.
https://model-viewer-tests.glitch.me/resize-vertical.html

[mrdoob]

It's glitchy when resizing horizontally though.
https://model-viewer-tests.glitch.me/resize-horizontal.html

[cdata]

I think the vertical alignment issue only affects master, not the latest release (v0.3.1)

@mrdoob it's possible that the horizontal glitchiness is another issue that is exacerbated by the worst case scenario resize on every frame. We try to debounce the response to resize, so there might be a bug related to that as well.

[mrdoob]

I think the vertical alignment issue only affects master, not the latest release (v0.3.1)

/cc @elalish

[cdata]

I just finished a git bisect. Looks like the first bad commit was actually the r104 upgrade 5c4e0eb 🤔

I take it back, I think I did something wrong while bisecting...

I take back the take back. I misread what commit I was on. It is the r104 upgrade.

[mrdoob]

This may solve the glitchyness: #536 (comment)

[cdata]

We do set the render target back to its original value, it's just a few lines down from there

[cdata]

@mrdoob the vertical offset is pretty mysterious to me. I traversed the scene, and everything is positioned correctly. The camera is getting updated correctly. All our stuff to set the viewport and resize the renderer is the same, and seems to be using the right values.

Do you know of anything that might have changed between r101 and r104 in WebGLRenderer that might be relevant?

[mrdoob]

We do set the render target back to its original value, it's just a few lines down from there

Ah, I see.

[DavidPeicho]

The fix is actually simple, if you go to this line.

You have to had something like:

context.drawImage(
          this.renderer.domElement,
          0,
          this.height - height,
          widthDPR,
          heightDPR,
          0,
          0,
          widthDPR,
          heightDPR);

The problem comes from the fact that the renderer main framebuffer is not resized to the current viewer size for optimization purpose.

EDIT: If I have time later I can make the PR, but I have to be sure it doesn't break anything else.