pen.dev Vibe Shadersの紹介動画｜デザインツール
pen.devはエージェントと一緒に使うデザインのキャンバスで、Vibe Shadersはそこで光や動きの効果をシェーダーとして作る機能です。
FablessBridgeによる自主制作の紹介動画
概要
エージェントと使うデザインの画面pen.devのシェーダー機能「Vibe Shaders」の30秒の紹介動画です。平たい画像に焼き付く効果とコードへの往復という2つの困りごとを、キャンバス上で動くシェーダーで解いていきます。
動画の要点
- 別の道具で作った効果が平たいPNGとして書き出され動かない困りごとを、言葉で頼むとフレームにライブのシェーダーが描かれる場面で解きました。
- 値を変えるたびにコードと書き出しを往復する手間を、シェーダーの入力をキャンバス上で動かしてその場で変わる場面で片付けました。
- 作ったシェーダーが.penファイルの隣の普通のGLSLファイルとして残ることを、ファイルの一覧で示しました。
動画の流れ
- 00:00ペン先のロゴと「Vibe Shaders」、pen.devの説明が出ます。
- 00:02暗いエディタの中で、デザイナーとエージェントのカーソルが告知ページを作っています。
- 00:04別の道具で書き出した平たいPNGが背景に置かれ、「STATIC PNG」の判が押されます。
- 00:07シェーダーのコードの値を変えては書き出して読み込み直し、画像の版が増えていきます。
- 00:11書き出した画像が積み上がり、「Still a flat hero.」と出ます。
- 00:13全面にライブのシェーダーが広がり、ペン先と「Shaders made by talking to the canvas」が出ます。
- 00:15エージェントに効果を言葉で頼むと、フレームの中心からシェーダーが描かれ、塗りにGLSLファイルが入ります。
- 00:20シェーダーの入力の値をカーソルで動かすと、その場で光り方と色が変わります。
- 00:25.penファイルとGLSLファイルが並び、「Plain GLSL, right next to the .pen file」と出ます。
- 00:27シェーダーの背景にペン先と「Make it glow by asking.」、サイトのURLで締めます。