如何將炫酷的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,永遠超乎你的想象。