学习[threejs] threejs的后处理效果预览

反者道之动_弱者道之用
244 阅读1分钟

THREEJS effectCompose后处理

effectCompose使用流程

  1. 创建渲染器 const composer = new EffectComposer(webglRenderer);
  2. 添加输出渲染器 const renderPass = new RenderPass(scene, camera);
  3. 添加渲染器 composer.addPass(renderPass)
  4. 更新 composer.render()

效果

GlitchPass

image.png

FilmPass

image.png

DotScreenPass

image.png

HalftonePass

image.png

UnrealBloomPass

image.png

AfterImagePass

image.png

BokehPass

image.png

![image-20230320170616028](THREEJS effectCompose后处理.assets/image-20230320170616028.png)

ShaderPass(PixelShader)

image.png

ShaderPass(SobelOperatorShader)

image.png

ShaderPass(BleachBypassShader)

image.png

ShaderPass(ColoifyShader)

image.png

ShaderPass(HorizontalBlurShader)

image.png

ShaderPass(VerticalBlurShader)

image.png

ShaderPass(SepianShader)

image.png

ShaderPass(VignetteShader)

image.png

ShaderPass(GammaCorrectionShader)

image.png

ShaderPass(FXAAShader)AntiAliasing)

image.png

avatar
文章
阅读
粉丝