Chiper - 实时GLKView的应用

实时滤镜这个功能,对于一款滤镜App来说是很重要的,如果没有实时滤镜,滤镜的效果其实会大打折扣的。

要在Core Image下实现实时滤镜,暂时只有使用Open GL ES的方法,而GLKView则是实现Open GL ES的一个View子类,所以实时滤镜效果可以通过GLKView来实现。

实时滤镜主要涉及相机图像获取,滤镜实时渲染等内容

AVCaptureSession和相机图像获取

设置共享的AVCaptureSession
fileprivate var avSession: AVCaptureSession = AVCaptureSession()

设置后置摄像头为输入源

            var cameraInput: AVCaptureDeviceInput
            guard (inputs?.count)! > 0 else {
                let _cameraDevice = AVCaptureDevice.defaultDevice(withDeviceType: AVCaptureDeviceType.builtInWideAngleCamera, mediaType: AVMediaTypeVideo, position: AVCaptureDevicePosition.back)
                cameraInput = try AVCaptureDeviceInput.init(device: _cameraDevice!)
                if avSession.canAddInput(cameraInput) {
                    avSession.addInput(cameraInput)
                    avSession.sessionPreset = backPreset
                }
                currentCamera = _cameraDevice
            }

设置输出源

            ws.captureOutput.setSampleBufferDelegate(self, queue: ws.sessionQueue)
            if ws.avSession.canAddOutput(ws.captureOutput) {
                ws.avSession.addOutput(ws.captureOutput)
            }

滤镜实时渲染

设置完输出源后,可以对设备输出进行实时渲染

    // AVCaptureVideoDataOutputSampleBufferDelegate

    func captureOutput(_ output: AVCaptureOutput, didOutputSampleBuffer sampleBuffer: CMSampleBuffer, from connection: AVCaptureConnection) {
        unowned let ws = self
        if Thread.current != Thread.main {
            DispatchQueue.main.async {
            
                connection.videoOrientation = .portrait
                let pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer)
                let image = CIImage(cvImageBuffer: pixelBuffer!)
                if EAGLContext.current() != ws.glContext {
                    glFlush()
                    EAGLContext.setCurrent(ws.glContext)
                }
                // clear the pre content buffer
                glClearColor(0, 0, 0, 1.0)
                glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
                // set the blend mode to "source over" so that CI will use that
                glEnable(GLenum(GL_BLEND))
                glBlendFunc(GLenum(GL_ONE), GLenum(GL_ONE_MINUS_SRC_ALPHA))

                let scale = UIScreen.main.bounds.size.width > 375 ? CGAffineTransform(scaleX: 3, y: 3) : CGAffineTransform(scaleX: 2, y: 2)
                ws.glkView.bindDrawable()
                ws.currentCIImage = image
                let fromRect = ws.cropImageRect(image: image)
                let filterImage = YKFilters.shared.filterCIImage(name: ws.currentFilterId, inputImage: image, inputContext: ["extent":fromRect])
                ws.ciContext.draw(filterImage, in: ws.glkView.bounds.applying(scale), from: fromRect)
                ws.glkView.display()

            }
        }

    }

1、这里有个要注意的问题,就是要对Buffer中的图像数据的每一张图像进行裁剪,因为buffer获取的是全屏幕尺寸的数据,与GLKView显示的尺寸其实是对不上的,所以要进行裁剪。
2、除了这个问题外,GLKView要注意Context的绑定和复用,不要重复创建Context,否则性能会有较大的影响。

你可能感兴趣的:(Chiper - 实时GLKView的应用)