CSS3Renderer elements disappearing/flickering at small scales..

[manthrax]

Description of the problem

CSS Renderer elements disappearing/flickering at small scales..

I'm doing some mixing of gl three.js rendering and css3 html ui.

To do this, I have to scale down my CSS3Objects to match the resolution of my GL world where 1 unit = 1 metre. At this scale, the CSS3 objects start to flicker and disappear when viewed at slightly oblique angles.

I've reproduced the problem using the periodictable demo, by setting scale on the scene to 0.002 and scaling the min/max zoom on the trackball control to allow closer zooming in...

http://vectorslave.com/periodic/css3d_periodictable.html

If you hit the Helix button and zoom in and out, you may see tiles disappearing...

Any ideas about this/confirmations?.. it's drivin me nuts!

Three.js version

• [ ] Dev
• [x ] r79
• [ ] ...

  Browser

• [] All of them
• [x] Chrome
• [ ] Firefox
• [ ] Internet Explorer

  OS

• [] All of them
• [x] Windows
• [ ] Linux
• [ ] Android
• [ ] IOS

  Hardware Requirements (graphics card, VR Device, ...)

[incinirate]

Unable to reproduce using the given link on Chrome, Linux

[manthrax]

Thanks for checking on it! I was also unable to reproduce in Chrome on Mac (which my client is also using, so my anxiety is abated..) Must be a Chrome/64bit/Windows bug. Hopefully will be fixed soon. :) Cheers!

[Mugen87]

@manthrax Do you still have the mentioned problem with the latest Chrome and Windows? If not, we can close this issue. Otherwise we should investigate this problem one more time.

[manthrax]

This problem resolved itself with a Chrome update. Thanks for following up! Much appreciated.

[Mugen87]

Cool! Do you mind to close the issue? Thanks!

[makc]

I have found that this still happens in 2022. The scale does not really matter, you can reproduce by resizing the window of vectorslave link above. In my case, I am able to undo invisibility by doing temp0.style.transform = temp0.style.transform in the console on css3drenderer cameraElement, so I guess cache.camera.style must be invalidated on resize at least, I did not figure why or what is actual condition yet

[makc]

@mrdoob @Mugen87 here is how the bug looks like in debugger:

so, the cache indicates that the style is the same, but the actual element has different style for some reason - and then obviously setting it to correct value fixes the issue 🥲 wait, no, it is just whitespace difference. then... what gives?

[makc]

so, 40 minutes of debugging later,

• I still have no idea why does it disappear )
• This I am able to undo invisibility by doing temp0.style.transform = temp0.style.transform does not always work;
• I am able to undo invisibility by doing epsilon( elements[ 15 ] + 0.01 * Math.random() ) in getCameraCSSMatrix, but this does not stop things from going invisible in the 1st place, so it still flickers :(

[makc]

okay, finally found a clue to a reason for the flicker - if I do

    overlayRenderer.setSize( width, height );
    overlayRenderer.render( scene, camera );

in the render loop, flicker is gone - so there seems to be a time between resize and resize event, and rendering during this time messes things up.

[makc]

even though I was able to suppress the flicker locally, the client is still seeing it in a range of devices. TL;DR CSS3DRenderer is unuseable in production

[hschwane]

I am seeing a similar problem. I am using Chrome on Linux (Ubuntu). When adding more than one object that is rendered by the css3d renderer they all start flickering and also the z-ordering seems to be broken (some objects are drawn on top even though they are "behind" in 3d space). Strangely the problem does not show up with only one css3d element. Also everything seems to run fine in Firefox.

[mrdoob]

TL;DR CSS3DRenderer is unuseable in production

I think it's more accurate to say browser implementations of CSS3D is unusable in production...

[hschwane]

I think it's more accurate to say browser implementations of CSS3D is unusable in production...

Which is even worse, as it is harder / impossible to fix from our end. Seems like we need to switch to a more traditional way of rendering our 3d UI elements for our project.

[mrdoob]

Seems like we need to switch to a more traditional way of rendering our 3d UI elements for our project.

What would be a more traditional way?

[hschwane]

I came to three.js / WebGL from developing native computer graphics (OpenGL, etc.).
So I was referring to rendering planes / triangles with the the UI on textures, using bitmap-fonts, etc.

[yomotsu]

Comparing with "traditional way", one of the pros of using CSSRenderers is that it comes with interactivity and accessibility of HTML. such as:

• clickable links, without ray picking
• input forms
• selectable text and so on.

Although CSS3D Transforms might be unusable... I hope browsers will fix the problems.

FYI: three.js has HTMLTexture but it cannot capture full HTML/CSS features. Also, there was a PR to make a rendered-HTML texture using SVG <foreignObject> , https://github.com/mrdoob/three.js/pull/21998, but lose the pros above. Additionally, there is an interesting occlusion implementation: https://twitter.com/CantBeFaraz/status/1567162368559398920

[hschwane]

Sure, the CSS renderer is great in theory, that is why I was using it in the first place. But if it does not work reliable I do not want to base a product on it.

I will check out the links you posted, thank you. I was also looking at mesh ui as an alternative. Of cause it does not offer the same design possibilities as html, but at least it handles working with bitmap fonts and some basic layouting and user interaction.

Edit: seems like the PR you mentioned was never merged.

[mrdoob]

The thing is... <foreignObject> feels like a hack and if I've learnt anything so far is to not rely on things that feel like a hack.