Enable Graphite via build flag

.gitignore

@@ -52,6 +52,7 @@ local.properties
 # Externals
 packages/skia/libs
 packages/skia/cpp/skia/
+packages/skia/cpp/dawn/
 
 # BUCK
 buck-out/

README.md

@@ -151,3 +151,11 @@ Finally, you can use `drawOffscreen` to receive a canvas object as parameter. Yo
 ```
 
 Again, since `eval`, `draw`, and `drawOffscreen` serialize the function's content, avoid any external dependencies that can't be serialized.
+
+## Graphite
+
+We have experimental support for Graphite.
+To enable it, you need follow these steps:
+* Build Skia using `SK_GRAPHITE=1 yarn build-skia`
+* Install iOS pods using `SK_GRAPHITE=1 pod install`
+* Update the Android [CMakeLists](/packages/skia/android/CMakeLists.txt) to use `set(SK_GRAPHITE ON)`

apps/docs/docs/getting-started/installation.md

@@ -14,6 +14,10 @@ In addition you should make sure you're on at least `iOS 13` and `Android API le
 To use React Native Skia with the new architecture, `react-native@>=0.72` is required. <br />
 To use React Native Skia with video support, `Android API level 26` or above is required.
 
+Skia has a new experimental backend named Graphite which runs on Vulkan and Metal.
+We currently are working on a new version of React Native Skia that uses this new backend.
+For Graphite to run, you will need to use `Android API level 26` and `iOS 15.1` or above.
+
 **Install the library using yarn:**
 
 ```sh

apps/paper/ios/Podfile.lock

@@ -1935,7 +1935,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 1c08607305558666fd16678b85ef135e455d5c96
   React-microtasksnativemodule: 87b8de96f937faefece8afd2cb3a518321b2ef99
   react-native-safe-area-context: ab8f4a3d8180913bd78ae75dd599c94cce3d5e9a
-  react-native-skia: 89e0ec26e70ca4f34a7a1f7425bc955baf77c566
+  react-native-skia: 1f36fe252564881d77ad424f84a8986098cc73b7
   react-native-slider: 97ce0bd921f40de79cead9754546d5e4e7ba44f8
   react-native-wgpu: 8d0437a304318e0e3d6ccbfed2a39880f8eae4dd
   React-nativeconfig: 57781b79e11d5af7573e6f77cbf1143b71802a6d

packages/skia/android/CMakeLists.txt

@@ -3,8 +3,8 @@ cmake_minimum_required(VERSION 3.4.1)
 
 set (CMAKE_VERBOSE_MAKEFILE ON)
 set (CMAKE_CXX_STANDARD 17)
-set (CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -DSK_GL -DSK_GANESH -DSK_BUILD_FOR_ANDROID -DFOLLY_NO_CONFIG=1 -DFOLLY_HAVE_CLOCK_GETTIME=1 -DFOLLY_HAVE_MEMRCHR=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_MOBILE=1 -DON_ANDROID -DONANDROID")
-
+set(SK_GRAPHITE OFF)
+set (CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -DSK_BUILD_FOR_ANDROID -DFOLLY_NO_CONFIG=1 -DFOLLY_HAVE_CLOCK_GETTIME=1 -DFOLLY_HAVE_MEMRCHR=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_MOBILE=1 -DON_ANDROID -DONANDROID")
 set (PACKAGE_NAME "rnskia")
 set (SKIA_LIB "skia")
 set (SKIA_SVG_LIB "svg")
@@ -13,6 +13,7 @@ set (SKIA_SKPARAGRAPH_LIB "skparagraph")
 set (SKIA_SKUNICODE_CORE_LIB "skunicode_core")
 set (SKIA_SKUNICODE_ICU_LIB "skunicode_icu")
 
+
 # Clear some variables
 unset(LIBRN_DIR CACHE)
 unset(libfbjni_link_DIRS CACHE)
@@ -30,6 +31,34 @@ message("-- LIBRN   : " ${LIBRN_DIR})
 
 link_directories(../libs/android/${ANDROID_ABI}/)
 
+# Import prebuilt SKIA libraries
+set (SKIA_LIBS_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../libs/android/${ANDROID_ABI}")
+
+if(SK_GRAPHITE)
+    add_definitions(-DSK_GRAPHITE)
+    set(DAWN_NATIVE_LIB "libdawn_native_static")
+    set(DAWN_PLATFORM_LIB "libdawn_platform_static")
+    set(DAWN_PROC_LIB "libdawn_proc_static")
+    set(BACKEND_SOURCES
+    #TODO: is this source needed to be added?
+        "${PROJECT_SOURCE_DIR}/../cpp/rnskia/DawnWindowContext.cpp"
+    )
+    add_library(libdawn_native_static STATIC IMPORTED)
+    set_property(TARGET libdawn_native_static PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libdawn_native_static.a")
+
+    add_library(libdawn_platform_static STATIC IMPORTED)
+    set_property(TARGET libdawn_platform_static PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libdawn_platform_static.a")
+
+    add_library(libdawn_proc_static STATIC IMPORTED)
+    set_property(TARGET libdawn_proc_static PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libdawn_proc_static.a")
+else()
+    add_definitions(-DSK_GL -DSK_GANESH)
+    set(BACKEND_SOURCES
+        "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/SkiaOpenGLSurfaceFactory.cpp"
+        "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/GrAHardwareBufferUtils.cpp"
+    )
+endif()
+
 if(${REACT_NATIVE_VERSION} LESS 66)
         file(
                 TO_CMAKE_PATH
@@ -46,8 +75,6 @@ add_library(
 
         "${PROJECT_SOURCE_DIR}/cpp/jni/JniPlatformContext.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/RNSkOpenGLCanvasProvider.cpp"
-        "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/SkiaOpenGLSurfaceFactory.cpp"
-        "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/GrAHardwareBufferUtils.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/AHardwareBufferUtils.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/RNSkAndroidVideo.cpp"
 
@@ -66,9 +93,10 @@ add_library(
 
         "${PROJECT_SOURCE_DIR}/../cpp/api/third_party/CSSColorParser.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/api/third_party/base64.cpp"
-
+        ${BACKEND_SOURCES}
 )
 
+
 target_include_directories(
         ${PACKAGE_NAME}
         PRIVATE
@@ -88,6 +116,7 @@ target_include_directories(
         # so "include/core/SkRef.h" instead of "SkRef.h", as otherwise
         # the prefab cannot be shipped.
         ../cpp/skia
+        ../cpp/dawn/include
 
         ../cpp/api
         ../cpp/jsi
@@ -102,9 +131,6 @@ target_include_directories(
         ${libfbjni_include_DIRS}
 )
 
-# Import prebuilt SKIA libraries
-set (SKIA_LIBS_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../libs/android/${ANDROID_ABI}")
-
 add_library(skia STATIC IMPORTED)
 set_property(TARGET skia PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libskia.a")
 
@@ -240,8 +266,7 @@ add_definitions(-DREACT_NATIVE_VERSION=${REACT_NATIVE_VERSION})
 
 # Link
 if(${REACT_NATIVE_VERSION} GREATER_EQUAL 76)
-    target_link_libraries(
-        ${PACKAGE_NAME}
+    set(COMMON_LIBS
         ${LOG_LIB}
         ${REACT_LIB}
         ${FBJNI_LIBRARY}
@@ -258,8 +283,7 @@ if(${REACT_NATIVE_VERSION} GREATER_EQUAL 76)
         -landroid
     )
 else()
-    target_link_libraries(
-        ${PACKAGE_NAME}
+    set(COMMON_LIBS
         ${LOG_LIB}
         ${FBJNI_LIBRARY}
         ${REACT_LIB}
@@ -278,4 +302,19 @@ else()
         -lEGL
         -landroid
     )
-endif()
+endif()
+
+if(SK_GRAPHITE)
+    target_link_libraries(${PACKAGE_NAME}
+        ${COMMON_LIBS}
+        ${DAWN_NATIVE_LIB}
+        ${DAWN_PLATFORM_LIB}
+        ${DAWN_PROC_LIB}
+    )
+else()
+    target_link_libraries(${PACKAGE_NAME}
+        ${COMMON_LIBS}
+        -lGLESv2
+        -lEGL
+    )
+endif()

packages/skia/android/build.gradle

@@ -330,6 +330,9 @@ if (ENABLE_PREFAB) {
             } else if (path.contains("skia/include") || path.contains("skia/modules") || path.contains("skia/src")) {
                 // Skip flattening Skia dir
                 path = path.substring("skia/".length())
+            } else if (path.startsWith("dawn/include/")) {
+                // Flatten dawn/include/dawn and dawn/include/webgpu
+                path = path.substring("dawn/include/".length())
             } else {
                 // flatten anything else
                 path = path.substring(path.lastIndexOf("/") + 1)

packages/skia/android/cpp/rnskia-android/RNSkAndroidPlatformContext.h

@@ -9,9 +9,14 @@
 #include <memory>
 #include <string>
 
+#if defined(SK_GRAPHITE)
+#include "DawnContext.h"
+#else
+#include "OpenGLContext.h"
+#endif
+
 #include "AHardwareBufferUtils.h"
 #include "JniPlatformContext.h"
-#include "OpenGLContext.h"
 #include "RNSkAndroidVideo.h"
 #include "RNSkPlatformContext.h"
 
@@ -51,17 +56,29 @@ class RNSkAndroidPlatformContext : public RNSkPlatformContext {
   }
 
   sk_sp<SkSurface> makeOffscreenSurface(int width, int height) override {
+#if defined(SK_GRAPHITE)
+    return DawnContext::getInstance().MakeOffscreen(width, height);
+#else
     return OpenGLContext::getInstance().MakeOffscreen(width, height);
+#endif
   }
 
   std::shared_ptr<WindowContext>
   makeContextFromNativeSurface(void *surface, int width, int height) override {
+#if defined(SK_GRAPHITE)
+    return DawnContext::getInstance().MakeWindow(surface, width, height);
+#else
     return OpenGLContext::getInstance().MakeWindow(
         reinterpret_cast<ANativeWindow *>(surface), width, height);
+#endif
   }
 
   sk_sp<SkImage> makeImageFromNativeBuffer(void *buffer) override {
+#if defined(SK_GRAPHITE)
+    return DawnContext::getInstance().MakeImageFromBuffer(buffer);
+#else
     return OpenGLContext::getInstance().MakeImageFromBuffer(buffer);
+#endif
   }
 
   std::shared_ptr<RNSkVideo> createVideo(const std::string &url) override {

packages/skia/android/cpp/rnskia-android/RNSkAndroidVideo.cpp

@@ -5,6 +5,14 @@
 #include <android/hardware_buffer_jni.h>
 #endif
 
+#include "RNSkLog.h"
+
+#if defined(SK_GRAPHITE)
+#include "DawnContext.h"
+#else
+#include "OpenGLContext.h"
+#endif
+
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
@@ -13,7 +21,6 @@
 
 #pragma clang diagnostic pop
 
-#include "OpenGLContext.h"
 #include "RNSkAndroidVideo.h"
 
 namespace RNSkia {
@@ -52,7 +59,11 @@ sk_sp<SkImage> RNSkAndroidVideo::nextImage(double *timeStamp) {
   // Convert jobject to AHardwareBuffer
   AHardwareBuffer *buffer =
       AHardwareBuffer_fromHardwareBuffer(env, jHardwareBuffer);
+#if defined(SK_GRAPHITE)
+  return DawnContext::getInstance().MakeImageFromBuffer(buffer);
+#else
   return OpenGLContext::getInstance().MakeImageFromBuffer(buffer);
+#endif
 #else
   return nullptr;
 #endif

packages/skia/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.cpp

@@ -1,8 +1,17 @@
 #include "RNSkOpenGLCanvasProvider.h"
 
+#include <android/native_window_jni.h>
+#include <fbjni/fbjni.h>
+#include <jni.h>
 #include <memory>
 
+#include "RNSkLog.h"
+
+#if defined(SK_GRAPHITE)
+#include "DawnContext.h"
+#else
 #include "OpenGLContext.h"
+#endif
 
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
@@ -89,8 +98,12 @@ void RNSkOpenGLCanvasProvider::surfaceAvailable(jobject jSurfaceTexture,
   env->DeleteLocalRef(jSurface);
   env->DeleteLocalRef(surfaceClass);
   env->DeleteLocalRef(surfaceTextureClass);
+#if defined(SK_GRAPHITE)
+  _surfaceHolder = DawnContext::getInstance().MakeWindow(window, width, height);
+#else
   _surfaceHolder =
       OpenGLContext::getInstance().MakeWindow(window, width, height);
+#endif
 
   // Post redraw request to ensure we paint in the next draw cycle.
   _requestRedraw();

packages/skia/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java

@@ -3,7 +3,6 @@
 import android.content.Context;
 import android.graphics.SurfaceTexture;
 import android.util.Log;
-import android.view.MotionEvent;
 import android.view.TextureView;
 
 import com.facebook.react.views.view.ReactViewGroup;

packages/skia/cpp/api/JsiSkImage.h

@@ -12,6 +12,11 @@
 
 #include "RNSkTypedArray.h"
 
+#if defined(SK_GRAPHITE)
+#include "DawnContext.h"
+#include "include/gpu/graphite/Context.h"
+#endif
+
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
@@ -83,9 +88,13 @@ class JsiSkImage : public JsiSkWrappingSkPtrHostObject<SkImage> {
                        ? arguments[1].asNumber()
                        : 100.0;
     auto image = getObject();
+#if defined(SK_GRAPHITE)
+    image = DawnContext::getInstance().MakeRasterImage(image);
+#else
     if (image->isTextureBacked()) {
       image = image->makeNonTextureImage();
     }
+#endif
     sk_sp<SkData> data;
 
     if (format == SkEncodedImageFormat::kJPEG) {
@@ -181,9 +190,13 @@ class JsiSkImage : public JsiSkWrappingSkPtrHostObject<SkImage> {
   }
 
   JSI_HOST_FUNCTION(makeNonTextureImage) {
-    auto image = getObject()->makeNonTextureImage();
+#if defined(SK_GRAPHITE)
+    auto rasterImage = DawnContext::getInstance().MakeRasterImage(getObject());
+#else
+    auto rasterImage = getObject()->makeNonTextureImage();
+#endif
     return jsi::Object::createFromHostObject(
-        runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image)));
+        runtime, std::make_shared<JsiSkImage>(getContext(), rasterImage));
   }
 
   EXPORT_JSI_API_TYPENAME(JsiSkImage, Image)

packages/skia/cpp/api/JsiSkSurface.h

@@ -10,6 +10,10 @@
 #include "JsiSkCanvas.h"
 #include "JsiSkImage.h"
 
+#if defined(SK_GRAPHITE)
+#include "DawnContext.h"
+#endif
+
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
@@ -44,21 +48,32 @@ class JsiSkSurface : public JsiSkWrappingSkPtrHostObject<SkSurface> {
   }
 
   JSI_HOST_FUNCTION(flush) {
-    if (auto dContext = GrAsDirectContext(getObject()->recordingContext())) {
+    auto surface = getObject();
+#if defined(SK_GRAPHITE)
+    auto recording = surface->recorder()->snap();
+    DawnContext::getInstance().submitRecording(recording.get());
+#else
+    if (auto dContext = GrAsDirectContext(surface->recordingContext())) {
       dContext->flushAndSubmit();
     }
+#endif
     return jsi::Value::undefined();
   }
 
   JSI_HOST_FUNCTION(makeImageSnapshot) {
+    auto surface = getObject();
     sk_sp<SkImage> image;
     if (count == 1) {
       auto rect = JsiSkRect::fromValue(runtime, arguments[0]);
-      image = getObject()->makeImageSnapshot(SkIRect::MakeXYWH(
+      image = surface->makeImageSnapshot(SkIRect::MakeXYWH(
           rect->x(), rect->y(), rect->width(), rect->height()));
     } else {
-      image = getObject()->makeImageSnapshot();
+      image = surface->makeImageSnapshot();
     }
+#if defined(SK_GRAPHITE)
+    auto recording = surface->recorder()->snap();
+    DawnContext::getInstance().submitRecording(recording.get());
+#endif
     return jsi::Object::createFromHostObject(
         runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image)));
   }