shadertoy 移植到本地（0）：实施分析

sea by shadertoy.png

 shadertoy 是一个可在线编写着色器（shader）的UGC平台，它有好用的实时运行、源码查看 、收藏分享等功能，平台很活跃每天都有大量作品发布，其中有大量的高品质渲染画作。
shadertoy 链接

在shadertoy上编辑作品,主要的形式是es通过编写着色器代码的形式来实现，编写语法是webgl2 GLSL 300 es ，虽然说是编写着色器，单实际上我们只是在编写片元着色器的一部分，顶点部分是固定覆盖全屏的一矩形片，和postEffect(全屏后处理)绘制类似，这样我们只需要关注每个像素如何绘制，同时shadertoy也提供了佛丰富的输入接口，以便于实现更复杂的效果。

移植大致工作

• 准备好一个webgl2 html程序。
• 够建基础顶点着色器、片元着色器 ，一个铺满全屏的单色的片。
• 实现shadertoy 定义的输入接口。
• 从shadertoy 拷贝着色器代码插入到，我们片元着色器的相应位置。

详细细节

shaderToy 提供uniform输入

uniform vec3      iResolution;           // 视口分辨率 (in pixels)
uniform float     iTime;                 // 播放时间 (in seconds)
uniform float     iTimeDelta;            // 帧间隔变化时间 (in seconds)
uniform int       iFrame;                // 播放的帧数
uniform float     iChannelTime[4];       // 通道的播放时间 (in seconds)
uniform vec3      iChannelResolution[4]; // 通道的分辨率 (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会将键盘、音频信息处理成纹理，比如音频就处理成一张512x2的纹理然后再输入。

4个通道纹理输入.png

话筒 （音频处理成 512 x 2 的纹理）
云端音频
内置音频
键盘
摄像头
FrameBufferA
FrameBufferB
FrameBufferC
FrameBufferD
CubeMapA
内置2d纹理资源
内置视频
内置3d纹理
内置cubeMap

代码模块

shadertoy 可支持添加多个代码块，Image为主代码块。
除了 Common 、Sound 的子代码块, 都会输出成一个framebuffer，以便下一个环节通过纹理通道作为可选纹理输入。

shadertoy添加代码块.png

Image //最终输出
Common //公共函数放置
Sound //音效处理（不参与渲染，只是音效）
BufferA //frameBuffer 0 处理
BufferB //frameBuffer 1 处理
BufferC //frameBuffer 2 处理
BufferD //frameBuffer 3 处理
Cube A //cubeMap 0 处理