时间戳

首页 > 解决方案 > 如何在不经过序列的情况下在 GPUImage 中的视频上混合 2 个 LUT 的输出？

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

问题描述

我一直在尝试确定 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 可以做到这一点，如果是这样，也许可以为我指明正确的方向 :)

谢谢！

标签： iosgpuimage

解决方案

好的，我想出处理我在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 渲染的图像纹理，但如果您愿意，可以直接修改它。另请注意，需要设置“强度”，您可以将其硬编码为浮点数，例如 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];

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

推荐阅读