Occlude "bug" with HTML #1543

simonghales · 2023-06-28T12:13:30Z

simonghales
Jun 28, 2023

Hey there, I've noticed there's a scenario that leads to unintended results.

Picture this scenario:

<Canvas>
<Html occlude="blending">
<div>Some random occluded element</div>
</Html>
<Html>
<div>Some random non-occluded element</div>
</Html>
</Canvas>

What will happen is that the second Html instance, being rendered after the first instance that does have occlusion enabled, will counteract the work done in the first element.

The relevant code is here:

React.useLayoutEffect(() => {
      const el = gl.domElement as HTMLCanvasElement

      if (occlude && occlude === 'blending') {
        el.style.zIndex = `${Math.floor(zIndexRange[0] / 2)}`
        el.style.position = 'absolute'
        el.style.pointerEvents = 'none'
      } else {
        el.style.zIndex = null!
        el.style.position = null!
        el.style.pointerEvents = null!
      }
    }, [occlude])

https://github.com/pmndrs/drei/blob/master/src/web/Html.tsx#L194

Essentially because of this if else path, you cannot have a combination of Html elements with occlusion and non-occlusion without running the risk of the canvas element's styles being reset. If the element is being occluded, the z-index for the canvas is calculated and set, otherwise the z-index is set to null.

I'm not sure what the ideal "fix" for this would be. Personally for myself I've just copied the component code and commented out the else statement, and that's sufficient for my use-case. But that isn't necessarily the ideal behaviour / solution for everyone.

Anyway, I figured I'd flag this here in case anyone else encounters the issue and goes searching for a solution.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Occlude "bug" with HTML #1543

{{title}}

Replies: 0 comments

Select a reply

Occlude "bug" with HTML #1543

simonghales Jun 28, 2023

Replies: 0 comments

simonghales
Jun 28, 2023