android-gpuimage-plus icon indicating copy to clipboard operation
android-gpuimage-plus copied to clipboard

Explanation of special effect parameters of Histogram and Waveform and the desired effect

Open xiaodi86 opened this issue 3 years ago • 54 comments

已按照实现其他特效的步骤,先新建了cgeHistogramFilter.h(cgeWaveformFilter.h)和cgeHistogramFilter.cpp(cgeWaveformFilter.cpp)文件,然后在cge.h,cgeAdvancedEffects.h,cgeAdvancedEffects.cpp,cgeDataParsingEngine.cpp,Android.mk进行配置,最后ndk-build并在MainActivity中的EFFECT_CONFIGS[]数组配置相应参数。

.h和.cpp文件中只配置了需要设置的参数与相应注释,及想要效果的说明。

xiaodi86 avatar Dec 26 '22 01:12 xiaodi86

在以center(x,y)为原点,宽xValue(value1),高yValue(value2),背景色为bgColor(0.0,0.0,0.0)的矩形框中绘制亮度表(直方图)或亮度波形图。如何在这个库的基础上使用GLSL实现?

xiaodi86 avatar Dec 26 '22 02:12 xiaodi86

好的, 你想做的大概了解了。 其中 wave form 这个效果由于需要通过颜色来选择绘制的位置, 应该通过 Compute Shader 来做. 然后 Compute Shader 需要 GLES3.1 及以上的版本才支持, 然后 GLES3.1+ 基本上能覆盖绝大多数设备(在国内应该能覆盖 98%的安卓设备, 在国际范围内的话可以参考这个文档 https://developer.android.com/about/dashboards#OpenGL). image

这个库有一段时间没更新了,我最近抽空大概更新一下, 支持一下 compute shader 就可以实现了。 对于不支持 compute shader 的设备, 你可以参考 "cgeColorMappingFilter" 这个效果的实现逻辑, 去读取 pixel 像素数据, 然后实现你想要的效果. 也就是说, wave form 这个效果, 最佳写法是用 compute shader 实现, 但为了兼容低端机, 你还需要一个基于 pixel 数据的版本. 你也可以只实现基于 pixel 数据的版本, 也能满足需求。 至于 histogram 这个效果, 涉及到频率统计, 无法用gpu计算, 同样可以参考 "cgeColorMappingFilter" 这个效果的逻辑来实现, 读取像素数据, 进行一些统计处理, 之后输出到图像。

然后 "cgeColorMappingFilter" 这个效果只是演示, 写得比较粗糙, 获取像素数据可以用 PBO swap 加速一下, 这个我近期优化一下。 最后, 你想实现你的两个效果的话, 可以着手参考 "cgeColorMappingFilter" 这个效果, 获取像素数据来处理了。

wysaid avatar Dec 27 '22 16:12 wysaid

总结一下就是: 你先通过参考 "cgeColorMappingFilter" 的使用行为, 自行尝试实现一下 这两个效果吧。 我这边近期抽空优化一下项目结构, 大致支持一下 Compute Shader, 实现这个 wave form 效果 (仅支持GLES3.1+的安卓设备). 然后像素读取这块也抽一个简单的封装,有类似需求的可以简单快速地使用。

wysaid avatar Dec 27 '22 16:12 wysaid

好的,感谢回复,我先尝试参考 "cgeColorMappingFilter" 的使用实现一下。 当前我使用的数据直接在VideoPlayerGLSurfaceView用glReadPixels方法获取数据后只取红色数据当做亮度数据使用,然后通过数据的计算转换用画笔工具画出了两种特效,但会比较卡。

xiaodi86 avatar Dec 28 '22 06:12 xiaodi86

那你可以先给出你的比较卡的实现, 然后我会在你的代码基础上告诉你如何优化

wysaid avatar Dec 28 '22 12:12 wysaid

感谢回复,效果已更新到我的分支上,显示有点慢,效果比较卡。 另外发现一篇文章(https://www.coder.work/article/3304789)是关于C++实现histgram特效的,其中glGenVertexArrays()等方法也要用到你上面说的GLES30才能调用。

xiaodi86 avatar Dec 29 '22 04:12 xiaodi86

感谢回复,效果已更新到我的分支上,显示有点慢,效果比较卡。 另外发现一篇文章(https://www.coder.work/article/3304789)是关于C++实现histgram特效的,其中glGenVertexArrays()等方法也要用到你上面说的GLES30才能调用。

跟这个没太大关系. 还没来得及看, 待会看看你这个。

wysaid avatar Dec 31 '22 07:12 wysaid

元旦偷懒没来得及看这个。 刚才试着跑了一下, 发现有编译问题:

image

在之前的版本是没有这个问题的。 你看看你那边是否也有类似的问题?

wysaid avatar Jan 02 '23 16:01 wysaid

感谢回复。你好,我将Histogram branch下载下来运行没有遇到类似问题,然后将代码更新到你的最新更新optimize/better_file_structure分支上也没有遇到类似问题。

xiaodi86 avatar Jan 03 '23 01:01 xiaodi86

你好,请问一下,我这种实现方式的卡顿问题有改进的余地吗?能否提供改进意见?另外你上面提到通过 Compute Shader 来做,我研究了下没有多大进展,主要是我是做Java开发的对C++和现在的library库不太熟悉,是否可以提供实现方法?感谢了!

xiaodi86 avatar Jan 03 '23 01:01 xiaodi86

你好,请问一下,我这种实现方式的卡顿问题有改进的余地吗?能否提供改进意见?另外你上面提到通过 Compute Shader 来做,我研究了下没有多大进展,主要是我是做Java开发的对C++和现在的library库不太熟悉,是否可以提供实现方法?感谢了!

如果是卡顿的话, 肯定是可以优化的, 引入 compute shader 会对这个项目改动特别大, 我还在另一个分支操作。 你现有代码还没来得及看, 我这两天尽快看看哈。

wysaid avatar Jan 03 '23 08:01 wysaid

刚看了下你的代码, 你的代码是直接java写的, 并不是基于本仓库的案例来的?

wysaid avatar Jan 03 '23 15:01 wysaid

写了一下 wave form 那个, 在 feature/histogram 分支。 (commit id: 933f907eb4a3e1eb5e442395ac2884e57db54e42 ) 切到 feature/histogram 这个分支, 然后 执行一下 buildJNI 直接跑起来就可以了。 有一点缺陷, shader 并发写入一张图同一个位置的时候, 会有抢占. 你可以自己试一下 atomicAdd 之类的来解决. 另一个 histogram 的也比较简单, 需要统计, 用一段 buffer 一直 atomic add 就统计出来了。 之后拿这个buffer来绘制你想要的图形就可以。这个自己照着例子实现一下吧。

wysaid avatar Jan 03 '23 19:01 wysaid

感谢你的帮助。项目我跑起来了,确实存在位置被抢占,绘满整张图的情况。AtomicAdd原子操作等概念第一次听说,查询了一下资料一阵头大,用来解决这里问题,也是一脸茫然。老是求助你帮忙,耽搁你休息时间,实在不好意思,但这里确实超出了我的能力范围了。感谢这段时间的无私帮助,辛苦了。

xiaodi86 avatar Jan 04 '23 03:01 xiaodi86

嗯, 你先试试吧。 一回生二回熟, 学习才能进步嘛。 如果还有问题可以在这里补充。

wysaid avatar Jan 04 '23 04:01 wysaid

大师兄,你好!还是要麻烦你帮忙了,我这C++和GLSL半吊子水平,这两天查了不少资料还是不知道如何将原子操作函数(atomicAdd())与这个案例结合起来解决问题,所以最终还是要麻烦大师兄抽空帮忙完善波形图特效,学习实践就用另一个特效,有个完整的案例参考边学边实现肯定会更有效果。麻烦你了,感谢!

xiaodi86 avatar Jan 06 '23 12:01 xiaodi86

大师兄,你好!还是要麻烦你帮忙了,我这C++和GLSL半吊子水平,这两天查了不少资料还是不知道如何将原子操作函数(atomicAdd())与这个案例结合起来解决问题,所以最终还是要麻烦大师兄抽空帮忙完善波形图特效,学习实践就用另一个特效,有个完整的案例参考边学边实现肯定会更有效果。麻烦你了,感谢!

可以的, 不过最近事情比较多, 估计得稍微多等几天了。

wysaid avatar Jan 09 '23 15:01 wysaid

大师兄好,发现波形图特效还存在两个问题:1、绘制出的波形图的颜色从上到下呈现由白向黑渐变问题。2、第二次点击进入波形图特效,背景色不再是第一次进入时的全黑色,而是进入时视频画面的缩小图。第一个问题将imageStore(outputImage, newLoc, uvec4(newLum, newLum, newLum, 255));改为imageStore(outputImage, newLoc, uvec4(255, 255, 255, 255));可以解决。第二个问题就不知道该如何解决了。请教大师兄了!

xiaodi86 avatar Jan 31 '23 07:01 xiaodi86

大师兄好,发现波形图特效还存在两个问题:1、绘制出的波形图的颜色从上到下呈现由白向黑渐变问题。2、第二次点击进入波形图特效,背景色不再是第一次进入时的全黑色,而是进入时视频画面的缩小图。第一个问题将imageStore(outputImage, newLoc, uvec4(newLum, newLum, newLum, 255));改为imageStore(outputImage, newLoc, uvec4(255, 255, 255, 255));可以解决。第二个问题就不知道该如何解决了。请教大师兄了!

没太理解你说的问题, 录个屏看看?

wysaid avatar Jan 31 '23 13:01 wysaid

大师兄好,问题描述及录屏已通过邮件发送到你的[email protected]邮箱,希望能帮忙完善,感谢!

xiaodi86 avatar Feb 01 '23 06:02 xiaodi86

大师兄好,问题描述及录屏已通过邮件发送到你的[email protected]邮箱,希望能帮忙完善,感谢!

看了下, 你这个是在播放器页面, 我不知道你怎么写的。 你基于这个 https://github.com/wysaid/android-gpuimage-plus/pull/512 的代码复现一下你的问题吧. 就是 feature/histogram 这个分支.

wysaid avatar Feb 01 '23 07:02 wysaid

或者就在你这个分支复现一下这个问题, 提上来, 我按你的操作流程试试

wysaid avatar Feb 01 '23 07:02 wysaid

大师兄我什么都没改动啊(原始feature/histogram分支波形图特效是FILTER1,录像中是FILTER7)。详细步骤: 1、下载 feature/histogram分支,解压后 在cmd中执行ndk-build命令buildJNI了一下, 2、用AndroidStudio打开,运行到手机上,点击应用会崩溃,把NativeLibraryLoader类中的System.loadLibrary("ffmpeg");和CGEFFmpegNativeLibrary.avRegisterAll();两行注销后,重新运行到手机点击应用打开 3、点击Video Player Demo按钮进入播放器页面,点击FILTER1按钮,出现波形图,点击FILTER2按钮后,再次点击FILTER1就是录屏1录像里的情况。

4、将cgeWaveformFilter.cpp文件中的代码imageStore(outputImage, newLoc, uvec4(newLum, newLum, newLum, 255));改为imageStore(outputImage, newLoc, uvec4(255, 255, 255, 255));重新buildJNI一下,再运行程序,重复第三步操作就是录屏2录像里的情况.

xiaodi86 avatar Feb 01 '23 08:02 xiaodi86

直接运行下载feature/histogram分支项目的效果录像和经过第四步代码修改后的效果录像,还有feature/histogram分支项目修改后的源码,补发到了[email protected]邮箱。感觉剩余的两个bug都与内存位置被抢占有关。

xiaodi86 avatar Feb 01 '23 09:02 xiaodi86

没遇到你这个问题, 你用的什么手机?

wysaid avatar Feb 01 '23 13:02 wysaid

你补发的代码也不是最新的, 建议更新一下

wysaid avatar Feb 01 '23 15:02 wysaid

既然你把亮度改到了255, 那只需要 限制中间结果的高到 256就没问题了。 稍微改了一下, 应该就是你想要的吧。 基于最新的再看看, 还有啥问题再说。

wysaid avatar Feb 01 '23 16:02 wysaid

大师兄好,已更新到最新版本,还是存在那个位置抢占问题,就是一段时间后会画满整张图片,请问这个问题是不是短期内很难解决啊?

xiaodi86 avatar Feb 02 '23 02:02 xiaodi86

大师兄好,已更新到最新版本,还是存在那个位置抢占问题,就是一段时间后会画满整张图片,请问这个问题是不是短期内很难解决啊?

我这边没有遇到你说的问题, 所以我在问你用的什么手机。 你多用几个手机测一下。

wysaid avatar Feb 02 '23 15:02 wysaid

大师兄好,我刚用四种手机测试了,测试情况如下: 魅族 MX6 存在位置抢占问题,就是一段时间后会画满整张图片

荣耀Play5 magic hjc-an90 播放器页面崩溃,报错 2023-02-03 09:31:45.010 21954-21954/? E/libc: Access denied finding property "persist.device_config.runtime_native.use_app_image_startup_cache" 2023-02-03 09:31:45.010 21954-21954/? E/.wysaid.cgeDem: LoadAppImageStartupCache enabled : 1 2023-02-03 09:31:45.010 21954-21954/? E/.wysaid.cgeDem: Unknown bits set in runtime_flags: 0x8000

Redmi Note 11 播放器页面崩溃,报错 2023-02-03 09:50:22.781 24439-24464/org.wysaid.cgeDemo E/libMiGL: libmigl:This GPU version is note support Variable Shading Rate 2023-02-03 09:50:22.797 24439-24464/org.wysaid.cgeDemo E/OpenGLRenderer: fbcNotifyFrameComplete error: undefined symbol: fbcNotifyFrameComplete 2023-02-03 09:50:22.797 24439-24464/org.wysaid.cgeDemo E/OpenGLRenderer: fbcNotifyNoRender error: undefined symbol: fbcNotifyNoRender

小米11LE
可以正常显示特效,没有问题。

xiaodi86 avatar Feb 03 '23 02:02 xiaodi86