Shadertoy介绍

Shadertoy is a website dedicated to allow people share and write GLSL pixel shaders. In other words, the gorgeous effects in it can be achieved only by pixel shaders (and of course the texture coordination), is it very powerful? There are a lot of strong people inside, just like a brainstorm, letting you exclaim again and again, so you can do it! However, there is also a lot of knowledge about mathematics and algorithms, so you may often find that your brain is not enough to keep up with the author’s ideas. . . However, the brain is all based on exercise, there is no shortcut, it is always right to read more and write more~

glslEdit介绍

glslEdit is the same Friendly GLSL Shader editor based on Codemirror compatible with glslViewer (C++/OpenGL ES) and glslCanvas (JS/WebGL).

如何在自己的博客中导入该插件

参考Hexo大神配置的butterfly主题的一项功能:跳过 hexo 的渲染
具体操作是：

1
2
$ git clone https://github.com/patriciogonzalezvivo/glslEditor.git
$ npm install glslEditor --save

第一个shaderToy代码

摘自shaderToy新建第一个代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//代码解析
void mainImage( out vec4 fragColor, in vec2 fragCoord ) //函数头
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Time varying pixel color
    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

    // Output to screen
    fragColor = vec4(col,1.0);
}

然后将整个目录copy到butterfly的index目录即可。

特点-shaderToy

在ShaderToy的每个shader上方，你都可以看到一个Shader Input：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// shadertoy input
Shader Inputs
uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iTime;                 // shader playback time (in seconds)
uniform float     iTimeDelta;            // render time (in seconds)
uniform int       iFrame;                // shader playback frame
uniform float     iChannelTime[4];       // channel playback time (in seconds)
uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
uniform vec4      iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
uniform samplerXX iChannel0..3;          // input channel. XX = 2D/Cube
uniform vec4      iDate;                 // (year, month, day, time in seconds)
uniform float     iSampleRate;           // sound sample rate (i.e., 44100)

这些就是ShaderToy提供的公共变量，可以直接访问。例如，iResolution存储了屏幕的分辨路，iGlobalTime提供了shader运行时间，iMouse提供了鼠标点击位置等等。

More info: website

特点-glslEdit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//代码解析 

#ifdef GL_ES
precision mediump float; //精度
#endif

uniform vec2 u_resolution;//类似shaderToy的iResolution,不过这里只有两个维度
uniform vec2 u_mouse;//类似i_mouse，控制鼠标位置
uniform float u_time;//类似iGlobalTime控制运行时间

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy; //gl_FragCoord类似shaderToy中的vec2 fragCoord
    st.x *= u_resolution.x/u_resolution.y;

    vec3 color = vec3(0.);
    color = vec3(st.x,st.y,abs(sin(u_time)));

    gl_FragColor = vec4(color,1.0);
}

实际上老版本的shaderToy和glslEdit的输入设定一致，知识在main函数和gl_FragColor参数作了改进，可以自定义命名。

所以，植入glslEdit以后,
shaderToy网站上的很多优秀的算法都可以吸收到博客上；
就可以在本地学习shader,并推送一些学习心得放在博客上了。

一些结果展示

请参见“聚宝盆”。