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. PHP学习系列(1)——字符串处理函数(4)

    16.hebrevc() 函数把希伯来文本从右至左的流转换为左至右的流.它也会把新行 (\n) 转换为 <br />.只有 224 至 251 之间的 ASCII 字符,以及标点符号受到影 ...

  2. 搭建本地Nuget服务器并使用NuGet Package Explorer工具打包nuget包

    1.什么是Nuget: 百度百科描述: Nuget是 ASP .NET Gallery 的一员.NuGet 是免费.开源的包管理开发工具,专注于在 .NET 应用开发过程中,简单地合并第三方的组件库. ...

  3. oldboy第一天学习

    oldboy第一天学习 一.听Alex Li 吹牛逼! 1.老男孩附加的功能.每节课都有鸡汤.节省时间,投资自己.结识更多的朋友. 2.python的创始人为吉多·范罗苏姆(Guido van Ros ...

  4. 后台返回data直接在页面转换

    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <fmt: ...

  5. Core Data-备用

    Core Data是一个功能强大的层,位于SQLite数据库之上,它避免了SQL的复杂性,能让我们以更自然的方式与数据库进行交互.Core Data将数据库行转换为OC对象(托管对象)来实现,这样无需 ...

  6. android禁用光感按键

    用RE浏览器打开/system/usr/keylayout下的qwerty.kl文件, 找到key 158 BACK key 139 MENU key 102 HOME 分别在其之前加下#号,如下: ...

  7. node.js相关

    node node最大的特点是单线程,因此一个只能有一个任务运行,大量采用异步操作. 某一个任务的后续操作一般采用回调函数的形式 var callback = function (error, val ...

  8. 检测鼠标键盘多久没有活动(使用GetLastInputInfo API函数检测)

    DELPHI代码 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro ...

  9. IBM Cognos 10 启动报错

    报错信息: 15:35:02, 'LogService', 'StartService', 'Success'. 15:35:03, CAF input validation enabled. 15: ...

  10. bootstrap栅格布局,第一次成功

    代码: <div class="helper" style="background-color: #F7F7F9;height: 200px;padding-top ...