Using ThreeJS `OutlineEffect` in Lume

Design API
#1

How should I go about using postprocessing effects such as the OutlineEffect in ThreeJS within Lume? I’d imagine using the scene’s glRenderer in some way, but I’m not familiar with the API.

https://pmndrs.github.io/postprocessing/public/demo/#outline

1 Like
#2

What we can do is override the <lume-scene> element’s drawScene function so that we can call a custom Three.js effect composer:

	const scene = document.querySelector('lume-scene') // get the <lume-scene> element

	const renderPass = new RenderPass(scene.three, scene.threeCamera)
	composer.addPass(renderPass)

	const glitchPass = new GlitchPass()
	composer.addPass(glitchPass)

	const outputPass = new OutputPass()
	composer.addPass(outputPass)

	scene.drawScene = () => {
		// If there are multiple cameras in the Lume scene, make sure to always
		// use the currently-active camera.
		renderPass.camera = scene.threeCamera

		composer.render()
	}

Live demo: