Mixed Mode theory

Design API
#1

(There wasn’t a specific thread for this yet, and plus none of us are really there yet since we’re making the foundations for our engine prototypes right now.)

Mixed Mode. How might we do it? What are some theoretical methods?

To get started, here’s a basic idea, although far from complete and possibly erroneous:

  • WebGL renderer layer on the bottom.
  • CSS3D renderer in the middle for rendering DOM elements in 3D, and using CSS clipping to make WebGL objects from below appear to be on top of DOM elements.
  • WebGL renderer on top, meant specifically for applying fragment shaders to polygons that are aligned with clipped DOM elements of the layer below.
1 Like
#2

GL layer on top, DOM on bottom.

GL layer maintains a cutout state for each DOM object.

If a GL object occludes a DOM object, it does so via revoking the DOM object’s cutout.

This is how Mixed Mode did it, and the only way I see to accomplish it. The hard part is getting cutouts that go beyond simple rectangular boxes (something Mixed Mode didn’t do).

1 Like
#3

What about DOM elements partially occluding WebGL meshes? It seems like that’d be easier with DOM on top, but then we loose the ability for WebGL to properly occlude DOM. It’s like we have one or the other but not both?

A complex solution could be transferring polygons of a “mesh” back and forth between two WebGL canvases that are on either side of the DOM layer. That seems like a challenge to code.

Imagine the case of Meshes sandwiched between DOM elements, where the DOM elements have opacity 0.5.

#4

In the case of partial occlusion, be it DOM occluding GL, or GL occluding DOM, it’s achieved by modifying cutout state either way.

1 Like