How to use post processing stack / webGL renderer

[heaversm]

Hi - I'm trying to implement the post processing stack of threejs. Do you have an example of this? I'm trying to port a working non-ar example of this into threejs. Normally what I would do is create a webGL renderer:

renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize( ww,wh );
document.body.appendChild( renderer.domElement );

and then add all my passes:

composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );

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

...

I noticed a few things:

• I'm not sure how to refer to my renderer in 8th wall, so I can't pass a reference to it to my effect composer.

• The post processing stack does not seem to be loaded by default so I have to load all the scripts individually.

Any idea how to get going with this? I'm just trying to incorporate it into the 8thwall / web / gettingstarted / xr3js example.

[atomarch]

Hi @heaversm, the XR.Threejs.xrScene() API returns handles to the scene, camera and renderer.

For example:
const {scene, camera, renderer} = XR.Threejs.xrScene()

I also share the same understanding as you that these libraries as not included in the base three.js bundle and you'll need to include these scripts manually. Check out: https://threejsfundamentals.org/threejs/lessons/threejs-post-processing.html

[milcktoast]

@heaversm You will need to provide your own Three.js camera pipeline module with a render hook that uses the EffectComposer instead of rendering directly to the canvas.
Here's a starting point – https://gist.github.com/jpweeks/885691851e7f7568da799ed35f8d54b8

[wilrick-arfected]

Hi Heaversm, have you found a solution to get this working? I'm doing something similar to you but haven't been able to get everything working right. At this point I'm able to render a 3D model in threejs and display it on an image tracker but when I call composer.render() I'm only able to see the model with the posteffect in a black background(it still tracks to the image though). Any pointers would be appreciated!