Seeking guidance on using EffectComposer for postprocessing renders, as my basic setup doesn't seem to be rendering anything on the screen. Any ideas on what I might be missing?
<!doctype html>
<html>
<head>
<title>game</title>
<style type="text/css">
html, body {
margin: 0px;
width: 100%;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="viewport"></canvas>
<script type="text/javascript" src="three.js"></script>
<script type="text/javascript" src="CopyShader.js"></script>
<script type="text/javascript" src="ShaderPass.js"></script>
<script type="text/javascript" src="EffectComposer.js"></script>
<script type="text/javascript" src="RenderPass.js"></script>
<script type="text/javascript" src="MaskPass.js"></script>
<script type="text/javascript">
var width = document.body.clientWidth;
var height = document.body.clientHeight;
var canvas = document.querySelector('#viewport');
var renderer = new THREE.WebGLRenderer({canvas: canvas});
renderer.setSize(width, height);
var scene = new THREE.Scene();
var cube = new THREE.Mesh(
new THREE.CubeGeometry(30, 30, 30),
new THREE.MeshPhongMaterial({color: 0xFF0000}));
scene.add(cube);
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position = new THREE.Vector3(60, 60, 60);
camera.lookAt(cube.position);
camera.updateMatrix();
scene.add(camera);
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position = new THREE.Vector3(100, 80, 20);
scene.add(pointLight);
var renderPass = new THREE.RenderPass(scene, camera);
renderPass.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
renderer.clear();
composer.render();
//renderer.render(scene, camera);
</script>
</body>
</html>
By uncommenting the last line, progress is visible on the screen.