feat: add MakeTextureFromImage

.github/workflows/ci.yml

@@ -321,13 +321,13 @@ jobs:
             CI=true yarn e2e --testPathIgnorePatterns Paragraphs
           fi
 
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           path: packages/skia/src/__tests__/snapshots/
           name: ${{ matrix.working-directory }}-snapshots-screenshots
 
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           path: apps/docs/static

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

@@ -145,6 +145,10 @@ class RNSkAndroidPlatformContext : public RNSkPlatformContext {
 
   void stopDrawLoop() override { _jniPlatformContext->stopDrawLoop(); }
 
+  GrDirectContext *getDirectContext() override {
+    return ThreadContextHolder::ThreadSkiaOpenGLContext.directContext.get();
+  }
+
 private:
   JniPlatformContext *_jniPlatformContext;
 };

packages/skia/cpp/api/JsiSkImage.h

@@ -186,6 +186,14 @@ class JsiSkImage : public JsiSkWrappingSkPtrHostObject<SkImage> {
         runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image)));
   }
 
+  JSI_HOST_FUNCTION(isTextureBacked) {
+    return static_cast<bool>(getObject()->isTextureBacked());
+  }
+
+  JSI_HOST_FUNCTION(textureSize) {
+    return static_cast<double>(getObject()->textureSize());
+  }
+
   EXPORT_JSI_API_TYPENAME(JsiSkImage, Image)
 
   JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkImage, width),
@@ -197,6 +205,8 @@ class JsiSkImage : public JsiSkWrappingSkPtrHostObject<SkImage> {
                        JSI_EXPORT_FUNC(JsiSkImage, encodeToBase64),
                        JSI_EXPORT_FUNC(JsiSkImage, readPixels),
                        JSI_EXPORT_FUNC(JsiSkImage, makeNonTextureImage),
+                       JSI_EXPORT_FUNC(JsiSkImage, isTextureBacked),
+                       JSI_EXPORT_FUNC(JsiSkImage, textureSize),
                        JSI_EXPORT_FUNC(JsiSkImage, dispose))
 
   JsiSkImage(std::shared_ptr<RNSkPlatformContext> context,

packages/skia/cpp/api/JsiSkImageFactory.h

@@ -10,6 +10,7 @@
 #include "JsiSkHostObjects.h"
 #include "JsiSkImage.h"
 #include "JsiSkImageInfo.h"
+#include <include/gpu/ganesh/SkImageGanesh.h>
 
 namespace RNSkia {
 
@@ -78,11 +79,32 @@ class JsiSkImageFactory : public JsiSkHostObject {
         });
   }
 
+  JSI_HOST_FUNCTION(MakeTextureFromImage) {
+    auto directContext = getContext()->getDirectContext();
+
+    if (directContext == nullptr) {
+      return jsi::Value::null();
+    }
+
+    auto image = JsiSkImage::fromValue(runtime, arguments[0]);
+
+    auto texture = SkImages::TextureFromImage(directContext, image);
+
+    if (texture == nullptr) {
+      return jsi::Value::null();
+    }
+
+    return jsi::Object::createFromHostObject(
+        runtime,
+        std::make_shared<JsiSkImage>(getContext(), std::move(texture)));
+  }
+
   JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImageFromEncoded),
                        JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImageFromViewTag),
                        JSI_EXPORT_FUNC(JsiSkImageFactory,
                                        MakeImageFromNativeBuffer),
-                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImage))
+                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImage),
+                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeTextureFromImage))
 
   explicit JsiSkImageFactory(std::shared_ptr<RNSkPlatformContext> context)
       : JsiSkHostObject(std::move(context)) {}

packages/skia/cpp/rnskia/RNSkPlatformContext.h

@@ -169,6 +169,8 @@ class RNSkPlatformContext {
     });
   }
 
+  virtual GrDirectContext *getDirectContext() = 0;
+
   /**
    * Raises an exception on the platform. This function does not necessarily
    * throw an exception and stop execution, so it is important to stop execution

packages/skia/ios/RNSkia-iOS/RNSkiOSPlatformContext.h

@@ -71,6 +71,7 @@ class RNSkiOSPlatformContext : public RNSkPlatformContext {
       const std::string &sourceUri,
       const std::function<void(std::unique_ptr<SkStreamAsset>)> &op) override;
 
+  GrDirectContext *getDirectContext() override;
   void raiseError(const std::exception &err) override;
   sk_sp<SkSurface> makeOffscreenSurface(int width, int height) override;
   sk_sp<SkFontMgr> createFontMgr() override;

packages/skia/ios/RNSkia-iOS/RNSkiOSPlatformContext.mm

@@ -195,4 +195,8 @@
   }
 }
 
+GrDirectContext *RNSkiOSPlatformContext::getDirectContext() {
+  return ThreadContextHolder::ThreadSkiaMetalContext.skContext.get();
+}
+
 } // namespace RNSkia

packages/skia/src/renderer/HostConfig.ts

@@ -53,7 +53,11 @@ const appendNode = (parent: Node<unknown>, child: Node<unknown>) => {
   parent.addChild(child);
 };
 
-const removeNode = (parent: Node<unknown>, child: Node<unknown>, unmounted = false) => {
+const removeNode = (
+  parent: Node<unknown>,
+  child: Node<unknown>,
+  unmounted = false
+) => {
   // If the drawing is unmounted we don't want to update it.
   // We can just stop the reanimated mappers
   unbindReanimatedNode(child);

packages/skia/src/renderer/__tests__/e2e/Offscreen.spec.tsx

@@ -5,6 +5,36 @@ import { Circle } from "../../components";
 import { surface, importSkia } from "../setup";
 
 describe("Offscreen Drawings", () => {
+  it("isTextureBacked()", async () => {
+    const { width, height } = surface;
+    const result = await surface.eval(
+      (Skia, ctx) => {
+        const r = ctx.width / 2;
+        const offscreen = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
+        if (!offscreen) {
+          throw new Error("Could not create offscreen surface");
+        }
+        const canvas = offscreen.getCanvas();
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color("lightblue"));
+        canvas.drawCircle(r, r, r, paint);
+        offscreen.flush();
+        const r0 = offscreen.makeImageSnapshot();
+        const r1 = r0.makeNonTextureImage();
+        const r2 = Skia.Image.MakeTextureFromImage(r1);
+        if (!r2) {
+          return [];
+        }
+        return [r0.isTextureBacked(), r1.isTextureBacked(), r2.isTextureBacked()];
+      },
+      { width, height }
+    );
+    if (surface.OS === "web" || surface.OS === "node") {
+      expect(result).toEqual([false, false, false]);
+    } else {
+      expect(result).toEqual([true, false, true]);
+    }
+  });
   it("Should use the canvas API to build an image", async () => {
     const { width, height } = surface;
     const raw = await surface.eval(

packages/skia/src/skia/types/Image/Image.ts

@@ -130,4 +130,17 @@ export interface SkImage extends SkJSIInstance<"Image"> {
    * bitmap, or if encoded in a stream.
    */
   makeNonTextureImage(): SkImage;
+
+  /**
+   * Returns true if the image is backed by a GPU texture.
+   * Usually true if the image was uploaded manually to GPU (ImageFactory.MakeTextureFromImage)
+   * or if the image is a snapshot of a GPU backed surface (surface.makeImageSnapshot).
+   */
+  isTextureBacked(): boolean;
+
+  /**
+   * Returns an approximation of the amount of texture memory used by the image.
+   * Returns zero if the image is not texture backed or if the texture has an external format.
+   */
+  textureSize(): number;
 }

packages/skia/src/skia/types/Image/ImageFactory.ts

@@ -87,4 +87,12 @@ export interface ImageFactory {
    * @param bytesPerRow
    */
   MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number): SkImage | null;
+
+  /**
+   * Uploads image to GPU memory and in case of success returns a texture backed image.
+   * The old image can be safely disposed.
+   * @param image - Image to be uploaded to GPU
+   * @returns Returns texture backed image if the image is valid, null otherwise.
+   */
+  MakeTextureFromImage(image: SkImage): SkImage | null;
 }

packages/skia/src/skia/web/JsiSkImage.ts

@@ -49,6 +49,14 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     super(CanvasKit, ref, "Image");
   }
 
+  isTextureBacked(): boolean {
+    return false;
+  }
+
+  textureSize(): number {
+    return 0;
+  }
+
   height() {
     return this.ref.height();
   }

packages/skia/src/skia/web/JsiSkImageFactory.ts

@@ -20,9 +20,14 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
     super(CanvasKit);
   }
 
+  MakeTextureFromImage(image: SkImage) {
+    return image;
+  }
+
   MakeImageFromViewTag(viewTag: number): Promise<SkImage | null> {
     const view = viewTag as unknown as HTMLElement;
-    // TODO: Implement screenshot from view in React JS
+    // TODO: implement once this API is available:
+    // https://x.com/fserb/status/1794058245901824349
     console.log(view);
     return Promise.resolve(null);
   }