[infra] Add POC Bazel rules for CanvasKit

Many things are not enabled currently (e.g. Skottie, Paragraph),
but we can render many APIs using WebGL.

To turn on Paragraph, etc, we'll need to tackle fonts, which
is a separate effort.

This also changes where the build artifacts go. ./build/ is
easier to deal with than the old way of sticking them in
./npm_build/bin

Change-Id: Ia377360af580a887d03630670438fea2e3157e90
Bug: skia:12541
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/470682
Reviewed-by: Leandro Lovisolo <lovisolo@google.com>
Reviewed-by: Ben Wagner <bungeman@google.com>

BUILD.bazel

@@ -22,6 +22,7 @@ cc_test(
 CORE_SRCS = [
     "//include/private:hdrs",
     "//include/third_party:skcms-hdrs",
+    "//src/android:srcs",
     "//src/codec:srcs",
     "//src/core:srcs",
     "//src/image:srcs",
@@ -46,6 +47,7 @@ CORE_SRCS = [
 })
 
 CORE_HDRS = [
+    "//include/android:hdrs",
     "//include/codec:hdrs",
     "//include/config:hdrs",
     "//include/core:hdrs",

include/android/BUILD.bazel

@@ -0,0 +1,9 @@
+package(default_visibility = ["//visibility:public"])
+
+filegroup(
+    name = "hdrs",
+    srcs = [
+        "SkAndroidFrameworkUtils.h",
+        "SkAnimatedImage.h",
+    ],
+)

modules/canvaskit/BUILD.bazel

@@ -6,6 +6,7 @@ package(default_visibility = ["//:__subpackages__"])
 BASE_LINKOPTS = [
     #"-flto",  # https://github.com/emscripten-core/emsdk/issues/807
     "--bind",  # Compiles the source code using the Embind bindings to connect C/C++ and JavaScript
+    "--no-entry",
     "-sALLOW_MEMORY_GROWTH",
     "-sUSE_PTHREADS=0",  # Disable pthreads
     "-sMODULARIZE",
@@ -13,6 +14,8 @@ BASE_LINKOPTS = [
     "-sNODEJS_CATCH_EXIT=0",  # We don't have a 'main' so disable exit() catching
     "-sWASM",
     "-sMAX_WEBGL_VERSION=2",
+    "-sFORCE_FILESYSTEM=0",
+    "-sFILESYSTEM=0",
 ]
 
 RELEASE_OPTS = [
@@ -79,3 +82,83 @@ wasm_cc_binary(
     testonly = True,
     cc_target = ":gm-bindings",
 )
+
+CK_DEFINES = [
+    "SK_NO_FONTS",  #TODO(kjlubick)
+    "SK_DISABLE_LEGACY_SHADERCONTEXT",
+] + select({
+    "//bazel/common_config_settings:gl_backend": [
+        "SK_GL",
+        "SK_SUPPORT_GPU=1",
+    ],
+    "//conditions:default": [
+        "SK_SUPPORT_GPU=0",
+    ],
+})
+
+CK_OPTS = BASE_LINKOPTS + [
+    "-sEXPORT_NAME=CanvasKitInit",
+    # The order of these --pre-js flags matters! The preamble is a partially open scope and the
+    # postamble closes it.
+    "--pre-js",
+    "modules/canvaskit/preamble.js",
+    "--pre-js",
+    "modules/canvaskit/color.js",
+    "--pre-js",
+    "modules/canvaskit/memory.js",
+    "--pre-js",
+    "modules/canvaskit/util.js",
+    "--pre-js",
+    "modules/canvaskit/interface.js",
+    "--pre-js",
+    "modules/canvaskit/postamble.js",
+    "-sINITIAL_MEMORY=128MB",
+] + select({
+    "//bazel/common_config_settings:gl_backend": [
+        "--pre-js",
+        "modules/canvaskit/cpu.js",
+        "--pre-js",
+        "modules/canvaskit/gpu.js",
+    ],
+    "//conditions:default": [
+        "--pre-js",
+        "modules/canvaskit/cpu.js",
+    ],
+}) + select({
+    "//bazel/common_config_settings:debug_build": DEBUG_OPTS,
+    "//conditions:default": RELEASE_OPTS,
+})
+
+cc_binary(
+    name = "canvaskit",
+    srcs = [
+        "canvaskit_bindings.cpp",
+        ":hdrs",
+        "//src/ports:default_global_init",
+        "//src/ports:fontmgr",
+        "//src/ports:malloc",
+        "//src/ports:skdebug",
+        "//src/ports:skia_image_generator",
+    ],
+    additional_linker_inputs = [
+        "color.js",
+        "interface.js",
+        "memory.js",
+        "postamble.js",
+        "preamble.js",
+        "util.js",
+    ],
+    linkopts = CK_OPTS,
+    local_defines = CK_DEFINES,
+    # This target won't build successfully on its own because of missing emscripten
+    # headers etc. Therefore, we hide it from wildcards.
+    tags = ["manual"],
+    deps = [
+        "//:skia-core",
+    ],
+)
+
+wasm_cc_binary(
+    name = "canvaskit-wasm",
+    cc_target = ":canvaskit",
+)

modules/canvaskit/CHANGELOG.md

@@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  - `FontMgr.MakeTypefaceFromData` and `FontMgr.RefDefault` have been removed in favor of
    `Typeface.MakeFreeTypeFaceFromData`
 
+### Changed
+ - `make release`, `make debug`, and variants put the output in a different location (./build).
+ - Example .html files load CanvasKit from the new location (./build).
+
 ### Type Changes (index.d.ts)
  - `Surface.requestAnimationFrame` and `Surface.drawOnce` are properly documented.
  - Fixed typo in TextStyle (decrationStyle => decorationStyle)

modules/canvaskit/Makefile

@@ -1,64 +1,63 @@
 clean:
-	rm -rf ../../out/canvaskit_wasm
-	rm -rf ./npm_build/bin
+	- rm -rf ../../out/canvaskit_wasm
+	- rm -rf ./npm_build/bin
+	- rm -rf ./build/
 	$(MAKE) release
 
 release:
 	# Does an incremental build where possible.
 	./compile.sh
-	mkdir -p ./npm_build/bin
-	cp ../../out/canvaskit_wasm/canvaskit.js   ./npm_build/bin
-	cp ../../out/canvaskit_wasm/canvaskit.wasm ./npm_build/bin
+	- rm -rf build/
+	mkdir build
+	cp ../../out/canvaskit_wasm/canvaskit.js   ./build/
+	cp ../../out/canvaskit_wasm/canvaskit.wasm ./build/
 
 release_cpu:
 	# Does an incremental build where possible.
 	./compile.sh cpu_only
-	mkdir -p ./npm_build/bin
-	cp ../../out/canvaskit_wasm/canvaskit.js   ./npm_build/bin
-	cp ../../out/canvaskit_wasm/canvaskit.wasm ./npm_build/bin
+	- rm -rf build/
+	mkdir build
+	cp ../../out/canvaskit_wasm/canvaskit.js   ./build/
+	cp ../../out/canvaskit_wasm/canvaskit.wasm ./build/
 
 release_viewer:
 	# Does an incremental build where possible.
 	./compile.sh viewer
-	mkdir -p ./npm_build/bin
-	cp ../../out/canvaskit_wasm/canvaskit.js   ./npm_build/bin
-	cp ../../out/canvaskit_wasm/canvaskit.wasm ./npm_build/bin
+	- rm -rf build/
+	mkdir build
+	cp ../../out/canvaskit_wasm/canvaskit.js   ./build/
+	cp ../../out/canvaskit_wasm/canvaskit.wasm ./build/
 
 debug:
 	# Does an incremental build where possible.
 	./compile.sh debug
-	mkdir -p ./npm_build/bin
-	cp ../../out/canvaskit_wasm_debug/canvaskit.js   ./npm_build/bin
-	cp ../../out/canvaskit_wasm_debug/canvaskit.wasm ./npm_build/bin
-	#cp ../../out/canvaskit_wasm_debug/canvaskit.wasm.map ./npm_build/bin
+	- rm -rf build/
+	mkdir build
+	cp ../../out/canvaskit_wasm_debug/canvaskit.js   ./build/
+	cp ../../out/canvaskit_wasm_debug/canvaskit.wasm ./build/
 
 debug_cpu:
 	# Does an incremental build where possible.
 	./compile.sh debug cpu_only
-	mkdir -p ./npm_build/bin
-	cp ../../out/canvaskit_wasm_debug/canvaskit.js   ./npm_build/bin
-	cp ../../out/canvaskit_wasm_debug/canvaskit.wasm ./npm_build/bin
-	#cp ../../out/canvaskit_wasm_debug/canvaskit.wasm.map ./npm_build/bin
-
-experimental_simd:
-	# Does an incremental build where possible.
-	./compile.sh simd
-	mkdir -p ./npm_build/bin
-	cp ../../out/canvaskit_wasm_experimental_simd/canvaskit.js   ./npm_build/bin
-	cp ../../out/canvaskit_wasm_experimental_simd/canvaskit.wasm ./npm_build/bin
+	- rm -rf build/
+	mkdir build
+	cp ../../out/canvaskit_wasm_debug/canvaskit.js   ./build/
+	cp ../../out/canvaskit_wasm_debug/canvaskit.wasm ./build/
 
 debug_viewer:
 	# Does an incremental build where possible.
 	./compile.sh debug viewer
-	mkdir -p ./npm_build/bin
-	cp ../../out/canvaskit_wasm_debug/canvaskit.js   ./npm_build/bin
-	cp ../../out/canvaskit_wasm_debug/canvaskit.wasm ./npm_build/bin
+	- rm -rf build/
+	mkdir build
+	cp ../../out/canvaskit_wasm_debug/canvaskit.js   ./build/
+	cp ../../out/canvaskit_wasm_debug/canvaskit.wasm ./build/
 
 profile:
 	./compile.sh profiling
-	mkdir -p ./npm_build/bin
-	cp ../../out/canvaskit_wasm_profile/canvaskit.js       ./npm_build/bin
-	cp ../../out/canvaskit_wasm_profile/canvaskit.wasm     ./npm_build/bin
+	- rm -rf build/
+	mkdir build
+	cp ../../out/canvaskit_wasm_profile/canvaskit.js   ./build/
+	cp ../../out/canvaskit_wasm_profile/canvaskit.wasm ./build/
 
 npm:
 	rm -rf ./npm_build/bin
@@ -149,3 +148,14 @@ bazel_gms_debug:
 	mkdir build
 	cp ../../bazel-bin/modules/canvaskit/gm-bindings-wasm/gm-bindings.js build/gm-bindings.js
 	cp ../../bazel-bin/modules/canvaskit/gm-bindings-wasm/gm-bindings.wasm build/gm-bindings.wasm
+
+bazel_canvaskit_debug:
+	# See above note about spawn_strategy
+	bazelisk build :canvaskit-wasm --compilation_mode dbg --spawn_strategy=local \
+		--gpu_backend=gl_backend --with_gl_standard=webgl_standard \
+		--include_codec=jpeg_codec --include_codec=png_codec --include_codec=webp_codec \
+		--include_codec=gif_codec
+	- rm -rf build/
+	mkdir build
+	cp ../../bazel-bin/modules/canvaskit/canvaskit-wasm/canvaskit.js build/canvaskit.js
+	cp ../../bazel-bin/modules/canvaskit/canvaskit-wasm/canvaskit.wasm build/canvaskit.wasm

modules/canvaskit/canvaskit_bindings.cpp

@@ -49,7 +49,6 @@
 #include "include/private/SkShadowFlags.h"
 #include "include/utils/SkParsePath.h"
 #include "include/utils/SkShadowUtils.h"
-#include "modules/skparagraph/include/Paragraph.h"
 #include "src/core/SkPathPriv.h"
 #include "src/core/SkResourceCache.h"
 #include "src/image/SkImage_Base.h"
@@ -77,6 +76,7 @@
 #include "include/core/SkFontMetrics.h"
 #include "include/core/SkFontMgr.h"
 #include "include/core/SkFontTypes.h"
+#include "modules/skparagraph/include/Paragraph.h"
 #endif
 
 #ifdef SK_INCLUDE_PATHOPS
@@ -2149,5 +2149,7 @@ EMSCRIPTEN_BINDINGS(Skia) {
     constant("ShadowGeometricOnly", (int)SkShadowFlags::kGeometricOnly_ShadowFlag);
     constant("ShadowDirectionalLight", (int)SkShadowFlags::kDirectionalLight_ShadowFlag);
 
+#ifndef SK_NO_FONTS
     constant("_GlyphRunFlags_isWhiteSpace", (int)skia::textlayout::Paragraph::kWhiteSpace_VisitorFlag);
+#endif
 }

modules/canvaskit/npm_build/example.html

@@ -51,14 +51,14 @@
 <h2> Interactive drawPatch</h2>
 <canvas id=interdrawpatch width=512 height=512></canvas>
 
-<script type="text/javascript" src="/node_modules/canvaskit/bin/canvaskit.js"></script>
+<script type="text/javascript" src="/build/canvaskit.js"></script>
 
 <script type="text/javascript" charset="utf-8">
 
   var CanvasKit = null;
   var cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
 
-  const ckLoaded = CanvasKitInit({locateFile: (file) => '/node_modules/canvaskit/bin/'+file});
+  const ckLoaded = CanvasKitInit({locateFile: (file) => '/build/'+file});
 
   const loadRoboto = fetch(cdn + 'Roboto-Regular.ttf').then((response) => response.arrayBuffer());
   const loadNotoSerif = fetch(cdn + 'NotoSerif-Regular.ttf').then((response) => response.arrayBuffer());

modules/canvaskit/npm_build/extra.html

@@ -44,7 +44,7 @@
 <a href="chrome://flags/#force-color-profile">Force P3 profile</a>
 <canvas id=colorsupport width=300 height=300></canvas>
 
-<script type="text/javascript" src="/node_modules/canvaskit/bin/canvaskit.js"></script>
+<script type="text/javascript" src="/build/canvaskit.js"></script>
 
 <script type="text/javascript" src="textapi_utils.js"></script>
 
@@ -53,7 +53,7 @@
   var CanvasKit = null;
   var cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
 
-  const ckLoaded = CanvasKitInit({locateFile: (file) => '/node_modules/canvaskit/bin/'+file});
+  const ckLoaded = CanvasKitInit({locateFile: (file) => '/build/'+file});
 
   const loadLegoJSON = fetch(cdn + 'lego_loader.json').then((response) => response.text());
   const loadDrinksJSON = fetch(cdn + 'drinks.json').then((response) => response.text());

modules/canvaskit/npm_build/multicanvas.html

@@ -24,11 +24,11 @@
 <canvas id=api5 width=300 height=300></canvas>
 <canvas id=api6 width=300 height=300></canvas>
 
-<script type="text/javascript" src="/node_modules/canvaskit/bin/canvaskit.js"></script>
+<script type="text/javascript" src="/build/canvaskit.js"></script>
 <script type="text/javascript" charset="utf-8">
   const cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
 
-  const ckLoaded = CanvasKitInit({locateFile: (file) => '/node_modules/canvaskit/bin/'+file});
+  const ckLoaded = CanvasKitInit({locateFile: (file) => '/build/'+file});
   const loadTestImage = fetch(cdn + 'test.png').then((response) => response.arrayBuffer());
   const imageEle = document.getElementById("src");
 

modules/canvaskit/npm_build/shaping.html

@@ -19,14 +19,14 @@
 <textarea id=input></textarea>
 <canvas id=shaped_text width=300 height=300></canvas>
 
-<script type="text/javascript" src="/node_modules/canvaskit/bin/canvaskit.js"></script>
+<script type="text/javascript" src="/build/canvaskit.js"></script>
 
 <script type="text/javascript" charset="utf-8">
 
   let CanvasKit = null;
   const cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
 
-  const ckLoaded = CanvasKitInit({locateFile: (file) => '/node_modules/canvaskit/bin/'+file});
+  const ckLoaded = CanvasKitInit({locateFile: (file) => '/build/'+file});
   const loadFont = fetch(cdn + 'Roboto-Regular.ttf').then((response) => response.arrayBuffer());
   // This font works with interobang.
   //const loadFont = fetch('https://storage.googleapis.com/skia-cdn/google-web-fonts/SourceSansPro-Regular.ttf').then((response) => response.arrayBuffer());

src/android/BUILD.bazel

@@ -0,0 +1,9 @@
+package(default_visibility = ["//:__subpackages__"])
+
+filegroup(
+    name = "srcs",
+    srcs = [
+        "SkAndroidFrameworkUtils.cpp",
+        "SkAnimatedImage.cpp",
+    ],
+)

src/sksl/BUILD.bazel

@@ -117,6 +117,7 @@ filegroup(
         "ir/SkSLDiscardStatement.h",
         "ir/SkSLDoStatement.cpp",
         "ir/SkSLDoStatement.h",
+        "ir/SkSLExpression.cpp",
         "ir/SkSLExpression.h",
         "ir/SkSLExpressionStatement.cpp",
         "ir/SkSLExpressionStatement.h",