ios - 如何在不通过序列的情况下在 GPUImage 的视频上混合 2 个 LUT 的输出？

Question

我一直在尝试弄清楚 GPUImage 是否有一个开箱即用的解决方案来满足我想要做的事情。

我有 2 个 LUT 和一个视频文件。目前，我能够成功播放视频文件，并使用 GPUImageView、GPUImageMovie、GPUImagePicture 和 GPUImageLookupFilter 的组合通过两个 LUT 对其进行过滤。

这就是我目前正在做的事情，并且效果很好:

    lutPicture1 = [[GPUImagePicture alloc] initWithImage:lutImage1];
    lutPicture2 = [[GPUImagePicture alloc] initWithImage:lutImage2];

    lutFilter1 = [[GPUImageLookupFilter alloc] init];
    lutFilter2 = [[GPUImageLookupFilter alloc] init];

    playerItem =  [[AVPlayerItem alloc] initWithURL:fileURL];
    player = [[AVPlayer alloc] initWithPlayerItem:playerItem];

    GPUImageMovie *gpuImageMovie = [[GPUImageMovie alloc] initWithPlayerItem:playerItem];

    [gpuImageMovie addTarget: lutFilter1];
    [lutPicture1 addTarget: lutFilter1];
    [lutPicture1 processImage];
    [lutFilter1 addTarget: lutFilter2];

    [lutPicture2 addTarget: lutFilter2];
    [lutPicture2 processImage];
    [lutFilter2 addTarget: gpuImageView];

    [gpuImageMovie startProcessing];
    [player play];

如果我错了，请纠正我，但输出将是首先将其通过名为“lutFilter1”的过滤器传递，然后将其输出传递通过“lutFilter2”的结果。

但是，我不想按这样的顺序执行过滤器。

我不知道这是否可能，但我希望能够执行以下操作:

1. 在我的视频中获得“位置”
2. 从“lutImage1”中获取其对应的颜色
3. 从“lutImage2”中获取其对应的颜色
4. 混合从“lutImage1”和“lutImage2”返回的颜色
5. 返回混合颜色作为输出。

我在框架中看到了一个名为 GPUImageSoftEleganceFilter 的过滤器，它看起来可能会使用两个 LUT 执行类似的操作，但对于这个东西来说相对较新，如果有人可以帮助我并告诉我如果我需要什么，我会希望它我尝试做的事情是可以使用 GPUImage 实现的，如果是这样，也许会为我指明正确的方向:)

谢谢!

Answer 1

好的，我发现处理我在 GPUImage 中尝试做的事情的类是 GPUImageThreeInputFilter。

我最终创建了一个 GPUImageThreeInputFilter 的子类，并在我的子类中添加了我的自定义顶点和片段着色器。

如果您有兴趣做同样的事情，这里有一个基本的顶点着色器设置可以帮助您入门:

attribute vec4 position;
attribute vec4 inputTextureCoordinate;
attribute vec4 inputTextureCoordinate2;
attribute vec4 inputTextureCoordinate3;

varying vec2 textureCoordinate;
varying vec2 textureCoordinate2;
varying vec2 textureCoordinate3;

void main()
{
    gl_Position = position;
    textureCoordinate = inputTextureCoordinate.xy;
    textureCoordinate2 = inputTextureCoordinate2.xy;
    textureCoordinate3 = inputTextureCoordinate3.xy;
}

还有一个基本的片段着色器。注意:下面的片段着色器没有使用位置 3 处渲染的图像纹理，但如果您愿意，可以直接修改它。另请注意需要设置“强度”，您可以硬编码为 float ，例如1.0 用于演示目的。

varying highp vec2 textureCoordinate;
varying highp vec2 textureCoordinate2;
varying highp vec2 textureCoordinate3;

uniform sampler2D inputImageTexture;
uniform sampler2D inputImageTexture2;
uniform sampler2D inputImageTexture3;

uniform lowp float intensity;

void main()
{
    highp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);

    highp float blueColor = textureColor.b * 63.0;

    highp vec2 quad1;
    quad1.y = floor(floor(blueColor) / 8.0);
    quad1.x = floor(blueColor) - (quad1.y * 8.0);

    highp vec2 quad2;
    quad2.y = floor(ceil(blueColor) / 8.0);
    quad2.x = ceil(blueColor) - (quad2.y * 8.0);

    highp vec2 texPos1;
    texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
    texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);

    highp vec2 texPos2;
    texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
    texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);

    lowp vec4 newColor1 = texture2D(inputImageTexture2, texPos1);
    lowp vec4 newColor2 = texture2D(inputImageTexture2, texPos2);

    lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));
    gl_FragColor = mix(textureColor, vec4(newColor.rgb, textureColor.w), intensity);
}

我的 Objective-C 设置如下:

// The URL of the video file in our Bundle we want to play
NSURL *videoFileURL = [NSURL fileURLWithPath: videoFilePath];

playerItem =  [[AVPlayerItem alloc] initWithURL: videoFileURL];
player = [[AVPlayer alloc] initWithPlayerItem: playerItem];

// GPUCustomThreeInputFilter inherits from GPUImageThreeInputFilter
customThreeInputFilter = [[GPUCustomThreeInputFilter alloc] init];

GPUImageMovie *gpuImageMovie = [[GPUImageMovie alloc] initWithPlayerItem:playerItem];
[gpuImageMovie addTarget: customThreeInputFilter atTextureLocation:0];

// This texture will be available at "inputImageTexture2" in our fragment shader
[gpuImagePicture1 addTarget: customThreeInputFilter atTextureLocation:1];
[gpuImagePicture1 processImage];

// This texture will be available at "inputImageTexture3" in our fragment shader
[gpuImagePicture2 addTarget: customThreeInputFilter atTextureLocation:2];
[gpuImagePicture2 processImage];

// gpuImageView is an instance of GPUImageView and is added to our ViewController in the normal way via [self.view addSubview: gpuImageView]
[customThreeInputFilter addTarget: gpuImageView];

[gpuImageMovie startProcessing];
[player play];

我希望这可以帮助任何试图做同样事情的人。