`
schi
  • 浏览: 203857 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ripple deformer帮你了解vertex shader

 
阅读更多
我之前有简单的解释fragment shader的作用,实际上还有一个必须的shader,就是vertex shader。
vertex shader就跟它的名字一样是用来处理顶点的,在新潮的opengl中三维的坐标系是需要我们自己建立的,而且都是通过vertex shader来处理的,在这个shader中你可以定义每个顶点的位置,这是主要的功能,如果有需要还可以为后续的fragment shader做一些其它的计算并传递结果,例如,基于vertex位置的颜色。

这里的ripple deformer就是通过使用
http://adrianboeing.blogspot.com/2011/02/ripple-effect-in-webgl.html
的方程式来做一个ripple effect的动画

http://v.youku.com/v_show/id_XNjk5MjE2MDM2.html


这个vertex shader很简单
先是定义使用的版本
#version 430

然后是位置属性,它代表着我们传递进来的顶点的x,y, z,所以是一个向量
layout(location=0) in vec3 pos;

接着是坐标空间矩阵和时间变量
uniform mat4 MVP;
uniform float time;

然后是一些可变和恒定的参数,这个例子里我把它们都定义成了恒定的
const float amplitude = 0.125;
const float frequency = 4;
const float PI = 3.14159;

最后就是main函数了,就像c和c++程序一样,每个shader里都必须有一个main函数,当这个shader被运行时就会调用这个函数
void main()
{
    float r = length(pos);
    float y = amplitude * sin(-PI * r * frequency+time) / r;
    gl_Position = MVP * vec4(pos.x, y, pos.z, 1.);
}

需要注意的是gl_Position是一个全局变量,只要vertex shader一创建它就存在,它就是用来保存顶点最终的位移的。

完整的代码:
https://github.com/mackst/opengl-samples/tree/master/rippleDeformer

如果你细心点会发现,并没有for loop出现,就是
for pos in vertexPositions:
    pass

毕竟我们传递了好几万的位移信息到gpu内存

如果你看过之前的fragment shader也会发现是没有for loop的,然而却是能操作成千上百的像素。
这就是图形处理的强大之处,跟准确的说是gpu的强大之处:并行处理
gpu的原本设计就是做图形处理的,为了能高效的处理,它们选择了并行架构。

怎么并行法呢?
假设我们的gpu能一次处理1万个顶点数据,而我们有10万的数据,gpu会自己for loop 10次,每次处理1万个顶点数据,这每次处理1万个顶点可不是从0或1开始的for loop直到1万,而是同时进行处理的。
如果你了解多线程编程,你就更能明白并行处理,只是gpu和cpu的线程数量是差别非常大的,cpu可能最多只能同时运行上百个线程,而gpu则可以是成千上万的线程。

当然上面的解释只是我自己觉得好理解的方式,要了解gpu的运作方式还得靠你自己。

这就是为什么gup计算能这么快,当人们发现这点后就有人尝试使用opengl来进行一些非图形化的数据计算,实际也证明了这种可行性,之后nvidia和apple都看到了不少人都在使用这种经典的gpu加速,于是CUDA和OpenCL就诞生。
分享到:
评论

相关推荐

    unity Screen Ripple 2_0.zip

    在Screen Ripple特效中,Surface Shader会计算每个像素的透明度和颜色,以形成波动的视觉效果。 2. **屏幕空间效果**:Screen Ripple特效发生在屏幕空间内,意味着它不依赖于场景的几何结构,而是基于渲染后的图像...

    ripple-effect-shader

    【标题】"Ripple Effect Shader" 是一个专用于创建视觉上引人注目的波纹效果的着色器,尤其适用于WebGL图形库如Three.js。它通过应用动态纹理和数学计算来模拟水面或其他平滑表面受到触碰时产生的涟漪扩散效果。 ...

    Ripple consensus whitepaper

    ### Ripple共识算法关键知识点 #### 一、引言与背景 **Ripple协议**是一种针对分布式支付系统的新型共识算法,由Ripple Labs Inc在2014年提出。该论文的作者包括David Schwartz、Noah Youngs和Arthur Britto等人。...

    Ripple

    Ripple

    cpp-Ripple一个可以作为MySQL复制中间件的服务器

    通过阅读源代码,我们可以了解到Ripple如何利用C++的特性来实现上述功能,例如面向对象的设计、内存管理、并发控制等。对于想要深入了解MySQL复制机制以及C++在数据库领域的应用的开发者来说,这是一个极好的学习...

    前端开源库-ripple-address-codec

    ** Ripple Address Codec:前端开发中的XRP地址处理库** 在区块链技术中,Ripple(XRP)是一种流行的数字货币,其地址是由特定的编码规则生成的。`ripple-address-codec`是一个专门为前端开发者设计的开源库,它...

    Android代码-一个真正的Ripple效果,需要考虑Ripple的圆心变化

    A layout that implemented ripple effect. A ripple is not just a circle that starts expanding from your finger till it covers all the view. In fact, the circle starts expanding from your finger while ...

    前端开源库-ripple-lib

    ** Ripple-lib:前端开源库详解** Ripple-lib是前端开发者用于与Ripple网络进行交互的JavaScript库,尤其适用于Node.js和浏览器环境。这个强大的库提供了丰富的API,使得开发者能够轻松地执行各种Ripple相关的操作...

    用于在Nodejs和浏览器中与Ripple币进行交互的JavaScriptAPI

    了解Ripple协议的术语,如IOU(I Owe You,债务凭证)、RTXP(Ripple Transaction Protocol,Ripple交易协议)等,对于有效利用API至关重要。 6. **事件监听**:`client.connection.on('ledgerClosed', callback)`...

    前端项目-Ripple.js.zip

    "Ripple.js"就是这样一个工具,它专为按钮和链接设计,目的是实现材料设计风格中的波纹效果。材料设计是由Google推出的界面设计语言,其特点是直观、响应式和富有动感,而波纹效果则是其中一个重要组成部分,它模拟...

    Ripple的解释

    Ripple Transaction Protocol, or RTXP, is Ripple Transaction Protocol, or RTXP, is Ripple Transaction Protocol

    安卓动画效果相关-android-ripple-background类似水波纹的动画效果.rar

    要理解和实现这个水波纹效果,我们需要了解以下几点关键知识点: 1. **RippleDrawable**:这是Android系统提供的一个内置资源,用于创建涟漪效果。你可以直接在XML布局文件中使用它,或者通过代码动态设置。 2. **...

    为你的reactnative应用实现Ripple菜单效果

    首先,让我们了解一下Ripple效果的基本原理。Ripple效果通常由一个半透明的圆形或矩形覆盖层组成,当用户触摸屏幕时,这个覆盖层会从触点位置向外扩散,模拟水波纹的效果。在React Native中,我们可以利用`Animated`...

    Ripple研究.docx

    ### Ripple研究报告知识点解析 #### 一、Ripple的背景与起源 - **互联网早期的局限性**:在互联网发展的初期阶段,人们仅能在有限且封闭的网络中进行信息交流。随着SMTP(简单邮件传输协议)的出现,不同邮件系统...

    9051209unity Screen Ripple 2_0 .zip

    《Unity中的Screen Ripple 2.0:打造游戏水雨滴反射波纹特效》 Unity3D作为一款强大的跨平台游戏开发引擎,深受开发者喜爱。它提供了丰富的图形渲染和物理模拟功能,使得创建出逼真的游戏场景成为可能。本文将深入...

    水波纹Ripple

    在Android开发中,"水波纹Ripple"是一种常见的交互反馈效果,通常用于按钮、视图等元素的点击效果,给用户带来更为生动和细腻的视觉体验。水波纹效果模拟了水滴落在平静水面时产生的涟漪扩散,使得用户界面更加动态...

    android自定义ripple涟漪效果

    在Android开发中,涟漪效果(Ripple Effect)是一种用户交互反馈的表现形式,通常用于按钮、选择项等组件,当用户触摸时会显示一个扩散的波纹效果,为用户提供视觉上的触控确认。在Android 5.0(API级别21)及以上...

    Android代码-material-ripple

    Material Ripple Layout Ripple effect wrapper for Android Views Including in your project compile 'com.balysv:material-ripple:1.0.2' Check for latest version number on the widget below or visit ...

    ripple-core

    ripple-bouncycastle和ripple-core。

Global site tag (gtag.js) - Google Analytics