Trouble rendering with effectComposer + no error

Questions
1

Hello everyone, I have troubles using effectComposer and I cannot find why, I have no error in the console and I followed a sample code… Can you point me in the right direction please ?

Here is my code :

window.addEventListener("load", Main, false);


var scene, camera, controls, container, renderer;
var composer, renderPass, effect;


function Main() {
	init();
	makeModels();
	loop();
};



function init() {

	container = document.getElementById("world");

	scene = new THREE.Scene();
	scene.background = new THREE.Color(0x9999ff);

	addShadowedLight( -10, 6, -10, 0xffffff, 0.5)
	addShadowedLight( 1, 1, 1, 0xffffff, 0.5 );
	addShadowedLight( 0.5, 1, -1, 0xffaa00, 0.1 );

	var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
	scene.add( light );

	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.BasicShadowMap;
	container.appendChild(renderer.domElement);

	camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 50);
	camera.position.z -= 5;
	scene.add(camera);

	controls = new THREE.OrbitControls(camera, container);
	controls.update()
	controls.enablingDamping = true;


	/// Effect composer section ///

	composer = new THREE.EffectComposer(renderer);

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

	effect = new THREE.ShaderPass(THREE.SepiaShader);
	composer.addPass(effect);

	///////////////////////////////
};



function makeModels() {

	var geometry, material, mesh;

	geometry = new THREE.SphereGeometry(1, 32, 32);
	material = new THREE.MeshPhongMaterial({color : 0x99cc00});
	mesh = new THREE.Mesh(geometry, material);

	scene.add(mesh);

};



function addShadowedLight( x, y, z, color, intensity ) {
	var directionalLight = new THREE.DirectionalLight( color, intensity );

	directionalLight.position.set( x, y, z );
	directionalLight.castShadow = true;
	
	var d = 1;
	directionalLight.shadow.camera.left = -d;
	directionalLight.shadow.camera.right = d;
	directionalLight.shadow.camera.top = d;
	directionalLight.shadow.camera.bottom = -d;
	directionalLight.shadow.camera.near = 0.1;
	directionalLight.shadow.camera.far = 30;
	directionalLight.shadow.mapSize.width = 1048;
	directionalLight.shadow.mapSize.height = 1048;
	directionalLight.shadow.bias = -0;

	scene.add( directionalLight );
};



//////////////////////////// LOOP  ////////////////


function loop() {

	composer.render();

	// renderer.render(scene, camera);

	requestAnimationFrame(loop);
};

Here is the html file :

<!DOCTYPE html>
<html>
<head>
	<title>essai effectComposer</title>
	<meta charset="utf-8">

	<style type="text/css">
		#world {
			top: 0px;
			left: 0px;
			position: fixed;
			width: 100vw;
			height: 100vh;
			background-color: red;
		}
	</style>

	<script src="Three.js"></script>
	<script src="OrbitControls.js"></script>
	<script src="script.js"></script>

	<script src="postprocessing libs/EffectComposer.js"></script>
	<script src="postprocessing libs/CopyShader.js"></script>
	<script src="postprocessing libs/RenderPass.js"></script>
	<script src="postprocessing libs/ShaderPass.js"></script>
	
	<script src="postprocessing libs/SepiaShader.js"></script>


</head>



<body>

	<div id="world"></div>

</body>
</html>

And here is the result in my browser : effectcomposer%20error

2

Hi!
Have a look at this SO answer:

3

Hi prisoner849,

Thanks for pointing me to this answer, I changed my code accordingly but it seems not to solve my problem.
Here is the new html file :

<!DOCTYPE html>
<html>
<head>
	<title>essai effectComposer</title>
	<meta charset="utf-8">

	<style type="text/css">
		#world {
			top: 0px;
			left: 0px;
			position: fixed;
			width: 100vw;
			height: 100vh;
			background-color: red;
		}
	</style>

	<script src="Three.js"></script>
	<script src="OrbitControls.js"></script>
	<script src="script.js"></script>

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

	<script src="libs/SepiaShader.js"></script>


</head>



<body>

	<div id="world"></div>

</body>
</html>

And the result in my browser :

effectcomposer%20error%202

4

Any chance to provide a live example?

5

Just found where was the problem :grinning: :

After the last pass one has to add :
myEffect.renderToScreen = true;

So here is the corrected code at last :

window.addEventListener("load", Main, false);


var scene, camera, controls, container, renderer;
var composer, renderPass, effect;


function Main() {
	init();
	makeModels();
	loop();
};



function init() {

	container = document.getElementById("world");

	scene = new THREE.Scene();
	scene.background = new THREE.Color(0x9999ff);

	addShadowedLight( -10, 6, -10, 0xffffff, 0.5)
	addShadowedLight( 1, 1, 1, 0xffffff, 0.5 );
	addShadowedLight( 0.5, 1, -1, 0xffaa00, 0.1 );

	var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
	scene.add( light );

	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.BasicShadowMap;
	container.appendChild(renderer.domElement);

	camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 50);
	camera.position.z -= 5;
	scene.add(camera);

	controls = new THREE.OrbitControls(camera, container);
	controls.update()
	controls.enablingDamping = true;


	/// Effect composer section ///

	composer = new THREE.EffectComposer(renderer);

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

	effect = new THREE.ShaderPass(THREE.SepiaShader);
	composer.addPass(effect);
	effect.renderToScreen = true;

	///////////////////////////////
};



function makeModels() {

	var geometry, material, mesh;

	geometry = new THREE.SphereGeometry(1, 32, 32);
	material = new THREE.MeshPhongMaterial({color : 0x99cc00});
	mesh = new THREE.Mesh(geometry, material);

	scene.add(mesh);

};



function addShadowedLight( x, y, z, color, intensity ) {
	var directionalLight = new THREE.DirectionalLight( color, intensity );

	directionalLight.position.set( x, y, z );
	directionalLight.castShadow = true;
	
	var d = 1;
	directionalLight.shadow.camera.left = -d;
	directionalLight.shadow.camera.right = d;
	directionalLight.shadow.camera.top = d;
	directionalLight.shadow.camera.bottom = -d;
	directionalLight.shadow.camera.near = 0.1;
	directionalLight.shadow.camera.far = 30;
	directionalLight.shadow.mapSize.width = 1048;
	directionalLight.shadow.mapSize.height = 1048;
	directionalLight.shadow.bias = -0;

	scene.add( directionalLight );
};



//////////////////////////// LOOP  ////////////////


function loop() {

	composer.render();

	// renderer.render(scene, camera);

	requestAnimationFrame(loop);
};
6

This line is making error for me like following

error TypeError: Cannot read property ‘autoUpdate’ of undefined
at WebGLRenderer.render (three.module.js:25486)
at RenderPass.render (RenderPass.js:60)
at EffectComposer.render (EffectComposer.js:139)
at animate (index_audi_loader.html:1079)
at index_audi_loader.html:155
at onLoadCallback (RGBELoader.js:535)
at Object.onLoad (three.module.js:36767)
at XMLHttpRequest. (three.module.js:36385)

Any answers to solve this?