---

layout: post title: "中级Shader教程00 总纲" date: 2018-03-26 16:09:03 author: Jiepeng Tan categories:

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

---

FishMan Shader Tutorial

配套视频

0.说在前面

• 本教程配套blog
• 教程中抽取的RayMarching框架
• 本人shadertoy地址
• 第一时间更新blog地址

1.内容：

1. 教程中会讲解在编写shader的常用技巧，以及在项目中如何使用这些shader
2. 大量的实例如水，火，粒子，海洋，山脉，闪电等
3. 一些shader实现的理论知识 因为本人也会点特效制作，所以本教程会有比较多的描绘自然现象的shader，如熔岩，雪花，冰，水，火，粒子，海洋，山脉，闪电等.
4. 已经抽取一个RayMarching框架,更加方便编写raymarching shader

2.目录

1.理论知识

• 基本数学函数
• shader技巧总纲
• 2D shader框架
• 3D raymarching框架
• 基本建模SDF
• 多层透明叠加渲染
• 优化:用shader分摊CPU压力

---

2.实例

1. 2D Shader基础
   • 2D海洋
   • 雪花
   • 火焰粒子
   • 熔岩
   • 下雨
2. 3D Shader
   • Unity 和 Raymarch 整合
   • 星空
   • 天空
   • 地形
   • 湖泊
   • 大海
   • 雾
   • 云
3. shader技术整合
   • GameUI 血瓶
   • 荒原湖泊
   • 西湖

4.专题

1. 水
   • 下雨
   • 涟漪
   • 水底焦散
   • 窗前雨滴

---

6.部分效果图：

<p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial2D/BaseMath/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial2D/Sea/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial2D/Snow/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial2D/FireParticle/head.gif?raw=true" width="256"></p> <p align="center"> <img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial3D/SDF/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial3D/Stars/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial3D/Sky/head.gif?raw=true" width="256"></p> <p align="center"> <img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial3D/Mountain/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial3D/Lake/head.gif?raw=true" width="256"></p> <p align="center"> <img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial3D/Sea/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial3D/Fog/head.gif?raw=true" width="256"></p> <p align="center"> <img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial3D/Cloud/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/JobSys/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial3D/GameHPUI/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial2D/Rain/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial3D/Rain/head.gif?raw=true" width="256"></p> <p align="center"><img src="https://github.com/JiepengTan/JiepengTan.github.io/blob/master/assets/img/blog/ShaderTutorial3D/Caustic/head.gif?raw=true" width="768"></p> ----------

3.链接：

• 本教程配套blog

• 本教程配套项目源码

• 教程中抽取的RayMarching框架

• 如果想学习哪种类型的shader，可以在这里留言,我优先出留言中的shader的教程