implement premultipliedAlpha prop

Examples/Tests/Layer.js

@@ -13,7 +13,7 @@ uniform sampler2D t2;
 void main () {
   vec4 c1 = texture2D(t1, uv);
   vec4 c2 = texture2D(t2, uv);
-  gl_FragColor = vec4(mix(c1.rgb, c2.rgb, c2.a), 1.0);
+  gl_FragColor = mix(c1, c2, c2.a);
 }
 `
   }
@@ -21,14 +21,12 @@ void main () {
 
 class Layer extends GL.Component {
   render () {
-    const { width, height, children, ...rest } = this.props;
+    const { children, ...rest } = this.props;
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Layer");
     const [t1, t2] = children;
     return <GL.View
       {...rest}
       shader={shaders.layer}
-      width={width}
-      height={height}
       uniforms={{ t1, t2 }}
     />;
   }

Examples/Tests/Premultiply.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  Premultiply: {
+    frag: `
+precision highp float;
+
+varying vec2 uv;
+uniform sampler2D t;
+
+void main () {
+  vec4 c = texture2D(t, uv);
+  c.rgb *= c.a;
+  gl_FragColor = c;
+}
+`
+  }
+});
+
+class Premultiply extends GL.Component {
+  render () {
+    const { children: t, ...rest } = this.props;
+    return <GL.View
+      {...rest}
+      opaque={false}
+      shader={shaders.Premultiply}
+      uniforms={{ t }}
+    />;
+  }
+}
+
+module.exports = Premultiply;

Examples/Tests/TransparentNonPremultiplied.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  TransparentNonPremultiplied: {
+    frag: `
+precision highp float;
+
+varying vec2 uv;
+uniform sampler2D t;
+
+void main () {
+  gl_FragColor = vec4(texture2D(t, uv).rgb, 0.0);
+}
+`
+  }
+});
+
+class TransparentNonPremultiplied extends GL.Component {
+  render () {
+    const { children: t, ...rest } = this.props;
+    return <GL.View
+      {...rest}
+      opaque={false}
+      shader={shaders.TransparentNonPremultiplied}
+      uniforms={{ t }}
+    />;
+  }
+}
+
+module.exports = TransparentNonPremultiplied;

Examples/Tests/index.ios.js

@@ -15,6 +15,7 @@ const NativeLayer = require("./NativeLayer");
 const HelloGL = require("./HelloGL");
 const Display2 = require("./Display2");
 const Copy = require("./Copy");
+const TransparentNonPremultiplied = require("./TransparentNonPremultiplied");
 const { width: viewportW, height: viewportH } = require("Dimensions").get("window");
 
 class Tests extends React.Component {
@@ -145,6 +146,71 @@ class Tests extends React.Component {
             </Copy>
           </Copy>
         </NativeLayer>
+
+        <NativeLayer width={debugSize} height={debugSize}>
+          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
+          <NativeLayer>
+            <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
+            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
+              <HelloGL />
+            </TransparentNonPremultiplied>
+          </NativeLayer>
+        </NativeLayer>
+
+        <NativeLayer width={debugSize} height={debugSize}>
+          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
+          <NativeLayer>
+            <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
+            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
+              <TransparentNonPremultiplied>
+                <HelloGL />
+              </TransparentNonPremultiplied>
+            </TransparentNonPremultiplied>
+          </NativeLayer>
+        </NativeLayer>
+
+        <NativeLayer width={debugSize} height={debugSize}>
+          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
+          <NativeLayer>
+            <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
+            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
+              <Copy>
+                <TransparentNonPremultiplied>
+                  <Copy>
+                    http://i.imgur.com/S22HNaU.png
+                  </Copy>
+                </TransparentNonPremultiplied>
+              </Copy>
+            </TransparentNonPremultiplied>
+          </NativeLayer>
+        </NativeLayer>
+
+        <NativeLayer width={debugSize} height={debugSize}>
+          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
+          <Layer width={debugSize} height={debugSize} opaque={false} premultipliedAlpha debug>
+            http://i.imgur.com/mp79p5T.png
+            <TransparentNonPremultiplied>
+              <HelloGL />
+            </TransparentNonPremultiplied>
+          </Layer>
+        </NativeLayer>
+
+        <NativeLayer width={debugSize} height={debugSize}>
+          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
+          <Layer width={debugSize} height={debugSize} opaque={false}>
+            http://i.imgur.com/mp79p5T.png
+            <TransparentNonPremultiplied>
+              <Copy>
+                <TransparentNonPremultiplied>
+                  <Copy>
+                    http://i.imgur.com/S22HNaU.png
+                  </Copy>
+                </TransparentNonPremultiplied>
+              </Copy>
+            </TransparentNonPremultiplied>
+          </Layer>
+        </NativeLayer>
+
       </View>
 
     </ScrollView>;

RNGL/GLCanvas.m

@@ -160,6 +160,7 @@ RCT_NOT_IMPLEMENTED(-init)
     weak_traverseTree = traverseTree = ^GLRenderData *(GLData *data) {
       NSNumber *width = data.width;
       NSNumber *height = data.height;
+      BOOL premultipliedAlpha = data.premultipliedAlpha;
       int fboId = [data.fboId intValue];
       
       NSMutableArray *contextChildren = [[NSMutableArray alloc] init];
@@ -254,7 +255,8 @@ RCT_NOT_IMPLEMENTED(-init)
               withHeight:height
               withFboId:fboId
               withContextChildren:contextChildren
-              withChildren:children];
+              withChildren:children
+              withPremultipliedAlpha:premultipliedAlpha];
     };
     
     _renderData = traverseTree(_data);
@@ -352,7 +354,10 @@ RCT_NOT_IMPLEMENTED(-init)
       glClearColor(0.0, 0.0, 0.0, 0.0);
       glClear(GL_COLOR_BUFFER_BIT);
       
-      glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
+      if (renderData.premultipliedAlpha)
+        glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
+      else
+        glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
       glDrawArrays(GL_TRIANGLES, 0, 6);
     };
     

RNGL/GLData.h

@@ -11,6 +11,7 @@
 @property (nonatomic) NSNumber *fboId;
 @property (nonatomic) NSArray *contextChildren;
 @property (nonatomic) NSArray *children;
+@property (nonatomic) BOOL premultipliedAlpha;
 
 -(instancetype)initWithShader: (NSNumber *)shader
                  withUniforms: (NSDictionary *)uniforms
@@ -18,6 +19,7 @@
                    withHeight: (NSNumber *)height
                     withFboId: (NSNumber *)fboId
           withContextChildren: (NSArray *)contextChildren
-                 withChildren: (NSArray *)children;
+                 withChildren: (NSArray *)children
+       withPremultipliedAlpha: (BOOL)premultipliedAlpha;
 
 @end

RNGL/GLData.m

@@ -9,6 +9,7 @@
                     withFboId: (NSNumber *)fboId
           withContextChildren: (NSArray *)contextChildren
                  withChildren: (NSArray *)children
+       withPremultipliedAlpha: (BOOL)premultipliedAlpha
 {
   if ((self = [super init])) {
     self.shader = shader;
@@ -18,6 +19,7 @@
     self.fboId = fboId;
     self.contextChildren = contextChildren;
     self.children = children;
+    self.premultipliedAlpha = premultipliedAlpha;
   }
   return self;
 }

RNGL/GLRenderData.h

@@ -12,6 +12,7 @@
 @property (nonatomic) int fboId;
 @property (nonatomic) NSArray *contextChildren;
 @property (nonatomic) NSArray *children;
+@property (nonatomic) BOOL premultipliedAlpha;
 
 -(instancetype) initWithShader: (GLShader *)shader
                   withUniforms:(NSDictionary *)uniforms
@@ -20,6 +21,7 @@
                     withHeight: (NSNumber *)height
                      withFboId: (int)fboId
            withContextChildren: (NSArray *)contextChildren
-                  withChildren: (NSArray *)children;
+                  withChildren: (NSArray *)children
+        withPremultipliedAlpha: (BOOL)premultipliedAlpha;
 
 @end

RNGL/GLRenderData.m

@@ -11,6 +11,7 @@
                      withFboId: (int)fboId
            withContextChildren: (NSArray *)contextChildren
                   withChildren: (NSArray *)children
+        withPremultipliedAlpha: (BOOL)premultipliedAlpha
 {
   
   if ((self = [super init])) {
@@ -22,6 +23,7 @@
     self.fboId = fboId;
     self.contextChildren = contextChildren;
     self.children = children;
+    self.premultipliedAlpha = premultipliedAlpha;
   }
   return self;
 }

RNGL/GLShadersRegistry.m

@@ -40,6 +40,7 @@ RCT_EXPORT_MODULE();
   self = [super init];
   if (self) {
     _context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
+    
     if (!_context) {
       RCTLogError(@"Failed to initialize OpenGLES 2.0 context");
     }

RNGL/RCTConvert+GLData.m

@@ -25,6 +25,8 @@
     GLData *child = [self GLData:childJSON];
     [contextChildren addObject:child];
   }
+  
+  BOOL premultipliedAlpha = [self BOOL:json[@"premultipliedAlpha"]];
 
   return [[GLData alloc] initWithShader: shader
                            withUniforms: uniforms
@@ -32,7 +34,8 @@
                              withHeight: height
                               withFboId: fboId
                     withContextChildren: contextChildren
-                           withChildren: children];
+                           withChildren: children
+                 withPremultipliedAlpha: premultipliedAlpha];
 }
 
 @end