Integrating Raw WebGL with Three.js

The issue you're experiencing with your raw WebGL rendering disappearing when combined with Three.js is related to how Three.js manages the WebGL context and its rendering pipeline.

The Main Problem

Three.js's WebGLRenderer clears the canvas by default before each render call. This is why your triangle appears briefly and then disappears - it's being cleared by Three.js on the next frame.

Solution

You need to disable the automatic clearing in Three.js and manage the rendering order carefully. Here's how to approach this:

1. Disable the automatic clearing in the Three.js renderer:

JAVASCRIPTCopied
// Disable automatic clearing
renderer.autoClear = false;

2. In your animation loop, you should:
   • First render your raw WebGL content
   • Then render your Three.js scene without clearing the buffer

JAVASCRIPTCopied
function animate() {
    requestAnimationFrame(animate);
    
    // First render your raw WebGL triangle
    triangleRenderer.render();
    
    // Then render Three.js scene without clearing
    // (autoClear is already set to false)
    renderer.render(scene, camera);
}

3. If you need more control over which buffers are cleared, you can also use these properties:

JAVASCRIPTCopied
renderer.autoClearColor = false;
renderer.autoClearDepth = false;
renderer.autoClearStencil = false;

4. If you need to manually clear specific buffers at certain points, you can use:

JAVASCRIPTCopied
// Clear only specific buffers
renderer.clear(true, true, false); // Clear color, depth, but not stencil

Additional Considerations

• Be aware of depth testing: If your raw WebGL content and Three.js objects occupy the same space, you'll need to manage the depth buffer correctly.
• State management: Your approach of saving and restoring WebGL state is good, but Three.js might be changing more state than you're tracking.
• Consider using Three.js's onBeforeRender or onAfterRender hooks for more precise control of when your custom rendering happens.

For more complex integration, you might want to explore the "Creating a scene" and "How to update things" sections in the Three.js documentation for additional insights on managing the rendering pipeline.