[gl-react-native]: <Saturate> seems not firing

bug report

library version

Expected behavior

Expecting to have this https://gl-react-cookbook.surge.sh/saturation?brightness=0.9&contrast=0.95&saturation=0.9

Actual behavior

shows nothing inside the <Surface width={480} height={300}> and when I add debugger and console.log('ran') in the block of code of export const Saturate = ({ contrast, saturation, brightness, children }) => {, it doesn’t actually debug or console.

The gl.js is basically a copy of the link above, I changed gl-react-dom to gl-react-native though.

So I am not sure if I did anything incorrectly.

Steps to reproduce the behavior

index.js

//index.js
import Example from './gl';
class Photo extends Component {
  constructor(props) {
    ...
  }
      return (
        <View style={styles.body}>
          <Example/>
        </View>
      );
}

gl.js

//gl.js
import React, { Component } from 'react';
import { Shaders, Node, GLSL } from 'gl-react';
import { Surface } from 'gl-react-native';

const shaders = Shaders.create({
  Saturate: {
    frag: GLSL`
    precision highp float;
    varying vec2 uv;
    uniform sampler2D t;
    uniform float contrast, saturation, brightness;
    const vec3 L = vec3(0.2125, 0.7154, 0.0721);
    void main() {
      vec4 c = texture2D(t, uv);
      vec3 brt = c.rgb * brightness;
      gl_FragColor = vec4(mix(
      vec3(0.5),
      mix(vec3(dot(brt, L)), brt, saturation),
      contrast), c.a);
  }
  `
  }
});

export const Saturate = ({ contrast, saturation, brightness, children }) => {
  //console.log('ran');
  //debugger;  
  return (<Node
    shader={shaders.Saturate}
    uniforms={{ contrast, saturation, brightness, t: children }}
  />
)};

export default class Example extends Component {
  render() {
    return (
      <Surface width={480} height={300}>
        <Saturate {...this.props}>
          https://i.imgur.com/uTP9Xfr.jpg
        </Saturate>
      </Surface>
    );
  }
  static defaultProps = {
    contrast: 1,
    saturation: 1,
    brightness: 1
  };
}

================================================

Reason

Did not set up RNGL.xcodeproj correctly

[josephmaxim]

@edwardfhsiao Turn off remote debugger. that should fix it.

[gre]

yeah, I’m afraid debugging won’t work like in the EXGLView implementation. as in WebGL spec, the gl calls needs to exec in sync, so we need to actively “block” the JS somehow. EXGLView impl expect the JS to run in JavascriptCore (because the gl.* method directly exec some C++ code with low overhead) but this can’t work inside Chrome (the remote debugging means executing the JS in Chrome instead of JSC).

I hope this was more documented in EXGLView and in gl-react-native README (or somewhere!) , feel free to send PR to improve that.

also @nikki93 can probably comment more on the technical reason of this choice 😉