When i use post-process, background img is covered

gamza · May 26, 2017, 4:38am

how should i solve this problem?

looeee · May 26, 2017, 12:11pm

Can you provide more details? Nobody will be able to help you with what you have given so far.

gamza · May 29, 2017, 7:40am

im sorry…

I have something to solve before the original question( title )…

I want to use post-processing.

I have found several problems.

If I addpass the smaa to the composer, there is an error that the nodepass that was originally done with addpass is not displayed on the screen.
Likewise, if I addpass smaa first, smaa is not displayed on the screen.

	<style>
		body {
			margin: 0px;
			background-color: #000;
			overflow: hidden;
			font-family:Monospace;
			font-size:13px;
			margin: 0px;
			text-align:center;
			overflow: hidden;
		}
		#info {
			color: #fff;
			position: absolute;
			top: 10px;
			width: 100%;
			text-align: center;
			display:block;
		}
	</style>
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	
	
	
	<script src="js/build/three.js"></script>
	<script src="js/controls/OrbitControls.js"></script>
	<script src="js/libs/dat.gui.min.js"></script>

	<script src="js/postprocessing/EffectComposer.js"></script>
		
	<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/SMAAShader.js"></script>		
<script src="js/postprocessing/SMAAPass.js"></script>

	<script src="js/postprocessing/RenderPass.js"></script>

	<script src="js/postprocessing/ShaderPass.js"></script>

	<!-- NodeLibrary -->
	<script src="js/nodes/GLNode.js"></script>
	<script src="js/nodes/RawNode.js"></script>
	<script src="js/nodes/TempNode.js"></script>
	<script src="js/nodes/InputNode.js"></script>
	<script src="js/nodes/ConstNode.js"></script>
	<script src="js/nodes/FunctionNode.js"></script>
	

	
	<script src="js/nodes/NodeBuilder.js"></script>
	<script src="js/nodes/NodeLib.js"></script>
	<script src="js/nodes/NodeMaterial.js"></script>

	<!-- Accessors -->
	<script src="js/nodes/accessors/PositionNode.js"></script>
	<script src="js/nodes/accessors/UVNode.js"></script>

	<!-- Inputs -->
	<script src="js/nodes/inputs/FloatNode.js"></script>
	<script src="js/nodes/inputs/ColorNode.js"></script>

	<script src="js/nodes/inputs/TextureNode.js"></script>

	<script src="js/nodes/inputs/ScreenNode.js"></script>

	<!-- Math -->


	<!-- Utils -->

	<script src="js/nodes/utils/ColorAdjustmentNode.js"></script>


	<!-- Post-Processing -->
	<script src="js/nodes/postprocessing/NodePass.js"></script>

	<script>
	
		var camera, controls, scene, renderer;
		var object;
		
		var composer;
		var nodepass;	
		var smaapass;	
		
		var clock = new THREE.Clock();
		var gui;
		var param = {};	
		
				
		init();
		animate();
		
		function clearGui() {
			if ( gui ) gui.destroy();
			gui = new dat.GUI();
		}
		
		
		function addGui( name, value, callback, isColor, min, max ) {
		
			var node;	
			
			param[ name ] = value;	
			
			if ( isColor ) {												
				node = gui.addColor( param, name ).onChange( function() {	
					callback( param[ name ] );								
				} );
			} else if ( typeof value == 'object' ) {						
				node = gui.add( param, name, value ).onChange( function() {	
					callback( param[ name ] );								
				} );
			} else {
				node = gui.add( param, name, min, max ).onChange( function() {	
					callback( param[ name ] );									
				} );
			}
			return node;	//
		}
		
		clearGui();	// 

	
		var screen = new THREE.ScreenNode();
		var hue = new THREE.FloatNode();
		var sataturation = new THREE.FloatNode( 1 );
		var vibrance = new THREE.FloatNode();
		var brightness = new THREE.FloatNode( 0 );
		var contrast = new THREE.FloatNode( 1 );
		var hueNode = new THREE.ColorAdjustmentNode( screen, hue, THREE.ColorAdjustmentNode.HUE );
		var satNode = new THREE.ColorAdjustmentNode( hueNode, sataturation, THREE.ColorAdjustmentNode.SATURATION );
		var vibranceNode = new THREE.ColorAdjustmentNode( satNode, vibrance, THREE.ColorAdjustmentNode.VIBRANCE );
		var brightnessNode = new THREE.ColorAdjustmentNode( vibranceNode, brightness, THREE.ColorAdjustmentNode.BRIGHTNESS );
		var contrastNode = new THREE.ColorAdjustmentNode( brightnessNode, contrast, THREE.ColorAdjustmentNode.CONTRAST );
		
		nodepass.value = contrastNode;
		
	// GUI
		addGui( 'saturation', sataturation.number, function( val ) {
			sataturation.number = val;
		}, false, 0, 2 );
		
		addGui( 'vibrance', vibrance.number, function( val ) {
			vibrance.number = val;
		}, false, - 1, 1 ).step(0.1);	
		
		addGui( 'contrast', contrast.number, function( val ) {
			contrast.number = val;
		}, false, 0, 2 );
	
		nodepass.build();

		
		function init() {
		
			renderer = new THREE.WebGLRenderer();						
			renderer.setPixelRatio( window.devicePixelRatio );			
			renderer.setSize( window.innerWidth, window.innerHeight );	 
			document.body.appendChild( renderer.domElement );			
			//
			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );	
			camera.position.z = 150;																	
			scene = new THREE.Scene();																	
			controls = new THREE.OrbitControls( camera, renderer.domElement );
				var loader = new THREE.JSONLoader();
				loader.load( 'js/object/big_3d_1000.js', function( geometry ) {
					geometry.computeVertexNormals();
					var texture = THREE.ImageUtils.loadTexture( 'textures/big_map_1000.jpg' );
					var material = new THREE.MeshStandardMaterial( {
						map : texture
					});
					  
					texture.anisotropy = renderer.getMaxAnisotropy();
					 
					mesh = new THREE.Mesh( geometry, material );	
					scene.add( mesh );

				});

			
			scene.add( new THREE.AmbientLight( 0xffffff,2 ) );			
			composer = new THREE.EffectComposer( renderer );			
			composer.addPass( new THREE.RenderPass( scene, camera ) );	
		
			nodepass = new THREE.NodePass();
			nodepass.renderToScreen = true;
			composer.addPass( nodepass );
			
			smaapass = new THREE.SMAAPass( window.innerWidth, window.innerHeight );
			smaapass.renderToScreen = true;
			composer.addPass( smaapass );
			//

			window.addEventListener( 'resize', onWindowResize, false );
		}
		
		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize( window.innerWidth, window.innerHeight );
			composer.setSize( window.innerWidth, window.innerHeight );
			
			//smaa
			var pixelRatio = renderer.getPixelRatio();
			var newWidth = Math.floor(  window.innerWidth / pixelRatio ) || 1;
			var newHeight = Math.floor(  window.innerHeight / pixelRatio ) || 1;
			composer.setSize( newWidth, newHeight );
		}
		
		function animate() {
			requestAnimationFrame( animate );
			var delta = clock.getDelta();
			nodepass.node.updateFrame( delta );
			composer.render();
		}
		
		
		
	</script>

</body>

gamza · May 29, 2017, 8:23am

I found the answer.

" nodepass.renderToScreen = false;//true; "

The problem was solved when I wrote this way.

But the problem with the title still remains.

The screen except for the 3D object becomes black and it is shown that alpha is canceled.

So I can not apply background-img to the body.

I want to solve this part.

looeee · May 30, 2017, 1:37am

Glad you solved your post-processing issue. But in future please stick to one question per post and include all relevant details from the start.

To show the background image under the rendered canvas, set alpha to true in the renderer:

var renderer = new THREE.WebGLRenderer( { alpha: true } );

You can leave the clear color at the default value.

renderer.setClearColor( 0x000000, 0 ); // default

gamza · May 30, 2017, 1:40am

im sorry…

English was a little hard for me…

I will do exact way in the future

thank you for your answer

I used to write according to your answers

but i could not resolve the problem

Is there any other way…?

Thanks in advance for your answer.

looeee · May 30, 2017, 12:23pm

Can you give an example that just shows the background image being covered, without the post-processing? The code you provided does not have a background image at all…

gamza · May 31, 2017, 8:35am

here’s a none post-processing screen and source

always thanks for your help

		body {
			margin: 0px;
			background-color: #fff;
			overflow: hidden;
			font-family:Monospace;
			font-size:13px;
			margin: 0px;
			text-align:center;
			overflow: hidden;
			background-image:url(http://sevensprings.dothome.co.kr/img/3.jpg);
		}
		#info {
			color: #fff;
			position: absolute;
			top: 10px;
			width: 100%;
			text-align: center;
			display:block;
		}



	
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="js/build/three.js"></script>
	<script src="js/controls/OrbitControls.js"></script>
	<script src="js/libs/dat.gui.min.js"></script>

	<script src="js/postprocessing/EffectComposer.js"></script>
		
	<script src="js/shaders/CopyShader.js"></script>
	
	<!-- SMAA -->
	<script src="js/shaders/SMAAShader.js"></script>		
	<script src="js/postprocessing/SMAAPass.js"></script>

	<script src="js/postprocessing/RenderPass.js"></script>
	
	<!-- <script src="js/postprocessing/MaskPass.js"></script> -->

	<script src="js/postprocessing/ShaderPass.js"></script>

	<!-- NodeLibrary -->
	<script src="js/nodes/GLNode.js"></script>
	<script src="js/nodes/RawNode.js"></script>
	<script src="js/nodes/TempNode.js"></script>
	<script src="js/nodes/InputNode.js"></script>
	<script src="js/nodes/ConstNode.js"></script>
	<script src="js/nodes/FunctionNode.js"></script>
	

	
	<script src="js/nodes/NodeBuilder.js"></script>
	<script src="js/nodes/NodeLib.js"></script>
	<script src="js/nodes/NodeMaterial.js"></script>

	<!-- Accessors -->
	<script src="js/nodes/accessors/PositionNode.js"></script>
	<script src="js/nodes/accessors/UVNode.js"></script>

	<!-- Inputs -->
	<script src="js/nodes/inputs/FloatNode.js"></script>
	<script src="js/nodes/inputs/ColorNode.js"></script>

	<script src="js/nodes/inputs/TextureNode.js"></script>

	<script src="js/nodes/inputs/ScreenNode.js"></script>

	<!-- Math -->


	<!-- Utils -->

	<script src="js/nodes/utils/ColorAdjustmentNode.js"></script>


	<!-- Post-Processing -->
	<script src="js/nodes/postprocessing/NodePass.js"></script>

	<script>
	
		var camera, controls, scene, renderer;
		var object;
	//	var textureLoader = new THREE.TextureLoader();
		
		var composer;
		var nodepass;	//임의 변수 nodepass
		var SMAA_effect;	//임의 변수 SMAA_effect - 안티앨리어싱
		
		var clock = new THREE.Clock();
		var gui;
		var param = {};	//임의 객체 param
		
				
		init();
		animate();
		// clearGUi() 함수
		function clearGui() {
			if ( gui ) gui.destroy();
			gui = new dat.GUI();
		}
		
		// addGui() 함수	 이름,	값,		콜백함수,	???????, 최소, 최대값
		function addGui( name, value, callback, isColor, min, max ) {
		
			var node;	//임의 변수 node 선언 ( 3종류의 gui 추가 함수가 된다. )
			
			param[ name ] = value;	// 매개변수로 받은 name을 임의객체 param의 속성으로 지정 후 매개변수 value 값을 할당
			
			if ( isColor ) {												// isColor가 true일 때( 존재할 때 )
				node = gui.addColor( param, name ).onChange( function() {	// 객체 param의 내부 속성 name 값을 표시할 gui.addColor 함수 실행
					callback( param[ name ] );								// onChange 시 ( param[ name ] )을 매개변수로 들어오는 콜백함수 실행
				} );
			} else if ( typeof value == 'object' ) {						// 매개변수 value가 [ 객체 ]일 떄
				node = gui.add( param, name, value ).onChange( function() {	// 객체 param의 내부 속성 name 값을 셀렉트박스로 표시할 gui.add 함수 실행
					callback( param[ name ] );								// onChange - 콜백함수
				} );
			} else {
				node = gui.add( param, name, min, max ).onChange( function() {	// 그외 경우 객체, 속성, 최소, 최대값을 매개변수로 gui.add 함수 실행
					callback( param[ name ] );									// onChange - 콜백함수
				} );
			}
			return node;	// 함수 실행
		}
		
		clearGui();	// 삭제

	// 해당 postprocess를 위한 변수들
		var screen = new THREE.ScreenNode();
		var hue = new THREE.FloatNode();
		var sataturation = new THREE.FloatNode( 1 );
		var vibrance = new THREE.FloatNode();
		var brightness = new THREE.FloatNode( 0 );
		var contrast = new THREE.FloatNode( 1 );
		var hueNode = new THREE.ColorAdjustmentNode( screen, hue, THREE.ColorAdjustmentNode.HUE );
		var satNode = new THREE.ColorAdjustmentNode( hueNode, sataturation, THREE.ColorAdjustmentNode.SATURATION );
		var vibranceNode = new THREE.ColorAdjustmentNode( satNode, vibrance, THREE.ColorAdjustmentNode.VIBRANCE );
		var brightnessNode = new THREE.ColorAdjustmentNode( vibranceNode, brightness, THREE.ColorAdjustmentNode.BRIGHTNESS );
		var contrastNode = new THREE.ColorAdjustmentNode( brightnessNode, contrast, THREE.ColorAdjustmentNode.CONTRAST );
		
		nodepass.value = contrastNode;
		
	// GUI
		addGui( 'saturation', sataturation.number, function( val ) {
			sataturation.number = val;
		}, false, 0, 2 );
		
		addGui( 'vibrance', vibrance.number, function( val ) {
			vibrance.number = val;
		}, false, - 1, 1 ).step(0.1);	// step 소수단위 적용
		
		addGui( 'contrast', contrast.number, function( val ) {
			contrast.number = val;
		}, false, 0, 2 );
	
		nodepass.build();

		
		function init() {
		
			renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});						//
			renderer.setPixelRatio( window.devicePixelRatio );			// 
			renderer.setSize( window.innerWidth, window.innerHeight );	// 
		//	renderer.setClearColor( 0xffffff, 1 )
			document.body.appendChild( renderer.domElement );			// dom에 추가
			//
			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );	// 카메라
			camera.position.z = 400;																	//
			scene = new THREE.Scene();																		// object
			controls = new THREE.OrbitControls( camera, renderer.domElement );
				var loader = new THREE.JSONLoader();
				loader.load( /*'js/object/big_3d_1000.js'*/'js/object/300.js', function( geometry ) {
					geometry.computeVertexNormals();
					var texture = THREE.ImageUtils.loadTexture( 'textures/jung_512.jpg' );
					var material = new THREE.MeshStandardMaterial( {
						map : texture
					});
					  
					texture.anisotropy = renderer.getMaxAnisotropy();
					 
					mesh = new THREE.Mesh( geometry, material );	
					scene.add( mesh );

				});

			
			scene.add( new THREE.AmbientLight( 0xffffff,2 ) );			// AmbientLight
			composer = new THREE.EffectComposer( renderer );			// composer
			composer.addPass( new THREE.RenderPass( scene, camera ) );	//
				
			nodepass = new THREE.NodePass();
			nodepass.renderToScreen = false;//false;//true;
			composer.addPass( nodepass );
			
			SMAA_effect = new THREE.SMAAPass( window.innerWidth, window.innerHeight );
			SMAA_effect.renderToScreen = true;
			composer.addPass( SMAA_effect );
			//
			
			window.addEventListener( 'resize', onWindowResize, false );
		}
		
		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize( window.innerWidth, window.innerHeight );
			composer.setSize( window.innerWidth, window.innerHeight );
			
			//smaa
			var pixelRatio = renderer.getPixelRatio();
			var newWidth = Math.floor(  window.innerWidth / pixelRatio ) || 1;
			var newHeight = Math.floor(  window.innerHeight / pixelRatio ) || 1;
			composer.setSize( newWidth, newHeight );
		}
		
		function animate() {
			requestAnimationFrame( animate );
			var delta = clock.getDelta();
			nodepass.node.updateFrame( delta );
			renderer.render(scene,camera)
		//	composer.render();
			
		}

Topic		Replies	Views
Post processing effect composer not working Questions post-processing	10	1477	November 6, 2022
Broken effect with postprocessing Questions post-processing	1	617	March 2, 2022
Post processing in release 106 Questions post-processing	4	892	July 29, 2019
PostProcessing FXAA \| edge glitch/blur Questions post-processing , fxaa	1	626	August 6, 2022
Why is my effects composer outputting odd lines in Three.js Questions textures , shaders , effect-composer	0	354	April 13, 2022

When i use post-process, background img is covered

Related topics