2
0
Эх сурвалжийг харах

Merge pull request #12206 from robertoranon/dev

Modified EffectComposer such that offscreen rendertarget size takes properly into account display pixel ratio
Mr.doob 7 жил өмнө
parent
commit
697505d2cf

+ 3 - 3
examples/js/postprocessing/EffectComposer.js

@@ -15,7 +15,7 @@ THREE.EffectComposer = function ( renderer, renderTarget ) {
 			stencilBuffer: false
 		};
 
-		var size = renderer.getSize();
+		var size = renderer.getDrawingBufferSize();
 		renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );
 		renderTarget.texture.name = 'EffectComposer.rt1';
 
@@ -62,7 +62,7 @@ Object.assign( THREE.EffectComposer.prototype, {
 
 		this.passes.push( pass );
 
-		var size = this.renderer.getSize();
+		var size = this.renderer.getDrawingBufferSize();
 		pass.setSize( size.width, size.height );
 
 	},
@@ -127,7 +127,7 @@ Object.assign( THREE.EffectComposer.prototype, {
 
 		if ( renderTarget === undefined ) {
 
-			var size = this.renderer.getSize();
+			var size = this.renderer.getDrawingBufferSize();
 
 			renderTarget = this.renderTarget1.clone();
 			renderTarget.setSize( size.width, size.height );

+ 16 - 7
examples/js/postprocessing/OutlinePass.js

@@ -15,6 +15,7 @@ THREE.OutlinePass = function ( resolution, scene, camera, selectedObjects ) {
 	this.edgeStrength = 3.0;
 	this.downSampleRatio = 2;
 	this.pulsePeriod = 0;
+	this.renderToScreen = false;
 
 	THREE.Pass.call( this );
 
@@ -321,6 +322,8 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 		this.overlayMaterial.uniforms[ "edgeStrength" ].value = this.edgeStrength;
 		this.overlayMaterial.uniforms[ "edgeGlow" ].value = this.edgeGlow;
 		this.overlayMaterial.uniforms[ "usePatternTexture" ].value = this.usePatternTexture;
+		this.overlayMaterial.uniforms[ "visibleEdgeColor" ].value = this.tempPulseColor1;
+		this.overlayMaterial.uniforms[ "hiddenEdgeColor" ].value = this.tempPulseColor2;
 
 
 		if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
@@ -367,7 +370,7 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 					float depth = unpackRGBAToDepth(texture2DProj( depthTexture, projTexCoord ));\
 					float viewZ = -perspectiveDepthToViewZ( depth, cameraNearFar.x, cameraNearFar.y );\
 					float depthTest = (-vPosition.z > viewZ) ? 1.0 : 0.0;\
-					gl_FragColor = vec4(0.0, depthTest, 1.0, 1.0);\
+					gl_FragColor = vec4(0.0, depthTest, 1.0, 0.0);\
 				}"
 		} );
 
@@ -411,7 +414,7 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 					float a1 = min(c1.g, c2.g);\
 					float a2 = min(c3.g, c4.g);\
 					float visibilityFactor = min(a1, a2);\
-					vec3 edgeColor = 1.0 - visibilityFactor > 0.001 ? visibleEdgeColor : hiddenEdgeColor;\
+					vec3 edgeColor = 1.0 - visibilityFactor > 0.001 ? vec3(1,0,0) : vec3(0,1,0);\
 					gl_FragColor = vec4(edgeColor, 1.0) * vec4(d);\
 				}"
 		} );
@@ -482,7 +485,9 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 				"patternTexture": { value: null },
 				"edgeStrength": { value: 1.0 },
 				"edgeGlow": { value: 1.0 },
-				"usePatternTexture": { value: 0.0 }
+				"usePatternTexture": { value: 0.0 },
+				"visibleEdgeColor": { value: new THREE.Vector3( 1.0, 1.0, 1.0 ) },
+				"hiddenEdgeColor": { value: new THREE.Vector3( 1.0, 1.0, 1.0 ) },
 			},
 
 			vertexShader:
@@ -501,6 +506,8 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 				uniform float edgeStrength;\
 				uniform float edgeGlow;\
 				uniform bool usePatternTexture;\
+				uniform vec3 visibleEdgeColor;\
+				uniform vec3 hiddenEdgeColor;\
 				\
 				void main() {\
 					vec4 edgeValue1 = texture2D(edgeTexture1, vUv);\
@@ -508,16 +515,18 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 					vec4 maskColor = texture2D(maskTexture, vUv);\
 					vec4 patternColor = texture2D(patternTexture, 6.0 * vUv);\
 					float visibilityFactor = 1.0 - maskColor.g > 0.0 ? 1.0 : 0.5;\
-					vec4 edgeValue = edgeValue1 + edgeValue2 * edgeGlow;\
-					vec4 finalColor = edgeStrength * maskColor.r * edgeValue;\
+					vec4 edgeValue = edgeStrength * (edgeValue1 + edgeValue2 * edgeGlow);\
+					edgeValue.a = max(edgeValue.r, edgeValue.g);\
+					vec3 edgeColor = edgeValue.r * visibleEdgeColor + edgeValue.g * hiddenEdgeColor;\
+					vec4 finalColor = vec4(edgeColor, edgeValue.a*1.0);\
 					if(usePatternTexture)\
 						finalColor += + visibilityFactor * (1.0 - maskColor.r) * (1.0 - patternColor.r);\
 					gl_FragColor = finalColor;\
 				}",
-			blending: THREE.AdditiveBlending,
+			blending: THREE.NormalBlending,
 			depthTest: false,
 			depthWrite: false,
-			transparent: true
+			transparent: true,
 		} );
 
 	}

+ 2 - 2
examples/webgl_postprocessing_nodes.html

@@ -465,12 +465,12 @@
 						} );
 
 						break;
-						
+
 					case 'blur':
 
 						// PASS
 
-						var size = renderer.getSize();
+						var size = renderer.getDrawingBufferSize();
 
 						var blurScreen = new THREE.BlurNode( new THREE.ScreenNode() );
 						blurScreen.size = new THREE.Vector2( size.width, size.height );