Blur results when using exported app html

[LaFeuilleMorte]

Hi, I've noticed an obvious blurriness when using the exported app html to render my ply. Here're the comparation:

Using Editor:

Using exported HTML:

As I take a deeper look into the code. The compressed ply will drop the SH values to save more bytes. And this is the same with the exported app html. Both the rendering results above were using compressed ply format. So I don't know why there's a big gap between these two formats. Is the app.html rendering pipeline different from that of the editor? Looking forward to your reply.

[slimbuck]

If these are both compressed models, then the likely culprit is devicePixelRatio. Perhaps @willeastcott can confirm?

[LaFeuilleMorte]

devicePixelRatio

I viewed and log the devicePixelRatio variable in the console and found that in the editor: the value=1.8, while in the app.html, the value=2.0. Could that be the root cause?

[slimbuck]

I guess the two windows were on two different screens? This difference is close enough that it shouldn't make a difference.

However PlayCanvas can be configured to use devicePixelRatio or not. If not then then rendered image will be lower res (so more blurry).

It's possible the editor project is configured to use devicePixelRatio and viewer.html not.

[LaFeuilleMorte]

I guess the two windows were on two different screens? This difference is close enough that it shouldn't make a difference.

However PlayCanvas can be configured to use devicePixelRatio or not. If not then then rendered image will be lower res (so more blurry).

It's possible the editor project is configured to use devicePixelRatio and viewer.html not.

No, they are displayed on same browser and same screen. Mine is Mac M3. BTW, how to enable devicePixelRatio in viewer.html

[slimbuck]

Not sure, but @willeastcott can help (assuming the issue is DPR).

[willeastcott]

Try changing <pc-app> to <pc-app high-resolution> in the exported html. Does that help?

[LaFeuilleMorte]

Try changing to in the exported html. Does that help?

Seemed not changing. Maybe I can send it to you to debug.

cropped_mcmc_nov15.debug-viewer.html.zip

[slimbuck]

Are you able to provide us the editor project to compare? Thanks!

[willeastcott]

Yeah, it'd be useful to have the PLY.

[LaFeuilleMorte]

cropped_mcmc_nov15.debug.compressed.ply.zip
OK，It's a compressed format. And I've found the blurry issue seemed to be much worse in mobile phones and my Mac computer (Perhaps due to the high pixel density?) While on my HDMI screen, this issue will be much mitigated

[willeastcott]

Ah, I see what's happening:

1. SuperSplat is rendering at the device's physical resolution:

   supersplat/src/scene.ts

   Line 87 in c91b223

   this.app.graphicsDevice.maxPixelRatio = window.devicePixelRatio;

2. The HTML viewer is rendering at the device's CSS resolution. And the high-resolution attribute is broken in version 0.1.3 of the PlayCanvas Web Components. I've just submitted a fix here: Add more pc-app attributes web-components#52

I'll now submit a PR that updates SuperSplat to the latest version of the Web Components.

@slimbuck, are you happy for the viewer to render at physical resolution? Any concerns about performance?

[slimbuck]

Performance might suffer so we'll ultimately make it an export option. For now I think it's probably fine though.