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. JQuery+Js 获取浏览器高度和宽度

    JQuery-------做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下. alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(docum ...

  2. pyenv简介——Debian/Ubuntu中管理多版本Python

    pyenv简介——Debian/Ubuntu中管理多版本Python MAY 21ST, 2016 12:00 AM | COMMENTS pyenv是管理Python版本的工具,它支持在多个Pyth ...

  3. Python操作excel(xlrd和xlwt)

    Python操作excel表格有很多支持的库,例如:xlrd.xlwt.openpyxl.win32com,下面介绍使用xlrd.xlwt和xlutils模块这三个库不需要其他的支持,在任何操作系统上 ...

  4. JAVA三大框架SSH的各自作用

        一.Spring Spring是一个解决了许多在J2EE开发中常见的问题的强大框架. Spring提供了管理业务对象的一致方法并且鼓励了注入对接口编程而不是对类编程的良好习惯. Spring的 ...

  5. SQLServer备忘

        1,创建主键有三种方式,尤其注意联合主键: (1) (2) (3)   2,修改主键的方式       2,创建外键应该也有三种方式:

  6. Sublime Text2不自动打开最近的项目

    1.首选项 2.设置默认 "hot_exit": false, "remember_open_files": false, 这两个值改成false就可以了

  7. 2015第27周三Java内存模型

    自己写的代码,6个月不看也是别人的代码,自己学的知识也同样如此,学完的知识如果不使用或者不常常回顾,那么还不是自己的知识. 要认识java线程安全,必须了解两个主要的点:java的内存模型,java的 ...

  8. HDOJ 1334 Perfect Cubes(暴力)

    Problem Description For hundreds of years Fermat's Last Theorem, which stated simply that for n > ...

  9. cf581D Three Logos

    Three companies decided to order a billboard with pictures of their logos. A billboard is a big squa ...

  10. canvas生成遮罩图片

         首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩.        它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...