Parcourir la source

Added flipping workaround to RTT example.

Please note that render target must be power-of-2 sized for this trick to work. Other option would be to change directly UVs in the geometry (though that would make it harder to swap image vs render target as texture or to share geometry between objects using materials with images vs render targets).

Fixes #2164
alteredq il y a 13 ans
Parent
commit
a29f369f35
1 fichiers modifiés avec 16 ajouts et 2 suppressions
  1. 16 2
      examples/webgl_rtt.html

+ 16 - 2
examples/webgl_rtt.html

@@ -82,6 +82,18 @@
 
 		</script>
 
+		<script id="vertexShaderFlip" type="x-shader/x-vertex">
+
+			varying vec2 vUv;
+
+			void main() {
+
+				vUv = vec2( uv.x, 1.0 - uv.y );
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+			}
+
+		</script>
 
 		<script>
 
@@ -132,7 +144,9 @@
 				light.position.set( 0, 0, -1 ).normalize();
 				sceneRTT.add( light );
 
-				rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
+				rtTexture = new THREE.WebGLRenderTarget( 1024, 1024, { minFilter: THREE.LinearMipMapLinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat } );
+				rtTexture.wrapS = rtTexture.wrapT = THREE.RepeatWrapping;
+				rtTexture.repeat.set( 1, -1 );
 
 				material = new THREE.ShaderMaterial( {
 
@@ -145,7 +159,7 @@
 				var materialScreen = new THREE.ShaderMaterial( {
 
 					uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture } },
-					vertexShader: document.getElementById( 'vertexShader' ).textContent,
+					vertexShader: document.getElementById( 'vertexShaderFlip' ).textContent,
 					fragmentShader: document.getElementById( 'fragment_shader_screen' ).textContent,
 
 					depthWrite: false