Merge branch 'main' into fix/building-from-source

Author: hannojg

docs/docs/shapes/pictures.md

@@ -11,7 +11,54 @@ A Picture renders a previously recorded list of drawing operations on the canvas
 | :------ | :---------- | :---------------- |
 | picture | `SkPicture` | Picture to render |
 
-### Example
+
+## Hello World
+
+```tsx twoslash
+import React, { useMemo } from "react";
+import {
+  createPicture,
+  Canvas,
+  Picture,
+  Skia,
+  Group,
+  BlendMode
+} from "@shopify/react-native-skia";
+
+const size = 256;
+
+export const HelloWorld = () => {
+  // Create a picture
+  const picture = useMemo(() => createPicture(
+    { width: size, height: size },
+    (canvas) => {
+      const r = 0.33 * size;
+      const paint = Skia.Paint();
+      paint.setBlendMode(BlendMode.Multiply);
+
+      paint.setColor(Skia.Color("cyan"));
+      canvas.drawCircle(r, r, r, paint);
+
+      paint.setColor(Skia.Color("magenta"));
+      canvas.drawCircle(size - r, r, r, paint);
+
+      paint.setColor(Skia.Color("yellow"));
+      canvas.drawCircle(size / 2, size - r, r, paint);
+    }
+  ), []);
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Picture picture={picture} />
+    </Canvas>
+  );
+};
+```
+
+## Serialization
+
+You can serialize a picture to a byte array.
+Serialized pictures are only compatible with the version of Skia it was created with.
+You can use serialized pictures with the [Skia debugger](https://skia.org/docs/dev/tools/debugger/).
 
 ```tsx twoslash
 import React, { useMemo } from "react";
@@ -26,7 +73,7 @@ import {
 export const PictureExample = () => {
   // Create picture
   const picture = useMemo(() => createPicture(
-    { x: 0, y: 0, width: 100, height: 100 },
+    { width: 100, height: 100 },
     (canvas) => {
       const paint = Skia.Paint();
       paint.setColor(Skia.Color("pink"));

docs/src/pages/index.tsx

@@ -12,8 +12,12 @@ function HomepageHeader() {
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
         {/* <img src="/img/skia2.png" alt="Skia" height="200" width="auto" /> */}
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <h1 className="hero__title" style={{ color: "white" }}>
+          {siteConfig.title}
+        </h1>
+        <p className="hero__subtitle" style={{ color: "white" }}>
+          {siteConfig.tagline}
+        </p>
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"

example/src/App.tsx

@@ -27,6 +27,7 @@ import {
   Severance,
   Transitions,
   Stickers,
+  FrostedCard,
 } from "./Examples";
 import { CI, Tests } from "./Tests";
 import { HomeScreen } from "./Home";
@@ -57,6 +58,7 @@ const linking: LinkingOptions<StackParamList> = {
       Tests: "test",
       Transitions: "transitions",
       Stickers: "stickers",
+      FrostedCard: "frosted-card",
     },
   },
   prefixes: ["rnskia://"],
@@ -151,6 +153,13 @@ const App = () => {
                 header: () => null,
               }}
             />
+            <Stack.Screen
+              name="FrostedCard"
+              component={FrostedCard}
+              options={{
+                header: () => null,
+              }}
+            />
             <Stack.Screen name="Neumorphism" component={Neumorphism} />
             <Stack.Screen
               name="Wallpaper"

example/src/Examples/FrostedCard/BlurGradient.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import type { SkMatrix } from "@shopify/react-native-skia";
+import { RuntimeShader, vec } from "@shopify/react-native-skia";
+import type { SharedValue } from "react-native-gesture-handler/lib/typescript/handlers/gestures/reanimatedWrapper";
+import { useDerivedValue } from "react-native-reanimated";
+
+import { generateShader } from "./Shader";
+
+const source = generateShader();
+
+interface BlurGradientProps {
+  matrix: SharedValue<SkMatrix>;
+}
+
+export const BlurMask = ({ matrix }: BlurGradientProps) => {
+  const hUniforms = useDerivedValue(() => {
+    return {
+      direction: vec(1, 0),
+      matrix: matrix.value.get(),
+    };
+  });
+  const vUniforms = useDerivedValue(() => {
+    return {
+      direction: vec(0, 1),
+      matrix: matrix.value.get(),
+    };
+  });
+  return (
+    <RuntimeShader source={source} uniforms={hUniforms}>
+      <RuntimeShader source={source} uniforms={vUniforms} />
+    </RuntimeShader>
+  );
+};

example/src/Examples/FrostedCard/FrostedCard.tsx

@@ -0,0 +1,96 @@
+import {
+  Canvas,
+  Skia,
+  processTransform3d,
+  useImage,
+  Image,
+  BackdropFilter,
+  Fill,
+  Blur,
+  notifyChange,
+} from "@shopify/react-native-skia";
+import React from "react";
+import { Dimensions, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import {
+  useDerivedValue,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+
+const { width, height } = Dimensions.get("window");
+const CARD_WIDTH = width * 0.9;
+const CARD_HEIGHT = CARD_WIDTH / 1.618;
+const rct = Skia.XYWHRect(
+  (width - CARD_WIDTH) / 2,
+  (height - CARD_HEIGHT) / 2,
+  CARD_WIDTH,
+  CARD_HEIGHT
+);
+const rrct = Skia.RRectXY(rct, 10, 10);
+
+const sf = 300;
+const springConfig = (velocity: number) => {
+  "worklet";
+  return {
+    mass: 1,
+    damping: 1,
+    stiffness: 100,
+    overshootClamping: false,
+    restDisplacementThreshold: 0.01,
+    restSpeedThreshold: 2,
+    velocity,
+  };
+};
+
+export const FrostedCard = () => {
+  const image = useImage(require("./dynamo.jpg"));
+  const rotateX = useSharedValue(0);
+  const rotateY = useSharedValue(0);
+  const path = useSharedValue(Skia.Path.Make());
+
+  const gesture = Gesture.Pan()
+    .onChange((event) => {
+      rotateY.value += event.changeX / sf;
+      rotateX.value -= event.changeY / sf;
+    })
+    .onEnd(({ velocityX, velocityY }) => {
+      rotateX.value = withSpring(0, springConfig(velocityY / sf));
+      rotateY.value = withSpring(0, springConfig(velocityX / sf));
+    });
+
+  useDerivedValue(() => {
+    path.value.reset();
+    path.value.addRRect(rrct);
+    path.value.transform(
+      processTransform3d([
+        { translate: [width / 2, height / 2] },
+        { perspective: 300 },
+        { rotateX: rotateX.value },
+        { rotateY: rotateY.value },
+        { translate: [-width / 2, -height / 2] },
+      ])
+    );
+    notifyChange(path);
+  });
+
+  return (
+    <View style={{ flex: 1 }}>
+      <GestureDetector gesture={gesture}>
+        <Canvas style={{ flex: 1 }}>
+          <Image
+            image={image}
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+            fit="cover"
+          />
+          <BackdropFilter filter={<Blur blur={30} mode="clamp" />} clip={path}>
+            <Fill color="rgba(255, 255, 255, 0.1)" />
+          </BackdropFilter>
+        </Canvas>
+      </GestureDetector>
+    </View>
+  );
+};

example/src/Examples/FrostedCard/Shader.ts

@@ -0,0 +1,58 @@
+import { Skia } from "@shopify/react-native-skia";
+
+import { glsl } from "../../components/ShaderLib";
+
+export const generateShader = () => {
+  const maxSigma = 10;
+  const k = 3;
+  const windowSize = k * maxSigma;
+  const halfWindowSize = (windowSize / 2).toFixed(1);
+  const source = glsl`
+uniform shader image;
+uniform mat3 matrix;
+
+uniform float2 direction;
+
+// Function to calculate Gaussian weight
+float Gaussian(float x, float sigma) {
+  return exp(-(x * x) / (2.0 * sigma * sigma)) / (2.0 * 3.14159 * sigma * sigma);
+}
+
+// Function to perform blur in one direction
+vec3 blur(vec2 uv, vec2 direction, float sigma) {
+  vec3 result = vec3(0.0);
+  float totalWeight = 0.0;
+  float window = sigma * ${k.toFixed(1)} * 0.5;
+
+  for (float i = ${-halfWindowSize}; i <= ${halfWindowSize}; i++) {
+      if (abs(i) > window) {
+        continue;
+      }
+      float weight = Gaussian(i, sigma);
+      vec2 offset = vec2(direction * i);
+      vec3 sample = image.eval(uv + offset).rgb;
+
+      result += sample * weight;
+      totalWeight += weight;
+  }
+
+  if (totalWeight > 0.0) {
+      result /= totalWeight;
+  }
+
+  return result;
+}
+
+// main function
+vec4 main(vec2 xy) {
+  vec3 prj = matrix * vec3(xy, 1.0);
+  float amount = clamp(prj.z/200.0, 0.0, 1.0);
+  if (amount == 0.0) {
+    return image.eval(xy);
+  }
+  vec3 color = blur(xy, direction, mix(0.1, ${maxSigma.toFixed(1)}, amount));
+  return vec4(color, 1.0);
+}
+`;
+  return Skia.RuntimeEffect.Make(source)!;
+};

example/src/Examples/FrostedCard/dynamo.jpg

@@ -0,0 +1 @@
+export * from "./FrostedCard";

example/src/Examples/FrostedCard/index.ts

@@ -21,3 +21,4 @@ export * from "./Wallet";
 export * from "./Severance";
 export * from "./Transitions";
 export * from "./Stickers";
+export * from "./FrostedCard";

example/src/Examples/index.ts

@@ -62,6 +62,11 @@ export const HomeScreen = () => {
         description="Glassmorphism"
         route="Glassmorphism"
       />
+      <HomeScreenButton
+        title="☃️ Frosted Card"
+        description="Frosted Card"
+        route="FrostedCard"
+      />
       <HomeScreenButton title="💳 Wallet" description="Wallet" route="Wallet" />
       <HomeScreenButton
         title="📉 Graphs"