Implement scissor (#1243)

Implements scissors. See
BabylonJS/Babylon.js#13960 for changes required
on the JS side.

Author: docEdub

Apps/Playground/ReferenceImages/multiCameraRenderingWithScissors.png

@@ -237,6 +237,42 @@
             "playgroundId": "#BCYE7J#31",
             "referenceImage": "multiCamerasOutputRenderTarget.png"
         },
+        {
+            "title": "Multi camera rendering with scissors",
+            "playgroundId": "#1LK70I#35",
+            "referenceImage": "multiCameraRenderingWithScissors.png"
+        },
+        {
+            "title": "Scissor test",
+            "renderCount": 10,
+            "playgroundId": "#W7E7CF#29",
+            "referenceImage": "scissor-test.png",
+            "comments": "Reset playgroundId to #W7E7CF#12 when d3d12 mip-map issue is fixed"
+        },
+        {
+            "title": "Scissor test with 0.9 hardware scaling",
+            "renderCount": 10,
+            "playgroundId": "#W7E7CF#30",
+            "referenceImage": "scissorTestWith0.9HardwareScaling.png",
+            "comments": "Reset playgroundId to #W7E7CF#27 when d3d12 mip-map issue is fixed"
+        },
+        {
+            "title": "Scissor test with 1.5 hardware scaling",
+            "renderCount": 10,
+            "playgroundId": "#W7E7CF#31",
+            "referenceImage": "scissorTestWith1.5HardwareScaling.png",
+            "comments": "Reset playgroundId to #W7E7CF#28 when d3d12 mip-map issue is fixed"
+        },
+        {
+            "title": "Scissor test with negative x and y",
+            "playgroundId": "#3L5BCD#2",
+            "referenceImage": "scissorTestNegativeXandY.png"
+        },
+        {
+            "title": "Scissor test with out of bounds width and height",
+            "playgroundId": "#3L5BCD#3",
+            "referenceImage": "scissorTestOobWidthAndHeight.png"
+        },
         {
             "title": "setParent",
             "playgroundId": "#JD49CT#2",

Apps/Playground/ReferenceImages/scissor-test.png

@@ -44,17 +44,22 @@ function compare(test, renderData, referenceImage, threshold, errorRatio) {
 
     let error = (differencesCount * 100) / (size / 4) > errorRatio;
 
+    const width = testWidth / engine.getHardwareScalingLevel();
+    const height = testHeight / engine.getHardwareScalingLevel();
+
     if (error) {
-        TestUtils.writePNG(referenceData, testWidth, testHeight, TestUtils.getOutputDirectory() + "/Errors/" + test.referenceImage);
+        TestUtils.writePNG(referenceData, width, height, TestUtils.getOutputDirectory() + "/Errors/" + test.referenceImage);
     }
     if (saveResult || error) {
-        TestUtils.writePNG(renderData, testWidth, testHeight, TestUtils.getOutputDirectory() + "/Results/" + test.referenceImage);
+        TestUtils.writePNG(renderData, width, height, TestUtils.getOutputDirectory() + "/Results/" + test.referenceImage);
     }
     return error;
 }
 
 function saveRenderedResult(test, renderData) {
-    TestUtils.writePNG(renderData, testWidth, testHeight, TestUtils.getOutputDirectory() + "/Results/" + test.referenceImage);
+    const width = testWidth / engine.getHardwareScalingLevel();
+    const height = testHeight / engine.getHardwareScalingLevel();
+    TestUtils.writePNG(renderData, width, height, TestUtils.getOutputDirectory() + "/Results/" + test.referenceImage);
     return false; // no error
 }
 

Apps/Playground/ReferenceImages/scissorTestNegativeXandY.png

@@ -6,10 +6,11 @@
     "getNightly": "node scripts/getNightly.js"
   },
   "dependencies": {
-    "babylonjs": "^6.4.1",
-    "babylonjs-gui": "^6.4.1",
-    "babylonjs-loaders": "^6.4.1",
-    "babylonjs-materials": "^6.4.1",
+    "babylonjs": "^6.12.0",
+    "babylonjs-gltf2interface": "^6.12.0",
+    "babylonjs-gui": "^6.12.0",
+    "babylonjs-loaders": "^6.12.0",
+    "babylonjs-materials": "^6.12.0",
     "chai": "^4.3.4",
     "jsc-android": "^241213.1.0",
     "mocha": "^9.2.2",