Skip to content

Commit 03d016b

Browse files
authored
Minor doc improvement
1 parent 355ff55 commit 03d016b

File tree

1 file changed

+1
-64
lines changed

1 file changed

+1
-64
lines changed

docs/docs/getting-started/headless.md

Lines changed: 1 addition & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -41,67 +41,4 @@ import { Fill, draw } from "@shopify/react-native-skia/lib/commonjs/headless";
4141

4242
React Native Skia relies on the [OffscreenCanvas API](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) to support GPU-Accelerated offscreen surfacs.
4343
This means, that to benefit from the GPU acceleration, you will need to provide a polyfill of the [OffscreenCanvas API](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) on Node.
44-
Below is our own OffScreenCanvas polyfill implementation that relies on WebGL using [headless-gl](https://github.com/stackgl/headless-gl).
45-
46-
```tsx
47-
// Here we use gl for headless webgl support.
48-
import GL from "gl";
49-
50-
// Now we need to provide polyfill for WebGLRenderingContext and OffscreenCanvas
51-
// for Skia to be able to leverage WebGL
52-
global.WebGLRenderingContext = GL.WebGLRenderingContext;
53-
global.OffscreenCanvas = class OffscreenCanvasPolyfill
54-
implements OffscreenCanvas
55-
{
56-
private gl: WebGLRenderingContext;
57-
constructor(public readonly width: number, public readonly height: number) {
58-
this.gl = GL(width, height, {
59-
preserveDrawingBuffer: true,
60-
});
61-
}
62-
oncontextlost: ((this: OffscreenCanvas, ev: Event) => unknown) | null;
63-
oncontextrestored: ((this: OffscreenCanvas, ev: Event) => unknown) | null;
64-
65-
transferToImageBitmap(): ImageBitmap {
66-
throw new Error("Method not implemented.");
67-
}
68-
69-
addEventListener(type: unknown, listener: unknown, options?: unknown): void {
70-
throw new Error("Method not implemented.");
71-
}
72-
73-
removeEventListener(
74-
type: unknown,
75-
listener: unknown,
76-
options?: unknown
77-
): void {
78-
throw new Error("Method not implemented.");
79-
}
80-
81-
dispatchEvent(event: Event): boolean {
82-
throw new Error("Method not implemented.");
83-
}
84-
85-
getContext(ctx: string) {
86-
if (ctx === "webgl") {
87-
const _getUniformLocation = this.gl.getUniformLocation;
88-
// Temporary fix for https://github.com/stackgl/headless-gl/issues/170
89-
this.gl.getUniformLocation = function (program: any, name: any) {
90-
if (program._uniforms && !/\[\d+\]$/.test(name)) {
91-
const reg = new RegExp(`${name}\\[\\d+\\]$`);
92-
for (let i = 0; i < program._uniforms.length; i++) {
93-
const _name = program._uniforms[i].name;
94-
if (reg.test(_name)) {
95-
name = _name;
96-
}
97-
}
98-
}
99-
return _getUniformLocation.call(this, program, name);
100-
};
101-
102-
return this.gl;
103-
}
104-
return null;
105-
}
106-
};
107-
```
44+
For example, [here](https://gist.github.com/wcandillon/a46e922910a814139758d6eda9d99ff8) is an OffScreenCanvas polyfill implementation that relies on WebGL using [headless-gl](https://github.com/stackgl/headless-gl).

0 commit comments

Comments
 (0)