Post-processing in ThreeJS

This article will record the brief process of building a composed-effect in 3D Web page with THREE.JS. As artist, Web 3D allow me to create some strong visual, it could be interactive and dynamic. Working with THREE.js, I can apply 3D model or text on Web with different angles, colours, which really different with custom graphic work.

Prepare library and reference file

Post-processing it’s not core in ThreeJS, so we should copy the extra files and reference them.

<script src="js/EffectComposer.js"></script>
<script src="js/CopyShader.js"></script>
<script src="js/MaskPass.js"></script>
<script src="js/RenderPass.js"></script>
<script src="js/ShaderPass.js"></script>

The most important thing is, the EffectComposer file must be linked at first, another thing is, these files should be copied from a common ThreeJS property. I used older Three.js file at first, then I faced a dozen of problems about compatibility (兼容性).

let composer,renderPass

composer = new THREE.EffectComposer( renderer )
// 把渲染器声明为一个合成器

renderPass = new THREE.RenderPass(scene, camera)
// 把场景和照相机能渲染出的画面定义为一个 渲染传递,这样能把已有的画面添加进混合器

composer.addPass(renderPass)

So far, we made renderer to be a composer, it can replace existing renderer and render image. The different thing is it can add different effect now. Before we add effect on composer, we should change the way of render function.

function animate(){
    requestAnimationFrame(animate)
    ...

    // renderer.render 这是之前的渲染器,现在可以不用它了
    composer.render()
}

So we can add effect now. I’m a beginner now, in my view, the ways to add effects can be division as EffectPass and ShaderPass. There’re many effects had been prepared in ThreeJS official documentation, so we can use it directly.

 bloomPass = new THREE.BloomPass()
 composer.addPass(bloomPass)

glitchEffect = new THREE.GlitchPass()
composer.addPass(glitchEffect)

filmEffect = new THREE.FilmPass(0.5,0.015,56,false)
composer.addPass(filmEffect)

We can see, if we use some library like xxxPass, it could be used really easily. A really important thing is,

xxx.renderToScreen = true

should be added if this is the last effect.

sometimes we will use some custom shader, so we might use ShaderPass to declare this shader, like this:

    halfToneEffect = new THREE.ShaderPass( THREE.DotScreenShader );
halfToneEffect.uniforms[ 'scale' ].value = 5;
composer.addPass( halfToneEffect );


RGBeffect = new THREE.ShaderPass( THREE.RGBShiftShader );
RGBeffect.uniforms[ 'amount' ].value = 0.01;
RGBeffect.renderToScreen = true;
composer.addPass( RGBeffect );

By this way, we can add multiply effects on renderer and make our image more interesting! Let’s see some example I made.

about idea

Maybe you can see these image have different colour and tiny differences about details. Because I used the advantages of digital media, I made the colours and direction of light, texture of objects, intensity of fog are changing at ranges of time. Then I added animation on objects, so they will rotate and move.

The reason I did that is I’d like show the differences of individual objects. Like a man, we are both different, but still have some common point. Because of these common, the group we combined is full of diversity. This the point I’d like going to explore in EPIV project.