如何将炫酷的3D特效移植为桌面壁纸

前言

大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。本文就让我们来用kokomi.js的shadertoy组件将Shadertoy上的炫酷特效移植到我们的桌面上~

缘起

Shadertoy是笔者经常逛的一个网站，上面有许多CG级别的炫酷特效，有一天，笔者突然萌生了一个想法：能否将这些特效移植到桌面上，作为动态壁纸来欣赏。

恰好前阵子笔者正在进行kokomi.js（一个Web 3D的辅助框架）的开发，里面有一个ScreenQuad的组件，能渲染着色器代码的结果，再借助自定义组件这一特性，笔者封装了一个shadertoy的组件，只要将片元着色器的代码复制进去，就能将着色器本身的代码给渲染出来，并且跟Shadertoy网站本身带来的效果几乎别无二致。

准备特效

本地新建一个html文件，引入kokomi.js，注册好shadertoy组件，清除页面的空白部分

<style>
    body {
        margin: 0
    }
</style>
<script src="https://unpkg.com/[email protected]/build/kokomi.umd.js"></script>
<script>
    kokomi.ShaderToyElement.register();
</script>
复制代码

接下来我们可以使用<shader-toy>这个标签了（放在<style>标签下面）

<shader-toy></shader-toy>
复制代码

你会发现屏幕上出现了一个颜色变换的场景，其实这就是shadertoy官方的模板代码

接下来我们可以开始往里面填充着色器特效了，以这个极光特效为例，将右侧的着色器代码CV至<shader-toy>标签内的<script type='frag'>标签内即可

当然这里给个友善的小提醒：CV完后记得标记出处，表示对原作者的尊重

<shader-toy>
    <!-- Credit: https://www.shadertoy.com/view/XtGGRt -->
    <script type="frag">
      (将着色器代码CV于此)
    </script>
</shader-toy>
复制代码

这样我们就能看见特效成功地被渲染出来了

https://code.juejin.cn/pen/7110784867540926478

PS：有的特效本身还带有材质，如果有的话就要添加img标签，将name设定为对应的材质名（如iChannel0），加上hidden隐藏起来即可

<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，永远超乎你的想象。