wcandillon

import type {
  SkData,
  SkImage,
  SkTypeface,
  SkTypefaceFontProvider,
} from "@shopify/react-native-skia";
import { Canvas as SkCanvas, Skia } from "@shopify/react-native-skia";
import type { ReactNode } from "react";
import { useContext, createContext, useState, useEffect } from "react";
import { Internals } from "remotion";

wcandillon

import { PixelRatio } from "react-native";
import { Canvas, useCanvasEffect } from "react-native-wgpu";

export interface Bitmap {
  width: number;
  height: number;
  colorType: "rgba8unorm" | "bgra8unorm";
  data: Uint8Array;
}

wcandillon

cmake_minimum_required(VERSION 3.22.1)
cmake_policy(SET CMP0048 NEW)
project(webgpu VERSION 1.1.0 LANGUAGES CXX)

include(${CMAKE_CURRENT_LIST_DIR}/BundleLibraries.cmake)

set(DAWN_BUILD_ANDROID_SAMPLES OFF)
set(DAWN_BUILD_SAMPLES OFF)
set(TINT_BUILD_TESTS OFF)
set(TINT_BUILD_CMD_TOOLS OFF)

wcandillon

// For React Native Skia to use GPU acceleration on node,
// We need to provide a polyfill for the OffscreenCanvas API on node
// Below is our implementation using [headless-gl](https://github.com/stackgl/headless-gl).
// Here we use gl for headless webgl support.
import GL from "gl";

// Now we need to provide polyfill for WebGLRenderingContext and OffscreenCanvas 
// for Skia to be able to leverage WebGL
global.WebGLRenderingContext = GL.WebGLRenderingContext;
global.OffscreenCanvas = class OffscreenCanvasPolyfill

wcandillon

import {
  Canvas,
  Group,
  Rect,
  Skia,
  useClock,
} from "@shopify/react-native-skia";
import React from "react";
import { StyleSheet, View } from "react-native";
import Animated, {

wcandillon

target_os="ios"
target_cpu="arm64"
skia_use_piex=true
skia_use_sfntly=false
skia_use_system_expat=false
skia_use_system_libjpeg_turbo=false
skia_use_system_libpng=false
skia_use_system_libwebp=false
skia_use_system_zlib=false
skia_enable_tools=false

wcandillon

import React from "react";
import { Canvas, Skia, Shader, Fill } from "@shopify/react-native-skia";

const source = Skia.RuntimeEffect.Make(`
uniform float4 colors[4];

vec4 main(vec2 xy) {
  return colors[1];
}`)!;

wcandillon

import React from "react";
import {
  Canvas,
  Skia,
  Shader,
  Fill,
  vec,
  useTouchHandler,
  useValue,
  useComputedValue,

wcandillon

describe("Drawings", () => {
  it("Should blend colors using multiplication", async () => {
    const { width, height } = surface;
    const r = width * 0.33;
    const image = await surface.draw(
      <Group blendMode="multiply">
        <Circle cx={r} cy={r} r={r} color="cyan" />
        <Circle cx={width - r} cy={r} r={r} color="magenta" />
        <Circle cx={width / 2} cy={height - r} r={r} color="yellow" />
      </Group>

wcandillon

/**
 * `Char` represents a single-byte character.
 */
// prettier-ignore
export type Char =
  | "\x00" | "\x01" | "\x02" | "\x03" | "\x04" | "\x05" | "\x06" | "\x07"
  | "\x08" | "\x09" | "\x0A" | "\x0B" | "\x0C" | "\x0D" | "\x0E" | "\x0F"
  | "\x10" | "\x11" | "\x12" | "\x13" | "\x14" | "\x15" | "\x16" | "\x17"
  | "\x18" | "\x19" | "\x1A" | "\x1B" | "\x1C" | "\x1D" | "\x1E" | "\x1F"
  | "\x20" | "\x21" | "\x22" | "\x23" | "\x24" | "\x25" | "\x26" | "\x27"