JiepengTan-CSDN博客

原创中级Shader教程00 总纲

FishMan Shader Tutorial0.说在前面本教程配套blog 本教程配套项目源码教程中抽取的RayMarching框架本人shadertoy地址个人blog地址，更好的排版如果想学习哪种类型的shader，可以在这里留言,我优先出留言中的shader的教程 shader技术交流qq群:2990809011.内容：...

2018-04-22 14:12:39 18813 18

原创帧同步教程 Lockstep Tutorial 00 总纲

Lockstep Tutorial前言本教程的目标是普及帧同步技术,含基本帧同步，以及预测回滚式帧同步，不含ECS配套的Blog配套的视频教程视频项目版本对应关系阶段一视频id项目版本号0none1v0.0.12v0.1.13v0.1.14v0.1.15v0.2.16v0.3.17v0.3.1教程...

2019-09-03 23:49:41 2388 2

原创中级Shader教程00 01工具推荐

书籍推荐数学知识 Mathematics for 3D Game Programming and Computer Graphics (Third Edition)opengl Packt.OpenGL 4 Shading Language Cookbook.2Ed.2014图形学 Real-Time Rendering, Third Edition 3.游戏开发优化 Uni...

2018-05-02 13:47:00 1795 2

原创中级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. + float4(0,23,21,0) ); 2.绘制高光一个小圆减去一个大圆就是...

2018-04-28 17:29:18 1885

原创中级Shader教程23 voronoi算法

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

2018-04-28 17:28:36 2639 1

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

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

2018-04-28 15:32:18 6822 3

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

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

2018-04-28 15:31:14 2902

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

1.实现1.空间划分+相邻grid之间采样实现其中 y = sin(31.*t) * smoothstep(-0.6, -0.3, t) * smoothstep(0., -0.3,t)图形解析为： // create by JiepengTan 2018-04-25 // email: [email protected]// all rig...

2018-04-28 15:29:48 4210 1

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

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

2018-04-28 15:28:53 5063

原创中级Shader教程20 3D云

1.前置知识链接1.Noise和FBM请参考这篇文章中给出的链接 2.ranymarching 框架 3.多层透明叠加渲染 1.分析&实现1.使用常规raymarching +倒退+ 多层叠加透明渲染1.常用FBM *分布限制来定义距离函数Map(pos) 2.定义密度函数为 Den(pos) = clamp(-(Map(pos)) ,0....

2018-04-27 19:59:21 2442

原创中级Shader教程19 动态雾

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

2018-04-27 15:22:26 1964

原创中级Shader教程16 水渲染

1.前置知识链接1.Noise和FBM请参考这篇文章中给出的链接 2.ranymarching 框架 2.分析1.基本形状构造这里利用了Noise本身随机的同时也连续的特性来模拟水面的变动 1.使用FBM来实现水面的基本形状 2.水的动态是通过在Noise中使用time作为一个维度，来实现水的扰动 2.着色1.水渲染需要考虑的...

2018-04-27 15:06:55 2287 3

原创中级Shader教程17 海洋渲染

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

2018-04-27 12:24:44 5418 1

原创中级Shader教程15 地形渲染

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

2018-04-27 12:23:29 2757 1

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

粒子大规模渲染优化0.优化总览大规模粒子渲染，和动画系统优化一样，需要优化和权衡的是GPU和CPU的负载，同样技巧也相似。动画系统的优化 1.DrawCall的减少　　　Batch 单个模型顶点数量太多，可以合批的数量不多　　　GPUInstance 手游限制 2.负载的均衡　　　CPU:可以通过预计算缓存的方式来优化如插件MeshAnimator ...

2018-04-26 10:25:15 2048

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

0.说在前面1.我们通常说起颜色通常说“这个颜色的rgb值是多少”，而不是说“这个颜色的rgba值是多少”,不说a是因为我们默认改颜色的a = 1.0，即是不透明的 2.所以得提醒：使用rgba表示颜色时，我们最终看到的颜色不是rgb,而是rgb*a。这点对于理解多层透明混合很重要。 3.这个代码将会在后面渲染云和狂风中出现，如果想要真正理解并灵活运用该渲染套路,请重视！ ...

2018-04-26 10:08:49 3785 1

原创中级Shader教程14 天空渲染

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

2018-04-26 10:07:37 2344

原创中级Shader教程13 星空渲染

1.实现原理1.使用球坐标来进行空间划分 2.对每个空间划分的grid产生hash 3.根据hashID 定义星星的大小，闪烁周期，明暗程度等 4.在grid绘制圆用smoothstep 来控制圆的大小 2.源码1.单层FBM中不同的层之间移动速度随时间的偏移 // 通过rd 来进行空间划分这样在根据相机进行改变float3 Stars(in fl...

2018-04-26 10:06:36 3120

原创中级Shader教程12 跳动的小球

1.实现原理1.空间划分 2.SDF2.源码简单代码如下：// create by JiepengTan 2018-04-14 // email: [email protected] "FishManShaderTutorial/SDFBounceBall" { Properties{ _MainTex("Base ...

2018-04-26 10:05:42 726

原创中级Shader教程11 Default渲染框架

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

2018-04-26 10:04:36 769

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

1.作用SDF (Sign Distance Functions)主要思想是计算点到目标模型的最近距离. 在RayMarching中，如果已知射线点到场景中的左右物体的最短距离，就可以知道我们是否已经碰到的了物体，如果没有碰到场景，可以利用这个信息优化下一步步进的距离。 2.概要代码包含在SDF.cginc中基本函数实现来自Inigo’s Quilez大神的blog...

2018-04-24 11:13:18 2695

原创中级Shader教程09 3D Raymarch框架

终于，我们暂时结束了2D，进入了令人兴奋的3D!! 在2D的屏幕中，绘制3D场景—-升维进化！相信我，当你搞定了3D,再回头看2Dshader,你会想起一句广告词，so easy!妈妈再也不用担心我们的shader了. 1.3D Raymarch框架获得相机位置ro 根据相机位置和朝向,计算当前像素所发出的射线ray的方向rd(ray dir) 求交r...

2018-04-23 22:43:11 4345 1

原创中级Shader教程07 熔岩Lava

本篇主要技术点有： 1. Noise的应用 2. FBM的基本应用 3. 颜色空间映射1.实现流程1.单层noise分布 2.多层叠加，每层noise添加位移和旋转 3.色温映射 2.实现1.基本形态：1.通过FBM构造基本形态，在FBM添加点变化 1.每一层的移动速度不一样 2.每层的旋转不一样 2...

2018-04-23 12:06:01 2621

原创中级Shader教程05 2D雪花

本篇主要技术点有： 1. grid 空间划分 2. 2D模拟3D中”分层”的概念 3. 透视模拟1.原理：在前面中介绍了2D模拟3D中的一些小技巧，这里用到了透视以及空间划分的概念，这里将不再重复：2.分析： ps:后面()中的数字表示前面透视中的特点根据中级Shader教程02 基本图形2D中介绍了相应的一些概念将上述知识具体到观察下...

2018-04-23 10:56:17 3729 1

原创中级Shader教程06 2D火焰粒子

0.本篇主要技术点有：grid 空间划分 2D模拟3D中”分层”的概念透视模拟基于grid的随机变化(旋转,位移,闪烁)sin 周期变化(闪烁)1.实现1.空间划分float2 coord = uv*_GridSize; 2.交错grid if (abs(fmod(coord.y,2.0))<1.0) //让格子交...

2018-04-23 07:57:13 3422

原创中级Shader教程08 3D shader 总纲

//1.概论shader中函数的基本理解 .raymarching .SDF .noise3D .fbm .混合光栅和raymarching3D技巧合集 .raymarching 加速 .SDF(sign distance field) .3D 空间划分:极坐标 .3D 空间划分:笛卡尔坐标 .FBM 用于高...

2018-04-22 22:06:33 510

原创中级Shader教程02 shader技巧总览

//0.说明本篇文章会随着教程的更新不断的更新和丰富1.shader技巧总览空间划分基于格子的随机性分层类FBM框架 . 重复多次类似操作并收集结果 val1,val2,val3 … . 将收集到的结果进行集合操作，如min,sum,avg等法线柔和过渡多层透明混合基于范围的图像处理基于方向的图像处理2.详细例子：1.空间划...

2018-04-22 21:40:18 2299

原创中级Shader教程04 2D海洋

本篇主要技术点有： 1. sin波函数的理解和应用 2. 极坐标+sin 对于波动圆环的实现 3. 2D模拟3D中”分层”的概念 1.原理：sin函数是周期函数，对于无限重复的现象是一种很好的模拟类似傅里叶变换一样，复杂的函数可以用简单的sin cos 组合进行比逼近波浪这种效果是一种典型。2.分析：1.云的实现形状:多个不同大小，偏移的...

2018-04-22 20:49:37 3961

原创中级Shader教程03 2Dshader框架

//0.2Dshader设计流程 0.确定shader效果 1.空间划分 2.透视模拟 1.空间划分程序实现对多个物体进行属性修改或创建的时候，往往会用到for循环，但是在shader中，for循环是每个pixel都要执行的，效率很低，而且从另外的角度来看，一个屏幕有大量的pixel，这本身就是一种潜在的大循环。所以在2D shader中for循环...

2018-04-22 20:43:17 2368 1

原创中级Shader教程01 基础函数

以下实例的图片依次对上面图片中应笛卡尔坐标行列。shader中函数的基本理解 1.smoothstep 获取较为平滑的过渡效果length(uv) 降维效果 2.length(uv)将2D的转换为1D 3.atan(u,v) 获取角度配合length 可以得到极坐标 4.pow(f,n) 将曲线变化变得平滑或尖锐 5.sin cos 周期函数，用于...

2018-04-22 18:41:39 6154

JiepengTan‘s blog专栏