HTMLMesh rendering issues

[PSI497]

Hey,

First off, the HTMLMesh extension is amazing and really simple to use. I've been battling two small, but annoying rendering issues with the library:

1. as other people, for example HtmlMesh Renders Incorrectly When Browser Window is Resized Extensions#304 have pointed out, when resizing the window, the html meshes do not resize correctly. I ended up using a different workaround to what's mentioned in the linked issue, I basically disabled the resize logic in the extension ( line: (window as Window).addEventListener("resize", boundOnResize);), and I apply my own resizing logic from outside, by calling this.htmlMeshRenderer.setSize(window.innerWidth, window.innerHeight) when the window is resized. The benefit over the solution in 304 is that there's no lag when resizing the window, the html mesh is sized correctly immediately on the next render.

Wouldn't it be helpful if we could provide an option to the HtmlMeshRenderer and allow updating the size from the outside, optionally?

2. there's a rounding error causing a white border around the meshes.

My scene is very dark with a black background, so this becomes very pronounced. I think this might be a rounding issue somewhere during the scaling. I found two hacky ways to solve this if anyone wants to resolve the issue, one option is modifying this line in the html-mesh.ts createMask function:

from

protected createMask() {
const vertexData = CreatePlaneVertexData({ width: 1, height: 1 }); // BJS 5
to

protected createMask() {
const vertexData = CreatePlaneVertexData({ width: 0.99, height: 0.99}); // BJS 5

or, alternatively, to change the sizing in fit-strategy.ts:|

from
sizingElement.style.width = ${width}px;
sizingElement.style.height = ${height}px;

to
sizingElement.style.width = ${width*1.01}px;
sizingElement.style.height = ${height*1.01}px;

This hack basically crops the iframe a tiny bit so the white lines won't show from the mask. Obviously, this hack is only useful if you're fine with cropping a couple pixels of your website in the iframe. I'm wondering where the rounding issue is coming from, if anyone finds a better solution please let me know!

[RaananW]

cc @ericwood73

[deltakosh]

@PSI497 Hey as you can see we are giving the VIP treatment to HtmlMesh
Wanna do a PR to fix your 2 concerns?