From 62f87ad285a060cb5f360158f9a521ca04c6b52e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= Date: Fri, 25 Sep 2015 14:32:30 +0200 Subject: [PATCH] implement premultipliedAlpha prop --- Examples/Tests/Layer.js | 6 +- Examples/Tests/Premultiply.js | 33 ++++++++++ Examples/Tests/TransparentNonPremultiplied.js | 31 +++++++++ Examples/Tests/index.ios.js | 66 +++++++++++++++++++ RNGL/GLCanvas.m | 9 ++- RNGL/GLData.h | 4 +- RNGL/GLData.m | 2 + RNGL/GLRenderData.h | 4 +- RNGL/GLRenderData.m | 2 + RNGL/GLShadersRegistry.m | 1 + RNGL/RCTConvert+GLData.m | 5 +- 11 files changed, 154 insertions(+), 9 deletions(-) create mode 100644 Examples/Tests/Premultiply.js create mode 100644 Examples/Tests/TransparentNonPremultiplied.js diff --git a/Examples/Tests/Layer.js b/Examples/Tests/Layer.js index ddf77b3..5904ceb 100644 --- a/Examples/Tests/Layer.js +++ b/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 ; } diff --git a/Examples/Tests/Premultiply.js b/Examples/Tests/Premultiply.js new file mode 100644 index 0000000..08bfcbd --- /dev/null +++ b/Examples/Tests/Premultiply.js @@ -0,0 +1,33 @@ +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 ; + } +} + +module.exports = Premultiply; diff --git a/Examples/Tests/TransparentNonPremultiplied.js b/Examples/Tests/TransparentNonPremultiplied.js new file mode 100644 index 0000000..0951ff7 --- /dev/null +++ b/Examples/Tests/TransparentNonPremultiplied.js @@ -0,0 +1,31 @@ +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 ; + } +} + +module.exports = TransparentNonPremultiplied; diff --git a/Examples/Tests/index.ios.js b/Examples/Tests/index.ios.js index 783379e..11721a7 100644 --- a/Examples/Tests/index.ios.js +++ b/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 { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + http://i.imgur.com/S22HNaU.png + + + + + + + + + + + http://i.imgur.com/mp79p5T.png + + + + + + + + + + http://i.imgur.com/mp79p5T.png + + + + + http://i.imgur.com/S22HNaU.png + + + + + + + ; diff --git a/RNGL/GLCanvas.m b/RNGL/GLCanvas.m index 2d18793..874ea41 100644 --- a/RNGL/GLCanvas.m +++ b/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); }; diff --git a/RNGL/GLData.h b/RNGL/GLData.h index 610261f..376528e 100644 --- a/RNGL/GLData.h +++ b/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 diff --git a/RNGL/GLData.m b/RNGL/GLData.m index 2466854..c1db168 100644 --- a/RNGL/GLData.m +++ b/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; } diff --git a/RNGL/GLRenderData.h b/RNGL/GLRenderData.h index 44ecf9d..80cab9c 100644 --- a/RNGL/GLRenderData.h +++ b/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 diff --git a/RNGL/GLRenderData.m b/RNGL/GLRenderData.m index f4b6721..2d66984 100644 --- a/RNGL/GLRenderData.m +++ b/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; } diff --git a/RNGL/GLShadersRegistry.m b/RNGL/GLShadersRegistry.m index 1018990..04eb311 100644 --- a/RNGL/GLShadersRegistry.m +++ b/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"); } diff --git a/RNGL/RCTConvert+GLData.m b/RNGL/RCTConvert+GLData.m index e65f49c..8299655 100644 --- a/RNGL/RCTConvert+GLData.m +++ b/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 -- 2.26.2