最近在学Shader，发现了一个好玩的网站shaertoy，国内都没有什么人玩，写个相关的指南，不要见笑，一起进步。
修改TUTORIAL的值来选择指南。 shadertoy上用的语言是类似于glsl，有一些小改动，是在shader写起来更加顺手。语法类似于C语言。 预览链接：https://www.shadertoy.com/view/4lfyDn 下面是源码：
//选择内容 #define TUTORIAL 5 /* 目录 1 黑屏. 2 带颜色 3 颜色系统 4 坐标 5 屏幕适配 */ #define PI 3.14159265359 #define TWOPI 6.28318530718 #if TUTORIAL == 1 /* 主函数中什么都不写，得到黑屏一块。 */ void mainImage( out vec4 fragColor, in vec2 fragCoord )//void main() { //fragColor; } #elif TUTORIAL == 2 /* fragColor为输出颜色,用vec4 */ void mainImage( out vec4 fragColor, in vec2 fragCoord )//void main() { fragColor = vec4(123.0/255.0,193.0/255.0,182.0/255.0,1.0); } #elif TUTORIAL == 3 /* vec4有x,y,z,a三个变量分别代表r,g,b,a;其中a表示不透明度 */ void mainImage( out vec4 fragColor, in vec2 fragCoord )//void main() { float r = 234.0/255.0; float g = 125.0/255.0; float b = 68.0/255.0; vec4 color = vec4(0); color.r = r; color.g = g; color.b = b; fragColor = color; } #elif TUTORIAL == 4 /* 坐标,左下角为原点，xy分辨上右和向左，gl_FracCoord表示对应像素的点。 */ void mainImage( out vec4 fragColor, in vec2 fragCoord )//void main() { vec4 left = vec4(138.0,141.0,132.0,255.0)/255.0; vec4 right = vec4(220.0,198.0,138.0,255.0)/255.0; float threadHold = 100.0; vec2 xy = fragCoord.xy; if (xy.x < threadHold){ fragColor = left; }else{ fragColor = right; } } #elif TUTORIAL == 5 /* iResolution表示屏幕的宽度, uv = fragCoord.xy/iResolution.xy得到一个二维向量，表示相对于屏幕所在的位置 uv.x 大小为0到1,0为最左边，1为最右边 uv.y 大小为0到1,0为最下边，1为最上边 */ void mainImage( out vec4 fragColor, in vec2 fragCoord )//void main() { vec4 upper = vec4(217,180,170,255.0)/255.0; vec4 middle = vec4(232,194,174,255.0)/255.0; vec4 buttom = vec4(254,232,220,255.0)/255.0; vec2 uv = fragCoord.xy/iResolution.xy; if (uv.y < 0.3){ fragColor = buttom; }else if( uv.y <0.6) { fragColor = middle; }else{ fragColor = upper; } } #endif