Skip to content

G
gl-react-native-v2
Commit 62f87ad2 authored by Gaëtan Renaudeau's avatar Gaëtan Renaudeau
Browse files
Options

implement premultipliedAlpha prop

parent 8b8e11b8
Show whitespace changes
Inline Side-by-side
Showing with 154 additions and 9 deletions
Examples/Tests/Layer.js
View file @ 62f87ad2
......@@ -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 0 → 100644
View file @ 62f87ad2
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 0 → 100644
View file @ 62f87ad2
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
View file @ 62f87ad2
......@@ -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
View file @ 62f87ad2
......@@ -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,6 +354,9 @@ RCT_NOT_IMPLEMENTED(-init)
glClearColor(0.0, 0.0, 0.0, 0.0);
glClear(GL_COLOR_BUFFER_BIT);
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
View file @ 62f87ad2
......@@ -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
View file @ 62f87ad2
......@@ -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
View file @ 62f87ad2
......@@ -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
View file @ 62f87ad2
......@@ -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
View file @ 62f87ad2
......@@ -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
View file @ 62f87ad2
......@@ -26,13 +26,16 @@
[contextChildren addObject:child];
}
BOOL premultipliedAlpha = [self BOOL:json[@"premultipliedAlpha"]];
return [[GLData alloc] initWithShader: shader
withUniforms: uniforms
withWidth: width
withHeight: height
withFboId: fboId
withContextChildren: contextChildren
withChildren: children];
withChildren: children
withPremultipliedAlpha: premultipliedAlpha];
}
@end
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment