Skip to content

Instantly share code, notes, and snippets.

View wcandillon's full-sized avatar

William Candillon wcandillon

View GitHub Profile
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 June 11, 2024 08:47
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>
/**
* `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"
type CountTo<N extends number, S extends 0[] = []> = S["length"] extends N
? S
: CountTo<N, [...S, 0]>;
type Inc<N extends number> = [...CountTo<N>, 0]["length"];
type Dec<N extends number> = CountTo<N> extends [infer _H, ...infer T]
? T["length"]
: 0;
type Before<
Memory extends number[],