OpenGL Shader实例分析(7)雪花飘落效果

研究了一个雪花飘落效果,感觉挺不错的,分享给大家,效果如下:

代码如下:

Shader "shadertoy/Flakes" { // https://www.shadertoy.com/view/4d2Xzc
 Properties{
 iMouse ("Mouse Pos", Vector) = (100,100,0,0)
 iChannel0("iChannel0", 2D) = "white" {}
 iChannelResolution0 ("iChannelResolution0", Vector) = (100,100,0,0)
 }

 CGINCLUDE
 #include "UnityCG.cginc"
 #pragma target 3.0
 #pragma glsl

 #define vec2 float2
 #define vec3 float3
 #define vec4 float4
 #define mat2 float2x2
 #define iGlobalTime _Time.y
 #define mod fmod
 #define mix lerp
 #define atan atan2
 #define fract frac
 #define texture2D tex2D
 // 屏幕的尺寸
 #define iResolution _ScreenParams
 // 屏幕中的坐标,以pixel为单位
 #define gl_FragCoord ((_iParam.srcPos.xy/_iParam.srcPos.w)*_ScreenParams.xy) 

 #define PI2 6.28318530718
 #define pi 3.14159265358979
 #define halfpi (pi * 0.5)
 #define oneoverpi (1.0 / pi)

 fixed4 iMouse;
 sampler2D iChannel0;
 fixed4 iChannelResolution0;

 struct v2f {
  float4 pos : SV_POSITION;
  float4 srcPos : TEXCOORD0;
 };  

 // precision highp float;
 v2f vert(appdata_base v){
  v2f o;
  o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
  o.srcPos = ComputeScreenPos(o.pos);
  return o;
 } 

 vec4 main(v2f _iParam);

 fixed4 frag(v2f _iParam) : COLOR0 {
 return main(_iParam);
 } 

 vec4 main(v2f _iParam) {
 vec2 p = gl_FragCoord.xy/iResolution.xy;
 vec3 col = vec3(0,0,0);
 float dd = 150;
 for( int i=0; i<dd; i++ )
 {
  float an = 6.2831*float(i)/dd;
  vec2 of = vec2( cos(an), sin(an) ) * (1.0+0.6*cos(7.0*an+iGlobalTime)) + vec2( 0.0, iGlobalTime );
  col = max( col, texture2D( iChannel0, p + 20*of/iResolution.xy ).xyz );
  col = max( col, texture2D( iChannel0, p + 5.0*of/iResolution.xy ).xyz );
 }
 col = pow( col, vec3(1.0,2.0,3.0) ) * pow( 4.0*p.y*(1.0-p.y), 0.2);

 return vec4( col, 1.0 );
 }

 ENDCG 

 SubShader {
 Pass {
  CGPROGRAM 

  #pragma vertex vert
  #pragma fragment frag
  #pragma fragmentoption ARB_precision_hint_fastest 

  ENDCG
 }
 }
 FallBack Off
}

代码分析:

1)七边形雪花的绘制算法

具体代码如下:

float dd = 150;
for( int i=0; i<dd; i++ )
{
 float an = 6.2831*float(i)/dd;
 vec2 of = vec2( cos(an), sin(an) ) * (1.0+0.6*cos(7.0*an+iGlobalTime)) + vec2( 0.0, iGlobalTime );
 col = max( col, texture2D( iChannel0, p + 20*of/iResolution.xy ).xyz );
 col = max( col, texture2D( iChannel0, p + 5.0*of/iResolution.xy ).xyz );
}

在理解这段代码前,先理解怎么画一个圈,代码如下:

float dd = 30;
for( int i=0; i<dd; i++ )
{
 float an = 6.2831*float(i)/dd;
 vec2 of = vec2( cos(an), sin(an) );
 col = max( col, texture2D( iChannel0, p + 20*of/iResolution.xy ).xyz );
}

然后再准备一张贴图,图片中间是一个白色像素,周围都是黑色

效果如下:

这段代码处于fragment shader中,意味着屏幕上每个点都会进行上述的算法。具体如下,遍历贴图中该点周围的点(上面的代码中为距离该点为20单位的圆上的点),把周围点中最亮的作为该点的颜色。 上面的贴图有点特殊,只有一个点是白色,其余点都是黑色的。那么只有距离该点正好为20单位的点才会变成亮色,其余的点都是黑色,如上图的结果。一句话总结上面算法的效果:贴图中的每一个“相对亮点”的周围都会产生“相对亮的特定图形”,图形的亮度取决于该点的亮度,越亮越明显。效果可以参考文末的图片。

接下来理解这段代码:

float dd = 150;
for( int i=0; i<dd; i++ )
{
 float an = 6.2831*float(i)/dd;
 vec2 of = vec2( cos(an), sin(an) ) * (1.0+0.7*cos(7.0*an));
 col = max( col, texture2D( iChannel0, p + 20*of/iResolution.xy ).xyz );
// col = max( col, texture2D( iChannel0, p + 5.0*of/iResolution.xy ).xyz );
}

输出结果如下:

a)  1.0+0.7*cos(7.0*an)的图像如下:

b)算法中 of 向量的路径为:

结果就很清晰了;其实这里算法和《【OpenGL】Shader实例分析(二)- Heart》中绘制心形的算法很类似。

最后加上时间就可以实现动画了:

vec2 of = vec2( cos(an), sin(an) ) * (1.0+0.6*cos(7.0*an+iGlobalTime)) + vec2( 0.0, iGlobalTime );

第一个iGlobalTime,用来控制雪花的旋转,第二个iGlobalTime使雪花下落。

2)后期颜色等处理

这里可以理解为一种postEffect处理,具体是如下的代码贡献的效果:

col = pow( col, vec3(1.0,2.0,3.0) ) * pow( 4.0*p.y*(1.0-p.y), 0.2);

a)  pow(col, vec3(1.0, 2.0, 3.0)) 这句话使得颜色变成暖色调。col值的范围为[0,1],对小数继续pow运算,次数越高,该值越小。比如:0.5的1次方是0.5, 2次方为0.25, 3次方为0.125等;所以这句话的作用很明显:red成份不变,green变小一些,blue变的更小。达到的效果,使得整体颜色会偏向暖色调。

b)pow(4.0*p.y*(1.0-p.y), 0.2) 使得屏幕上下两边变暗。

最后附上shader中用到的贴图:

经过程序处理后,得到如下:

文章完毕,欢迎讨论。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • SDL2和OpenGL使用踩坑笔记经验分享

    SDL + OpenGL使用笔记 LFTK 是一个嵌入式GUI,为了开发方便,需要提供PC运行环境.我选择了SDL2+OpenGL+nanovg来实现底层的渲染,让LFTK可以运行在各个平台上.GLFW+OpenGL也是一个不错的选择,但是GLFW没有Android和iOS的移植,而且没有提供原生输入法的支持.LFTK虽然最初是为嵌入式系统而生,但也有一个小目标:可以用于开发嵌入式系统,也可以开发PC软件和移动APP,所以最后选择了SDL2+OpenGL+nanovg.在使用SDL2+OpenG

  • OpenGL ES透视投影实现方法(四)

    在之前的学习中,我们知道了一个顶点要想显示到屏幕上,它的x.y.z分量都要在[-1,1]之间,我们回顾一下渲染管线的图元装配阶段,它实际上做了以下几件事:剪裁坐标.透视分割.视口变换.图元装配的输入是顶点着色器的输出,抓哟是物体坐标gl_Position,之后到光栅化阶段. 图元装配 剪裁坐标 当顶点着色器写入一个值到gl_Position时,这个点要求必须在剪裁空间中,即它的x.y.z坐标必须在[-w,w]之间,任何这个范围之外的点都是不可见的. 这里需要注意以下,对于attribute类型的

  • android使用OPENGL ES绘制圆柱体

    本文实例为大家分享了android使用OPENGL ES绘制圆柱体的具体代码,供大家参考,具体内容如下 效果图: 编写jiem.java *指定屏幕所要显示的假面,并对见.界面进行相关设置     *为Activity设置恢复处理,当Acitvity恢复设置时显示界面同样应该恢复     *当Activity暂停设置时,显示界面同样应该暂停 package com.scout.eeeeeee; import android.app.Activity; import android.os.Bund

  • Android利用OpenGLES绘制天空盒实例教程

    前言 天空盒这个效果最早是在腾讯的实景地图里看到的,当时觉得很牛逼,但是没有想过自己去实现以下.最近这段时间对opengl很有兴趣,顺便就搞了这个天空盒,话不多说,先上效果. 天空盒的原理就是在三维空间中放置一个正方体,然后将我们的相机放置在正方体内,当我们的视点转动,相机跟着转动.我们就可以看到相应的景色的变换了,天空盒本质上是一个立方体. OpenGL 关于什么是OpenGL,什么是OpenGLES就不细说了,不了解的就自行百度吧,我们主要是关注代码.整个项目采用了Kotlin + Ndk的

  • OpenGL实现Bezier曲线的方法示例

    Bezier曲线的形状是通过一组多边折线(特征多边形)的各顶点唯一地定义出来的.在这组顶点中: (1)只有第一个顶点和最后一个顶点在曲线上: (2)其余的顶点则用于定义曲线的导数.阶次和形状: (3)第一条边和最后一条边则表示了曲线在两端点处的切线方向. // BezierCurve.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h"</div></div></li><li><div class=

  • OpenGL关于glStencilFuncSeparate()和glStencilFunc()函数的区别讲解

    glStencilFunc()函数是OpenGL提供的对模板缓冲区进行控制的命令,这是OpenGL2.0之前使用的函数,其函数原型为 void glStencilFunc(GLenum func, GLint ref, GLuint mask). func指定比较函数,它指定了测试通过的条件,其取值可以是:(为方便表示,参考值为refValue, 缓冲区值bufferValue) GL_NEVER                        总是不通过测试 GL_ALWAYS        

  • opengl实现任意两点间画圆柱体

    本文实例为大家分享了opengl实现任意两点间画圆柱体的具体代码,供大家参考,具体内容如下 1.问题提出 两点间画线简单: glBegin(GL_LINES);  //注意是LINES不是LINE,这个错误一定要注意. glVertexf(x1, y1, z1); glVertexf(x2, y2, z2); glEnd(); 画线函数不会影响opengl的矩阵堆栈. 但是很多时候线条效果会比较差,比如我要做一个骨骼动画,关节点间的骨头用线条太难看,即使使用glLineWidth设置线宽,视觉效

  • OpenGL ES着色器使用详解(二)

    本文介绍了OpenGL ES着色器使用的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.着色器语言 着色器语言是一种高级图形编程语言,和C/C++语言很类似,但存在很大差别,比如,不支持double,byte ,short,不支持unin,enum,unsigned以及位运算等,但其加入了很多原生的数据类型,如向量,矩阵等. 数据类型可分为标量.向量.矩阵.采样器.结构体.数组等 向量 向量传递参数,如果只提供一个标量,这个值用于设置所有向量的值:如果输入是多个标量或者是矢量,从左到

  • OpenGL Shader实例分析(1)Wave效果

    这篇文章主要分析一个Shader,从而感受shader的魅力,并学习相关shader的函数的用法. 先看Shader运行的效果: 下面是代码: Shader "shadertoy/Waves" { //see https://www.shadertoy.com/view/4dsGzH CGINCLUDE #include "UnityCG.cginc" #pragma target 3.0 struct vertOut { float4 pos:SV_POSITIO

  • OpenGL中的glutInitDisplayMode()函数的理解

    OpenGL中的glutInitDisplayMode()函数的作用主要是在创建窗口的时候,指定其显示模式的类型. 函数原型为:void glutInitDisplayMode(unsigned int mode); mode参数是一个GLUT库里预定义的可能的布尔组合.你使用mode去指定颜色模式,数量和缓冲区类型. 其中大部分情况下使用的参数为: GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH | GLUT_STENCIL 颜色模式:GLUT_RGBA表示颜色模式,

随机推荐