Shader 优化 | OpenGL 绘制网格效果

避免图片丢失,建议阅读微信原文:

https://mp.weixin.qq.com/s/FmILdXuy3HMpv8H1Kz_fPw

前几天发布了这样一篇文章:

KodeLife | Shader 实时编辑预览的强大工具使用实践

除了介绍 KodeLife 的使用之外,还附带了一个 Shader 绘制网格效果的代码。

把这篇文章发到技术群里,随机就有大佬指出不足之处,提示说代码还可以进一步优化,并且提供了源码学习。

可见加入一个高质量的技术群是多么重要,哪怕平时不说话,围观大佬们聊天都能学到很多。

现在加入还来得及,尚有余位,详情点击如下链接:

移动端技术交流喊你入群啦~~~

[Read More]

KodeLife | Shader 实时编辑预览的强大工具使用实践

避免图片丢失,建议阅读微信原文:

https://mp.weixin.qq.com/s/6ZMP6Tc_MqggjAXS_GjV2Q

经常有朋友在群里面问想学习 Shader 有什么工具可以推荐?

今天它来了~~~

推荐一款强大的 Shader 实时编辑预览的工具 —— KodeLife

对,它的名字就叫做 KodeLife ,可别看成 KobeLife 了,一个字母之差完全就是两个概念。

KodeLife 的官网地址如下:

https://hexler.net/products/kodelife

贴一张主页封面图:

有需要的同学可以去官网下载安装,它是需要购买 License 的,不过可以免费使用两个月。


[Read More]

LearnOpenGL 源码在 MAC 上的编译与调试

避免图片丢失,建议阅读微信原文:

https://mp.weixin.qq.com/s/Ah8bK4dELT-LDjwSk9dHiQ

学习 OpenGL ,相信肯定有不少人看过这个网站:

https://learnopengl.com/

https://learnopengl.com/

这是它的英文原版网站,后来又有了不同语言的翻译版本,对应中文就是:

https://learnopengl-cn.github.io/

这两个网站对于学习 OpenGL 帮助非常大,既可以用作入门的教材,也可以作为工具书,后续进行查漏补缺。

并且它的内容很全面,除了 OpenGL 基础知识、坐标系统、纹理、Shader、模型加载等,还有高级光照、PBR 等渲染技巧,这些在渲染引擎的开发中都是会用到的,后面会继续和大家分享。

[Read More]

OpenGL 实现视频编辑中的转场效果

避免图片丢失,建议阅读微信原文:

https://mp.weixin.qq.com/s/OuyU_7ieecjdGyDKTx-iFg

转场介绍

转场效果是什么?

转场效果,简单来说就是两段视频之间的衔接过渡效果。

现在拍摄 vlog 的玩家越来越多,要是视频没有一两个炫酷的转场效果,都不好意思拿出来炫酷了。

那么如何在视频编辑软件中实现转场效果呢?

这里提供使用 OpenGL 实现视频转场的一个小示例,我们可以通过自定义 GLSL 来实现不同的转场效果。

以在 Android 平台上作为演示,但其实不管是 Android 还是 iOS,实现的原理都是一样的。

首先要有两段视频,视频 A 和视频 B,先播放视频 A 后播放视频 B,中间有一段过程称为 C ,C 就是视频 A、B 做转场动画的时间段。

如下所示:

transition_model.jpg

播放器按照时间顺序,从 A -> C -> B 的播放,这样就有了转场的效果。

[Read More]

OpenGL 实践之贝塞尔曲线绘制

避免图片丢失,建议阅读微信原文:

https://mp.weixin.qq.com/s/m7BMF1dSiJ5BeHTU1etDqw

说到贝塞尔曲线,大家肯定都不陌生,网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图。

以下两个是比较经典的动图了。

二阶贝塞尔曲线:

三阶贝塞尔曲线:


由于在工作中经常要和贝塞尔曲线打交道,所以简单说一下自己的理解:

[Read More]

图像库 libjpeg-turbo 编译与实践

避免图片丢失,建议阅读微信原文:

https://mp.weixin.qq.com/s/x-dTLowXcqysnLxZ0BGA2g

在之前的文章中已经陆续介绍了 stb_image、libpng 的使用,相关链接如下:

简单易用的图像解码库介绍 —— stb_image

https://glumes.com/post/android/stb-image-introduce/

图像库 libpng 编译与实践

https://glumes.com/post/opengl/libpng-compile-and-practice/

而今天的主题就是 libjpeg-turbo 。

它的官网地址如下:

https://libjpeg-turbo.org/

它的 github 地址如下:

https://github.com/libjpeg-turbo/libjpeg-turbo

[Read More]

Android NDK 开发 —— 从 Assets 文件夹加载图片并上传纹理

在 OpenGL 开发中,我们要渲染一张图片,通常先是得到一张图片对应的 Bitmap ,然后将该 Bitmap 作为纹理上传到 OpenGL 中。在 Android 中有封装好的 GLUtils 类的 texImage2D 方法供我们调用。

    public static void texImage2D(int target, int level, int internalformat,
            Bitmap bitmap, int type, int border)

该方法的底层原理实际上也是解析了该 Bitmap ,得到了 Bitmap 所有的像素数据,类似于 Android NDK 关于 Bitmap 操作的 AndroidBitmap_lockPixels 方法,如果你不太了解该方法,可以参考这篇文章:Android JNI 之 Bitmap 操作

得到了所有像素数据之后,实际最终还是调用了 OpenGL 的 glTexImage2D 来实现纹理上传。当然,如果可以直接得到所有数据,也不需要走解析 Bitmap 这一步了,这种场景最常见的就是把相机作为输入了。

[Read More]

OpenGL 之 帧缓冲 使用实践

避免图片丢失,建议阅读微信原文:

https://mp.weixin.qq.com/s/l5eYzkYAzR-m21-iYBoyCw

帧缓冲(Framebuffer Object),简称 FBO,在渲染绘制中, 图像最终都是绘制到 FBO 上的,一般都是默认的 FBO 上,也就是我们的屏幕。

除此之外,还可以创建自己的 FBO,用来作为绘制的载体,当在自己的 FBO 上绘制好了之后,可以再把绘制内容显示到屏幕上,实现一个双缓冲的绘制。

FBO 实际上是由颜色附件、深度附件、模板附件组成的,作为着色器各方面(一般包括颜色、深度、深度值)绘制结果存储的逻辑对象。

[Read More]