Subtractive of Geometries

In my practise I’ve met the issue: how to combinate DOM and WebGL layers in order to keep a feeling 3d scene.

the DOM layer crosses the WebGl scene

The green makers into the above picture are the DOM elements. How can you see, the WebGL scene is mixed in with the DOM layer.

How to get the effect, I let you know in the note.

Common algorithm

I hope that my readers’ve been experience with threejs.

1. Create a THREE.Scene
2. Create a THREE.HemisphereLight with arguments: skyColor equals #fff, groundColor equals #aaa and intensity is 25. Add into the scene.
3. Create a THREE.SphereGeometry with radius, which you want to cut from view. Set a THREE.MeshPhongMaterial as material for a mesh with any color, transpatent must be true and blending parameter must have the THREE.SubtractiveBlending value. Add the mesh into the scene.
4. And the last, add anything else.

It’s all algorithm :)
But need noticing that mixing lights with blending mode give to us needed result. And only this combination of colors and intensity work fine. If you need lower intensity then you should use brighter color and vice versa.
I’ve tried to play with these parameters and have had other interesting results.

Of cource you can use others kind of geomerties, all depends of your imagination.

Let’s try it out

For my solution I know at least two cases:

1. My current project, there’s I have to mix different type of DOM elements and a WebGL scene.
2. My friend’s project, there’s he works with both cesiumjs and threejs in the same time.

Thank you for reading. If you find this post useful, please click the 💚button so this story can reach out to more readers.

If you’d like to talk about it or others let me know about it by PM on twitter.com/artzub, fb.com/artzub or artzub[at]gmail.com.