GPUImage custom OpenGL ES shader resulting in black image - ios

Question

Working on another OpenGL ES image filter based on this:
uniform sampler2D texture;
uniform float amount;
uniform vec2 texSize;
varying vec2 texCoord;
void main() {
vec4 color = texture2D(texture, texCoord);
vec4 orig = color;
/* High pass filter */
vec4 highpass = color * 5.0;
float dx = 1.0 / texSize.x;
float dy = 1.0 / texSize.y;
highpass += texture2D(texture, texCoord + vec2(-dx, -dy)) * -0.625;
highpass += texture2D(texture, texCoord + vec2(dx, -dy)) * -0.625;
highpass += texture2D(texture, texCoord + vec2(dx, dy)) * -0.625;
highpass += texture2D(texture, texCoord + vec2(-dx, dy)) * -0.625;
highpass += texture2D(texture, texCoord + vec2(-dx * 2.0, -dy * 2.0)) * -0.625;
highpass += texture2D(texture, texCoord + vec2(dx * 2.0, -dy * 2.0)) * -0.625;
highpass += texture2D(texture, texCoord + vec2(dx * 2.0, dy * 2.0)) * -0.625;
highpass += texture2D(texture, texCoord + vec2(-dx * 2.0, dy * 2.0)) * -0.625;
highpass.a = 1.0;
/* Overlay blend */
vec3 overlay = vec3(1.0);
if (highpass.r <= 0.5) {
overlay.r = 2.0 * color.r * highpass.r;
} else {
overlay.r = 1.0 - 2.0 * (1.0 - color.r) * (1.0 - highpass.r);
}
if (highpass.g <= 0.5) {
overlay.g = 2.0 * color.g * highpass.g;
} else {
overlay.g = 1.0 - 2.0 * (1.0 - color.g) * (1.0 - highpass.g);
}
if (highpass.b <= 0.5) {
overlay.b = 2.0 * color.b * highpass.b;
} else {
overlay.b = 1.0 - 2.0 * (1.0 - color.b) * (1.0 - highpass.b);
}
color.rgb = (overlay * 0.8) + (orig.rgb * 0.2);
/* Desaturated hard light */
vec3 desaturated = vec3(orig.r + orig.g + orig.b / 3.0);
if (desaturated.r <= 0.5) {
color.rgb = 2.0 * color.rgb * desaturated;
} else {
color.rgb = vec3(1.0) - vec3(2.0) * (vec3(1.0) - color.rgb) * (vec3(1.0) - desaturated);
}
color = (orig * 0.6) + (color * 0.4);
/* Add back some color */
float average = (color.r + color.g + color.b) / 3.0;
color.rgb += (average - color.rgb) * (1.0 - 1.0 / (1.001 - 0.45));
gl_FragColor = (color * amount) + (orig * (1.0 - amount));
}
Per my question yesterday, I knew to assign precision to each float and vec. This time it compiled fine, however when I go to apply the filter in GPUImage (e.g. by setting the value of clarity to 0.8), the image goes black. My gut tells me this is related to the texture size, but without knowing how GPUImage handles that, I'm kinda stuck.
Here's my implementation in Objective-C:
.h
#import <GPUImage/GPUImage.h>
#interface GPUImageClarityFilter : GPUImageFilter
{
GLint clarityUniform;
}
// Gives the image a gritty, surreal contrasty effect
// Value 0 to 1
#property (readwrite, nonatomic) GLfloat clarity;
#end
.m
#import "GPUImageClarityFilter.h"
#if TARGET_IPHONE_SIMULATOR || TARGET_OS_IPHONE
NSString *const kGPUImageClarityFragmentShaderString = SHADER_STRING
(
uniform sampler2D inputImageTexture;
uniform lowp float clarity;
uniform highp vec2 textureSize;
varying highp vec2 textureCoordinate;
void main() {
highp vec4 color = texture2D(inputImageTexture, textureCoordinate);
highp vec4 orig = color;
/* High pass filter */
highp vec4 highpass = color * 5.0;
highp float dx = 1.0 / textureSize.x;
highp float dy = 1.0 / textureSize.y;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(-dx, -dy)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(dx, -dy)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(dx, dy)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(-dx, dy)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(-dx * 2.0, -dy * 2.0)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(dx * 2.0, -dy * 2.0)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(dx * 2.0, dy * 2.0)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(-dx * 2.0, dy * 2.0)) * -0.625;
highpass.a = 1.0;
/* Overlay blend */
highp vec3 overlay = vec3(1.0);
if (highpass.r <= 0.5) {
overlay.r = 2.0 * color.r * highpass.r;
} else {
overlay.r = 1.0 - 2.0 * (1.0 - color.r) * (1.0 - highpass.r);
}
if (highpass.g <= 0.5) {
overlay.g = 2.0 * color.g * highpass.g;
} else {
overlay.g = 1.0 - 2.0 * (1.0 - color.g) * (1.0 - highpass.g);
}
if (highpass.b <= 0.5) {
overlay.b = 2.0 * color.b * highpass.b;
} else {
overlay.b = 1.0 - 2.0 * (1.0 - color.b) * (1.0 - highpass.b);
}
color.rgb = (overlay * 0.8) + (orig.rgb * 0.2);
/* Desaturated hard light */
highp vec3 desaturated = vec3(orig.r + orig.g + orig.b / 3.0);
if (desaturated.r <= 0.5) {
color.rgb = 2.0 * color.rgb * desaturated;
} else {
color.rgb = vec3(1.0) - vec3(2.0) * (vec3(1.0) - color.rgb) * (vec3(1.0) - desaturated);
}
color = (orig * 0.6) + (color * 0.4);
/* Add back some color */
highp float average = (color.r + color.g + color.b) / 3.0;
color.rgb += (average - color.rgb) * (1.0 - 1.0 / (1.001 - 0.45));
gl_FragColor = (color * clarity) + (orig * (1.0 - clarity));
}
);
#else
NSString *const kGPUImageClarityFragmentShaderString = SHADER_STRING
(
uniform sampler2D inputImageTexture;
uniform float clarity;
uniform vec2 textureSize;
varying vec2 textureCoordinate;
void main() {
vec4 color = texture2D(inputImageTexture, textureCoordinate);
vec4 orig = color;
/* High pass filter */
vec4 highpass = color * 5.0;
float dx = 1.0 / textureSize.x;
float dy = 1.0 / textureSize.y;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(-dx, -dy)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(dx, -dy)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(dx, dy)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(-dx, dy)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(-dx * 2.0, -dy * 2.0)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(dx * 2.0, -dy * 2.0)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(dx * 2.0, dy * 2.0)) * -0.625;
highpass += texture2D(inputImageTexture, textureCoordinate + vec2(-dx * 2.0, dy * 2.0)) * -0.625;
highpass.a = 1.0;
/* Overlay blend */
vec3 overlay = vec3(1.0);
if (highpass.r <= 0.5) {
overlay.r = 2.0 * color.r * highpass.r;
} else {
overlay.r = 1.0 - 2.0 * (1.0 - color.r) * (1.0 - highpass.r);
}
if (highpass.g <= 0.5) {
overlay.g = 2.0 * color.g * highpass.g;
} else {
overlay.g = 1.0 - 2.0 * (1.0 - color.g) * (1.0 - highpass.g);
}
if (highpass.b <= 0.5) {
overlay.b = 2.0 * color.b * highpass.b;
} else {
overlay.b = 1.0 - 2.0 * (1.0 - color.b) * (1.0 - highpass.b);
}
color.rgb = (overlay * 0.8) + (orig.rgb * 0.2);
/* Desaturated hard light */
vec3 desaturated = vec3(orig.r + orig.g + orig.b / 3.0);
if (desaturated.r <= 0.5) {
color.rgb = 2.0 * color.rgb * desaturated;
} else {
color.rgb = vec3(1.0) - vec3(2.0) * (vec3(1.0) - color.rgb) * (vec3(1.0) - desaturated);
}
color = (orig * 0.6) + (color * 0.4);
/* Add back some color */
float average = (color.r + color.g + color.b) / 3.0;
color.rgb += (average - color.rgb) * (1.0 - 1.0 / (1.001 - 0.45));
gl_FragColor = (color * clarity) + (orig * (1.0 - clarity));
}
);
#endif
#implementation GPUImageClarityFilter
#synthesize clarity = _clarity;
#pragma mark -
#pragma mark Initialization and teardown
- (id)init;
{
if (!(self = [super initWithFragmentShaderFromString:kGPUImageClarityFragmentShaderString]))
{
return nil;
}
clarityUniform = [filterProgram uniformIndex:#"clarity"];
self.clarity = 0.0;
return self;
}
#pragma mark -
#pragma mark Accessors
- (void)setClarity:(GLfloat)clarity;
{
_clarity = clarity;
[self setFloat:_clarity forUniform:clarityUniform program:filterProgram];
}
#end
One other thing I thought of doing is applying GPUImage's built-in low pass and high pass filters, but I get the feeling that would end up a rather clunky solution.

Answer 1

That's probably due to textureSize not being a standard uniform that is provided for you as part of a GPUImageFilter. inputImageTexture and textureCoordinate are standard uniforms provided by one of these filters, and it looks like you're providing the clarity uniform.
Since textureSize isn't set, it will default to 0.0. Your 1.0 / textureSize.x calculation will then divide by zero, which tends to lead to black frames in an iOS fragment shader.
You could either calculate and provide that uniform, or instead take a look at basing your custom filter on GPUImage3x3TextureSamplingFilter instead. That filter base class passes in the result of 1.0 / textureSize.x as the texelWidth uniform (and the matching texelHeight for the vertical component). You don't have to calculate this. In fact, it also calculates the texture coordinates of the surrounding 8 pixels, so you can cut out four of the calculations above and convert those to non-dependent texture reads. You'd just need to calculate the four texture reads based on 2 * texelWidth and 2 * texelHeight to finish off the remaining four reads.
You may in fact be able to break this operation into multiple passes to save on calculations, doing a small box blur, then an overlay blend, then the last stage of this filter. That could speed this up further.

Answer 2

So, you can override
(void)setupFilterForSize:(CGSize)filterFrameSize
Method to setup width & height factor like GPUImageSharpenFilter.