Reland "[canvaskit] Change SkRects to be arrays, not objects."

This is a reland of bdc214a

The CPU version of SkottieWasm is timing out for reasons unknown,
but the GPU version is happy. I think we can get rid of the CPU
version of the job since it has been more or less superseded by
the SkottieFrames one (and the latter is more stable).

Original change's description:
> [canvaskit] Change SkRects to be arrays, not objects.
>
> This changes several APIs, so there are lots of breaking
> notes in the Changelog.
>
> This made the "draw 100 colored regions" benchmark about
> 20% faster (1ms -> .8ms).
>
> In theory, rendering should stay the same.
>
> Change-Id: Ib80b15e2d980ad5d568fff4460d2b529766c1b36
> Reviewed-on: https://skia-review.googlesource.com/c/skia/+/312491
> Reviewed-by: Nathaniel Nifong <nifong@google.com>

Change-Id: I674aba85ecfb30b72e94cbaf89b2d97bfae3b7a4
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/315142
Reviewed-by: Nathaniel Nifong <nifong@google.com>

Author: kjlubick

infra/bots/README.recipes.md

@@ -417,9 +417,9 @@ Run DM on lottie files with tracing turned on and then parse the output.
 
 [DEPS](/infra/bots/recipes/perf_skottiewasm_lottieweb.py#12): [recipe\_engine/context][recipe_engine/recipe_modules/context], [recipe\_engine/file][recipe_engine/recipe_modules/file], [recipe\_engine/json][recipe_engine/recipe_modules/json], [recipe\_engine/path][recipe_engine/recipe_modules/path], [recipe\_engine/properties][recipe_engine/recipe_modules/properties], [recipe\_engine/python][recipe_engine/recipe_modules/python], [recipe\_engine/step][recipe_engine/recipe_modules/step], [recipe\_engine/time][recipe_engine/recipe_modules/time], [checkout](#recipe_modules-checkout), [env](#recipe_modules-env), [flavor](#recipe_modules-flavor), [infra](#recipe_modules-infra), [run](#recipe_modules-run), [vars](#recipe_modules-vars)
 
-— **def [RunSteps](/infra/bots/recipes/perf_skottiewasm_lottieweb.py#83)(api):**
+— **def [RunSteps](/infra/bots/recipes/perf_skottiewasm_lottieweb.py#84)(api):**
 
-— **def [parse\_trace](/infra/bots/recipes/perf_skottiewasm_lottieweb.py#208)(trace_json, lottie_filename, api, renderer):**
+— **def [parse\_trace](/infra/bots/recipes/perf_skottiewasm_lottieweb.py#209)(trace_json, lottie_filename, api, renderer):**
 
 parse_trace parses the specified trace JSON.
 

infra/bots/recipes/perf_skottiewasm_lottieweb.expected/unrecognized_builder.json

@@ -35,7 +35,7 @@
       "    arg_names, **additional_args)",
       "  File \"RECIPE_REPO[recipe_engine]/recipe_engine/internal/property_invoker.py\", in _invoke_with_properties",
       "    return callable_obj(*props, **additional_args)",
-      "  File \"RECIPE_REPO[skia]/infra/bots/recipes/perf_skottiewasm_lottieweb.py\", line 128, in RunSteps",
+      "  File \"RECIPE_REPO[skia]/infra/bots/recipes/perf_skottiewasm_lottieweb.py\", line 129, in RunSteps",
       "    raise Exception('Could not recognize the buildername %s' % buildername)",
       "Exception: Could not recognize the buildername Perf-Debian10-none-GCE-CPU-AVX2-x86_64-Release-All-Unrecognized"
     ]

infra/bots/recipes/perf_skottiewasm_lottieweb.py

@@ -69,6 +69,7 @@
   'streetby_loading.json',
   'streetby_test_loading.json',
   # Times out
+  'an_endless_hike_on_a_tiny_world_.json', # times out on CPU
   'beetle.json',
 ]
 

modules/canvaskit/CHANGELOG.md

@@ -7,19 +7,47 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Breaking
+ - SkRect are no longer returned from `CanvasKit.LTRBRect`, `CanvasKit.XYWHRect` nor
+   are accepted as JS objects. Instead, the format is 4 floats in either an array, a
+   Float32Array or a piece of memory returned by CanvasKit.Malloc. These floats are the
+   left, top, right, bottom numbers of the rectangle.
+ - SkIRect (Rectangles with Integer values) are no longer accepted as JS objects.
+   Instead, the format is 4 ints in either an array, an Int32Array or a piece of memory
+   returned by CanvasKit.Malloc. These ints are the left, top, right, bottom numbers of
+   the rectangle.
  - SkRRect (Rectangles with rounded corners) are no longer returned from `CanvasKit.RRectXY`
-   nor accepted as JS objects. Instead, the format is 12 floats in either an array, a
+   nor are accepted as JS objects. Instead, the format is 12 floats in either an array, a
    Float32Array or a piece of memory returned by CanvasKit.Malloc. The first 4 floats
    are the left, top, right, bottom numbers of the rectangle and then 4 sets of points
    starting in the upper left corner and going clockwise. This change allows for faster
    transfer between JS and WASM code.
+ - `SkPath.addRoundRect` has been replaced with `SkPath.addRRect`. The same functionality
+   can be had with the `CanvasKit.RRectXY` helper.
+ - `SkPath.addRect` no longer accepts 4 floats as separate arguments. It only accepts
+   an SkRect (an array/Float32Array of 4 floats) and an optional boolean for
+   determining clockwise or counter-clockwise directionality.
+ - The order of `SkCanvas.saveLayer` arguments is slightly different (more consistent).
+   It is now `paint, bounds, backdrop, flags`
 
 ### Changed
  - We now compile CanvasKit with emsdk 2.0.0 when testing and deploying to npm.
  - WebGL interface creation is a little leaner in terms of code size and speed.
  - The signature of `main` used with SkSL passed to `CanvasKit.SkRuntimeEffect.Make` has changed.
    There is no longer an `inout half4 color` parameter, effects must return their color instead.
    Valid signatures are now `half4 main()` or `half4 main(float2 coord)`.
+ - `SkPath.getBounds`, `SkShapedText.getBounds`, and `SkVertices.bounds` now
+   take an optional argument. If a Float32Array with length 4 or greater is
+   provided, the bounds will be copied into this array instead of allocating
+   a new one.
+
+### Removed
+ - `SkCanvas.drawRoundRect` has been removed in favor of `SkCanvas.drawRRect`
+   The same functionality can be had with the `CanvasKit.RRectXY` helper.
+ - `SkPath.arcTo` which had been deprecated in favor of `SkPath.arcToOval`,
+   `SkPath.arcToRotated`, `SkPath.arcToTangent`.
+
+### Added
+ - `CanvasKit.LTRBiRect` and `CanvasKit.XYWHiRect` as helpers to create SkIRects.
 
 ## [0.17.3] - 2020-08-05
 

modules/canvaskit/canvaskit/example.html

@@ -219,22 +219,22 @@ <h2> CanvasKit can allow for text shaping (e.g. breaking, kerning)</h2>
       path.lineTo(36, 148);
 
       path.moveTo(150, 180);
-      path.arcTo(150, 100, 50, 200, 20);
+      path.arcToTangent(150, 100, 50, 200, 20);
       path.lineTo(160, 160);
 
       path.moveTo(20, 120);
       path.lineTo(20, 120);
 
       canvas.drawPath(path, paint);
 
-      let rrect = new CanvasKit.SkPath()
-                               .addRoundRect(100, 10, 140, 62,
-                                             10, 4, true);
+      const rrect = CanvasKit.RRectXY([100, 10, 140, 62], 10, 4);
 
-      canvas.drawPath(rrect, paint);
+      const rrectPath = new CanvasKit.SkPath().addRRect(rrect, true);
 
+      canvas.drawPath(rrectPath, paint);
+
+      rrectPath.delete();
       path.delete();
-      rrect.delete();
       paint.delete();
     }
     // Intentionally just draw frame once
@@ -964,10 +964,10 @@ <h2> CanvasKit can allow for text shaping (e.g. breaking, kerning)</h2>
     canvas.drawText(shapedText, textBoxX, textBoxY, textPaint);
     const bounds = shapedText.getBounds();
 
-    bounds.fLeft += textBoxX;
-    bounds.fRight += textBoxX;
-    bounds.fTop += textBoxY;
-    bounds.fBottom += textBoxY
+    bounds[0] += textBoxX; // left
+    bounds[2] += textBoxX; // right
+    bounds[1] += textBoxY; // top
+    bounds[3] += textBoxY // bottom
 
     canvas.drawRect(bounds, paint);
     const SHAPE_TEST_TEXT = 'VAVAVAVAVAFIfi';
@@ -1072,9 +1072,9 @@ <h2> CanvasKit can allow for text shaping (e.g. breaking, kerning)</h2>
     fontPaint.setAntiAlias(true);
 
     const arc = new CanvasKit.SkPath();
-    arc.arcTo(CanvasKit.LTRBRect(20, 40, 280, 300), -160, 140, true);
+    arc.arcToOval(CanvasKit.LTRBRect(20, 40, 280, 300), -160, 140, true);
     arc.lineTo(210, 140);
-    arc.arcTo(CanvasKit.LTRBRect(20, 0, 280, 260), 160, -140, true);
+    arc.arcToOval(CanvasKit.LTRBRect(20, 0, 280, 260), 160, -140, true);
 
     const str = 'This téxt should follow the curve across contours...';
     const textBlob = CanvasKit.SkTextBlob.MakeOnPath(str, arc, font);

modules/canvaskit/canvaskit/extra.html

@@ -81,12 +81,12 @@ <h2> Support for extended color spaces </h2>
         p.lifetime = 3 + rand(p.seed);
         p.vel.y = -50;
       }
-      
+
       void update(inout Particle p) {
         float w = mix(15, 3, p.age);
         p.pos.x = sin(radians(p.age * 320)) * mix(25, 10, p.age) + mix(-w, w, rand(p.seed));
         if (rand(p.seed) < 0.5) { p.pos.x = -p.pos.x; }
-      
+
         p.color.g = (mix(75, 220, p.age) + mix(-30, 30, rand(p.seed))) / 255;
       }
       `
@@ -122,10 +122,10 @@ <h2> Support for extended color spaces </h2>
   // Examples requiring external resources.
   // Set bounds to fix the 4:3 resolution of the legos
   Promise.all([ckLoaded, loadLegoJSON]).then(([ck, jsonstr]) => {
-    SkottieExample(ck, 'sk_legos', jsonstr, {fLeft: -50, fTop: 0, fRight: 350, fBottom: 300});
+    SkottieExample(ck, 'sk_legos', jsonstr, [-50, 0, 350, 300]);
   });
   // Re-size to fit
-  let fullBounds = {fLeft: 0, fTop: 0, fRight: 500, fBottom: 500};
+  let fullBounds = [0, 0, 500, 500];
   Promise.all([ckLoaded, loadDrinksJSON]).then(([ck, jsonstr]) => {
     SkottieExample(ck, 'sk_drinks', jsonstr, fullBounds);
   });
@@ -146,6 +146,11 @@ <h2> Support for extended color spaces </h2>
   Promise.all([ckLoaded, loadSkp]).then((results) => {SkpExample(...results)});
   Promise.all([ckLoaded, loadBrickTex, loadBrickBump, loadFont]).then((results) => {Camera3D(...results)});
 
+  const rectLeft = 0;
+  const rectTop = 1;
+  const rectRight = 2;
+  const rectBottom = 3;
+
   function SkottieExample(CanvasKit, id, jsonStr, bounds, assets) {
     if (!CanvasKit || !jsonStr) {
       return;
@@ -154,7 +159,7 @@ <h2> Support for extended color spaces </h2>
     const duration = animation.duration() * 1000;
     const size = animation.size();
     let c = document.getElementById(id);
-    bounds = bounds || {fLeft: 0, fTop: 0, fRight: size.w, fBottom: size.h};
+    bounds = bounds || CanvasKit.LTRBRect(0, 0, size.w, size.h);
 
     // Basic managed animation test.
     if (id === 'sk_drinks') {
@@ -172,16 +177,15 @@ <h2> Support for extended color spaces </h2>
     function drawFrame(canvas) {
       let seek = ((Date.now() - firstFrame) / duration) % 1.0;
       let damage = animation.seek(seek);
-      // TODO: SkRect.isEmpty()?
-      if (damage.fRight > damage.fLeft && damage.fBottom > damage.fTop) {
+
+      if (damage[rectRight] > damage[rectLeft] && damage[rectBottom] > damage[rectTop]) {
         canvas.clear(CanvasKit.WHITE);
         animation.render(canvas, bounds);
       }
       surface.requestAnimationFrame(drawFrame);
     }
     surface.requestAnimationFrame(drawFrame);
 
-    //animation.delete();
     return surface;
   }
 
@@ -523,7 +527,7 @@ <h2> Support for extended color spaces </h2>
         float dp = dot(plane_norm, light_dir);
         float scale = min(ambient + max(dp, 0), 1);
 
-        color = sample(color_map, p) * half4(float4(scale, scale, scale, 1)); 
+        color = sample(color_map, p) * half4(float4(scale, scale, scale, 1));
       }
 `;
 
@@ -830,7 +834,7 @@ <h2> Support for extended color spaces </h2>
       // then covering with semitransparent background color.
       if (lastImage) {
         canvas.drawImage(lastImage, 0, 0, null);
-        canvas.drawColor(CanvasKit.Color(171, 244, 255, 0.1)); // sky blue, almost transparent 
+        canvas.drawColor(CanvasKit.Color(171, 244, 255, 0.1)); // sky blue, almost transparent
       } else {
         canvas.clear(CanvasKit.Color(171, 244, 255)); // sky blue, opaque
       }
@@ -855,8 +859,8 @@ <h2> Support for extended color spaces </h2>
         let r = letter['r'];
         // rotate about the center of the glyph's rect.
         rotationPoint = [
-          margin + r.fLeft + (r.fRight - r.fLeft) / 2,
-          marginTop + r.fTop + (r.fBottom - r.fTop) / 2,
+          margin + r[rectLeft] + (r[rectRight] - r[rectLeft]) / 2,
+          marginTop + r[rectTop] + (r[rectBottom] - r[rectTop]) / 2,
           0
         ];
         distanceFromPointer = CanvasKit.SkVector.dist(pointer, rotationPoint.slice(0, 2));
@@ -870,7 +874,7 @@ <h2> Support for extended color spaces </h2>
           CanvasKit.SkM44.rotated([0,1,0], distanceFromPointer * -0.035),
           CanvasKit.SkM44.translated(CanvasKit.SkVector.mulScalar(rotationPoint, -1)),
         ));
-        canvas.drawParagraph(letter['para'], margin + r.fLeft, marginTop + r.fTop);
+        canvas.drawParagraph(letter['para'], margin + r[rectLeft], marginTop + r[rectTop]);
         i++;
         canvas.restore();
       }
@@ -907,9 +911,9 @@ <h2> Support for extended color spaces </h2>
     paint.setColor(red, CanvasKit.SkColorSpace.ADOBE_RGB);
     canvas.drawPaint(paint);
     paint.setColor(red, CanvasKit.SkColorSpace.DISPLAY_P3);
-    canvas.drawRoundRect(CanvasKit.LTRBRect(50, 50, 250, 250), 30, 30, paint);
+    canvas.drawRRect(CanvasKit.RRectXY([50, 50, 250, 250], 30, 30), paint);
     paint.setColor(red, CanvasKit.SkColorSpace.SRGB);
-    canvas.drawRoundRect(CanvasKit.LTRBRect(100, 100, 200, 200), 30, 30, paint);
+    canvas.drawRRect(CanvasKit.RRectXY([100, 100, 200, 200], 30, 30), paint);
 
     surface.flush();
     surface.delete();