1.飘扬的旗帜(水面起伏)

基本原理

绘制一帧画面时由顶点着色器根据一定的规则变换各个顶点的位置,即可得到旗帜迎风飘扬的效果。

为了使旗帜的飘动过程比较平滑,采用基于正弦曲线的顶点位置变换规则。

计算方法

  1. 传入顶点着色器的原始顶点的Z{X|Y|Z}坐标都是相同的(本案例为0),经过顶点着色器变换后顶点的Z{X|Y|Z}坐标是根据正弦曲线分布的
  2. 首先计算出当前处理顶点的X坐标与最左侧顶点X坐标的差值,即X距离
  3. 然后根据距离与角度的换算率将X距离换算为当前顶点与最左侧顶点的角度差(tempAngle)
  4. 接着将tempAngle加上最左侧顶点的对应角度(startAngle)即可得到当前顶点的对应角度(currAngle)
  5. 最后通过求currAngle的正弦值即可得到当前顶点变换后的Z坐标

距离与角度的换算率指的是由开发人员认为设定的一个值,将距离乘以其后就可以换算成角度值。

例如可以规定,X方向上距离4等于2PAI,则换算公式为:X距离x2PAI/4

2.扭动的软糖

基本原理

实现扭曲软糖的效果只要将代表软糖的长方体中各层顶点的X,Z坐标按照一定的规则根据顶点的Y坐标以及当前帧的控制参数进行变换即可。

计算步骤

  1. 首先,需要计算出当前顶点Y坐标与最下层顶点Y坐标的差值。
  2. 接着根据Y坐标的差值,角度换算比例以及本帧的总扭曲角度换算出当前顶点的扭曲角度,计算公式为currAngle=(currY-startY)/ySanxangleSpan.
  3. 最后根据当前顶点的X、Z坐标,扭曲的角度计算出变换后顶点的X、Z坐标,

X2 = xcosa-zsina

Z2 = xsina+zcosa

3.风吹椰林场泉的开发

基本原理

为了简化计算,采用的风向是与XOZ平面平行的。设当前风向与Z轴正方向的夹角为a,树干原始状态下与Y轴重合,点A为树干模型中的任一顶点,在风的吹动下偏转到A`点

则顶点着色器需要计算的问题为:已知A点坐标(X0,Y0,Z0)、当前风向与Z轴正方向的夹角a以及弧OA`所在圆的半径OO`,求A点偏转到A`后的坐标。

计算步骤:

......有时间补补数学吧

4.展翅飞翔的雄鹰

基本原理:

给顶点着色器提供动画中的每个关键帧对应的各个顶点的位置数据以及融合比例。顶点着色器根据两套位置数据及当前融合的比例融合出一套结果顶点位置数据。只要在绘制每一帧时提供不同的混合比例即可产生想要的动画。

5.二维扭曲

要想能对原始三角形实现扭曲处理,必须将大三角形切分为很多的小三角形。

OpenGL ES 2.0 顶点着色器的妙用的更多相关文章

  1. OpenGL ES 3.0顶点着色器(一)

    OpenGL ES 3.0流程图 1.Vertex Shader(顶点着色器) 顶点着色实现了一种通用的可编程方法操作顶点. 顶点着色器的输入包括以下几个: • Shader program.程序的顶 ...

  2. OpenGL ES 3.0顶点着色器(二)

    #version es uniform mat4 u_mvpMatrix; in vec4 a_position; in vec4 a_color;out vec4 v_color;void main ...

  3. OpenGL ES 3.0片段着色器(四)

    片段着色器流程图 片段着色器(fragment shader)实现了一个通用的可编程操作片段的方法.片段着色器执行由 光栅化生成的每个片段. • Shader program(着色器程序)—片段着色器 ...

  4. OpenGL ES 3.0 顶点缓冲区VBO使用

    一般情况下数据都是有CPU从RAM取数据 然后传给GPU去处理,相对于GPU速度要慢一些. 使用VBO技术 可以把数据存储到GPU的内存空间中,这样GPU可以直接从GPU的内存中取得数据进行处理 速度 ...

  5. OpenGL ES 3.0之Shading Language(八)

    每个OpenGL ES 3.0程序要求一个顶点着色器和一个片段着色器去渲染一个图形.着色器概念是API 的中心,本篇将介绍着色器语言部分包含下面几项 1.变量和变量类型 2.矢量和矩阵创建及选择 3. ...

  6. OpenGL ES 3.0 点,线,三角形绘制形式总结

    OpenGL ES 3.0 顶点     -1,  1, 0, -0.5f,  0, 0,     0, -1, 0,    -1,  0, 0, 0.5f,   0, 0,     1, -1,   ...

  7. 【Android 应用开发】OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解

    最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...

  8. OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解

    最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...

  9. OpenGL ES 3.0之顶点缓冲

    所谓顶点缓冲就是直接将顶点数据存储在gpu的一段缓冲区,不需要从cpu拷贝到gpu.提高了程序的运行效率. 操作步骤 1.创建顶点缓冲对象 GLuint vertexBufferID; 2.分配空间 ...

随机推荐

  1. nginx_笔记分享_php-fpm详解

    参考 http://syre.blogbus.com/logs/20092011.htmlhttp://www.mike.org.cn/articles/what-is-cgi-fastcgi-php ...

  2. 关于PHP加速eAccelerator、Xcache、APC和Zend Optimizer

    以前只关注过Zend Optimizer,因为高胖子的书就是这样教的,但是遇到奇葩公司的面试题提问你知道多少个php加速器/缓存,我一下子楞了,因为我所知道的php5.2.x只用过Zend Optim ...

  3. 用c#在Access数据库中创建新表

    生成表NewTable,该表有文本字段Field1和整型字段Field2 private void CreateNewTable()  {    OleDbConnection conn = new ...

  4. 发布项目到 Linux 上运行 Core 项目

    发布项目到 Linux 上运行 Core 项目 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 ASP.Net Core 给我们带来的最大的亮点就是跨平台,我在我电脑(win ...

  5. MBProgressHUD的基本使用

    MBProgressHUD的基本使用 分类: IOS2012-10-30 11:19 12047人阅读 评论(2) 收藏 举报 和gitHub上的Demo其实差不多,就是小整理了下,当备忘,想做复杂的 ...

  6. akka简单示例-1

    刚刚开始接触akka,网上找了2个简单示例,并在公司运营机器上尝试,踩了一些坑,在此记录. 1. 本地hello world [torstan@sparkb5-i ~/akka_example/hel ...

  7. Android判读是否安装了某一款APP

    /** * @Title: isAvilible * @Description: 断手机已安装某程序 * @param @param context * @param @param packageNa ...

  8. jQuery 中的事件绑定与取消绑定

    1:在jQuery中使用bind方法进行事件的绑定,bind方法有两个参数,第一个参数是事件的类型例如click,change,keyup,keydown,blur,focus等.第二个参数是一个回调 ...

  9. Android 解析JSON数组

    1:服务端是使用PHP,从数据库中查询出一个二维数组,然后调用系统函数以json格式返回给客户端. 返回结果如下:http://192.168.0.116/server/selectTitle2jso ...

  10. Activity和Servlet的相似之处和区别

    相似之处:1.Activity.Servlet的职责都是向用户呈现界面.2.开发者开发Activity.Servlet都继承系统的基类.3.Activity.Servlet开发出来之后都需要进行配置. ...