在three.js中使用同一個渲染器在多個THREE.EffectComposer場景之間切換

Question

我正在用composer在three.js中創建複雜場景。 我想知道是否有可能在具有不同作曲家效果的兩個場景之間切換。爲了獲得某種視角，我創建了一個允許您在兩個正常渲染場景之間切換的示例。

Two scene example

從我的作曲家是如何運作的，你創建它的一個實例，然後應用渲染過程，像這樣的認識：

this.composer = new THREE.EffectComposer(this.renderer.default.init); 
    this.renderPass = new THREE.RenderPass(this.stage, this.camera); 
    this.renderPass.renderToScreen = true; 
    this.composer.addPass(this.renderPass); 

，然後申請一個作曲家呈現像這樣：

this.composer.render(); 

所以我的問題是，如果我有第二個場景，哪一個作曲家實例我怎麼可以然後：

1. 使用相同的渲染器（如果可能的話）
2. 在場景1和場景2之間切換，與我的示例類似。

我知道這是相當抽象的，但任何提示，觀點總是讚賞。

Tnxs

Answer 1

於是我開始之前，我只是想給一個喊出來Martin Schuhfuß誰提供的洞察力，這種解決方案。

免責聲明

我不是一個專家或專業程序員決不javascript和我認爲，這是這樣做的唯一途徑，我的演講應該採取以抽象的方式。我的想法僅僅解釋瞭解決方案所基於的理論前提，並且這將取決於您自己的架構。

架構

我在這個例子中使用OOP方法，你應該能夠操縱解決任何你正在使用。

方法

因此，基於馬丁目前的例子中，你可以看到，我們能夠作曲家屬性/對象添加到我們的場景中的對象，這意味着場景可能然而，在繼承相同的作曲家的效果是輝煌的，我的情況我有許多不同作曲家效果的場景，所以我需要重新思考這個問題。

1.創建一個Composer對象。

所以我創建了一個對象來放置composer對象，並在引用我的效果時保持好的'composer'名稱約定。

This.composer = {}; 

2.創建一個函數來初始化有關場景的RenderPasses。

因此，重要的是要記住，在調用我們的作曲家之前，我們需要先定義並初始化RenderPasses。 RenderPasses允許我們歸類我們想要的效果（知道有着色器）。在我的示例中，我有兩個場景因此需要創建：

1. 兩個RenderPasses。
2. One RenderPass複製場景。
3. 另一個RenderPass將棕褐色效果應用於其場景。代碼的

例子：

this.init = function() { 

stackoverflow.webgl.pass.base = new THREE.RenderPass(stackoverflow.webgl.scene.default, 
stackoverflow.webgl.camera); 

stackoverflow.webgl.pass.base2 = new THREE.RenderPass(stackoverflow.webgl.scene.test, 
stackoverflow.webgl.camera); 

stackoverflow.webgl.pass.sepia = new 
THREE.ShaderPass(THREE.SepiaShader); 
stackoverflow.webgl.pass.sepia.renderToScreen = true; 

stackoverflow.webgl.pass.copy = new THREE.ShaderPass(THREE.CopyShader); 
stackoverflow.webgl.pass.copy.renderToScreen = true; 

} 

注：一些文件名必須重命名，由於法律上的原因，但問題的關鍵是在於，這個函數被調用到一個更大的物體。

3.創建一個啓動功能，讓指定作曲家場景

此功能的目的只是爲了證明我們如何結合起來一起。所以我們的代碼就是這樣的。

// so we create an object to use for reference for EffectComposer objects 
    this.composer = {}; 


// this property is used to set the scene that we want 
// this.scene.default = new THREE.Scene(); 

    this.activeScene = this.scene.default; 

// this function is just a wrapper for our code 

    this.start = function() { 

// so call our initialise our RenderPasses 

    stackoverflow.webgl.pass.init(); 

// my own method of seting up the WebGLRenderer scene (You do it your Way!) 
    stackoverflow.webgl.renderer.default.setup; 

// Create a new composer for scene 1 
    this.composer.ui = new THREE.EffectComposer(stackoverflow.webgl.renderer.default.init); 

// Create a new composer for scene 1 
    this.composer.ui2 = new THREE.EffectComposer(stackoverflow.webgl.renderer.default.init); 

// Now here is the cool stuff you can assign a composer to each scene 

    this.scene.default.composer = stackoverflow.webgl.composer.ui; 
    this.scene.test.composer = stackoverflow.webgl.composer.ui2; 

// and i always like to check that things happen and they do ;) 

    console.log(this.scene.default); 
    console.log(this.scene.test); 
    console.log(this.composer); 

// so you will need to add the passes some place, I created a function call render, (you do according to your code structure) 

    stackoverflow.webgl.render(); 

    } 

4.定義，你在你的架構添加通行證

所以現在我們需要（從作曲家addpass功能）添加pass聲明對我們的影響發生。

this.render = function() {  
stackoverflow.webgl.composer.ui.addPass(stackoverflow.webgl.pass.base);   
stackoverflow.webgl.composer.ui.addPass(stackoverflow.webgl.pass.copy);  
stackoverflow.webgl.composer.ui2.addPass(stackoverflow.webgl.pass.base2); 
stackoverflow.webgl.composer.ui2.addPass(stackoverflow.webgl.pass.sepia); 
}; 

5.添加EffectComposer渲染方法

所以這行代碼都需要無論你做了作曲家處理放置（取決於你的設置）。

stackoverflow.webgl.activeScene.composer.render(); 

請大家注意，「activecScene」部分提到了當時使用的實際場景。這是允許我們改變場景的。

6.創建一個按鈕，並

所以我在dat.gui實例，讓我的兩個場景之間切換創建了兩個按鈕的場景之間切換。

再次，你可以創建一個按鈕，無論你喜歡什麼功能。

// again just change the vale of active scene to the scene you wish to change to 

// button 1 value will be something like this: 
stackoverflow.webgl.activeScene = stackoverflow.webgl.scene.test; 

// button 2 value will takes us back to scene 1 
stackoverflow.webgl.activeScene = stackoverflow.webgl.scene.default; 

結論 這是我實現這個效果的方法，但如果有更好的或替代方法，那麼請加入到討論和分享。

Answer 2

您可以從一個effectComposer你切換從一個場景到另一個只需切換到另外一臺同樣的方式。所以這會是這樣的：

const scenes = [ 
    new THREE.Scene(), 
    new THREE.Scene() 
]; 

const composers = scenes.map(function(scene) { 
    const composer = new THREE.EffectComposer(renderer); 

    // configure render-passes 
    const renderpass = new THREE.RenderPass(scene, camera); 
    renderpass.renderToScreen = true; 
    composer.addPass(renderpass); 

    scene.composer = composer; 
    return composer; 
}); 

// then use the composer for the scene 
let activeScene = scenes[0]; 
activeScene.composer.render(); 

如果你願意，你甚至應該可以重用某些渲染通道。