Переглянути джерело

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 13 роки тому
батько
коміт
a29f369f35
1 змінених файлів з 16 додано та 2 видалено
  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