Rendering of image with colorscale not working as in example
ManuBu opened this issue · comments
I tried to implement the example of the colorscale as it is in the cookbook-rn-shared example.
Sadly I'm not able to get it running like it is on the example.
library version
├── gl-react@3.15.0
├── gl-react-native@3.15.0
└─┬ react-native@0.55.0 description
This is how it looks right now with the same image, linear as interpolation and colorscale "monochrome" (the example on the left, my version on the emulator on the right):
Is there a bug?
code
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-native";
import colorScales from "./colorScales"; export {colorScales};
import GLImage from "gl-react-image";
const shaders = Shaders.create({
colorify: {
frag: GLSL`
precision highp float;
varying vec2 uv;
uniform sampler2D children, colorScale;
float greyscale (vec3 c) { return 0.2125 * c.r + 0.7154 * c.g + 0.0721 * c.b; }
void main() {
vec4 original = texture2D(children, uv);
vec4 newcolor = texture2D(colorScale, vec2(greyscale(original.rgb), 0.5));
gl_FragColor = vec4(newcolor.rgb, original.a * newcolor.a);
}`
}
});
export const Colorify = ({ children, colorScale, interpolation }) => (
<Node
shader={shaders.colorify}
uniformsOptions={{ colorScale: { interpolation } }}
uniforms={{ colorScale, children }}
/>
);
<Surface style={{width: size, height: size}}>
<Colorify colorScale={colorScales[color]} interpolation={interpolation}>
{{ uri: "https://i.imgur.com/iPKTONG.jpg" }}
</Colorify>
</Surface>
static defaultProps = {
interpolation: "linear",
color: Object.keys(colorScales)[1],
contrast: 0.5,
saturation: 1,
brightness: 1,
};
colorScales.js is the same as on the example (https://github.com/gre/gl-react/blob/master/examples/cookbook-rn-shared/examples/colorscale/colorScales.js).
I think the issue is on the EXGL / react-native-webgl implementation and is related to #108
