v2.28.0

Now targeting >= React Native 0.28.

• iOS: using the new loadImageWithURLRequest for Image loading. The old loadImageWithoutClipping has been deprecated. this changes make gl-react-native 2.28 incompatible with older React Native versions.
• iOS: in the same time I have refactored a bit the iOS GLImage.m implementation, by inspiring from latest React Native RCTImageView work. It might help performance.
• exposes resolveAssetSource. You can import {resolveAssetSource} from "gl-react-native"; . As commented here, you will have to use it for now if you want to inject local images into gl-react-native uniform textures. See also documentation
• If you now try to rasterize a RN.Image in, you will get a warning. This is because it's very ineffective to do so, and we recommend people to either directly give the image url in uniforms or to use gl-react-image that implements the same React Native Image resizeMode straight in OpenGL.

See also documentation for these 2 last points.

Happy GL-uing, people !

v2.27.0

This release is both for the iOS and the Android version. Checkout also the new example app.

Array uniforms support

We now supports uniform array types.

Example:

import React, {Component} from "react";
import {View, Animated} from "react-native";
import {Surface} from "gl-react-native";
import GL from "gl-react";

const stateForTime = t => ({
  colors: [
    [ Math.cos(0.002*t), Math.sin(0.002*t), 0.2, 1 ],
    [ Math.sin(0.002*t), -Math.cos(0.002*t), 0.1, 1 ],
    [ 0.3, Math.sin(3+0.002*t), Math.cos(1+0.003*t), 1 ]
  ],
  particles: [
    [ 0.3, 0.3 ],
    [ 0.7, 0.5 ],
    [ 0.4, 0.9 ]
  ]
});

export default class AnimatedExample extends Component {
  state = stateForTime(0);
  componentWillMount () {
    const begin = Date.now();
    this.interval = setInterval(() => this.setState(
      stateForTime(Date.now() - begin)
    ));
  }
  componentWillUnmount () {
    clearInterval(this.interval);
  }
  render () {
    const { colors, particles } = this.state;
    return <View style={{ paddingTop: 60, alignItems: "center" }}>
      <Surface width={300} height={300}>
        <GL.Node
          uniforms={{
            colors,
            particles,
          }}
          shader={{// inline example
            frag: `
precision highp float;
varying vec2 uv;
uniform vec4 colors[3];
uniform vec2 particles[3]; // N.B. don't abuse these technique. it's not meant to be used with lot of objects.
void main () {
  vec4 sum = vec4(0.0);
  for (int i=0; i<3; i++) {
    vec4 c = colors[i];
    vec2 p = particles[i];
    float d = c.a * smoothstep(0.6, 0.2, distance(p, uv));
    sum += d * vec4(c.a * c.rgb, c.a);
  }
  if (sum.a > 1.0) {
    sum.rgb /= sum.a;
    sum.a = 1.0;
  }
  gl_FragColor = vec4(sum.a * sum.rgb, 1.0);
}
            `
          }}
        />
      </Surface>
    </View>;
  }
}

AnimatedSurface

is a new component that supports width and height to be Animated objects.

import React, {Component} from "react";
import {View, Animated} from "react-native";
import {AnimatedSurface} from "gl-react-native";
import GL from "gl-react";

export default class AnimatedExample extends Component {
  state = {
    heightValue: new Animated.Value(200),
  };
  componentWillMount () {
    let i = 0;
    this.interval = setInterval(() =>
      Animated.spring(this.state.heightValue, {
        toValue: ++i % 2 ? 500 : 200,
      }).start(), 1000);
  }
  componentWillUnmount () {
    clearInterval(this.interval);
  }
  render () {
    const { heightValue } = this.state;
    return <View style={{ paddingTop: 60, alignItems: "center" }}>
      <AnimatedSurface
        width={200}
        height={heightValue}>
        <GL.Node shader={{// inline example
            frag: `
precision highp float;
varying vec2 uv;
void main () {
  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}
            `
          }}
        />
    </AnimatedSurface>
    </View>;
  }
}

optimization: a big triangle instead of 2 small ones

according to https://github.com/mikolalysenko/a-big-triangle , it is more performant to just use a big triangle to cover the viewport rather than gluing 2 triangles together to make a square. We now use this tehnique both in gl-react-dom and gl-react-native.

v2.17.0

This release fixes a bunch of crashes you might have met in the past using gl-react-native. I've been testing the library using this technique which allowed me to detect 4-5 bugs/race conditions at various places in iOS and Android implementations.

gl-react-native minor version now strictly follows react-native minor version.
React Native when releasing new minor tends to contain breaking changes, so to make gl-react-native more reliable, we will no longer support unlimited bound of versions but only strictly the same minor version.

gl-react-native 2.17.x will only works with react-native 0.17.x.

Release Notes

• port to React 0.17
• refactor iOS events implementation and make Android events working. (breaking changes in 0.17)
• captureFrame() now returns a Promise and is implemented on Android
• eventsThrough feature: simplify implementation using pointerEvents to also make it work on Android
• Fix race condition crashes in the iOS implementation by making sure operations are done on the right lifecycle/thread (fix about 3 different race conditions). Should fix #38 #41
• Improve the error message when you don't configure properly gl-react-native native module in your app.

Known issues

• #47 Android: crash when using a lot of simultaneous Surface (like 5-10)
• #46 Android: The transparency of rasterized content is not supported.

v1.3.0

Android Implementation

as announced recently, gl-react-native now have an Android implementation!
gl-react now have 3 different implementation targets:

• the web (implemented with WebGL)
• native iOS (implemented in ObjC with OpenGL ES 20)
• native Android (implemented in Java with OpenGL ES 20)

Note: Here is the list of things that are not yet supported by the Android version

iOS bugfixes

It's always great to reimplement your library somewhere else (in Android), it helps you to see and figure out some bugs when you port & review your code.

2 bugs was fixed in the iOS implementation:

• Race condition during GL drawing
• some mistake in FBO.m

v1.2.6

Fix a scaling issue exclusively happening on iPhone 6+ (reproductible on the device, not the simulator) – ( see http://stackoverflow.com/a/25824375/343892 )

v1.2.0

See [email protected] Release Note for complete information about this

v1.1.2

Support for React Native 0.12.x

v1.1.1

#17 Fix memory leak of GLImage

v1.1.0

See [email protected] Release Note for complete information about this

v1.0.1

Adds support of [email protected]