随笔分类 - OpenGL ES
本专栏收录了OpenGL ES相关技术栈
摘要:
1 前言 本文将介绍 GLSL 中数据类型、数组、结构体、宏、运算符、向量运算、矩阵运算、函数、流程控制、精度限定符、变量限定符(in、out、inout)、函数参数限定符等内容,另外提供了一个 include 工具,方便多文件管理 glsl 代码,实现代码的精简、复用。 Unity 中 S
阅读全文

摘要:
1 前言 渲染管线是指图形渲染流程,涉及到的概念非常多,主要包含图元、片段、光栅化、空间、变换、裁剪、着色器、片段测试、混合等。渲染管线主体流程如下: 为方便读者理解渲染管线,本文将先介绍顶点数据、图元与片段、空间与变换、着色器等渲染管线基础概念,再介绍渲染管线、片段测试、混合等内容。 2
阅读全文

摘要:
1 前言 Blinn改进的冯氏光照模型 中只展示了光照效果,本文将进一步展示阴影效果。 绘制阴影,需要用到深度纹理,即从光源角度看模型并绘制一张纹理图,纹理图的颜色代表了模型上的点离光源的深度,只有离光源较近的点才会绘制到深度纹理图中,被遮挡的点不会被绘制到深度纹理图中。判断地平面中的点是否
阅读全文

摘要:
1 前言 光照元素主要有环境光(ambient)、漫反射光(diffuse)、镜面反射光(specular),光照模型主要有冯氏模型和 Blinn 改进的冯氏模型,两者区别在与镜面反射光的计算,冯氏模型根据反向量和观察向量计算镜面反射光,Blinn 改进的冯氏模型根据半向量和法向量计算镜面反射光
阅读全文

摘要:
1 前言 FBO离屏渲染 中使用 GLSurfaceView 来驱动 Renderer 渲染图片,为了隐藏 GLSurfaceView,将其设置为透明的,并且宽高都设置为1。本文将使用 EGL 代替 GLSurfaceView 生成 OpenGL ES 的渲染环境,实现离屏渲染,将渲染后的图片显
阅读全文

摘要:
1 前言 OpenGL 默认把 framebuffer 当作渲染目的地,它由窗口系统创建并管理。应用程序也可以创建额外非可显示的 framebuffer object(FBO),以区别窗口系统提供的 framebuffer。OpenGL 应用程序可以重定向渲染目的地,让它输出到 FBO 而不是窗
阅读全文

摘要:
1 前言 ValueAnimator 基于 Choreographer 的 frame callback 机制,周期性(约16.7ms,与屏幕帧率相关)执行其 doAnimationFrame() 方法,回调监听器中相应方法,刷新 UI 实现动画效果。 ValueAnimator 是 And
阅读全文

摘要:
1 前言 正方形图片贴到圆形上 中将正方形图片上的纹理映射到圆形模型上,凸镜贴图 中介绍了将圆形图片上的纹理映射到凸镜模型上。如果将原图片逐渐变为凸镜效果,中间的变化过程又是什么样的? 图片的纹理中心为 tc,图片中任意一点记为 t,tc 和 t 映射到凸镜模型中的坐标分别为 vc 和 v,
阅读全文

摘要:
1 前言 MVP矩阵变换 中主要介绍了模型变换(平移、旋转、对称、缩放)和观测变换基本原理,本文将介绍透视变换的基本原理。 如下图,近平面和远平面间棱台称为视锥体,表示可见区域范围,视锥体以外的空间将被裁剪丢弃,视锥体内的模型通过透视变换投影到近平面上,近平面上得到的平面图形就是屏幕上要显示
阅读全文

摘要:
1 前言 正方形图片贴到圆形上 中将正方形图片上的纹理映射到圆形模型上,同理,也可以将圆形上的纹理映射到凸镜的球形曲面上。如下图,最左边的竖条是原图片的截面(纹理坐标),最右边的竖条是变换后的顶点模型截面(顶点坐标)。 原图如下: 读者如果对 OpenGL ES 不太熟悉,请回顾以下内容
阅读全文

摘要:
1 前言 纹理贴图 中介绍了将矩形图片贴到矩形模型上,本文将介绍:在不裁剪图片的情况下,将正方形的图片贴到圆形模型上。 思考:实数区间 [0, 1] 与 [0, 2] 的元素可以建立一一映射关系么?答案是肯定的,如:y=2x、y=2x^2、y=2e^x/e^2、y=2ln(x+1)/ln2、
阅读全文

摘要:
1 前言 本文主要介绍使用 OpenGL ES 绘制立方体,并实现手动触摸事件控制立方体旋转。 为方便控制触摸旋转,假设旋转轴始终在 xoy 平面上,设 z 轴的方向向量 u = (0, 0, 1),触摸方向向量为 v(起点为ACTION_DOWN 时坐标,终点 ACTION_MOVE 时坐
阅读全文

摘要:
1 前言 在立方体贴图(6张图)中,绘制了一个立方体,贴了 6 张图,本文的魔方案例,将实现绘制 27个立方体,贴 162 张图。贴图图片如下: 说明:inside.png 为魔方内部色块,用粉红色块代替白色块是为了凸显白色线框。 读者如果对 OpenGL ES 不太熟悉,请回顾以下内容
阅读全文

摘要:
1 前言 本文通过一个立方体贴图的例子,讲解三维纹理贴图的应用,案例中使用 6 张不同的图片给立方体贴图,图片如下: 本文涉及到的知识点主要包含:三维绘图、MVP 矩阵变换、纹理贴图,读者如果对 OpenGL ES 不太熟悉,请回顾以下内容: 绘制三角形 绘制立方体 MVP矩阵变换 纹理贴图
阅读全文

摘要:
1 前言 纹理贴图是指:将图片贴在模型的表面。 纹理贴图的本质是:将图片划分为一系列三角形,使得图片顶点序列与模型顶点序列中的顶点一一对应,对于模型中任意三角形内部的坐标和图片中对应三角形内部的坐标,可以通过插值,建立一一对应关系,模型中任意位置的颜色由其对应的图片位置的颜色填充。 本文
阅读全文

摘要:
1 前言 本文主要介绍 MVP 矩阵变换,其本质是线性变换,应用见→绘制立方体。 Model:模型变换,施加在模型上的空间变换,包含平移变换(translateM)、旋转变换(rotateM)、对称变换(transposeM)、缩放变换(scaleM); View:观测变换,施加在观测点上的变换
阅读全文

摘要:
1 前言 本文主要介绍使用 OpenGL ES 绘制立方体,读者如果对 OpenGL ES 不太熟悉,请回顾以下内容: 绘制三角形 绘制彩色三角形 绘制正方形 绘制圆形 在绘制立方体的过程中,主要用到了 MVP (Model View Projection)矩阵变换。 Model:模型变换,
阅读全文

摘要:
1 前言 【OpenGL ES】绘制三角形 中介绍了绘制三角形的方法,【OpenGL ES】绘制正方形中介绍了绘制正方形的方法,本文将介绍绘制圆形的方法。 OpenGL 以点、线段、三角形为图元,没有提供绘制圆形的接口。要绘制圆形边框,必须通过割圆法逼近圆形;要绘制圆形的内部,必须通过三角形
阅读全文

摘要:
1 前言 【OpenGL ES】绘制三角形 中介绍了绘制三角形的方法,本文将介绍绘制正方形的方法。 OpenGL 以点、线段、三角形为图元,没有提供绘制正方形内部的接口。要绘制正方形内部,必须通过三角形拼接而成,如下图,是通过GL_TRIANGLE_FAN 模式绘制正方形。 绘制的坐标点
阅读全文

摘要:
1 前言 【OpenGL ES】绘制三角形 中介绍了绘制普通三角形的方法,本文将介绍绘制彩色三角形的方法。 本文完整代码资源见→【OpenGL ES】绘制彩色三角形 项目目录如下: 2 案例 MainActivity.java package com.zhyan8.triangle;
阅读全文
