如何將炫酷的3D特效移植為桌面壁紙

語言: CN / TW / HK

前言

大家好,這裏是 CSS 兼 WebGL 魔法使——alphardex。本文就讓我們來用kokomi.jsshadertoy組件將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: https://www.shadertoy.com/view/XtGGRt --> <script type="frag"> (將着色器代碼CV於此) </script> </shader-toy>

這樣我們就能看見特效成功地被渲染出來了

https://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,點擊左下角的“壁紙編輯器”

1.png

這時會跳出一個“歡迎”的彈窗,點擊“創建壁紙”

2.png

選擇你之前準備好的特效的html文件,再點擊“確認”

3.png

點擊左上角的“文件”,再點擊“應用壁紙”,完成!

4.png

最後的效果如下,還能鼠標交互哦

原理

想了解shadertoy組件原理的可以直接移步組件的源碼,本質上是做了這些事情:

  1. 申明一個靜態的註冊方法,裏面負責註冊組件本身到頁面上
  2. 選擇組件內部的<script type='frag'>元素,獲取其內容(着色器代碼),用它來創建ScreenQuad組件
  3. ScreenQuad組件本質上是一個鋪滿屏幕的平面元素,裏面內置了幾乎所有shadertoy的uniform變量,並且能根據時間等要素進行渲染更新

最後

桌面是不是有種煥然一新的感覺?

Web 3D,永遠超乎你的想象。