RTT texture flip flag (playcanvas#3346)

slimbuck · web-flow · commit c944d388d56e · 2021-07-20T17:39:29.000+01:00
* add flipY option to render target
* slightly cleaner
diff --git a/examples/src/examples/graphics/render-to-texture.tsx b/examples/src/examples/graphics/render-to-texture.tsx
@@ -69,7 +69,9 @@ class RenderToTextureExample extends Example {
         });
         const renderTarget = new pc.RenderTarget({
             colorBuffer: texture,
-            depth: true
+            depth: true,
+            // @ts-ignore
+            flipY: true
         });
 
         // create a layer for object that do not render into texture
@@ -130,7 +132,7 @@ class RenderToTextureExample extends Example {
         // create a plane called tv which we use to display rendered texture
         // this is only added to excluded Layer, so it does not render into texture
         const tv = createPrimitive("plane", new pc.Vec3(6, 8, -5), new pc.Vec3(20, 10, 10), pc.Color.BLACK, [excludedLayer.id]);
-        tv.setLocalEulerAngles(90, 0, 180);
+        tv.setLocalEulerAngles(90, 0, 0);
         tv.render.castShadows = false;
         tv.render.receiveShadows = false;
         // @ts-ignore engine-tsd
diff --git a/src/graphics/render-target.js b/src/graphics/render-target.js
@@ -32,6 +32,8 @@ const defaultOptions = {
  * * {@link CUBEFACE_POSZ}
  * * {@link CUBEFACE_NEGZ}
  *
+ * @param {boolean} [options.flipY] - When set to true the image will be flipped in Y. Default is false.
+ *
  * Defaults to {@link CUBEFACE_POSX}.
  * @example
  * // Create a 512x512x24-bit render target with a depth buffer
@@ -126,6 +128,9 @@ class RenderTarget {
         if (!this.name) {
             this.name = "Untitled";
         }
+
+        // render image flipped in Y
+        this.flipY = !!options.flipY;
     }
 
     /**
diff --git a/src/scene/renderer/forward-renderer.js b/src/scene/renderer/forward-renderer.js
@@ -48,6 +48,10 @@ var viewMat3 = new Mat3();
 var viewProjMat = new Mat4();
 var projMat;
 
+var flipYMat = new Mat4().setScale(1, -1, 1);
+var flippedViewProjMat = new Mat4();
+var flippedSkyboxProjMat = new Mat4();
+
 var viewInvL = new Mat4();
 var viewInvR = new Mat4();
 var viewL = new Mat4();
@@ -434,7 +438,17 @@ class ForwardRenderer {
 
             // ViewProjection Matrix
             viewProjMat.mul2(projMat, viewMat);
-            this.viewProjId.setValue(viewProjMat.data);
+
+            if (target && target.flipY) {
+                flippedViewProjMat.mul2(flipYMat, viewProjMat);
+                flippedSkyboxProjMat.mul2(flipYMat, camera.getProjectionMatrixSkybox());
+
+                this.viewProjId.setValue(flippedViewProjMat.data);
+                this.projSkyboxId.setValue(flippedSkyboxProjMat.data);
+            } else {
+                this.viewProjId.setValue(viewProjMat.data);
+                this.projSkyboxId.setValue(camera.getProjectionMatrixSkybox().data);
+            }
 
             // View Position (world space)
             this.dispatchViewPos(camera._node.getPosition());
@@ -1235,7 +1249,7 @@ class ForwardRenderer {
         this.viewPosId.setValue(vp);
     }
 
-    renderForward(camera, drawCalls, drawCallsCount, sortedLights, pass, cullingMask, drawCallback, layer) {
+    renderForward(camera, drawCalls, drawCallsCount, sortedLights, pass, cullingMask, drawCallback, layer, flipFaces) {
         var device = this.device;
         var scene = this.scene;
         var vrDisplay = camera.vrDisplay;
@@ -1363,7 +1377,7 @@ class ForwardRenderer {
                     }
                 }
 
-                this.setCullMode(camera._cullFaces, camera._flipFaces, drawCall);
+                this.setCullMode(camera._cullFaces, flipFaces, drawCall);
 
                 stencilFront = drawCall.stencilFront || material.stencilFront;
                 stencilBack = drawCall.stencilBack || material.stencilBack;
@@ -2283,6 +2297,10 @@ class ForwardRenderer {
                     renderAction.lightClusters.activate();
                 }
 
+                // enable flip faces if either the camera has _flipFaces enabled or the render target
+                // has flipY enabled
+                const flipFaces = !!(camera._flipFaces ^ renderAction?.renderTarget?.flipY);
+
                 const draws = this._forwardDrawCalls;
                 this.renderForward(camera.camera,
                                    visible.list,
@@ -2291,7 +2309,8 @@ class ForwardRenderer {
                                    layer.shaderPass,
                                    layer.cullingMask,
                                    layer.onDrawCall,
-                                   layer);
+                                   layer,
+                                   flipFaces);
                 layer._forwardDrawCalls += this._forwardDrawCalls - draws;
 
                 // Revert temp frame stuff

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,8 @@ const defaultOptions = {`
`32`	`32`	`* * {@link CUBEFACE_POSZ}`
`33`	`33`	`* * {@link CUBEFACE_NEGZ}`
`34`	`34`	`*`
	`35`	`+ * @param {boolean} [options.flipY] - When set to true the image will be flipped in Y. Default is false.`
	`36`	`+ *`
`35`	`37`	`* Defaults to {@link CUBEFACE_POSX}.`
`36`	`38`	`* @example`
`37`	`39`	`* // Create a 512x512x24-bit render target with a depth buffer`
`@@ -126,6 +128,9 @@ class RenderTarget {`
`126`	`128`	`if (!this.name) {`
`127`	`129`	`this.name = "Untitled";`
`128`	`130`	`}`
	`131`	`+`
	`132`	`+ // render image flipped in Y`
	`133`	`+ this.flipY = !!options.flipY;`
`129`	`134`	`}`
`130`	`135`
`131`	`136`	`/**`