While the last article focused on performance issues, in this article we start designing the post-processing renderer architecture

EffectComposer -- (default generates sourceTarget (original scene), readBuffer (final result of each subsequent pass), WriteBuffer --renderPass -- Pass1 -- Pass2... writeBuffer --renderPass -- writeBuffer --renderPass -- Pass1 -- Pass2... --screenPass1 (post-processing for the screen) --screenPass2...Copy the code

1. The system architecture is probably so, because we consider using MSAA and FXAA two ways, first of all need to encapsulate a createRenderTarget method, is used to dynamically switch WebGLRenderTarget and WebGLMultisampleRenderTarge. The setDepth method is then wrapped to create depth maps and depth buffer objects for them. 2. In order to take care of video memory, if using MSAA, We use at most, only to the original WebGLMultisampleRenderTarge and a drawing of the scheme (for object the post-processing effect of rendering the picture called scheme diagram) using WebGLMultisampleRenderTarget, Use WebGLRenderTarget as much as possible for the rest of the rendertargets. At the same time, we should be careful to use as few additional rendertargets as possible to reduce memory overconsumption. The first step in object Pass is to generate a scheme diagram as follows:

var strategy = SchemeStrategyPool.getStrategy( this.name, schemeName); / / design a schemeStrategy strategy used in the material of modified scheme object strategy. GetRenderStrategy (); renderer.materialManager.setMode(schemeName); Renderer.setrendertarget (this.schemetarGetBuffer); // Bind schemeBuffer renderer.clear(true, false, true); // Clear color and template, not depth. Renderer. InitRenderList = false; Renderer. render(this.renderscene, this.rendercamera); renderer.initRenderList = true; / / reopened rendering list update the renderer. MaterialManager. SetMode (0); // Reset to three.js as the default rendering strategyCopy the code

Strategy is the current rendering strategy, for example, when rendering scheme diagrams, it is often necessary to replace a custom material, etc. Now the scheme diagram is in hand, but if there are too many objects to be processed after setting, the overhead of this step is still quite large, so it is necessary to design a static frame strategy (if MRT is available, all scheme diagram and original diagram can be rendered at one time without static frame), as shown in the following

if (this._dirty) {
            this._updateSchemeBuffer(renderer, readBuffer);
            this._dirty = false;
 }
Copy the code

Very simple, design a dirty, only need to update dirty to true, we do not need to update when stationary. The next thing you need is the later code, but be sure to switch to readBuffer and update the results. If you want to render to the screen, just take the result of readBuffer and render to the screen. So each pass can be strung together.

-- Post-related code, such as outLine renderer.setrenderTarget (this.readbuffer); renderer.clear(); renderer.render(this.scene, this.camera); if (this.renderToScreen) { this.quad.material = this.materialCopy; this.copyUniforms['tDiffuse'].value = this.readBuffer.texture; renderer.setRenderTarget(null); renderer.clear(); renderer.render(this.scene, this.camera); }Copy the code

So pass is designed. If it is full-screen, skip the scheme diagram and start processing with the readBuffer result. 4. Design the core pass, basically a simple post-processing renderer is designed. 5. Of course, in some cases you can design strategies to achieve high performance multi-glow effects (such as using certain parameters such as color or transparency during rendering to determine the color and intensity of the glow, etc., but there are some minor issues with a single rendering, depending on the requirements). In many cases, you will need to create multiple GlowPasses for different glow effects. The following are some examples of high performance glow that can render different glowpasses at one time. The theory is to render at one time and create multiple Glowpasses to give users more choices. Render multiple different inner glow effects at once:Render multiple glow effects at one time