How to use the gl-react.Shaders.setImplementation function in gl-react

To help you get started, we’ve selected a few gl-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github gre / gl-react-native-v2 / src / index.js View on Github external
import isAnimated from "gl-react/src/isAnimated";
import makeSurface from "./makeSurface";
import GLCanvas from "./GLCanvas";
import {NativeModules, View, Animated, Image} from "react-native";
import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";

const {RNGLContext} = NativeModules;
invariant(RNGLContext,
`gl-react-native: the native module is not available.
Make sure you have properly configured it.
See README install instructions.

NativeModules.RNGLContext is %s`, RNGLContext);

// Hook Shaders to RNGLContext
Shaders.setImplementation({
  add: (id, shader) =>
  new Promise((resolve, reject) =>
    RNGLContext.addShader(id, shader, (error, result) => {
      if (error) reject(error);
      else resolve(result);
    })),
  remove: id => RNGLContext.removeShader(id)
});

if (__DEV__) {
  runtime.decorateVDOMContent = vdom => {
    if (vdom && vdom.type === Image && !vdom.props.glReactUseImage) {
      console.warn(
`gl-react: Found a ReactNative.Image element. This is not performant. Try one of these:
- pass-in directly the image URL in your uniforms.
- use gl-react-image which implements the same Image API directly in OpenGL. https://github.com/gre/gl-react-image
github gre / gl-react-dom-v2 / src / compileShaders.js View on Github external
const { Shaders } = require("gl-react");
const createShader = require("gl-shader");
const getContext = require("./getContext");
const vertexCode = require("./static.vert");
const mockCanvas = document.createElement("canvas");
const mockGl = getContext(mockCanvas, {});

const checkCompiles = o => {
  if (!mockGl) throw new Error("WebGL context unavailable"); // we skip validation when webgl is not supported
  const shader = createShader(mockGl, vertexCode, o.frag);
  const {uniforms} = shader.types;
  shader.dispose();
  return {uniforms};
};

Shaders.setImplementation({
  add: (id, shader) => Promise.resolve().then(() => {
    try {
      return checkCompiles(shader);
    }
    catch (e) {
      throw e.rawError || e.message;
    }
  }),
  remove: ()=>{}
});