Blog.csdn.net/A873054267/…

Post-processing sequence

  • EffectComposer(Renderer) initializes the post-processing entry, the base package for post-processing, which is used to render scenes, apply channels, and output results.
  • RenderPass(scene, camera) This pass will render a new scene based on the current scene and camera, which can be seen as saving the current scene
  • Three.shaderpass (three.copyshader) This channel takes custom shaders as parameters to generate an advanced, custom post-processing channel that produces various blur effects and advanced filters. FXAAShader and LuminosityShader are all packages based on this
    var renderPass = new THREE.RenderPass(scene, camera);
    var customGrayScale = new THREE.ShaderPass(SweepingLightShader);
    customGrayScale.needsUpdate=true
    var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
    effectCopy.renderToScreen = true;

    var composer = new THREE.EffectComposer(renderer);
    composer.addPass(renderPass);
    composer.addPass(customGrayScale);
    composer.addPass(effectCopy);
    composer.render()
Copy the code

Three has its own post-processing

  • DotScreenShader: output grayscale point set
  • Three. MirrorShader: Create a mirror effect
  • THREE. HueSaturationShader: change the color hue and saturation
  • VignetteShader: Added halo effect
  • THREE. ColorCorrectionShader: adjust the distribution of color
  • RGBShiftShader: Separate the red, green and blue colors
  • THREE. BrightnessContrastShader: change the brightness and contrast
  • ColorifyShader: Covers the entire screen with a color
  • THREE.SepiaShader: Creates an effect similar to squid ink
  • THREE.KaleidoShader: Similar to a kaleidoscope effect
  • THREE.LuminosityShader: Increase the brightness
  • THREE.TechnicolorShader: Simulates two color effects similar to those in old movies
  • THREE. HorizontalBlurShader and THREE. VerticalBlurShader: you can create a blur in the direction of the horizontal and vertical
  • THREE. HorizontalTiltShiftShader and THREE. VerticalTileShiftShader: can be created in the horizontal and vertical direction tilt the effect of translation
  • THREE.TriangleBlurShader: The triangle-based approach creates a blurring effect
  • BleachBypassShader: Create a silver-plated effect
  • THREE.EdgeShader: Find the boundary of the image and display it
  • THREE.FXAAShader: Adds anti-aliasing effect
  • THREE.FocusShader: Creates a sharper center and blurry edges.