ios - 如何使用 GPUImage 或其他库在 iOS 上创建 VHS 效果

Question

我正在尝试为 iOS 应用制作 VHS 效果，就像在这个视频中一样: https://www.youtube.com/watch?v=8ipML-T5yDk

我想以尽可能少的效果实现这种效果，以产生更少的 CPU 费用。

基本上我需要的是提高颜色级别以创建“色差”，更改锐化参数，并添加一些高斯模糊 + 添加一些噪声。

我正在使用 GPUImage。对于锐化和高斯模糊，易于应用。

我有两个问题:1)对于“色差”，他们通常的做法是将视频复制三遍，在一个视频上将红色设为0，在另一部视频中将蓝色设为0，在最后一个视频中将绿色设为0，然后混合他们在一起(就像在教程中一样)。但在 iPhone 中执行此操作会消耗太多 CPU。

Any idea how to achieve the same effect withtout having to duplicate the video and blend it =

2) 我也想添加一些噪音，但不知道使用哪种 GPUImage 效果。对此也有任何想法吗？

非常感谢，

塞巴斯蒂安

Answer 1

(我不是 iOS 开发人员，但我希望这可以帮助别人。)

我在 Windows 上写了一个 VHS 过滤器，这就是我所做的:

1. 将视频帧裁剪为 4:3 的宽高比，并将分辨率降低到 360*270。
2. 降低颜色饱和度，并应用颜色矩阵将绿色减少到 93%(因此视频看起来是紫色的)。
3. 应用卷积矩阵定向锐化视频帧。这是我使用的内核:

    0    -0.5    0      0
 -0.5     2.9    0   -0.5
    0    -0.5    0      0

1. 将真正的空白 VHS 片段混合到您的视频中以消除噪音(在 YouTube 上搜索“VHS overlay”)。

视频:Before After
截图:Before After

CPU 和 GPU 消耗还可以。我将此滤镜应用于我的旧 Windows 手机(使用 Snapdragon 808)上的实时相机预览，效果很好。

代码(C#，使用Win2D库进行GPU加速，实现Windows.Media.Effects.IBasicVideoEffect接口(interface)):

public void ProcessFrame(ProcessVideoFrameContext context)    //This method is called each frame
{
    int outputWidth = 360;    //Output Resolution
    int outputHeight = 270;

    IDirect3DSurface inputSurface = context.InputFrame.Direct3DSurface;
    IDirect3DSurface outputSurface = context.OutputFrame.Direct3DSurface;

    using (CanvasBitmap inputFrame = CanvasBitmap.CreateFromDirect3D11Surface(canvasDevice, inputSurface))    //The video frame to be processed
    using (CanvasRenderTarget outputFrame = CanvasRenderTarget.CreateFromDirect3D11Surface(canvasDevice, outputSurface))    //The video frame after processing
    using (CanvasDrawingSession outputFrameDrawingSession = outputFrame.CreateDrawingSession())
    using (CanvasRenderTarget croppedFrame = new CanvasRenderTarget(canvasDevice, outputWidth, outputHeight, outputFrame.Dpi))    
    using (CanvasDrawingSession croppedFrameDrawingSession = croppedFrame.CreateDrawingSession())
    using (CanvasBitmap overlay = Task.Run(async () => { return await CanvasBitmap.LoadAsync(canvasDevice, overlayFrames[new Random().Next(0, overlayFrames.Count - 1)]); }).Result)    //"overlayFrames" is a list containing video frames from https://youtu.be/SHhRFU2Jyfs, here we just randomly pick one frame for blend
    {
        double inputWidth = inputFrame.Size.Width;
        double inputHeight = inputFrame.Size.Height;
        Rect ractangle;

        //Crop the inputFrame to 360*270, save it to "croppedFrame"
        if (3 * inputWidth > 4 * inputHeight)
        {
            double x = (inputWidth - inputHeight / 3 * 4) / 2;
            ractangle = new Rect(x, 0, inputWidth - 2 * x, inputHeight);
        }
        else
        {
            double y = (inputHeight - inputWidth / 4 * 3) / 2;
            ractangle = new Rect(0, y, inputWidth, inputHeight - 2 * y);
        }
        croppedFrameDrawingSession.DrawImage(inputFrame, new Rect(0, 0, outputWidth, outputHeight), ractangle, 1, CanvasImageInterpolation.HighQualityCubic);

        //Apply a bunch of effects (mentioned in step 2,3,4) to "croppedFrame"
        BlendEffect vhsEffect = new BlendEffect
        {
            Background = new ConvolveMatrixEffect
            {
                Source = new ColorMatrixEffect
                {
                    Source = new SaturationEffect
                    {
                        Source = croppedFrame,
                        Saturation = 0.4f
                    },
                    ColorMatrix = new Matrix5x4
                    {
                        M11 = 1f,
                        M22 = 0.93f,
                        M33 = 1f,
                        M44 = 1f
                    }
                },
                KernelHeight = 3,
                KernelWidth = 4,
                KernelMatrix = new float[]
                {
                        0,   -0.5f,    0,     0,
                    -0.5f,    2.9f,    0, -0.5f,
                        0,   -0.5f,    0,     0,
                }
            },
            Foreground = overlay,
            Mode = BlendEffectMode.Screen
        };

        //And draw the result to "outputFrame"
        outputFrameDrawingSession.DrawImage(vhsEffect, ractangle, new Rect(0, 0, outputWidth, outputHeight));
    }
}