中级Shader教程27 三种窗前雨滴效果

---

layout: post
title: “中级Shader教程27 三种窗前雨滴效果”
date: 2018-04-26 16:09:03
author: Jiepeng Tan
categories:

• shader tutorial
  tags: shader_tutorial rain grid shader
  img_path: /assets/img/blog/ShaderTutorial2D/Snow
  mathjax: true

---

Shader 视频教程

• shader基础教程（超多案例）

本篇主要技术点有：

栅格化屏幕空间
函数设计技巧:“凑”
2D旋转

.代码实现：

0. 栅格化

float aspectRatio = 4.0;//每一行雨滴的宽高比
float tileNum = 5;//平铺数量
uv *= fixed2(tileNum * aspectRatio,tileNum);//栅格化uv
uv = frac(uv);
uv -=0.5;

1. 绘制主要雨滴

float r = length(uv);
r = smoothstep(0.2,0.1,r);
return float2(r,0.);

uv.y