如何将炫酷的3D特效移植为桌面壁纸
前言
大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。本文就让我们来用kokomi.js的shadertoy组件将Shadertoy上的炫酷特效移植到我们的桌面上~
缘起
Shadertoy是笔者经常逛的一个网站，上面有许多CG级别的炫酷特效，有一天，笔者突然萌生了一个想法：能否将这些特效移植到桌面上，作为动态壁纸来欣赏。
恰好前阵子笔者正在进行kokomi.js（一个Web 3D的辅助框架）的开发，里面有一个ScreenQuad的组件，能渲染着色器代码的结果，再借助自定义组件这一特性，笔者封装了一个shadertoy的组件，只要将片元着色器的代码复制进去，就能将着色器本身的代码给渲染出来，并且跟Shadertoy网站本身带来的效果几乎别无二致。
准备特效
本地新建一个html文件，引入kokomi.js，注册好shadertoy组件，清除页面的空白部分
```html
```
接下来我们可以使用<shader-toy>这个标签了（放在<style>标签下面）
html
<shader-toy></shader-toy>
你会发现屏幕上出现了一个颜色变换的场景，其实这就是shadertoy官方的模板代码
接下来我们可以开始往里面填充着色器特效了，以这个极光特效为例，将右侧的着色器代码CV至<shader-toy>标签内的<script type='frag'>标签内即可
当然这里给个友善的小提醒：CV完后记得标记出处，表示对原作者的尊重
html
<shader-toy>
<!-- Credit: http://www.shadertoy.com/view/XtGGRt -->
<script type="frag">
(将着色器代码CV于此)
</script>
</shader-toy>
这样我们就能看见特效成功地被渲染出来了
http://code.juejin.cn/pen/7110784867540926478
PS：有的特效本身还带有材质，如果有的话就要添加img标签，将name设定为对应的材质名（如iChannel0），加上hidden隐藏起来即可
html
<img src="./iChannel0.png" name="iChannel0" hidden />
如果想要更多的特效，可以移步这个仓库
移植桌面壁纸
笔者将使用Wallpaper Engine来完成接下来的操作，目前windows系统只有这个才能达到动态桌面的效果，暂时找不到别的替代品（如果有可以直接在下面回复），mac或linux系统请自行寻找替代的解决方案（只要支持能用html作为桌面背景的软件就行）
打开WE，点击左下角的“壁纸编辑器”
这时会跳出一个“欢迎”的弹窗，点击“创建壁纸”
选择你之前准备好的特效的html文件，再点击“确认”
点击左上角的“文件”，再点击“应用壁纸”，完成！
最后的效果如下，还能鼠标交互哦
原理
想了解shadertoy组件原理的可以直接移步组件的源码，本质上是做了这些事情：
- 申明一个静态的注册方法，里面负责注册组件本身到页面上
- 选择组件内部的
<script type='frag'>元素，获取其内容（着色器代码），用它来创建ScreenQuad组件 - ScreenQuad组件本质上是一个铺满屏幕的平面元素，里面内置了几乎所有shadertoy的uniform变量，并且能根据时间等要素进行渲染更新
最后
桌面是不是有种焕然一新的感觉？
Web 3D，永远超乎你的想象。