本文分别介绍下在应用层和 C++ 层常用的文字渲染方式。...FreeType 也是一个非常受欢迎的跨平台字体库，支持 Android、 iOS、 Linux 等操作系统。...FreeType 官网地址： https://www.freetype.org/ FreeType 编译 本小节主要介绍使用 NDK 编译 Android 平台使用的 FreeType 库。...首先在官网上下载最新版的 FreeType 源码，然后新建一个 jni 文件夹，将源码放到 jni 文件夹里，目录结构如下所示: [FreeType 目录结构] 新建构建文件 Android.mk 和...glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); 生成一个 VAO 和一个 VBO ，用于管理的存储顶点、
本文分别介绍下在应用层和 C++ 层常用的文字渲染方式。 ? OpenGL ES 文字渲染 ?...FreeType 也是一个非常受欢迎的跨平台字体库，支持 Android、 iOS、 Linux 等操作系统。...FreeType 编译 本小节主要介绍使用 NDK 编译 Android 平台使用的 FreeType 库。...FreeType 目录结构 新建构建文件 Android.mk 和 Application.mk。...glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); 生成一个 VAO 和一个 VBO ，用于管理的存储顶点
)：FFmpeg + OpenSLES 实现音频解码播放 FFmpeg 开发(04)：FFmpeg + OpenGLES 实现音频可视化播放 前面 Android FFmpeg 开发系列文章中，我们已经利用...FFmpeg 的解码功能和 ANativeWindow 的渲染功能，实现了的视频的解码播放。...视频解码播放和视频滤镜 1 OpenGL ES 渲染解码帧 经过上面几节的介绍，我们对音视频的解码过程已经比较熟悉了。本文要用 OpenGL 实现视频的渲染，这里再回顾下视频的解码流程： ?...渲染效果 2 添加视频滤镜 这里又回到了 OpenGL ES 开发领域，对这一块感兴趣的同学可以参考这篇Android OpenGL ES 从入门到精通系统性学习教程。...动态网格滤镜 缩放和旋转 我们在 GLSurfaceView 监听用户的滑动和缩放手势，控制 OpenGLRender 的变换矩阵，从而实现视频图像的旋转和缩放。 ? 视频图像的旋转和缩放
该文章首发于微信公众号：字节流动 FFmpeg 开发系列连载： FFmpeg 开发(01)：FFmpeg 编译和集成 FFmpeg 开发(02)：FFmpeg + ANativeWindow 实现视频解码播放...[FFmpeg + OpenGLES 实现音频可视化播放] 关于音频的可视化，在旧文中，我们曾经实现过将 Android AudioRecorder 采集的实时音频单通道 PCM 数据用 OpenGL...具体的渲染过程和细节，请移步这篇文章，代码已开源： OpenGL ES 实现可视化实时音频 提取一个通道的音频数据 在上一篇文章，我们构建 OpenSLES 播放器时，对数据格式的定义如下： SLDataFormat_PCM...pShort = pByte + i * 4 + 2; //右声道值 short rightChannelValue = *pShort; } 另外需要注意的是，数据的存储方式分为大端序和小端序...由于前期已经系统地阐述了 OpenGL ES 相关知识点，这里就不做展开叙述，详细内容请参考： Android OpenGL ES 从入门到精通系统性学习教程 利用 OpenGL 渲染音频数据，本质上就是根据音频数据的值去构建一组如下图所示的网格
FFmpeg 开发系列连载： FFmpeg 开发(01)：FFmpeg 编译和集成 FFmpeg 开发(02)：FFmpeg + ANativeWindow 实现视频解码播放 FFmpeg 开发(03)...FFmpeg + OpenGLES 实现音频可视化播放 关于音频的可视化，在旧文中，我们曾经实现过将 Android AudioRecorder 采集的实时音频单通道 PCM 数据用 OpenGL 渲染成柱状图...具体的渲染过程和细节，请移步这篇文章，代码已开源： OpenGL ES 实现可视化实时音频 提取一个通道的音频数据 在上一篇文章，我们构建 OpenSLES 播放器时，对数据格式的定义如下： SLDataFormat_PCM...pShort = pByte + i * 4 + 2; //右声道值 short rightChannelValue = *pShort; } 另外需要注意的是，数据的存储方式分为大端序和小端序...由于前期已经系统地阐述了 OpenGL ES 相关知识点，这里就不做展开叙述，详细内容请参考： Android OpenGL ES 从入门到精通系统性学习教程 利用 OpenGL 渲染音频数据，本质上就是根据音频数据的值去构建一组如下图所示的网格
, m_UboId); glBufferData(GL_UNIFORM_BUFFER, 3 * sizeof(glm::mat4), nullptr, GL_STATIC_DRAW); glBindBuffer...glBindBuffer(GL_UNIFORM_BUFFER, m_UboId); glBufferSubData(GL_UNIFORM_BUFFER, 0, sizeof(glm::mat4), &m_ProjectionMatrix...[0][0]); glBufferSubData(GL_UNIFORM_BUFFER, sizeof(glm::mat4), sizeof(glm::mat4), &m_ViewMatrix[0][0]...); glBufferSubData(GL_UNIFORM_BUFFER, 2 *sizeof(glm::mat4), sizeof(glm::mat4), &m_ModelMatrix[0][0]);...引入的概念，因此在使用时首先要检查 OpenGL ES 的版本，Android 方面需要保证 API >= 24 。
OpenGL ES 3.0 编程中， VBO 和 EBO 的出现就是为了解决这个问题。...[0][0]); glBufferSubData(GL_UNIFORM_BUFFER, sizeof(glm::mat4), sizeof(glm::mat4), &m_ViewMatrix[0][0]...); glBufferSubData(GL_UNIFORM_BUFFER, 2 *sizeof(glm::mat4), sizeof(glm::mat4), &m_ModelMatrix[0][0]);...帧缓冲区对象，渲染缓冲区对象和纹理 TBO 纹理缓冲区对象，即 TBO（Texture Buffer Object），是 OpenGL ES 3.2 引入的概念，因此在使用时首先要检查 OpenGL ES...的版本，Android 方面需要保证 API >= 24 。
Android Canvas 绘制贝塞尔曲线 Android 自定义 View 时，我们知道 Canvas 类有专门的 API 可以很方便地绘制贝塞尔曲线，但是通常性能较差，更不方便与图像一起处理，因为本文的目的是利用贝塞尔曲线处理图像...绘制贝塞尔曲线 OpenGL ES 的基本绘制单位是点、线和三角形，既然可以绘制点，只需要基于上述公式计算出点，然后将其绘制出来，即可得到我们想要的贝塞尔曲线。...= 4.0f;//设置点的大小 gl_Position = u_MVPMatrix * pos; } //片段着色器 #version 300 es precision mediump float...)，防止最先绘制的曲边扇形被覆盖，了解 OpenGLES 混合可以参考旧文Android OpenGL ES 3.0 开发（十二）：混合。...参考 Sound Visualization on Android: Drawing a Cubic Bezier with OpenGL ES
Android 设备重力传感器数据的获取方法： @Override protected void onResume() { super.onResume(); mSensorManager.registerListener...使用 Native 层的变换矩阵，用于控制图像位移和缩放。...; v_texCoord = a_texCoord; } //片段着色器 #version 300 es precision highp float; in vec2 v_texCoord...另外，参考效果图后，为了使白斑变的更大更亮，我们还需要用到混合和光照。..., 6, GL_UNSIGNED_SHORT, (const void *)0); //关闭混合 glDisable(GL_BLEND); 添加模糊和混合之后的绘制结果如下，看着效果符合预期，顿时有那么一点点成就感
OpenGL ES 粒子（Particles） ?...粒子爆炸 NDK OpenGL ES 3.0 开发（十三）：实例化（Instancing）一文中我们了解到 OpenGL ES 实例化（Instancing）是一种只调用一次渲染函数就能绘制出很多物体的技术...所以，粒子系统天然适合用OpenGL ES 实例化（Instancing）实现。...因为每次实例化渲染粒子时，都要更新 a_offset和 a_particlesColor实例化数组，所以设置其对应的 VBO 为动态类型 GL_DYNAMIC_DRAW 。...::vec3 maindir = glm::vec3(0.0f, 2.0f, 0.0f); glm::vec3 randomdir = glm::vec3( (rand(
[OpenGL ES 文字渲染进阶--渲染中文字体] 旧文 OpenGL ES 文字渲染方式有几种？ 一文中分别介绍了 OpenGL 利用 Canvas 和 FreeType 绘制文字的方法。...FreeType 官网地址： https://www.freetype.org/ 关于 FreeType 开源库多个平台的编译方法，同样请参考旧文 OpenGL ES 文字渲染方式有几种？...值得反复强调的地方，针对 OpenGL ES 灰度图要使用的纹理格式是 GL_LUMINANCE 而不是 GL_RED 。...glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); 生成一个 VAO 和一个 VBO ，用于管理的存储顶点、..., GL_NONE); glBindVertexArray(GL_NONE); 每个 2D 方块需要 6 个顶点，每个顶点又是由一个 4 维向量（一个纹理坐标和一个顶点坐标）组成，因此我们将VBO 的内存分配为
旧文 OpenGL ES 文字渲染方式有几种？ 一文中分别介绍了 OpenGL 利用 Canvas 和 FreeType 绘制文字的方法。...FreeType 官网地址： https://www.freetype.org/ 关于 FreeType 开源库多个平台的编译方法，同样请参考旧文 OpenGL ES 文字渲染方式有几种？...值得反复强调的地方，针对 OpenGL ES 灰度图要使用的纹理格式是 GL_LUMINANCE 而不是 GL_RED 。...glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); 生成一个 VAO 和一个 VBO ，用于管理的存储顶点、纹理坐标数据..., GL_NONE); glBindVertexArray(GL_NONE); 每个 2D 方块需要 6 个顶点，每个顶点又是由一个 4 维向量（一个纹理坐标和一个顶点坐标）组成，因此我们将VBO 的内存分配为
的缩写，它是一个只有头文件的库，也就是说我们只需包含对应的头文件就行了，不用链接和编译。...GLM 可以在 Github 上下载，把头文件的根目录复制到你的includes文件夹，然后你就可以使用这个库了。...通过这四个参数我们定义了近平面和远平面的大小，然后第五和第六个参数则定义了近平面和远平面的距离。这个指定的投影矩阵将处于这些 x，y，z 范围之间的坐标转换到标准化设备坐标系中。 透视投影 ?...第三和第四个参数设置了平截头体的近和远平面。我们经常设置近距离为 0.1 而远距离设为 100.0 。所有在近平面和远平面的顶点且处于平截头体内的顶点都会被渲染。...OpenGL 3D 变换实现 实现 OpenGL 3D 效果最简单的方式是在顶点着色器中将顶点坐标与 MVP 变换矩阵相乘： #version 300 es layout(location = 0) in
编译参考：Assimp编译安装 图省事，mac上开发直接用brew install assimp，iOS/Android平台需要编译对应的库，需要自己编译 源码编译有两处坑： 2.1 Ver.../glm.hpp> #include glm/gtc/matrix_transform.hpp> #include glm/gtc/type_ptr.hpp> #include "Shader.h..., glm::radians(55), glm::vec3(1.0f, 0.0f, 0.0f)); model = glm::scale(model, glm::vec3(1.0f, 1.0f...(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T..., GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
转载请以链接形式标明出处： 本文出自:103style的博客 本文操作以 Android Studio 3.5 版本为例 ---- NDK开发文章汇总 ---- 功能介绍 参考 OpenGL...ES 3.0 Hello_Triangle 通过 JNI 调用 OpenGL ES 3.0 绘制三角形 并 改变背景色。...在 AndroidManifest 中添加Open GL ES版本声明： android="http://schemas.android.com/apk/res/android...return() elseif (${ANDROID_PLATFORM_LEVEL} LESS 18) add_definitions("-DDYNAMIC_ES3") set(OPENGL_LIB...编写 顶点着色器 和 片段着色器 源码： /** * 顶点着色器源码 */ auto gl_vertexShader_source = "#version 300 es\n"
OpenGL ES 混合 OpenGL ES 混合本质上是将 2 个片元的颜色进行调和，产生一个新的颜色。...OpenGL ES 混合发生在片元通过各项测试之后，准备进入帧缓冲区的片元和原有的片元按照特定比例加权计算出最终片元的颜色值，不再是新（源）片元直接覆盖缓冲区中的（目标）片元。...启用 OpenGL ES 混合使用 glEnable(GL_BLEND);。 然后通过 glBlendFunc;设置混合的方式，其中 sfactor 表示源因子，dfactor 表示目标因子。...4 个通道较小的值； GL_MAX：混合结果的 4 个通道值分别取 2 元素中 4 个通道较大的值； 我们可以为 RGB 和 alpha 通道各自设置不同的混合因子，使用 glBlendFuncSeperate..., 0, 0, 1.0, glm::vec3(2.0f, 0.0f, 0.0f), ratio); glUniformMatrix4fv(m_MVPMatLoc, 1, GL_FALSE, &m_MVPMatrix
OpenGL ES 实例化 OpenGL ES 实例化（Instancing）是一种只调用一次渲染函数就能绘制出很多物体的技术，可以实现将数据一次性发送给 GPU ，告诉 OpenGL ES 使用一个绘制函数...OpenGL ES 着色器中有一个与实例化绘制相关的内建变量 gl_InstanceID。...效果图 利用内建变量 gl_InstanceID和偏移数组进行实例化绘制还存在一个问题，那就是着色器中 uniform 类型数据存在上限，也就是 u_offsets 这个数组的大小有限制，最终导致我们绘制的实例存在上限...) { outColor = texture(s_TextureMap, v_texCoord); } 设置 VAO 和...(GL_ARRAY_BUFFER, m_VboIds[1]); glBufferData(GL_ARRAY_BUFFER, sizeof(glm::vec3) * 125, &translations[
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
