THREE.js ЭффектКомпозер объединяет две сцены для постобработки

#javascript #three.js

Вопрос:

Я хочу отрисовывать 2 сцены сначала в качестве фона, а затем прозрачно с эффектами HUD. Я хочу использовать эффект цветения на обоих.

Мой подход всегда делает последнюю сцену охватывающей первую-одну:

 var renderer = new THREE.WebGLRenderer({alpha: 1,antialias:_basic.config.antialias}); 
    renderer.autoClear = false; //false    

    var composer = new EffectComposer( renderer );
        composer.addPass( new RenderPass( scene, camera ) );   
    
    var composerHUD = new EffectComposer( renderer );
        composerHUD.addPass( new RenderPass( sceneHUD, cameraHUD ) ); 
    
    animate() {
      ///
      composer.render();
      renderer.clearDepth();
      composerHUD.render();
    }
 

отображается только cameraHUD

Первой идеей было использовать

 var composer = new EffectComposer( renderer );
    composer.addPass( new RenderPass( scene, camera ) );   
    composer.addPass( new RenderPass( sceneHUD, cameraHUD ) );  
    composerSpace.addPass( bloomPass ); 
 

но это похоже на то, что отображается только последняя сцена с эффектом цветения

Я использую прозрачность в обеих сценах, и каждый рендеринг композитора имеет прозрачный фон, но по какой-то причине рендерится только последняя сцена.

Каков правильный подход к отображению всех сцен по порядку, а затем использовать эффект, подобный composer.addPass( bloomPass ); влиянию на обе?