@symbiote-native/gl 0.0.0-stage → 0.0.0

package/build-ngc/core/types.d.ts

@@ -0,0 +1,75 @@
+import type { IAccessibilityProps, IAriaProps, IResponderProps } from '@symbiote-native/components';
+import type { IStyleProp, ISymbioteEvent, ISymbioteNode, IViewStyle } from '@symbiote-native/engine';
+export type IGLObject = {
+    id: number;
+};
+export type IGLSurfaceCreateEvent = {
+    nativeEvent: {
+        exglCtxId: number;
+    };
+};
+export type IGLSnapshotOptions = {
+    /** @default false */
+    flip?: boolean;
+    /** Defaults to the framebuffer shown in the view, or the current one of a headless context */
+    framebuffer?: WebGLFramebuffer;
+    /** Passed to `glReadPixels` */
+    rect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /** PNG is lossless but slower, iOS writes a PNG instead of WebP. @default 'jpeg' */
+    format?: 'jpeg' | 'png' | 'webp';
+    /** From `0` (most compressed) to `1.0` (none). @default 1.0 */
+    compress?: number;
+};
+export type IGLSnapshot = {
+    uri: string | Blob | null;
+    /** Same as `uri`, which makes a snapshot usable in `texImage2D` */
+    localUri: string;
+    width: number;
+    height: number;
+};
+export type IExpoWebGLRenderingContext = WebGL2RenderingContext & {
+    contextId: number;
+    endFrameEXP(): void;
+    flushEXP(): void;
+    __expoSetLogging(option: GLLoggingOption): void;
+};
+/** A native tag, or the host node of a view such as a camera */
+export type IGLNodeOrTag = number | ISymbioteNode | null;
+export type IGLViewProps = IAccessibilityProps & IAriaProps & IResponderProps & {
+    style?: IStyleProp<IViewStyle>;
+    testID?: string;
+    nativeID?: string;
+    onLayout?: (event: ISymbioteEvent) => void;
+    /** Called with the context once the surface exists */
+    onContextCreate(gl: IExpoWebGLRenderingContext): void;
+    /** Multisampling, `0` turns it off. @default 4 @platform ios */
+    msaaSamples?: number;
+    /** Lets the Reanimated worklet thread use the `gl` object. @default false */
+    enableExperimentalWorkletSupport?: boolean;
+};
+export declare enum GLLoggingOption {
+    DISABLED = 0,
+    /** Logs calls, their parameters and results */
+    METHOD_CALLS = 1,
+    /** Calls `getError` after each call, which blocks and slows drawing down */
+    GET_ERRORS = 2,
+    /** Prints the name of the constant a numeric parameter holds */
+    RESOLVE_CONSTANTS = 4,
+    /** Cuts long strings such as shaders */
+    TRUNCATE_STRINGS = 8,
+    ALL = 15
+}
+/** What a ref to the view hands out */
+export type IGLViewHandle = {
+    /** The id of the context of the view, `undefined` until the surface exists */
+    readonly exglCtxId: number | undefined;
+    createCameraTextureAsync(camera: IGLNodeOrTag): Promise<WebGLTexture>;
+    destroyObjectAsync(glObject: IGLObject): Promise<boolean>;
+    /** A snapshot of the context of this view */
+    takeSnapshotAsync(options?: IGLSnapshotOptions): Promise<IGLSnapshot>;
+};

package/build-ngc/core/types.js

@@ -0,0 +1,14 @@
+export var GLLoggingOption;
+(function (GLLoggingOption) {
+    GLLoggingOption[GLLoggingOption["DISABLED"] = 0] = "DISABLED";
+    /** Logs calls, their parameters and results */
+    GLLoggingOption[GLLoggingOption["METHOD_CALLS"] = 1] = "METHOD_CALLS";
+    /** Calls `getError` after each call, which blocks and slows drawing down */
+    GLLoggingOption[GLLoggingOption["GET_ERRORS"] = 2] = "GET_ERRORS";
+    /** Prints the name of the constant a numeric parameter holds */
+    GLLoggingOption[GLLoggingOption["RESOLVE_CONSTANTS"] = 4] = "RESOLVE_CONSTANTS";
+    /** Cuts long strings such as shaders */
+    GLLoggingOption[GLLoggingOption["TRUNCATE_STRINGS"] = 8] = "TRUNCATE_STRINGS";
+    GLLoggingOption[GLLoggingOption["ALL"] = 15] = "ALL";
+})(GLLoggingOption || (GLLoggingOption = {}));
+//# sourceMappingURL=types.js.map

package/build-ngc/core/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAyEA,MAAM,CAAN,IAAY,eAWX;AAXD,WAAY,eAAe;IACzB,6DAAY,CAAA;IACZ,+CAA+C;IAC/C,qEAAgB,CAAA;IAChB,4EAA4E;IAC5E,iEAAc,CAAA;IACd,gEAAgE;IAChE,+EAAqB,CAAA;IACrB,wCAAwC;IACxC,6EAAoB,CAAA;IACpB,oDAAsE,CAAA;AACxE,CAAC,EAXW,eAAe,KAAf,eAAe,QAW1B"}

package/build-ngc/core/worklet-context-manager.d.ts

@@ -0,0 +1,6 @@
+import type { IExpoWebGLRenderingContext } from './types';
+export type IWorkletContextManager = {
+    getContext(contextId: number): IExpoWebGLRenderingContext | undefined;
+    unregister?(contextId: number): void;
+};
+export declare function createWorkletContextManager(): IWorkletContextManager;

package/build-ngc/core/worklet-context-manager.js

@@ -0,0 +1,35 @@
+import { GL_CONTEXTS_GLOBAL } from './constants';
+function isRunOnUI(value) {
+    return typeof value === 'function';
+}
+// Reanimated stays optional, and an import of it in a try block in the module that also holds the
+// view breaks with `inlineRequires`, so the manager lives in its own file
+export function createWorkletContextManager() {
+    try {
+        // Reanimated has to load before any workletized code is created
+        const reanimated = require('react-native-reanimated');
+        const runOnUI = Reflect.get(Object(reanimated), 'runOnUI');
+        if (!isRunOnUI(runOnUI))
+            throw new Error('react-native-reanimated has no runOnUI');
+        return {
+            getContext: contextId => {
+                'worklet';
+                return Reflect.get(Object(Reflect.get(globalThis, GL_CONTEXTS_GLOBAL)), String(contextId));
+            },
+            unregister: contextId => {
+                runOnUI(id => {
+                    'worklet';
+                    Reflect.deleteProperty(Object(Reflect.get(globalThis, GL_CONTEXTS_GLOBAL)), String(id));
+                })(contextId);
+            },
+        };
+    }
+    catch {
+        return {
+            getContext: () => {
+                throw new Error('Worklet runtime is not available');
+            },
+        };
+    }
+}
+//# sourceMappingURL=worklet-context-manager.js.map

package/build-ngc/core/worklet-context-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"worklet-context-manager.js","sourceRoot":"","sources":["../../src/core/worklet-context-manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAUjD,SAAS,SAAS,CAAC,KAAc;IAC/B,OAAO,OAAO,KAAK,KAAK,UAAU,CAAC;AACrC,CAAC;AAED,kGAAkG;AAClG,0EAA0E;AAC1E,MAAM,UAAU,2BAA2B;IACzC,IAAI,CAAC;QACH,gEAAgE;QAChE,MAAM,UAAU,GAAY,OAAO,CAAC,yBAAyB,CAAC,CAAC;QAC/D,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,CAAC;QAC3D,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;QACnF,OAAO;YACL,UAAU,EAAE,SAAS,CAAC,EAAE;gBACtB,SAAS,CAAC;gBACV,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;YAC7F,CAAC;YACD,UAAU,EAAE,SAAS,CAAC,EAAE;gBACtB,OAAO,CAAC,EAAE,CAAC,EAAE;oBACX,SAAS,CAAC;oBACV,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC1F,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;YAChB,CAAC;SACF,CAAC;IACJ,CAAC;IAAC,MAAM,CAAC;QACP,OAAO;YACL,UAAU,EAAE,GAAG,EAAE;gBACf,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;YACtD,CAAC;SACF,CAAC;IACJ,CAAC;AACH,CAAC"}

package/native-link.json

@@ -0,0 +1,12 @@
+{
+  "android": {
+    "gradleProjectName": "expo-gl",
+    "modules": [
+      {
+        "importPath": "expo.modules.gl.GLModule",
+        "className": "GLModule",
+        "nativeName": "ExpoGL"
+      }
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,148 @@
 {
   "name": "@symbiote-native/gl",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.0",
+  "description": "expo-gl wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. A GLView that gives a WebGL context to draw into, headless contexts and snapshots.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "packages/gl"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/packages/gl#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "expo-gl",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "angular",
+    "webgl",
+    "opengl"
+  ],
+  "type": "module",
+  "main": "./build/core/index.js",
+  "module": "./build/core/index.js",
+  "types": "./build/core/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/core/index.d.ts",
+      "default": "./build/core/index.js"
+    },
+    "./vue": {
+      "types": "./build/vue/index.d.ts",
+      "default": "./build/vue/index.js"
+    },
+    "./react": {
+      "types": "./build/react/index.d.ts",
+      "default": "./build/react/index.js"
+    },
+    "./svelte": "./src/svelte/index.ts",
+    "./solid": {
+      "types": "./build/solid/index.d.ts",
+      "default": "./build/solid/index.js"
+    },
+    "./angular": {
+      "types": "./build-ngc/angular/index.d.ts",
+      "react-native": "./build-ngc/angular/index.js",
+      "default": "./src/angular/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "build",
+    "build-ngc",
+    "native-link.json",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "!src/**/*.detox.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "expo-gl": "57.0.2",
+    "expo-modules-core": "57.0.20",
+    "@symbiote-native/components": "3.1.4"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20",
+    "@vue/runtime-core": "^3.5.13",
+    "react": ">=19.0.0",
+    "react-native": ">=0.86",
+    "solid-js": ">=1.9.0",
+    "svelte": ">=5.56.0",
+    "vue": ">=3.5.0",
+    "@symbiote-native/engine": "^1.5.0",
+    "@symbiote-native/angular": "^3.2.0",
+    "@symbiote-native/react": "^3.2.0",
+    "@symbiote-native/solid": "^3.1.0",
+    "@symbiote-native/svelte": "^3.1.0",
+    "@symbiote-native/vue": "^3.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@symbiote-native/angular": {
+      "optional": true
+    },
+    "@symbiote-native/react": {
+      "optional": true
+    },
+    "@symbiote-native/solid": {
+      "optional": true
+    },
+    "@symbiote-native/svelte": {
+      "optional": true
+    },
+    "@symbiote-native/vue": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@vue/runtime-core": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/compiler": "~22.0.8",
+    "@angular/compiler-cli": "~22.0.8",
+    "@angular/core": "~22.0.8",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.0",
+    "@vue/runtime-core": "^3.5.13",
+    "react": "19.2.3",
+    "solid-js": "^1.9.14",
+    "svelte": "^5.56.0",
+    "typescript": "~6.0.0",
+    "@symbiote-native/angular": "3.2.0",
+    "@symbiote-native/engine": "1.5.0",
+    "@symbiote-native/react": "3.2.0",
+    "@symbiote-native/test-utils": "0.4.6",
+    "@symbiote-native/svelte": "3.1.0",
+    "@symbiote-native/vue": "3.2.0",
+    "@symbiote-native/solid": "3.1.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --build",
+    "clean": "rm -rf build-ngc",
+    "ng:build": "pnpm run clean && ngc -p tsconfig.angular.json",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
 }

package/src/angular/gl-view/index.ts

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet, NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import { createGLView } from '../../core';
+import type { IGLViewProps } from '../../core';
+
+// One list is the inputs of the component and the props it hands to the native view
+const GL_VIEW_INPUTS = [
+  'onContextCreate',
+  'msaaSamples',
+  'enableExperimentalWorkletSupport',
+] as const;
+
+// Types the inputs for the template, the decorators that would do it are replaced by `inputs`
+export interface GLView
+  extends Partial<Pick<IGLViewProps, (typeof GL_VIEW_INPUTS)[number]>> {}
+
+/** Angular twin of `expo-gl`'s `GLView` */
+@Component({
+  selector: 'GLView',
+  standalone: true,
+  imports: [DescriptorOutlet],
+  inputs: [...GL_VIEW_INPUTS],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `@if (descriptor; as node) {
+    <symbiote-descriptor-outlet [node]="node" />
+  }`,
+})
+export class GLView extends NativeViewBase {
+  private readonly view = createGLView(() => this.hostNode());
+
+  // The functions of the view are members of the component, a `@ViewChild` reaches them
+  readonly createCameraTextureAsync = this.view.handle.createCameraTextureAsync;
+  readonly destroyObjectAsync = this.view.handle.destroyObjectAsync;
+  readonly takeSnapshotAsync = this.view.handle.takeSnapshotAsync;
+
+  get exglCtxId(): number | undefined {
+    return this.view.handle.exglCtxId;
+  }
+
+  protected override readonly propNames = GL_VIEW_INPUTS;
+
+  protected override renderView(props: object): IDescriptor | null {
+    return this.view.render(props);
+  }
+
+  protected override disposeView(): void {
+    this.view.dispose();
+  }
+}

package/src/angular/index.ts

@@ -0,0 +1,4 @@
+// @symbiote-native/gl/angular: a GLView that gives a WebGL context to draw into, on a shared core
+
+export { GLView } from './gl-view';
+export * from '../core';

package/src/core/constants.ts

@@ -0,0 +1,6 @@
+export const GL_MODULE_NAME = 'ExpoGL';
+
+export const GL_PACKAGE_NAME = 'expo-gl';
+
+/** Where the native module keeps the contexts it installs on the runtime, by id */
+export const GL_CONTEXTS_GLOBAL = '__EXGLContexts';

package/src/core/gl-context.ts

@@ -0,0 +1,74 @@
+import { CodedError } from 'expo-modules-core';
+import { GL_CONTEXTS_GLOBAL } from './constants';
+import { configureLogging } from './gl-utils';
+import { glNativeModule } from './native-module';
+import type {
+  IExpoWebGLRenderingContext,
+  IGLSnapshot,
+  IGLSnapshotOptions,
+} from './types';
+import { createWorkletContextManager } from './worklet-context-manager';
+
+const workletContextManager = createWorkletContextManager();
+
+function isContext(value: unknown): value is IExpoWebGLRenderingContext {
+  return typeof value === 'object' && value !== null;
+}
+
+/** The context of a worklet, `exgl` has to be created with worklet support */
+export function getWorkletContext(contextId: number): IExpoWebGLRenderingContext | undefined {
+  'worklet';
+  return workletContextManager.getContext(contextId);
+}
+
+export function unregisterGLContext(exglCtxId: number): void {
+  const contexts: unknown = Reflect.get(globalThis, GL_CONTEXTS_GLOBAL);
+  if (contexts) Reflect.deleteProperty(Object(contexts), String(exglCtxId));
+  workletContextManager.unregister?.(exglCtxId);
+}
+
+/** The GL interface of a context id the native side created */
+export function getGl(exglCtxId: number): IExpoWebGLRenderingContext {
+  const contexts: unknown = Reflect.get(globalThis, GL_CONTEXTS_GLOBAL);
+  if (!contexts) {
+    throw new CodedError(
+      'ERR_GL_NOT_AVAILABLE',
+      'GL is currently not available. (Have you enabled remote debugging? GL is not available while debugging remotely.)',
+    );
+  }
+  const gl: unknown = Reflect.get(Object(contexts), String(exglCtxId));
+  if (!isContext(gl)) throw new Error(`There is no EXGLContext with id ${exglCtxId}`);
+  configureLogging(gl);
+  return gl;
+}
+
+export function getContextId(exgl?: IExpoWebGLRenderingContext | number): number {
+  const exglCtxId = exgl && typeof exgl === 'object' ? exgl.contextId : exgl;
+  if (!exglCtxId || typeof exglCtxId !== 'number') {
+    throw new Error(`Invalid EXGLContext id: ${String(exglCtxId)}`);
+  }
+  return exglCtxId;
+}
+
+/** A context with no view, which does not present its framebuffer, take a snapshot to see it */
+export async function createContextAsync(): Promise<IExpoWebGLRenderingContext> {
+  const { exglCtxId } = await glNativeModule.createContextAsync();
+  return getGl(exglCtxId);
+}
+
+/** For a headless context made by `createContextAsync` */
+export async function destroyContextAsync(
+  exgl?: IExpoWebGLRenderingContext | number,
+): Promise<boolean> {
+  const exglCtxId = getContextId(exgl);
+  unregisterGLContext(exglCtxId);
+  return glNativeModule.destroyContextAsync(exglCtxId);
+}
+
+/** Saves the framebuffer as a file in the cache directory of the app */
+export async function takeSnapshotAsync(
+  exgl?: IExpoWebGLRenderingContext | number,
+  options: IGLSnapshotOptions = {},
+): Promise<IGLSnapshot> {
+  return glNativeModule.takeSnapshotAsync(getContextId(exgl), options);
+}

package/src/core/gl-errors.ts

@@ -0,0 +1,8 @@
+export const GL_ERRORS: Readonly<Record<number, string>> = {
+  1280: 'INVALID ENUM: An unacceptable value has been specified for an enumerated argument.',
+  1281: 'INVALID_VALUE: A numeric argument is out of range.',
+  1282: 'INVALID_OPERATION: The specified command is not allowed for the current state.',
+  1285: 'OUT_OF_MEMORY: Not enough memory is left to execute the command.',
+  1286: 'INVALID_FRAMEBUFFER_OPERATION: The currently bound framebuffer is not complete when trying to render to or to read from it.',
+  37442: 'CONTEXT_LOST_WEBGL: The WebGL context is lost.',
+};

package/src/core/gl-utils.ts

@@ -0,0 +1,97 @@
+import { GL_ERRORS } from './gl-errors';
+import { GLLoggingOption } from './types';
+import type { IExpoWebGLRenderingContext } from './types';
+
+type ILoggableGL = Pick<IExpoWebGLRenderingContext, '__expoSetLogging'>;
+
+type IGLFunction = (...args: unknown[]) => unknown;
+
+const MAX_STRING_LENGTH = 20;
+
+const SET_LOGGING_KEY = '__expoSetLogging';
+
+const wrappers = new WeakSet<IGLFunction>();
+
+function isGLFunction(value: unknown): value is IGLFunction {
+  return typeof value === 'function';
+}
+
+function constantNameOf(gl: object, value: number): string | undefined {
+  for (const name in gl) {
+    if (Reflect.get(gl, name) === value) return name;
+  }
+  return undefined;
+}
+
+// Numbers get the name of a constant that holds them, which can mislead for a size, so the
+// number stays. Strings are cut because a shader is long and logging it blocks the bridge
+function describeArg(gl: object, option: number, arg: unknown): string {
+  if (option & GLLoggingOption.RESOLVE_CONSTANTS && typeof arg === 'number') {
+    const name = constantNameOf(gl, arg);
+    if (name) return `${arg} (${name})`;
+  }
+  const isLong = typeof arg === 'string' && arg.length > MAX_STRING_LENGTH;
+  if (option & GLLoggingOption.TRUNCATE_STRINGS && isLong) {
+    const lastSpace = arg.lastIndexOf(' ', MAX_STRING_LENGTH);
+    return `${arg.slice(0, lastSpace >= 0 ? lastSpace : MAX_STRING_LENGTH)}...`;
+  }
+  return String(arg);
+}
+
+// The original `getError`, a wrapped one would log itself
+function reportError(gl: object): void {
+  const getError: unknown = Reflect.get(Reflect.getPrototypeOf(gl) ?? {}, 'getError');
+  if (!isGLFunction(getError)) return;
+  const error = getError.call(gl);
+  if (typeof error !== 'number' || error === Reflect.get(gl, 'NO_ERROR')) return;
+  console.warn(`\x1b[31mExpoGL: Error ${GL_ERRORS[error]}\x1b[0m`);
+}
+
+function wrapMethod(
+  gl: object,
+  key: string,
+  original: IGLFunction,
+  getOption: () => number,
+): void {
+  const wrapper: IGLFunction = (...args) => {
+    const option = getOption();
+    if (option & GLLoggingOption.METHOD_CALLS) {
+      const params = args.map(arg => describeArg(gl, option, arg));
+      console.warn(`ExpoGL: ${key}(${params.join(', ')})`);
+    }
+    const result = original.apply(gl, args);
+    if (option & GLLoggingOption.METHOD_CALLS) console.warn(`ExpoGL:   = ${String(result)}`);
+    if (option & GLLoggingOption.GET_ERRORS && key !== 'getError') reportError(gl);
+    return result;
+  };
+  wrappers.add(wrapper);
+  Reflect.set(gl, key, wrapper);
+}
+
+function wrapMethods(gl: object, getOption: () => number): void {
+  for (const [key, original] of Object.entries(Reflect.getPrototypeOf(gl) ?? {})) {
+    if (isGLFunction(original) && key !== SET_LOGGING_KEY) {
+      wrapMethod(gl, key, original, getOption);
+    }
+  }
+}
+
+function unwrapMethods(gl: object): void {
+  for (const [key, value] of Object.entries(gl)) {
+    if (isGLFunction(value) && wrappers.has(value)) Reflect.deleteProperty(gl, key);
+  }
+}
+
+/** Adds `__expoSetLogging` to the context, for the logging options useful in debugging GL calls */
+export function configureLogging(gl: ILoggableGL): void {
+  let loggingOption: number = GLLoggingOption.DISABLED;
+
+  gl.__expoSetLogging = (option: GLLoggingOption): void => {
+    // Both on or both off needs no wrapping or unwrapping, only the new option
+    if (!loggingOption !== !option) {
+      if (option) wrapMethods(gl, () => loggingOption);
+      else unwrapMethods(gl);
+    }
+    loggingOption = option;
+  };
+}