Texture from array

This example is only available in gl-react-dom. ndarray support is not easy to bring for gl-react-native but feel free to help in this issue.

<Colorify
  colorScale={colorScales[colorScale]}
  disableLinearInterpolation={disableLinearInterpolation}>
  http://i.imgur.com/iPKTONG.jpg
</Colorify>

Implementation

This specific Colorify component both display the image and the bottom "gradient bar" that renders the color scale applied.

const GL = require("gl-react-dom");
const React = require("react");

const shaders = GL.Shaders.create({
  colorify: {
    frag: `
precision highp float;
varying vec2 uv;
uniform sampler2D image;
uniform sampler2D colorScale; // used as a lookup texture
uniform float legend;

float monochrome (vec3 c) {
  return 0.2125 * c.r + 0.7154 * c.g + 0.0721 * c.b;
}

void main () {
  vec4 imgC = texture2D(image, uv / vec2(1.0, 1.0 - legend) - vec2(0.0, legend));
  vec4 scaleC = texture2D(colorScale, vec2(monochrome(imgC.rgb), 0.5));
  float legendArea = step(uv.y, legend);
  gl_FragColor = step(uv.y, legend - 0.02) * texture2D(colorScale, uv) +
    step(legend, uv.y) * vec4(scaleC.rgb, imgC.a * scaleC.a);
}
    `
  }
});

module.exports = GL.createComponent(
  ({ children: image, colorScale, legend, disableLinearInterpolation }) =>
    <GL.Node
      shader={shaders.colorify}
      uniforms={{ image, legend }}
      backgroundColor="transparent"
    >
      <GL.Uniform name="colorScale" disableLinearInterpolation={disableLinearInterpolation}>
        {colorScale}
      </GL.Uniform>
    </GL.Node>
  , {
    displayName: "Colorify",
    defaultProps: {
      legend: 0.06
    }
  }
);

The colorScale uniform that this component takes is a N x 1 image where x position is used as a color scale lookup.

The disableLinearInterpolation option in GL.Uniform allows to disable the default linear interpolation that creates a nice smoothing in the lookup of texture2D.

Here is the equivalent way using uniforms props:

{ colorScale: { value: colorScale, opts: { disableLinearInterpolation } } }

colorScales

Here is an extract of the colorScales collection:

const colorScales = {
  classical: ndarray(new Float64Array([
    0, 0, 1, // blue
    0.1, 0.7, 1, // cyan
    0.4, 1, 0.4, // light green
    1, 0.6, 0, // orange
    1, 0, 0 // red
  ]), [5, 1, 3]),

  reversedMonochrome: ndarray(new Float64Array([
    1, 1, 1,
    0.1, 0.2, 0.3
  ]), [2, 1, 3]),

  opacityFading: ndarray(new Float64Array([
    1,
    0
  ]), [2, 1, 1]),

  Spectral: ndarray(new Float64Array([0.62,0.00,0.26,0.84,0.24,0.31,0.96,0.43,0.26,0.99,0.68,0.38,1.00,0.88,0.55,1.00,1.00,0.75,0.90,0.96,0.60,0.67,0.87,0.64,0.40,0.76,0.65,0.20,0.53,0.74,0.37,0.31,0.64]), [11,1,3]),
};

For more information on accepted ndarray formats, checkout gl-texture2d documentation.