<base href="https://docs.lume.io/guide/custom-rendering/example.html" />
<script src="../../importmap.js"></script>

<lume-scene webgl id="scene">
	<lume-camera-rig horizontal-angle="-30" vertical-angle="30"></lume-camera-rig>
	<lume-box size="100 100 100" mount-point="0.5 0.5 0.5"></lume-box>
	<lume-point-light position="200 400 500" color="deeppink" intensity="0.6"></lume-point-light>
	<lume-point-light position="-200 -400 -500" color="royalblue" intensity="0.6"></lume-point-light>
</lume-scene>

<style>
	html,
	body {
		margin: 0;
		height: 100%;
	}
	lume-element3d {
		padding: 5px;
	}
</style>

<script type="module">
	import {Motor} from 'lume'
	import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
	import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
	import {ShaderPass} from 'three/addons/postprocessing/ShaderPass.js';
	import {UnrealBloomPass} from 'three/addons/postprocessing/UnrealBloomPass.js';
	import {OutputPass} from 'three/addons/postprocessing/OutputPass.js';
	import {GlitchPass} from 'three/addons/postprocessing/GlitchPass.js';

	const composer = new EffectComposer(scene.glRenderer)

	function setDimensions() {
		composer.setPixelRatio(window.devicePixelRatio)
		const resize = () => composer.setSize(scene.clientWidth, scene.clientHeight)
		const observer = new ResizeObserver(resize)
		observer.observe(scene)
	}

	// If you do things manually with Three.js, you need to make sure to set the
	// proper rendering dimensions. Comment this out and it will still work, but
	// the demo may be lower resolution and look pixelated.
	setDimensions()

	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 = () => {
		// Make sure to always use the currently-active camera.
		renderPass.camera = scene.threeCamera

		composer.render()
	}

	// If you need the scene to be continuously rendering for a certain
	// post-processing effects (for example, the GlitchPass is animated over
	// time), then make a loop that calls scene.needsUpdate() repeatedly. Here
	// we do that with Lume's Motor:
	Motor.addRenderTask(() => scene.needsUpdate())

	// Alternatively, make an rAF loop:
	// requestAnimationFrame(function loop() {
	// 	scene.needsUpdate()
	// 	requestAnimationFrame(loop)
	// })
</script>