使用 GPUImage 和 GLKIT 自定义着色器 IOS
Custom Shader with GPUImage and GLKIT IOS
我有自定义着色器,它采用 3 个 sampler2d 统一值,我需要将如下所示的三个映射传递给每个纹理。我创建了如下扩展 GPUImage class.
的代码
#import "MappingShader.h"
#import <GLKit/GLKit.h>
NSString *const kGPUImageAtgMappingFragmentShaderString = SHADER_STRING
(
precision highp float;
uniform sampler2D inputImageTexture;
uniform sampler2D red;
uniform sampler2D green;
uniform sampler2D blue;
uniform float uAmount;
varying vec2 textureCoordinate;
void main() {
vec4 color = texture2D(inputImageTexture, textureCoordinate);
vec2 indexRed = vec2(color.r, 0.0);
vec4 redColor = texture2D(red, indexRed);
vec2 indexGreen = vec2(color.g, 0.0);
vec4 greenColor = texture2D(green, indexGreen);
vec2 indexBlue = vec2(color.b, 0.0);
vec4 blueColor = texture2D(blue, indexBlue);
gl_FragColor = mix(
color,
vec4(redColor.r, greenColor.g, blueColor.b, color.a),
uAmount);
}
);
@interface MappingShader()
{
GLint uAmount, red, green, blue;
}
@end
@implementation MappingShader
@synthesize amount = _amount;
- (id)init;
{
if (!(self = [super initWithFragmentShaderFromString:kGPUImageAtgMappingFragmentShaderString]))
{
return nil;
}
red = [filterProgram uniformIndex:@"inputImageTexture"];
green = [filterProgram uniformIndex:@"green"];
blue = [filterProgram uniformIndex:@"blue"];
GLKTextureInfo *redtexr;
NSError *error;
NSString *filepath = [[NSBundle mainBundle] pathForResource:@"aladin" ofType:@"png"];
redtexr = [GLKTextureLoader textureWithContentsOfFile:filepath options:nil error:&error];
glActiveTexture(GL_TEXTURE0);
glUniform1i(red, 0);
glBindTexture(GL_TEXTURE_2D, redtexr.name);
uAmount = [filterProgram uniformIndex:@"uAmount"];
self.amount = 0.5;
return self;
// glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 300, 300, 0, GL_RGBA, GL_ARRAY_BUFFER, <#const GLvoid *pixels#>)
// GLKTextureInfo *texs = [GLKTextureLoader alloc] initWithSharegroup:<#(EAGLSharegroup *)#>
}
-(void)setAmount:(CGFloat)amount
{
_amount = amount;
[self setFloat:_amount forUniform:uAmount program:filterProgram];
}
@end
所以请帮助我如何将以下值传递给着色器并获得结果图像。我也试过 GLKIT 加载器,但没有得到任何结果。
"red" : [54,54,55,55,55,56,56,57,57,57,58,58,58,59,59,60,60,60,61,61,61,62,62,63,63,63,64,64,65,65,65,66,66,67,67,67,68,68,69,69,69,70,70,71,71,72,72,73,73,73,74,74,75,75,76,76,77,77,78,78,79,79,80,80,81,81,82,82,83,83,84,85,85,86,86,87,87,88,89,89,90,90,91,92,92,93,94,94,95,96,96,97,98,98,99,100,100,101,102,102,103,104,105,105,106,107,107,108,109,110,111,111,112,113,114,114,115,116,117,118,118,119,120,121,122,123,123,124,125,126,127,128,128,129,130,131,132,133,134,135,135,136,137,138,139,140,141,142,143,144,145,146,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,207,208,209,210,211,212,213,214,215,216,217,219,220,221,222,223,224,225,226,227,228,230,231,232,233,234,235,236,237,238,239,241,242,243,244,245,246,247,248,249,251,252,253,254,255],
"green" : [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,160,161,162,163,164,165,166,167,168,169,170,171,171,172,173,174,175,176,177,177,178,179,180,181,181,182,183,184,184,185,186,187,187,188,189,189,190,191,191,192,193,193,194,194,195,195,196,197,197,198,198,199,199,199,200,200,201,201,202,202,202,203,203,203,204,204,204,205,205,205,206,206,206,207,207,207,207,208,208,208,209,209,209,209,209,210,210,210,210,211,211,211,211,212,212,212],
"blue" : [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,61,62,63,64,65,66,67,68,69,70,70,71,72,73,74,75,76,77,77,78,79,80,81,82,82,83,84,85,86,86,87,88,89,89,90,91,92,92,93,94,95,95,96,97,98,98,99,100,100,101,102,102,103,104,104,105,106,106,107,107,108,109,109,110,110,111,111,112,113,113,114,114,115,115,116,116,117,117,118,118,119,119,119,120,120,121,121,122,122,122,123,123,124,124,124,125,125,125,126,126,126,127,127,127,128,128,128,129,129,129,129,130,130,130,131,131,131,131,132,132,132,132,133,133,133,133,134,134,134,134,134,135,135,135,135,135,136,136,136,136,136,136,137,137,137,137,137,137,138,138,138,138,138,138,139,139,139,139,139,139,139,140,140,140,140,140,140,140,140,141,141,141,141,141,141,141,142,142,142,142,142,142,142,142,142,142,142,142,142,142,142,142,142,142]
glActiveTexture(GL_TEXTURE0);
这会激活第一个采样器,一旦激活,您就可以将其绑定,并将采样器统一设置为 0,表示采样器到纹理单元的映射。
你可能想用 glActiveTexture(GL_TEXTURE1) 跟进,将 uniform 设置为 1,等等,这样你就可以在绑定中设置所有其他采样器和纹理条目 table .
我找到了解决方案。您可以使用 GPUImageToneCurveFilter
作为参考并将 RGB 值数组作为纹理传递。
我有自定义着色器,它采用 3 个 sampler2d 统一值,我需要将如下所示的三个映射传递给每个纹理。我创建了如下扩展 GPUImage class.
的代码#import "MappingShader.h"
#import <GLKit/GLKit.h>
NSString *const kGPUImageAtgMappingFragmentShaderString = SHADER_STRING
(
precision highp float;
uniform sampler2D inputImageTexture;
uniform sampler2D red;
uniform sampler2D green;
uniform sampler2D blue;
uniform float uAmount;
varying vec2 textureCoordinate;
void main() {
vec4 color = texture2D(inputImageTexture, textureCoordinate);
vec2 indexRed = vec2(color.r, 0.0);
vec4 redColor = texture2D(red, indexRed);
vec2 indexGreen = vec2(color.g, 0.0);
vec4 greenColor = texture2D(green, indexGreen);
vec2 indexBlue = vec2(color.b, 0.0);
vec4 blueColor = texture2D(blue, indexBlue);
gl_FragColor = mix(
color,
vec4(redColor.r, greenColor.g, blueColor.b, color.a),
uAmount);
}
);
@interface MappingShader()
{
GLint uAmount, red, green, blue;
}
@end
@implementation MappingShader
@synthesize amount = _amount;
- (id)init;
{
if (!(self = [super initWithFragmentShaderFromString:kGPUImageAtgMappingFragmentShaderString]))
{
return nil;
}
red = [filterProgram uniformIndex:@"inputImageTexture"];
green = [filterProgram uniformIndex:@"green"];
blue = [filterProgram uniformIndex:@"blue"];
GLKTextureInfo *redtexr;
NSError *error;
NSString *filepath = [[NSBundle mainBundle] pathForResource:@"aladin" ofType:@"png"];
redtexr = [GLKTextureLoader textureWithContentsOfFile:filepath options:nil error:&error];
glActiveTexture(GL_TEXTURE0);
glUniform1i(red, 0);
glBindTexture(GL_TEXTURE_2D, redtexr.name);
uAmount = [filterProgram uniformIndex:@"uAmount"];
self.amount = 0.5;
return self;
// glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 300, 300, 0, GL_RGBA, GL_ARRAY_BUFFER, <#const GLvoid *pixels#>)
// GLKTextureInfo *texs = [GLKTextureLoader alloc] initWithSharegroup:<#(EAGLSharegroup *)#>
}
-(void)setAmount:(CGFloat)amount
{
_amount = amount;
[self setFloat:_amount forUniform:uAmount program:filterProgram];
}
@end
所以请帮助我如何将以下值传递给着色器并获得结果图像。我也试过 GLKIT 加载器,但没有得到任何结果。
"red" : [54,54,55,55,55,56,56,57,57,57,58,58,58,59,59,60,60,60,61,61,61,62,62,63,63,63,64,64,65,65,65,66,66,67,67,67,68,68,69,69,69,70,70,71,71,72,72,73,73,73,74,74,75,75,76,76,77,77,78,78,79,79,80,80,81,81,82,82,83,83,84,85,85,86,86,87,87,88,89,89,90,90,91,92,92,93,94,94,95,96,96,97,98,98,99,100,100,101,102,102,103,104,105,105,106,107,107,108,109,110,111,111,112,113,114,114,115,116,117,118,118,119,120,121,122,123,123,124,125,126,127,128,128,129,130,131,132,133,134,135,135,136,137,138,139,140,141,142,143,144,145,146,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,207,208,209,210,211,212,213,214,215,216,217,219,220,221,222,223,224,225,226,227,228,230,231,232,233,234,235,236,237,238,239,241,242,243,244,245,246,247,248,249,251,252,253,254,255],
"green" : [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,160,161,162,163,164,165,166,167,168,169,170,171,171,172,173,174,175,176,177,177,178,179,180,181,181,182,183,184,184,185,186,187,187,188,189,189,190,191,191,192,193,193,194,194,195,195,196,197,197,198,198,199,199,199,200,200,201,201,202,202,202,203,203,203,204,204,204,205,205,205,206,206,206,207,207,207,207,208,208,208,209,209,209,209,209,210,210,210,210,211,211,211,211,212,212,212],
"blue" : [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,61,62,63,64,65,66,67,68,69,70,70,71,72,73,74,75,76,77,77,78,79,80,81,82,82,83,84,85,86,86,87,88,89,89,90,91,92,92,93,94,95,95,96,97,98,98,99,100,100,101,102,102,103,104,104,105,106,106,107,107,108,109,109,110,110,111,111,112,113,113,114,114,115,115,116,116,117,117,118,118,119,119,119,120,120,121,121,122,122,122,123,123,124,124,124,125,125,125,126,126,126,127,127,127,128,128,128,129,129,129,129,130,130,130,131,131,131,131,132,132,132,132,133,133,133,133,134,134,134,134,134,135,135,135,135,135,136,136,136,136,136,136,137,137,137,137,137,137,138,138,138,138,138,138,139,139,139,139,139,139,139,140,140,140,140,140,140,140,140,141,141,141,141,141,141,141,142,142,142,142,142,142,142,142,142,142,142,142,142,142,142,142,142,142]
glActiveTexture(GL_TEXTURE0);
这会激活第一个采样器,一旦激活,您就可以将其绑定,并将采样器统一设置为 0,表示采样器到纹理单元的映射。
你可能想用 glActiveTexture(GL_TEXTURE1) 跟进,将 uniform 设置为 1,等等,这样你就可以在绑定中设置所有其他采样器和纹理条目 table .
我找到了解决方案。您可以使用 GPUImageToneCurveFilter
作为参考并将 RGB 值数组作为纹理传递。