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によるシェーダーアートことはじめ