![两位古典作曲家](https://istack.dev59.com/RhsdW.gif)
在开始之前,我要感谢Martin Schuhfuß,他提供了这个方案的见解。
免责声明
我不是JavaScript的专家或专业程序员,我并不认为这是唯一的方法,我的演示应该以抽象的方式来看待。我的想法仅是解释解决方案所基于的理论前提,其实现取决于您自己的架构。
架构
在本例中,我使用了OOP方法,您应该能够将解决方案操纵为您正在使用的任何方法。
方法
基于Martin的当前示例,您可以看到我们可以向场景对象添加作曲家属性/对象,这意味着场景可以继承相同的作曲家效果,这很棒,但是在我的情况下,我有许多具有不同作曲家效果的场景,因此我需要重新考虑问题。
1.创建一个作曲家对象。
因此,我创建了一个对象来放置作曲家对象,并在参考我的效果时保持漂亮的“作曲家”名称约定。
This.composer = {}
2. 创建一个函数,用于初始化与场景相关的 RenderPasses。
重要的是要记住,在调用我们的 composer 之前,我们需要先定义和初始化 RenderPasses。RenderPasses 允许我们添加我们想要的效果(即所谓的着色器)。在我的例子中,我有两个场景,因此我需要创建:
- 两个 RenderPasses。
- 一个 RenderPass 复制了该场景。
- 另一个 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. 创建一个开始函数,并让作曲家分配到场景中
该函数的目的只是为了展示如何将所有内容组合在一起。所以我们有的代码像这样。
this.composer = {};
this.activeScene = this.scene.default;
this.start = function () {
stackoverflow.webgl.pass.init();
stackoverflow.webgl.renderer.default.setup;
this.composer.ui = new THREE.EffectComposer(stackoverflow.webgl.renderer.default.init);
this.composer.ui2 = new THREE.EffectComposer(stackoverflow.webgl.renderer.default.init);
this.scene.default.composer = stackoverflow.webgl.composer.ui;
this.scene.test.composer = stackoverflow.webgl.composer.ui2;
console.log(this.scene.default);
console.log(this.scene.test);
console.log(this.composer);
stackoverflow.webgl.render();
}
4. 确定在架构中添加通道的位置
现在,我们需要添加通道声明(来自composer的addpass函数),以便我们的效果生效。
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()
请注意,“activeScene”部分是指实际使用的场景。这允许我们更改场景。
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
结论
这是我实现此效果的方法,但如果有更好或替代的方法,请添加到讨论中并分享。
activeScene.composer.render()
进行渲染。关于Effect-Composer本身的更多细节,我建议您添加一个单独的问题(另外,也许这会有所帮助:https://github.com/hughsk/three-effectcomposer)。 - Martin Schuhfuß