Quellcode durchsuchen

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 vor 13 Jahren
Ursprung
Commit
a29f369f35
1 geänderte Dateien mit 16 neuen und 2 gelöschten Zeilen
  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