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. thinkphp基础入门(2)

    第一节介绍了thinkphp基本路径问题,第二节将介绍thinkphp的常见用法(M层跟V层) 我们先在Controller层新建个IndexController.class.php(新建文件的格式为 ...

  2. Canvas -画图 关键字

    颜色.样式和阴影 属性 描述 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 shadowColor 设置或返回用于阴影的颜 ...

  3. 操作css样式

    <script type="text/javascript"> //产生一个四位的验证码. function createCode(){ var datas = ['A ...

  4. oldboy第十三天学习

    1.现在给我的感觉是,python终于入门了开始越学越简单了.变得更好理解了. 一.memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它 ...

  5. JQuery的$和其它JS发生冲突的快速解决方法

    众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. 然后,JS插件并非只有JQuery,还有prototype.j ...

  6. java中enum类型的使用

    java 枚举类型enum 的使用 最近跟同事讨论问题的时候,突然同事提到我们为什么java 中定义的常量值不采用enmu 枚举类型,而采用public final static 类型来定义呢?以前我 ...

  7. 64位linux中使用inet_ntoa报错处理

    最近一直使用linux mint 15,我用的是64位操作系统,在进行网络编程的时候,发现一个问题,请看源码: /*get_ip_by_name.c*/ #include <stdio.h> ...

  8. HDOJ 1418 抱歉(欧拉公式)

    Problem Description 非常抱歉,本来兴冲冲地搞一场练习赛,由于我准备不足,出现很多数据的错误,现在这里换一个简单的题目: 前几天在网上查找ACM资料的时候,看到一个中学的奥数题目,就 ...

  9. HDU_2031——十进制转换成R进制

    Problem Description 输入一个十进制数N,将它转换成R进制数输出.   Input 输入数据包含多个测试实例,每个测试实例包含两个整数N(32位整数)和R(2<=R<=1 ...

  10. 大型分布式C++框架《四:netio之请求包中转站 上》

    本来一篇文章就该搞定的.结果要分上下篇了.主要是最近颈椎很不舒服.同时还在做秒杀的需求也挺忙的. 现在不能久坐.看代码的时间变少了.然后还买了两本治疗颈椎的书.在学着,不过感觉没啥用.突然心里好害怕. ...