I am trying to achieve a slanted divider effect with WebGL. The desired outcome is something like a view with 1 interactive divider (slanted) at the middle that allows the user to drag and view a mountain terrain with different colours.
The effect should look like this: slanted draggable divider
I have experimented based on a few examples I found online, but both methods used THREE.WebGLRenderer.setScissor() for the effect, and the results are rectangles.
May I know what are the alternatives to achieve the effect? Stencil buffer and masking? Better THREE.Camera setup? glViewport?
I have tried using react-three/drei's View and changing the CSS clip-path property, but it seems to stay rectangular.
Examples:
- https://threejs.org/examples/webgl_multiple_scenes_comparison
- https://codepen.io/sunnysideup8888/pen/poVvyvR
SetScissor implementation in the examples:
renderer.setScissor(0, 0, splitPos, sizes.height);
renderer.render(sceneL, camera);
renderer.setScissor(splitPos, 0, sizes.width, sizes.height);
renderer.render(sceneR, camera);
