图片的实时渲染和离屏渲染

马上就说

发布于 2023-03-05 14:47:37

1.9K0

发布于 2023-03-05 14:47:37

文章被收录于专栏：码上就说

之前我们比较多的介绍视频的渲染和处理，本文我们想谈一谈图片，和视频比起来，图片确实相对简单点，我们知道视频本质上是一帧帧的“图片”组成的，都了解了视频了，图片还需要去了解吗？图片的渲染和视频有相通之处，也有其独特的特点。

视频的渲染一般都是实时渲染，使用SurfaceView或者TextureView，图片的渲染一般都会采用ImageView，可以设置路径，也可以设置Bitmap，再加上Canvas和Paint，我无敌了，可以实现多张多样的效果。ImageView是不是真的无敌？

问：我想在一张图片上加上贴纸
答：简单，我使用Cavas，将贴纸放在特定的位置，然后生成一张新的Bitmap放入ImageView上。
问：我要添加多张贴纸在不同的位置上
答：简单，一样的道理啊，我还可以举一反三，Cavas解决一切啊。每添加一张贴纸就重新生成一张Bitmap放入ImageView上。
问：我可以实时移动贴纸到不同的位置吗？
答：当然可以啊，Canvas可以支持设置位置啊。
问：每改变一次位置，就要生成新的Bitmap，这样不断生成回收，是不是过分频繁了？
答：是有点频繁，但是为了每次都能生成Bitmap，这样不可避免，开发同学注意回收就行了。
问：频繁销毁除了产生内存问题，导致稳定性问题，会不会导致性能比较差？
答：内存抖动过分频繁，确实会导致性能问题。

从上面的聊天我们已经得知ImageView处理图片的的两个问题：

内存抖动问题
渲染效率低，性能差

ImageView渲染图片和离屏渲染怎么关联起来了？OpenGL有离屏渲染的概念，顾名思义为屏幕外的渲染，即在当前屏幕缓冲区以外，新开辟一个新缓冲区进行操作。离屏渲染发生在GPU层面上，会创建新的渲染缓冲区，会触发 OpenGL 的多通道渲染管线，图形上下文的切换会造成额外的开销，增加 GPU 工作量。其实从描述上来看，就知道离屏渲染是比较影响性能的。

需要创建新的缓存区
离屏渲染的整个过程，需要多次切换上下文环境，当前屏幕—>离屏，渲染结束后将离屏缓冲区内容显示到当前屏幕，上下文切换回当前环境。

与离屏渲染相反的就是实时渲染，或者称当前屏幕渲染，CPU计算好frame等属性，将计算好的内容提交给GPU去渲染，GPU渲染完成之后就会放入屏幕帧缓冲区，然后控制器每隔一段时间会去屏幕缓存区读取渲染好的内容，从而显示出来。图片渲染怎么样实现实时渲染？当然是SurfaceView啦，既然是实时渲染，必定有画布的概念，上一篇文章已经非常清楚地指出了SurfaceView的画布本质了。大家有不清楚的可以看一下上一篇文章：为播放器外接一套渲染框架。

我们的印象中SurfaceView通常和视频或者摄像头采集关联比较多，用来渲染图片还是比较少见的。但是为了保证图片实时渲染，SurfaceView确实是一个非常的好的载体。

创建EGL环境
Surface转NativeWindow，构建EGLSurface
设置FBO
渲染图片纹理

创建EGL环境

获取EGLDisplay，EGLDisplay实际上是底层显示设备的OpenGL层的抽象
初始化EGLDisplay
设置EGLDisplay，包括ARGB，渲染类型，版本等
设置OpenGL版本
获取EGLContext，EGLContext可以在多个EGL环境中共享，可以实现多线程交互。

int EGLCore::Init(EGLContext shared_context, int egl_version) {
  if (egl_version == 0) {
    egl_version = 2;
  }
  EGLint num_configs;
  const EGLint attributes[] = {
          EGL_BUFFER_SIZE,      32,
          EGL_ALPHA_SIZE,       8,
          EGL_BLUE_SIZE,        8,
          EGL_GREEN_SIZE,       8,
          EGL_RED_SIZE,         8,
          EGL_RENDERABLE_TYPE,
          EGL_OPENGL_ES2_BIT,
          EGL_SURFACE_TYPE,
          EGL_WINDOW_BIT,
          EGL_NONE
  };

  if ((display_ = eglGetDisplay(EGL_DEFAULT_DISPLAY)) == EGL_NO_DISPLAY) {
    LOGE("eglGetDisplay() returned error %d", eglGetError());
    return Error::OPENGL_DISPLAY_ERROR;
  }
  if (!eglInitialize(display_, 0, 0)) {
    LOGE("eglInitialize() returned error %d", eglGetError());
    return Error::OPENGL_INITIALIZE_ERROR;
  }

  if (!eglChooseConfig(display_, attributes, &config_, 1, &num_configs)) {
    LOGE("eglChooseConfig() returned error %d", eglGetError());
    Release();
    return Error::OPENGL_CONFIG_ERROR;
  }
  EGLint eglContextAttributes[] = { EGL_CONTEXT_CLIENT_VERSION, static_cast<EGLint>(egl_version), EGL_NONE };
  context_ = eglCreateContext(display_, config_, shared_context, eglContextAttributes);
  if (context_ == nullptr) {
    LOGE("eglCreateContext() returned error %d", eglGetError());
    Release();
    return Error::OPENGL_CREATE_CONTEXT_ERROR;
  }
  return 0;
}

Surface转NativeWindow，构建EGLSurface

可以在主线程中将Surface转为NativeWindow
在EGL线程中通过NativeWindow构建EGLSurface，这个EGLSurface非离屏，可以实现渲染的。

JNIEnv *env = nullptr;
int ret = get_env(&env);
if (env != nullptr) {
  native_window_ = ANativeWindow_fromSurface(env, surface);
}
if (ret == JNI_EDETACHED) {
  detach_env();
}

EGLSurface EGLCore::CreateWindowSurface(ANativeWindow *window) {
  EGLSurface surface = EGL_NO_SURFACE;
  EGLint format;

  if (window == nullptr) {
    LOGE("%s window is null.", __func__);
    return surface;
  }

  if (!eglGetConfigAttrib(display_, config_, EGL_NATIVE_VISUAL_ID, &format)) {
    LOGE("%s eglGetConfigAttrib() returned error %d", __func__, eglGetError());
    Release();
    return surface;
  }
  ANativeWindow_setBuffersGeometry(window, 0, 0, format);
  if (!(surface = eglCreateWindowSurface(display_, config_, window, nullptr))) {
    LOGE("%s eglCreateWindowSurface() returned error %d", __func__, eglGetError());
  }
  return surface;
}

渲染图片纹理

if (render_screen_ == nullptr) {
  render_screen_ = new effect::OpenGL();
}
render_screen_->SetOutput(surface_width_, surface_height_);
render_screen_->ProcessImage(process_id);
if (!egl_core_->SwapBuffers(egl_surface_)) {
  LOGE("eglSwapBuffers error: %d surface: %d", eglGetError(), (egl_surface_ == EGL_NO_SURFACE));
}

上面最终渲染的process_id就是和FBO绑定的纹理。

通过实现渲染图片我们可以做到什么呢？我们可以实现各种各样的效果。

例如一些视频蒙版效果、滤镜效果、颜色调节效果，下面看一下简单的视频蒙版效果。