JiepengTan‘s blog专栏

shader 技术交流群 299080901

中级Shader教程00 01工具推荐

书籍推荐 数学知识 Mathematics for 3D Game Programming and Computer Graphics (Third Edition) opengl Packt.OpenGL 4 Shading Language Cookbook.2Ed.2014 图形学...

2018-05-02 13:47:00

阅读数 497

评论数 1

中级Shader教程28 GameUI 血瓶

1.实现原理 1.颜色公式 col = a + b* cos(2*PI * (c*t + d)) 更多的颜色变换: 比如彩虹的颜色公式: col = .6 + .6 * cos( 6.3 * uv.y / _ScreenParam.y *2. ...

2018-04-28 17:29:18

阅读数 557

评论数 0

中级Shader教程23 voronoi算法

1.基本Voronoi算法 1.在空间中摆放众多的样本点 points 2.对空间中的每个像素pixel,计算pixel到points的最短距离 minDist 3.根据minDist进行着色 伪代码: float3[] points = AllocMemory(); Up...

2018-04-28 17:28:36

阅读数 467

评论数 1

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

本篇主要技术点有: 栅格化屏幕空间 函数设计技巧:”凑” 2D旋转 .代码实现: 0. 栅格化 float aspectRatio = 4.0;//每一行雨滴的宽高比 float tileNum = 5;//平铺数量 uv *= fixed2(tileN...

2018-04-28 15:32:18

阅读数 1684

评论数 1

中级Shader教程26 三种Caustic实现方式

0.提要 Caustic的的特征是高光集中而且扭动,模拟的是由于水面的扭动导致阳光的折射集中产生的效果, 如图,本篇讲述的是三种模拟算法,并非由光线追踪精确计算得到。 v2f vert (appdata v){ v2f o; o.vertex = Unity...

2018-04-28 15:31:14

阅读数 826

评论数 0

中级Shader教程25 两种涟漪实现方式

1.实现 1.空间划分+相邻grid之间采样实现 其中 y = sin(31.*t) * smoothstep(-0.6, -0.3, t) * smoothstep(0., -0.3,t) 图形解析为: // create by JiepengTan 20...

2018-04-28 15:29:48

阅读数 1088

评论数 1

中级Shader教程24 两种雨实现方式

1.思想 1.和下雨特效制作一样,通过UV拉伸来呈现速度感,来表现雨 2.实现 1.简单版本 float2 ruv = uv / float2(_ScreenParams.x/_ScreenParams.y,1.0);//原始uv //宽高比正常uv uv = (ruv...

2018-04-28 15:28:53

阅读数 1105

评论数 0

中级Shader教程20 3D云

1.前置知识链接 1.Noise和FBM请参考这篇文章中给出的链接 2.ranymarching 框架 3.多层透明叠加渲染 1.分析&实现 1.使用常规raymarching +倒退+ 多层叠加透明渲染 1.常用FBM *分布限制...

2018-04-27 19:59:21

阅读数 678

评论数 0

中级Shader教程19 动态雾

1.前置知识链接 1.Noise和FBM请参考这篇文章中给出的链接 2.ranymarching 框架 2.实现原理 1.利用FBM来模拟空间雾的密度分布 2.通过raymarch 距离根据密度从前到后多层颜色混合 这里的Noise 使用triNoise,其实Per...

2018-04-27 15:22:26

阅读数 690

评论数 0

中级Shader教程16 水渲染

1.前置知识链接 1.Noise和FBM请参考这篇文章中给出的链接 2.ranymarching 框架 2.分析 1.基本形状构造 这里利用了Noise本身随机的同时也连续的特性来模拟水面的变动 1.使用FBM来实现水面的基本形状 2.水的动态是...

2018-04-27 15:06:55

阅读数 634

评论数 1

中级Shader教程17 海洋渲染

1.前置知识链接 1.Noise和FBM请参考这篇文章中给出的链接 2.ranymarching 框架 2.海浪型状的构造 1.基本形状构造 1.基本周期函数 2.扩散方向 3.Noise扰动 2.性能分析 1.还是和地形渲染一样,我们这里采...

2018-04-27 12:24:44

阅读数 1183

评论数 0

中级Shader教程15 地形渲染

1.前置知识链接 1.FBM请参考这篇文章中给出的链接 2.ranymarching 框架 2.抽取地形shader 通用函数   在处理类地形raymarching的过程中,为了优化,在raycast阶段会有一个大循环,为了性能,我们在这里采样的精度低一点,在计算法线...

2018-04-27 12:23:29

阅读数 587

评论数 0

中级Shader教程21 优化:用shader分摊CPU压力

粒子大规模渲染优化 0.优化总览 大规模粒子渲染,和动画系统优化一样,需要优化和权衡的是GPU和CPU的负载,同样技巧也相似。 动画系统的优化 1.DrawCall的减少    Batch 单个模型顶点数量太多,可以合批的数量不多    GPUInstance 手游限制...

2018-04-26 10:25:15

阅读数 441

评论数 0

中级Shader教程18 多层透明叠加渲染

0.说在前面 1.我们通常说起颜色通常说“这个颜色的rgb值是多少”,而不是说“这个颜色的rgba值是多少”,不说a是因为我们默认改颜色的a = 1.0,即是不透明的 2.所以得提醒:使用rgba表示颜色时,我们最终看到的颜色不是rgb,而是rgb*a。这点对于理解多层透明混合很重要。 ...

2018-04-26 10:08:49

阅读数 731

评论数 0

中级Shader教程14 天空渲染

1.实现原理 1.使用FBM 来模拟基本的云层形状 2.在FBM的过程中对不同layer位置进行随时间不同程度的偏移 2.源码 1.单层FBM中不同的层之间移动速度随时间的偏移 float TimeFBM( float2 p,float t ) { floa...

2018-04-26 10:07:37

阅读数 454

评论数 0

中级Shader教程13 星空渲染

1.实现原理 1.使用球坐标来进行空间划分 2.对每个空间划分的grid产生hash 3.根据hashID 定义星星的大小,闪烁周期,明暗程度等 4.在grid绘制圆 用smoothstep 来控制圆的大小 2.源码 1.单层FBM中不同的层之间移动速度随时间的偏移 ...

2018-04-26 10:06:36

阅读数 787

评论数 0

中级Shader教程12 跳动的小球

1.实现原理 1.空间划分 2.SDF 2.源码 简单代码如下: // create by JiepengTan 2018-04-14 // email: jiepengtan@gmail.com Shader "FishManShaderTutor...

2018-04-26 10:05:42

阅读数 195

评论数 0

中级Shader教程11 Default渲染框架

1.默认渲染框架 文件Framework3D_DefaultRender.cginc说明: 该库封装了基本raymarching渲染,常用于测试SDF建模, 只需要自己定义Map函数(SDF描述),用于构建整个场景。 如果想要使用默认的渲染 可以在shader中使用这几个宏即可 ...

2018-04-26 10:04:36

阅读数 146

评论数 0

中级Shader教程10 shader建模工具--SDF

1.作用 SDF (Sign Distance Functions)主要思想是计算点到目标模型的最近距离. 在RayMarching中,如果已知射线点到场景中的左右物体的最短距离,就可以知道我们是否已经碰到的了物体,如果没有碰到场景,可以利用这个信息优化下一步步进的距离。 2....

2018-04-24 11:13:18

阅读数 594

评论数 0

中级Shader教程09 3D Raymarch框架

终于,我们暂时结束了2D,进入了令人兴奋的3D!! 在2D的屏幕中,绘制3D场景—-升维进化!相信我,当你搞定了3D,再回头看2Dshader,你会想起一句广告词,so easy!妈妈再也不用担心我们的shader了. 1.3D Raymarch框架 获得相机位...

2018-04-23 22:43:11

阅读数 923

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭