shadertoy在线编辑器

shadertoy在线编辑器。初步功能，有待完善，可在线编辑shadertoy代码并预览效果。

特别说明

接入了three.js，创建了一个shader环境可以跑shadertoy的效果。

上面画布里的内容是three.js实时渲染出来的场景，不是图片！不是图片！不是图片！

鼠标点击或拖动可与之交互。

后续会添加用于编辑shader的页面，以完全实现网页版的shadertoy。

更多shadertoy效果见本博客shadertoy分类。

目前实现的方案可以在任一篇博文的markdown内容里通过div的属性传递不同的ps、纹理、ub等数据。常用的例子如下所示。

1
2
3
4
5
6
7
<div class="shadertoy"></div>

<div class="shadertoy" ps="/shaders/shadertoy/default.ps"></div>

<div class="shadertoy" ps="/shaders/shadertoy/raymarching.ps"></div>

<div class="shadertoy" need_input=1></div>