关于shadertoy如何制作3D shader着色器特效代码

https://www.shadertoy.com/browse

shader代码精彩案例展示网站，上面汇集了非常多的大神的3D着色器设计效果。可以借鉴shader代码源码学习！包括各种光晕、光影特效、渲染特效等。

shadertoy是一个 基于 pixel shaders 的 playgrounds.
对于pixel shaders 不同于传统意义上的shader,传统意义上的shader是根据GPU渲染管线，从cpu
把图元传递到顶点着色，在通过varing传递给片元，从而处理光照的。所以顶点着色器是每个顶点
运行一次，而片元着色器是每个片元（像素）运行一次。而pixel shaders中你可以理解成只是相当
于在opengl中只对片元着色（fragment）进行编程，你可以想象成是一个canvas画布 。
想要开始进行shadertoy学习，你先从如下几点入手：
1、了解GLSL的基本语法，并掌握数据类型（比如向量，矩阵），以及一大堆c语言的处理函数
可以从这几个资源去学习：
1.1 GLSL. 语法基础；
1.2 GLSL 内建函数
1.3 片元着色编程学习：The Book of Shaders
1.4 冯乐乐 写的相关教程：【ShaderToy】 – candycat
2、有了以上对于glsl的基本语法以及片元着色编程的基础，就学习shadertoy自己的几个API,参见
如下网址：shadertoy.com/howto
尤其需要注意一下几个件事：
2.1、入口函数不是main,而是 void mainImage( out vec4 fragColor, in vec2 fragCoord );
2.2 、 shadertoy自己的输入值
uniform vec3 iResolution;
uniform float iGlobalTime;
uniform float iGlobalDelta;
uniform float iGlobalFrame;
uniform float iChannelTime[4];
uniform vec4 iMouse;
uniform vec4 iDate;
uniform float iSampleRate;
uniform vec3 iChannelResolution[4];
uniform samplerXX iChanneli;
3、shdertoy的扩展了几个特殊输入
3.1 声音着色器：vec2 mainSound( float time ) 本质上就是H5的audio而已，但通过shader输
入。
3.2 VR着色器： void mainVR( out vec4 fragColor, in vec2 fragCoord, in vec3 fragRayOri,
in vec3 fragRayDir )
4、掌握了如上这些知识，基本上可以尝试写shader了。没事多看看上面几个大神的的作品里代码
的实现，也经常去逛逛这些大神的blog。很多实现的思路可以从他们的分享里获得，比如
iq[shadertoy.com/user/iq], Fabrice Neyret[shadertoy.com/user/Fabr…]
另外或许好的shader需要充分学习关注大神们的数学思路，注意学习图形学千万别过多关注代数意
义，而要把精力放在矩阵、向量、标量这三者运算的几何意义上！
————————————————————
补充《关于shadertoy如何制作3Dshader》：
1、shadertoy输入源只有默认的几张图和2段视频
2、利用shadertoy制作的3D的模型的话，使用的是ray-Marching技术 构建的distance filed
所谓ray-marching类似于简单的ray-tracing原理 。
3、过程化建模。
利用数学公式构建基础几何体 ，比如球体，盒子，锥体，圆柱体之类。然后利用交差并补运算做排
列组合。在加以blend和twist等扭曲计算。
4、利用这种方法建立的模型都是体素。形状变换复杂，可以非常真实的描绘全局光线。但运算量巨
大。
5、过程化材质
学习渲染的小伙伴，不论是用图形API【OpenGL,Vulkan,Metal,DirectX….】,还是成熟的商业引擎
【Unreal Engine,Unity,Ogre….】,当涉及到渲染效果的时候，就一定会涉及到使用shader写效果。
shader可能在其他api，或者渲染引擎中学到的有好多着色器，shadertoy是没有这么完备的功能
了，只可以弄好了片元[像素]着色器给大家调效果。相信大家可以想到，如果把比如顶点着色器跟
几何着色器弄进来，怕是这个小小的网页支持不起来哈，所以只有片元着色器。
shadertoy这个网站，该网站语法跟GLES3.0的shader语法一致，在测试调试好效果可以很方便的
迁移到OGL工程中直接使用。这里给新入门的小伙伴们安利一下。

这是一篇国内的介绍说明，也不错，推荐学习参考。

https://www.zhihu.com/question/22514128?from=profile_question_card