HarmonyOS GPU 超分用 OpenGL ES 把低分辨率图像变清晰什么是 GPU 超分你有没有遇到过这种情况一张小图片放大后变得模糊不清全是马赛克这是因为原始图片的分辨率不够放大后像素点被拉伸自然就模糊了。GPU 超分Super Resolution就是用来解决这个问题的。它利用 GPU 的计算能力通过算法把低分辨率图像重建成高分辨率图像。不是简单地拉伸像素而是智能地补充细节让放大后的图像看起来更清晰。打个比方就像一个画家看到一张模糊的小照片然后凭经验和技巧画出一张清晰的大画。GPU 超分就是这个画家只不过它是用算法来画的。环境搭建硬件要求设备类型请参考 XEngine 开发指南的硬件要求软件要求DevEco Studio 版本DevEco Studio 6.0.0 Release 及以上HarmonyOS SDK 版本HarmonyOS 6.0.0 Release SDK 及以上搭建步骤安装 DevEco Studio去华为开发者官网下载安装配置开发环境确保网络环境正常设备调试使用真机进行调试项目结构├── entry/src/main // 代码区 │ ├── cpp │ │ ├── types │ │ │ ├── libnativerender │ │ │ └── index.d.ts // native层接口注册文件 │ │ │── napi_init.cpp // native api层接口的具体实现函数 │ │ │── CMakeLists.txt // native层编译配置 │ │ │── 3rdParty // 三方件 │ │ │── common // 通用接口 │ │ │── model // 模型 │ │ │── file // 文件管理 │ │ │── libs // 三方动态库 │ │ │── manager // nativearkts交互 │ │ │── render // 渲染 │ │ │── shader // 渲染shader │ ├── ets │ │ ├── entryability │ │ │ └── EntryAbility.ts // 程序入口类 │ │ ├── pages │ │ │ └── index.ets // 主界面展示类 │ ├── resources // 资源文件目录 │ │ ├── base │ │ │ ├── media │ │ │ └── icon.png // 图片资源 │ │ ├── rawfile/model/Sponza │ │ │ └── sponza.obj // 模型资源这个项目使用 OpenGL ES 图形 API代码主要在 C 层。第一步引入头文件#includecstring#includecstdlib#includexengine/xeg_gles_extension.h#includexengine/xeg_gles_spatial_upscale.h这些头文件的作用cstring、cstdlibC 标准库处理字符串、内存等xeg_gles_extension.hXEngine 的 OpenGL ES 扩展接口xeg_gles_spatial_upscale.h空域 GPU 超分的核心接口第二步配置 CMakeLists.txtfind_library( xengine-lib xengine ) find_library( EGL-lib EGL ) find_library( GLES-lib GLESv3 ) target_link_libraries(nativerender PUBLIC ${EGL-lib} ${GLES-lib} ${xengine-lib})链接了三个库xengineXEngine 核心库超分功能在这个库里EGLOpenGL ES 的窗口系统接口GLESv3OpenGL ES 3.0 版本的库第三步查询设备是否支持超分在使用超分功能之前先检查设备是否支持constchar*extensions(constchar*)HMS_XEG_GetString(XEG_EXTENSIONS);if(!strstr(extensions,XEG_SPATIAL_UPSCALE_EXTENSION_NAME)){exit(1);// return error}这段代码做了两件事获取扩展列表HMS_XEG_GetString(XEG_EXTENSIONS)返回设备支持的所有扩展名称是一个字符串查找超分扩展用strstr在扩展列表里查找空域超分的扩展名。如果找不到说明设备不支持退出程序这是使用任何图形扩展前的标准操作先确认设备支持再使用。第四步设置超分参数floatm_sharpness0.3f;uint32_tm_renderWidth800;uint32_tm_renderHeight600;定义一些参数m_sharpness锐化参数0.3 是一个平衡值。值越大图像越锐利但可能会有伪影值越小图像越平滑m_renderWidth、m_renderHeight原始渲染分辨率800x600HMS_XEG_SpatialUpscaleParameter(XEG_SPATIAL_UPSCALE_SHARPNESS,m_sharpness);设置锐化参数。XEG_SPATIAL_UPSCALE_SHARPNESS表示要设置的是锐化参数。intupscaleScissor[4]{0,0,static_castint(m_renderWidth),static_castint(m_renderHeight)};HMS_XEG_SpatialUpscaleParameter(XEG_SPATIAL_UPSCALE_SCISSOR,upscaleScissor);设置超分的采样区域。upscaleScissor是一个包含 4 个元素的数组前两个是起始坐标 (x, y)从 (0, 0) 开始后两个是宽高等于原始渲染分辨率这意味着超分会处理整个原始图像。第五步执行超分unsignedintupscaleFBO;glBindFramebuffer(GL_FRAMEBUFFER,upscaleFBO);先绑定一个 framebuffer。framebuffer 就像一块画布超分的结果会画到这块画布上。uint32_tm_upscaleWidth1200;uint32_tm_upscaleHeight900;glViewport(0,0,m_upscaleWidth,m_upscaleHeight);glScissor(0,0,m_upscaleWidth,m_upscaleHeight);设置超分后的目标分辨率从 800x600 超分到 1200x900。glViewport设置视口大小glScissor设置裁剪区域。unsignedintupscaleColorBuffer;HMS_XEG_RenderSpatialUpscale(upscaleColorBuffer);最后调用HMS_XEG_RenderSpatialUpscale执行超分。upscaleColorBuffer是原始图像的纹理附件超分算法会读取这个纹理然后把结果写入之前绑定的 framebuffer。超分的工作原理让我用更通俗的语言解释超分是怎么工作的分析原始图像超分算法会分析低分辨率图像的像素分布识别特征找出图像中的边缘、纹理、细节等特征智能放大根据识别出的特征在放大时补充细节锐化处理根据锐化参数对图像进行适度的锐化这个过程是在 GPU 上并行执行的所以速度很快。超分算法的内部处理流程读取低分辨率原始图像分析像素分布识别边缘特征识别纹理特征识别细节特征智能插值放大根据锐化参数进行锐化输出高分辨率图像GPU 超分的整体工作流程如下查询设备是否支持超分设置锐化参数设置采样区域绑定输出 Framebuffer设置目标视口大小调用 RenderSpatialUpscaleGPU 分析原始图像特征智能补充放大后的细节输出高分辨率图像适用场景GPU 超分特别适合以下场景游戏渲染先用低分辨率渲染性能好再超分到高分辨率画质好视频播放把低分辨率视频超分到高分辨率显示图片查看放大图片时保持清晰度注意事项设备支持不是所有设备都支持 GPU 超分一定要先查询扩展锐化参数m_sharpness要根据实际效果来调整。太大会有伪影太小效果不明显分辨率比例超分的倍率不宜过大一般 1.5 到 2 倍比较合适。倍率太大效果会变差性能开销超分本身有性能开销要权衡超分带来的画质提升和性能损失总结GPU 超分是一个很实用的图形优化技术它能在低分辨率渲染的基础上获得接近高分辨率的画质。核心流程查询设备是否支持超分设置超分参数锐化度、采样区域绑定输出 framebuffer调用HMS_XEG_RenderSpatialUpscale执行超分掌握了这些你就能在 HarmonyOS 应用中实现 GPU 趍分让你的应用在性能和画质之间找到最佳平衡。
HarmonyOS GPU 超分：用 OpenGL ES 把低分辨率图像变清晰
HarmonyOS GPU 超分用 OpenGL ES 把低分辨率图像变清晰什么是 GPU 超分你有没有遇到过这种情况一张小图片放大后变得模糊不清全是马赛克这是因为原始图片的分辨率不够放大后像素点被拉伸自然就模糊了。GPU 超分Super Resolution就是用来解决这个问题的。它利用 GPU 的计算能力通过算法把低分辨率图像重建成高分辨率图像。不是简单地拉伸像素而是智能地补充细节让放大后的图像看起来更清晰。打个比方就像一个画家看到一张模糊的小照片然后凭经验和技巧画出一张清晰的大画。GPU 超分就是这个画家只不过它是用算法来画的。环境搭建硬件要求设备类型请参考 XEngine 开发指南的硬件要求软件要求DevEco Studio 版本DevEco Studio 6.0.0 Release 及以上HarmonyOS SDK 版本HarmonyOS 6.0.0 Release SDK 及以上搭建步骤安装 DevEco Studio去华为开发者官网下载安装配置开发环境确保网络环境正常设备调试使用真机进行调试项目结构├── entry/src/main // 代码区 │ ├── cpp │ │ ├── types │ │ │ ├── libnativerender │ │ │ └── index.d.ts // native层接口注册文件 │ │ │── napi_init.cpp // native api层接口的具体实现函数 │ │ │── CMakeLists.txt // native层编译配置 │ │ │── 3rdParty // 三方件 │ │ │── common // 通用接口 │ │ │── model // 模型 │ │ │── file // 文件管理 │ │ │── libs // 三方动态库 │ │ │── manager // nativearkts交互 │ │ │── render // 渲染 │ │ │── shader // 渲染shader │ ├── ets │ │ ├── entryability │ │ │ └── EntryAbility.ts // 程序入口类 │ │ ├── pages │ │ │ └── index.ets // 主界面展示类 │ ├── resources // 资源文件目录 │ │ ├── base │ │ │ ├── media │ │ │ └── icon.png // 图片资源 │ │ ├── rawfile/model/Sponza │ │ │ └── sponza.obj // 模型资源这个项目使用 OpenGL ES 图形 API代码主要在 C 层。第一步引入头文件#includecstring#includecstdlib#includexengine/xeg_gles_extension.h#includexengine/xeg_gles_spatial_upscale.h这些头文件的作用cstring、cstdlibC 标准库处理字符串、内存等xeg_gles_extension.hXEngine 的 OpenGL ES 扩展接口xeg_gles_spatial_upscale.h空域 GPU 超分的核心接口第二步配置 CMakeLists.txtfind_library( xengine-lib xengine ) find_library( EGL-lib EGL ) find_library( GLES-lib GLESv3 ) target_link_libraries(nativerender PUBLIC ${EGL-lib} ${GLES-lib} ${xengine-lib})链接了三个库xengineXEngine 核心库超分功能在这个库里EGLOpenGL ES 的窗口系统接口GLESv3OpenGL ES 3.0 版本的库第三步查询设备是否支持超分在使用超分功能之前先检查设备是否支持constchar*extensions(constchar*)HMS_XEG_GetString(XEG_EXTENSIONS);if(!strstr(extensions,XEG_SPATIAL_UPSCALE_EXTENSION_NAME)){exit(1);// return error}这段代码做了两件事获取扩展列表HMS_XEG_GetString(XEG_EXTENSIONS)返回设备支持的所有扩展名称是一个字符串查找超分扩展用strstr在扩展列表里查找空域超分的扩展名。如果找不到说明设备不支持退出程序这是使用任何图形扩展前的标准操作先确认设备支持再使用。第四步设置超分参数floatm_sharpness0.3f;uint32_tm_renderWidth800;uint32_tm_renderHeight600;定义一些参数m_sharpness锐化参数0.3 是一个平衡值。值越大图像越锐利但可能会有伪影值越小图像越平滑m_renderWidth、m_renderHeight原始渲染分辨率800x600HMS_XEG_SpatialUpscaleParameter(XEG_SPATIAL_UPSCALE_SHARPNESS,m_sharpness);设置锐化参数。XEG_SPATIAL_UPSCALE_SHARPNESS表示要设置的是锐化参数。intupscaleScissor[4]{0,0,static_castint(m_renderWidth),static_castint(m_renderHeight)};HMS_XEG_SpatialUpscaleParameter(XEG_SPATIAL_UPSCALE_SCISSOR,upscaleScissor);设置超分的采样区域。upscaleScissor是一个包含 4 个元素的数组前两个是起始坐标 (x, y)从 (0, 0) 开始后两个是宽高等于原始渲染分辨率这意味着超分会处理整个原始图像。第五步执行超分unsignedintupscaleFBO;glBindFramebuffer(GL_FRAMEBUFFER,upscaleFBO);先绑定一个 framebuffer。framebuffer 就像一块画布超分的结果会画到这块画布上。uint32_tm_upscaleWidth1200;uint32_tm_upscaleHeight900;glViewport(0,0,m_upscaleWidth,m_upscaleHeight);glScissor(0,0,m_upscaleWidth,m_upscaleHeight);设置超分后的目标分辨率从 800x600 超分到 1200x900。glViewport设置视口大小glScissor设置裁剪区域。unsignedintupscaleColorBuffer;HMS_XEG_RenderSpatialUpscale(upscaleColorBuffer);最后调用HMS_XEG_RenderSpatialUpscale执行超分。upscaleColorBuffer是原始图像的纹理附件超分算法会读取这个纹理然后把结果写入之前绑定的 framebuffer。超分的工作原理让我用更通俗的语言解释超分是怎么工作的分析原始图像超分算法会分析低分辨率图像的像素分布识别特征找出图像中的边缘、纹理、细节等特征智能放大根据识别出的特征在放大时补充细节锐化处理根据锐化参数对图像进行适度的锐化这个过程是在 GPU 上并行执行的所以速度很快。超分算法的内部处理流程读取低分辨率原始图像分析像素分布识别边缘特征识别纹理特征识别细节特征智能插值放大根据锐化参数进行锐化输出高分辨率图像GPU 超分的整体工作流程如下查询设备是否支持超分设置锐化参数设置采样区域绑定输出 Framebuffer设置目标视口大小调用 RenderSpatialUpscaleGPU 分析原始图像特征智能补充放大后的细节输出高分辨率图像适用场景GPU 超分特别适合以下场景游戏渲染先用低分辨率渲染性能好再超分到高分辨率画质好视频播放把低分辨率视频超分到高分辨率显示图片查看放大图片时保持清晰度注意事项设备支持不是所有设备都支持 GPU 超分一定要先查询扩展锐化参数m_sharpness要根据实际效果来调整。太大会有伪影太小效果不明显分辨率比例超分的倍率不宜过大一般 1.5 到 2 倍比较合适。倍率太大效果会变差性能开销超分本身有性能开销要权衡超分带来的画质提升和性能损失总结GPU 超分是一个很实用的图形优化技术它能在低分辨率渲染的基础上获得接近高分辨率的画质。核心流程查询设备是否支持超分设置超分参数锐化度、采样区域绑定输出 framebuffer调用HMS_XEG_RenderSpatialUpscale执行超分掌握了这些你就能在 HarmonyOS 应用中实现 GPU 趍分让你的应用在性能和画质之间找到最佳平衡。
