福野泰介の一日一創

「cloud - fragment-shader tag demo」src on GitHub
「レイマーチングで潜れる雲を作る - Qiita」で見つけた無限に雲の中を飛んでいく風をちょっと改良。マウスで上下左右に少し動けて、雲の濃さも周期的に変えてみました。クリックするとフルスクリーン。

fragment-shaderというHTML拡張タグを作ったので、フラグメントシェーダーをGLSL ES 3.0で書くだけでいろんなアニメーションを生成できます！
<script type="module" src="https://code4fukui.github.io/eggl/fragment-shader.js"></script> <fragment-shader width=512 src="./cloud.glsl" fullscreen></fragment-shader> 1行目で拡張タグの準備、fragment-shaderタグはsrcで指定するか、タグの中にフラグメントシェーダーを記述すればOK！読み込み時にプログラムが見えて気になる場合は、hidden属性を加えればOKです。

「fragment-shader tag demo」src on GitHub
このようにHTML内に自由に並べて使えます。WebGL2＆GLSL3、ウェブサイトをステキに飾るのにも良さそうですね！

光の珠オーブや、雲をES-Jamで編集しながら遊んでみるところからどうぞ！

「オーブ - ES-Jam」

links
- WebGL 開発支援サイト wgld.org
- WebGL2 Fundamentals - WebGL2に特化した入門サイト
- docs.gl