GLSLライブコーディングについて講義しました

去る2018/04/28(土)、GLSLライブコーディングのワークショップを開催しました。

資料について

speakerdeck.com

サンプルファイル: GitHub - fand/veda-toplapjp02

ワークショップは、こちらの資料を参照しつつ、サンプルファイルを手元で実行して学習する、というスタイルで進行しました。 サンプルファイルには、あらかじめ様々な処理がコメントアウトされた状態になっています。 これらのコメントを一つずつ外して実行することで、講義内容を段階的に学べるようになっています。

講義はまず、GLSLとは何か？から始まり、フラグメントシェーダーによるシェーダーアート1の基礎、動画エフェクトとしてのGLSLの利用法を学びます。 続いて、頂点シェーダーを利用したシェーダーアートについて紹介し、最後に音声入力を利用したエフェクトについて学びました。 GLSLを書いたことがない人でも、ライブコーディングパフォーマンスが出来るようになる、というのを目標にしています。

動画素材はbeepleから、3Dモデルはturbosquid等からライセンスフリーのものを拝借しました🙏

もっと詳しく学びたい方へ

GLSLを触るのが初めてという方は、The Book of Shadersを読みましょう。 こちらはWebサイト上でコードを編集しつつ実行して学べる教材になっています。

The Book of Shaders

より高度な表現を学びたい方は、wgld.orgのGLSLに関する記事を読むと良いです。 シェーダーアートで頻繁に使われるレイマーチングという手法を学べます。

wgld.org | GLSL |

また、つい最近東京でUnity向けシェーダーアートについての発表がありました。 こちらはGLSLではなくHLSLとなりますが、基本的な考え方はGLSLでも通用しますので、参考にしてください。

setchi.hatenablog.com

講師として心がけたこと

今回のワークショップは、moxusさんとDMして「1時間だと厳しいので2時間で行きましょう」と決定したのですが、資料を作り始めると（あれ……？2時間で教えるのメッチャ厳しくね……？）という事に段々気がついてきた……。 GLSLは奥が深く幅の広い技術ですが、今回はライブコーディングに的を絞り、本来の3DCGにおける役割や、OpenGL/WebGLでの利用法の解説は完全に省きました。 また、なるべく時間を節約するため、受講者にはあらかじめVEDAのインストールをお願いしておきました。

（ハンズオン等では、最初の環境構築に時間を取られることが多いので、自己紹介の前に資料URLやサンプルファイルを共有しておくと便利です）

僕は昨年末にも GLSLスクール の講師を行った事があるのですが、その時とはかなり状況が異なるので、資料はほぼ一から作り直すことになりました。 GLSLスクールでは、受講者はGLSLの基本文法については把握しているという前提だったので、僕はライブコーディング文化や、VJパフォーマンスを行うためのTipsを教えることに集中できたのです。

今回は、講義のはじめに「わからなくても気にしない」というスローガンを掲げました。 GLSLはC言語ライクな文法と言いつつ、いろいろと独特な言語なので、初歩でつまりがちです。 文法について一々説明しておくと時間が足りませんし、あとでゆっくり資料を参照すれば済む話です。 せっかくワークショップに参加していただいているので、言語についての知識よりも、どのようにパフォーマンスを行うか、体験で掴んでもらうということを目標にしました。

（メチャクチャ雑に言うと、「GLSLには様々な関数があり、様々なことができる」ということを体験してもらえれば良い）

なんかこれデジャヴュ感あったので、去年のReactハンズオンの資料を見直してみたら、だいたい同じこと言ってた。

資料作成、意外と手間取ってしまって、当日の朝7時まで徹夜で作ってたので、後半は口調がフランクになったり解説が雑になってるかもしれない……

僕がGLSLライブコーディングを知って1年が経った

僕がGLSLライブコーディングの世界に興味を持ったのは丁度一年前。 2017/04/29に六本木でチャネル#16を観たことがきっかけでした。

blog.gmork.in

それから一年、ライブコーディングの世界に惹かれて、GLSLの学習やVEDAの開発を続けてきました。 たった一年ですが、色々なイベントに出演させていただいたり、ワークショップの講師として声をかけていただくことがあり、幸甚の至りです。

今回のワークショップは、初心者にGLSLの世界を広めるだけでなく、僕自身にとってもライブコーディング文化について知る良い機会となりました。 参加者の皆様、主催の moxus 様、ありがとうございました！

  1. 僕はGLSLなどのシェーダーを用いたアート作品やパフォーマンスを「シェーダーアート」と呼んでいます。参考: GLSLによるシェーダーアートことはじめ↩

VEDA最近のアップデート: 3Dモデル読み込み、Floatテクスチャ、全画面モード

こんにちはアマギです。
WebGL/GLSLでVJシステム VEDA を開発しています。

VEDAを使うと、Atomでこんなパフォーマンスが出来るようになります↓

www.youtube.com

最近ブログに書いてなかったけど、いろいろとおもしろ機能を追加してました。
この記事では最近のアップデート内容を紹介します。

過去のアップデート内容については以下の記事をご覧ください。

目次

新機能

3Dモデル読み込み

3Dモデルを読み込んでシェーダーを当てられるようになりました。 モデルを読み込むと、頂点シェーダー内で attribute vec3 position や attribute vec3 normal が利用可能になります。

モデルを読み込むには、設定コメントに MODEL プロパティを追加して下さい:

/*{
    PASSES: [{
        MODEL: {
            PATH: "./foo/bar.obj"
        }
    }]
}*/

現在サポートしているファイル形式は次のとおりです:

  • OBJ
  • JSON (Three.js用に生成されたファイル)

OBJファイルの場合、別途 MTLファイルを指定することで、テクスチャをまとめて読み込むことができます。 また、JSONファイルの場合、テクスチャがjpgなどで指定されていれば自動で読み込まれます。（ddsなどChromiumで表示できない形式は対応していません。）

具体的な利用方法はサンプルファイルをご覧ください。

今後、glTFやfbx等への対応も検討しています。 ゆくゆくはアニメーションにも対応したい……！

3Dモデルのファイル形式に詳しい皆様、PullRequestお待ちしております😹

Floatテクスチャ

これまでのVEDAでは、レンダリング先のバッファはRGBA/UNSIGNED_BYTE形式で固定でした。 つまり、RGBA各チャンネルに8bitずつしか使えないので、パーティクルの計算などを行なうには精度が足り無いという問題がありました。

今回のアップデートにより、設定コメントの PASSES 内に FLOAT: true と書くことで、RGBA各チャンネルの情報を32bitの浮動小数点数として保存できるようになりました。 これにより、いわゆるGPGPU1的な計算ができるようになります。

Floatテクスチャについて詳しく知りたい方は、 wgld.org の記事をご覧ください。

wgld.org | WebGL: 浮動小数点数テクスチャ |

全画面モード

ctrl-escape を入力すると、シェーダーの描画結果だけをAtomのウインドウいっぱいに表示できるようになりました。 キーボード入力を利用したシェーダーを表示する際や、スクリーンショットを撮影するのに便利です〜。

今後の開発について

今後は、ひとまず以下に挙げる機能の開発を進めていこうと思っています。

  • 3Dモデルの対応ファイル形式を追加
  • 任意のuniform変数を追加/設定できるGUI

↑のどっちかが落ち着いたら v3.0 リリースかな。

WebGL2.0に対応するためにVEDAのコア部分をPure WebGLで書き直そうとしたりもしてたけど、最近Three.jsのWebGL2.0開発が盛り上がってきてるっぽいので、そっちを待つことにしました。

今後のアップデートもお楽しみに！
機能の要望や質問などあれば、TwitterやGitHubで気軽にお声がけください！

【宣伝】GLSLワークショップやります

今週の土曜（2018-04-28）、京都でGLSLライブコーディングのワークショップを開催します！ GLSLやライブコーディングに興味のある方！ぜひご参加ください！！

お申込みはこちら: http://toplap.jp/post/2018-04-28

  1. 最終的な計算結果は画面に描画されるだけなので、世間一般に言うGPGPUとしては使えないが、WebGL界隈ではCompute Shaderを用いた表現をGPGPUと呼ぶことが多い↩