Skip to content

Instantly share code, notes, and snippets.

View wcandillon's full-sized avatar

William Candillon wcandillon

View GitHub Profile
import React, { useMemo, useState } from "react";
import type { StyleProp, ViewStyle } from "react-native";
import {
Button,
StatusBar,
Text,
TouchableOpacity,
useWindowDimensions,
View,
StyleSheet,
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";
import { PixelRatio } from "react-native";
import { Canvas, useCanvasEffect } from "react-native-wgpu";
export interface Bitmap {
width: number;
height: number;
colorType: "rgba8unorm" | "bgra8unorm";
data: Uint8Array;
}
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)
// 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
import {
Canvas,
Group,
Rect,
Skia,
useClock,
} from "@shopify/react-native-skia";
import React from "react";
import { StyleSheet, View } from "react-native";
import Animated, {
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
wcandillon / start.tsx
Created January 7, 2023 18:07
Skia Shader Line SDF Starter
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
wcandillon / line-sdf.tsx
Last active January 3, 2025 15:11
React Native Line SDF
import React from "react";
import {
Canvas,
Skia,
Shader,
Fill,
vec,
useTouchHandler,
useValue,
useComputedValue,
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>