[pull] main from Shopify:main

.github/workflows/build-skia.yml

@@ -1,6 +1,11 @@
 name: Build SKIA
 on:
   workflow_dispatch:
+    inputs:
+      tag_suffix:
+        description: 'Optional suffix to append to tag (e.g., "a" for skia-m144a)'
+        required: false
+        default: ''
 jobs:
   prepare-release:
     runs-on: ubuntu-latest
@@ -38,12 +43,13 @@ jobs:
       - name: Compute release metadata
         id: release_meta
         run: |
-          tag="skia-${SKIA_BRANCH_SLUG}"
+          tag="skia-${SKIA_BRANCH_SLUG}${TAG_SUFFIX}"
           echo "tag_name=$tag" >> "$GITHUB_OUTPUT"
-          echo "release_name=Skia ${SKIA_BRANCH}" >> "$GITHUB_OUTPUT"
+          echo "release_name=Skia ${SKIA_BRANCH}${TAG_SUFFIX}" >> "$GITHUB_OUTPUT"
         env:
           SKIA_BRANCH: ${{ steps.skia_meta.outputs.branch }}
           SKIA_BRANCH_SLUG: ${{ steps.skia_meta.outputs.branch_slug }}
+          TAG_SUFFIX: ${{ github.event.inputs.tag_suffix }}
       - name: Create GitHub release
         id: create_release
         uses: softprops/action-gh-release@v2

.github/workflows/ci-graphite.yml

@@ -63,7 +63,7 @@ jobs:
         uses: nttld/setup-ndk@afb4c9964b521afb97c864b7d40b11e6911bd410 # v1.5.0
         id: setup-ndk
         with:
-          ndk-version: r26d
+          ndk-version: r27d
 
       - name: Set ANDROID_NDK
         run: echo "ANDROID_NDK=$ANDROID_HOME/ndk-bundle" >> $GITHUB_ENV

.github/workflows/ci.yml

@@ -178,7 +178,7 @@ jobs:
         uses: nttld/setup-ndk@afb4c9964b521afb97c864b7d40b11e6911bd410 # v1.5.0
         id: setup-ndk
         with:
-          ndk-version: r26d
+          ndk-version: r27d
 
       - name: Set ANDROID_NDK
         run: echo "ANDROID_NDK=$ANDROID_HOME/ndk-bundle" >> $GITHUB_ENV

apps/example/ios/Podfile.lock

@@ -2147,7 +2147,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 0502faf46cab8fb89cfc7bf3e6c6109b6ef9b5de
   React-microtasksnativemodule: 663bc64e3a96c5fc91081923ae7481adc1359a78
   react-native-safe-area-context: 286b3e7b5589795bb85ffc38faf4c0706c48a092
-  react-native-skia: 0457c9311947ef4642e3f55d5647220c5e529eb2
+  react-native-skia: 051de3960d565ea3e2440cfcf5f919bc95617ad3
   React-NativeModulesApple: 16fbd5b040ff6c492dacc361d49e63cba7a6a7a1
   React-perflogger: ab51b7592532a0ea45bf6eed7e6cae14a368b678
   React-performancetimeline: bc2e48198ec814d578ac8401f65d78a574358203

apps/example/package.json

@@ -27,6 +27,7 @@
     "@react-navigation/native-stack": "^7.2.1",
     "@shopify/react-native-skia": "workspace:*",
     "@testing-library/react-native": "^13.1.0",
+    "@webgpu/types": "^0.1.69",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "cdt2d": "^1.0.0",
     "its-fine": "^2.0.0",

apps/example/src/App.tsx

@@ -34,6 +34,7 @@ import {
   Chat,
   LiquidGlass,
   Pictures,
+  WebGPU,
 } from "./Examples";
 import { CI, Tests } from "./Tests";
 import { HomeScreen } from "./Home";
@@ -73,6 +74,7 @@ const linking: LinkingOptions<StackParamList> = {
       Video: "video",
       Chat: "chat",
       Pictures: "pictures",
+      WebGPU: "webgpu",
     },
   },
   prefixes: ["rnskia://"],
@@ -235,6 +237,13 @@ const App = () => {
               component={PerformanceDrawingTest}
             />
             <Stack.Screen name="Pictures" component={Pictures} />
+            <Stack.Screen
+              name="WebGPU"
+              component={WebGPU}
+              options={{
+                header: () => null,
+              }}
+            />
           </Stack.Navigator>
         </NavigationContainer>
       </GestureHandlerRootView>

apps/example/src/Examples/WebGPU/Shaders.ts

@@ -0,0 +1,115 @@
+export const solidColorLitWGSL = /*wgsl*/ `struct Uniforms {
+  worldViewProjectionMatrix: mat4x4f,
+  worldMatrix: mat4x4f,
+  color: vec4f,
+};
+
+struct Vertex {
+  @location(0) position: vec4f,
+  @location(1) normal: vec3f,
+};
+
+struct VSOut {
+  @builtin(position) position: vec4f,
+  @location(0) normal: vec3f,
+};
+
+@group(0) @binding(0) var<uniform> uni: Uniforms;
+
+@vertex fn vs(vin: Vertex) -> VSOut {
+  var vOut: VSOut;
+  vOut.position = uni.worldViewProjectionMatrix * vin.position;
+  vOut.normal = (uni.worldMatrix * vec4f(vin.normal, 0)).xyz;
+  return vOut;
+}
+
+@fragment fn fs(vin: VSOut) -> @location(0) vec4f {
+  let lightDirection = normalize(vec3f(4, 10, 6));
+  let light = dot(normalize(vin.normal), lightDirection) * 0.5 + 0.5;
+  return vec4f(uni.color.rgb * light, uni.color.a);
+}`;
+
+export const wireframeWGSL = /*wgsl*/ `struct Uniforms {
+  worldViewProjectionMatrix: mat4x4f,
+  worldMatrix: mat4x4f,
+  color: vec4f,
+};
+
+struct LineUniforms {
+  stride: u32,
+  thickness: f32,
+  alphaThreshold: f32,
+};
+
+struct VSOut {
+  @builtin(position) position: vec4f,
+};
+
+@group(0) @binding(0) var<uniform> uni: Uniforms;
+@group(0) @binding(1) var<storage, read> positions: array<f32>;
+@group(0) @binding(2) var<storage, read> indices: array<u32>;
+@group(0) @binding(3) var<uniform> line: LineUniforms;
+
+@vertex fn vsIndexedU32(@builtin(vertex_index) vNdx: u32) -> VSOut {
+  // indices make a triangle so for every 3 indices we need to output
+  // 6 values
+  let triNdx = vNdx / 6;
+  // 0 1 0 1 0 1  0 1 0 1 0 1  vNdx % 2
+  // 0 0 1 1 2 2  3 3 4 4 5 5  vNdx / 2
+  // 0 1 1 2 2 3  3 4 4 5 5 6  vNdx % 2 + vNdx / 2
+  // 0 1 1 2 2 0  0 1 1 2 2 0  (vNdx % 2 + vNdx / 2) % 3
+  let vertNdx = (vNdx % 2 + vNdx / 2) % 3;
+  let index = indices[triNdx * 3 + vertNdx];
+
+  let pNdx = index * line.stride;
+  let position = vec4f(positions[pNdx], positions[pNdx + 1], positions[pNdx + 2], 1);
+
+  var vOut: VSOut;
+  vOut.position = uni.worldViewProjectionMatrix * position;
+  return vOut;
+}
+
+@fragment fn fs() -> @location(0) vec4f {
+  return uni.color + vec4f(0.5);
+}
+
+struct BarycentricCoordinateBasedVSOutput {
+  @builtin(position) position: vec4f,
+  @location(0) barycenticCoord: vec3f,
+};
+
+@vertex fn vsIndexedU32BarycentricCoordinateBasedLines(
+  @builtin(vertex_index) vNdx: u32
+) -> BarycentricCoordinateBasedVSOutput {
+  let vertNdx = vNdx % 3;
+  let index = indices[vNdx];
+
+  let pNdx = index * line.stride;
+  let position = vec4f(positions[pNdx], positions[pNdx + 1], positions[pNdx + 2], 1);
+
+  var vsOut: BarycentricCoordinateBasedVSOutput;
+  vsOut.position = uni.worldViewProjectionMatrix * position;
+
+  // emit a barycentric coordinate
+  vsOut.barycenticCoord = vec3f(0);
+  vsOut.barycenticCoord[vertNdx] = 1.0;
+  return vsOut;
+}
+
+fn edgeFactor(bary: vec3f) -> f32 {
+  let d = fwidth(bary);
+  let a3 = smoothstep(vec3f(0.0), d * line.thickness, bary);
+  return min(min(a3.x, a3.y), a3.z);
+}
+
+@fragment fn fsBarycentricCoordinateBasedLines(
+  v: BarycentricCoordinateBasedVSOutput
+) -> @location(0) vec4f {
+  let a = 1.0 - edgeFactor(v.barycenticCoord);
+  if (a < line.alphaThreshold) {
+    discard;
+  }
+
+  return vec4((uni.color.rgb + 0.5) * a, a);
+}
+`;