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.