Occlusion Between CSS3D Renderer and WebGL Renderer

Questions
21

only chrome kind of kills it. but if that can be fixed somehow perhaps this would be useful for static images. no interaction and rasterizing 120fps doesn’t sound so good tbh, but even just being able to make shapes, and frames and stuff with html and have that available as an image in webgl would be very useful.

22

btw just for posterity, there’s also satori which can convert html/css tailwind and all to svg, which three can naturally parse.

i’ve tried it once, and it’s good: Satori, HTML + Tailwind in Threejs - CodeSandbox

but has the same problem: no obvious way to interact with it.

1 Like
23

Yeah, exactly, it can be great for one-off images generated from HTML. Might be fine for once-in-while interactions too (as opposed to every frame animation) for things like hover, etc.

I checked satori, and it does in fact do something similar to html2canvas with foreignObjectRendering: false (the default) where it reads the HTML and CSS and renders a subset of it using a custom engine (f.e. html2canvas maps it to canvas 2D API calls, while satori maps it to SVG equivalents and uses Yoga for flex layout, etc).

Satori could perhaps provide an option to toggle to SVG foreign object mode, to support more HTML/CSS features natively.

24

Idea: put the original DOM surface behind the WebGL surface, let it capture the pointer events, but visibly render the WebGL surface only. Basically pointer-events: none on the WebGL canvas.

This is a similar trick to how some web IDEs use an invisible textarea in the background, but they render custom syntax-highlighted version that is visible and aligned with the invisible textarea.

1 Like
25

Oh!? That sounds pretty cool.

Just to confirm, what you mean is need to render the CSS3D canvas as well

and then give webGL the processing of

  1. Add pointer-events: none in CSS
  2. Paste a texture of DOM elements (possibly using HTML to SVG or IMG)

So, this way, it’s like controlling DOM elements within webGL?

26

Yeah, or the other trick is place invisible DOM elements behind webgl, use actual pointer events from CSS, but render only the WebGL version.

1 Like
27

hello , i can not find the code on github https://github.com/ginnychen19/gotoo5th3D/tree/main/HtmlWith3D 23 , i meet the same problem about html and mesh occludion , can you provide the code again ? thanks very much