Three.js Licht Effekt

[j4nk3y]

Salve zusammen,

Ich experimentiere gerade etwas mit Three.js und diesem Beispiel.

Ich möchte diesen Licht Effekt erreichen ohne irgendetwas anderes in der Scene.

Dazu hab ich alle Shader und Composer aus dem Github Ordner geladen und die ausführende Funktion für mich etwas "aufgeräumt".

Dabei ist dann dieses entstanden:

function test(){

	var SCREEN_WIDTH = window.innerWidth;
	var SCREEN_HEIGHT = window.innerHeight;

	var COLOR1 = 0x77bbff;
	var COLOR2 = 0x8ec5e5;
	var COLOR3 = 0x97a8ba;

	var camera, target, scene, oclscene;
	var renderer, renderTarget, renderTargetOcl;

	var mesh, zmesh, geometry, pointLight, pmesh, vlight;

	var finalcomposer, oclcomposer, hblur, vblur;

	var mouseX = 0, mouseY = 0;

	var windowHalfX = window.innerWidth / 2;
	var windowHalfY = window.innerHeight / 2;

	var grPass;
	
	function init() {

		// MAIN SCENE
		
		scene = new THREE.Scene();
		
		camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
		
		camera.position.z = 220;
		
		scene.add( camera );
		
		scene.add( new THREE.AmbientLight( 0xffffff ) );
		
		cameraLight = new THREE.PointLight( 0x666666 );
		camera.add(cameraLight);
		scene.add( camera );

		// OCL SCENE

		oclscene = new THREE.Scene();
		
		oclcamera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
		oclcamera.position = camera.position;
		
		oclscene.add( oclcamera );
		oclscene.add( new THREE.AmbientLight( 0xffffff ) );
		
		
		//=============================================================
		//=============================================================
		
		
		vlight = new THREE.Mesh( 
			new THREE.IcosahedronGeometry(50, 3),
			new THREE.MeshBasicMaterial({
				color: COLOR1
			})
		);
		
		oclscene.add( vlight );
		
		
		//=============================================================
		//=============================================================
		
		// RENDERER
			
		renderer = new THREE.WebGLRenderer({
			antialias: true
		});

		renderer.autoClear = false;
		renderer.sortObjects = true;
		renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

		document.body.appendChild(renderer.domElement);
		
		// COMPOSERS

		var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBufer: false };
		renderTargetOcl = new THREE.WebGLRenderTarget( SCREEN_WIDTH/2, SCREEN_HEIGHT/2, renderTargetParameters );
		
		var effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
		effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );

		hblur = new THREE.ShaderPass( THREE.ShaderExtras[ "horizontalBlur" ] );
		vblur = new THREE.ShaderPass( THREE.ShaderExtras[ "verticalBlur" ] );

		var bluriness = 2;

		hblur.uniforms[ 'h' ].value = bluriness / SCREEN_WIDTH*2;
		vblur.uniforms[ 'v' ].value = bluriness / SCREEN_HEIGHT*2;

		var renderModel = new THREE.RenderPass( scene, camera );
		var renderModelOcl = new THREE.RenderPass( oclscene, oclcamera );

		grPass = new THREE.ShaderPass( THREE.Extras.Shaders.Godrays );
		grPass.needsSwap = true;
		grPass.renderToScreen = false;
		
		var finalPass = new THREE.ShaderPass( THREE.Extras.Shaders.Additive );
		finalPass.needsSwap = true;
		finalPass.renderToScreen = true;

		oclcomposer = new THREE.EffectComposer( renderer, renderTargetOcl );

		oclcomposer.addPass( renderModelOcl );
		oclcomposer.addPass( hblur );
		oclcomposer.addPass( vblur );
		oclcomposer.addPass( grPass );
		
		finalPass.uniforms[ 'tAdd' ].texture = oclcomposer.renderTarget1;

		renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );

		finalcomposer = new THREE.EffectComposer( renderer, renderTarget );

		finalcomposer.addPass( renderModel );
		finalcomposer.addPass( effectFXAA );
		finalcomposer.addPass( finalPass );
		
	}
	
	function animate() {

		requestAnimationFrame(function(){
			animate();
		});
		
		render();

	}

	function render() {
		
		var lPos = THREE.Extras.Utils.projectOnScreen(vlight, camera);
		grPass.uniforms["fX"].value = lPos.x;
		grPass.uniforms["fY"].value = lPos.y;
		
		finalcomposer.render();
		oclcomposer.render();
		
	}

	window.addEventListener( 'resize', onWindowResize, false );

	function onWindowResize(){

		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();

		renderer.setSize( window.innerWidth, window.innerHeight );
	}
	
	document.addEventListener( 'mousemove', onDocumentMouseMove, false );
	
	function onDocumentMouseMove(event) {

		mouseX = ( event.clientX - windowHalfX );
		mouseY = ( event.clientY - windowHalfY );

	}
	
	init();
	animate();
}

Problem ist nun das in render() bei finalcomposer.render(); oclcomposer.render(); folgender Fehler ausgeworfen wird: Uncaught TypeError: Cannot read property 'visible' of undefined.

Nun ist mir wohl klar was dieser Fehler bedeutet, aber finalcomposer und auch oclcomposer sind sowohl in test() local initialisiert als auch in init() definiert und müssten somit in render() zur verfügung stehen.

Zusätzlich treten Fehler in dem EffectComposer in der Zeile
pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );
und im RenderPass in
renderer.render( this.scene, this.camera, readBuffer, this.clear );
auf.

Falls Jemand einen Tipp für mich hat wär das genial!

Gruß
Jo

[dedlfix]

Tach!

Problem ist nun das in render() bei finalcomposer.render(); oclcomposer.render(); folgender Fehler ausgeworfen wird: Uncaught TypeError: Cannot read property 'visible' of undefined.

Nun ist mir wohl klar was dieser Fehler bedeutet, aber finalcomposer und auch oclcomposer sind sowohl in test() local initialisiert als auch in init() definiert und müssten somit in render() zur verfügung stehen.

Falls Jemand einen Tipp für mich hat wär das genial!

Der Tip heißt Debugging. Irgendwo werden deiner Meinung nach Dinge initialisiert, aber tatsächlich sind sie es nicht. Oder nicht mehr. Oder vielleicht anderswo und nicht im aktuellen Scope. Oder was auch immer. Da gilt es nun die Stelle herauszufinden, wo die Abweichung zu deiner Vorstellung passiert und dafür hat man das Debugging erfunden und entsprechende Tools in Browser eingebaut. Oder zur Not auch console.log(). Debugging ist die unvermeidbare Vorarbeit, um die problematische Stelle zu finden. Vielleicht erkennst du dann bereits den Grund, vielleicht auch nicht. Aber dann kannst du ja nochmal fragen und die neuen Erkenntnisse präsentieren.

dedlfix.