毎日GLSLでアニメーションを作ってる

最近GLSLやWebGLの世界に入門して、毎日こんなアニメーションを作っている。

4月末、東京に出張する機会があり、ついでに何か面白いイベントや展示がないか探していると、チャネルというイベントを見つけた。
以前から気になっていたBRDG/VRDG方面のイベントらしい。
会場は六本木のSuperdeluxe。出張先のオフィスからも近いので、少し早退して行ってみる事にした。

そこではハードな電子音に合わせて、GLSLやHaskellのライブコーディングによるVJが行われていた。

そのあまりのクオリティの高さに衝撃を受け、GWごろから少しずつ、ほぼ毎日GLSLを書いている。

GLSLとは

OpenGL Shading Languageの略。
OpenGLWebGLなどの3Dグラフィックス環境において、オブジェクトの影や色を計算するために作られた言語だ。
GPUのパワーを簡単に引き出すことができ、複雑なアニメーションをリアルタイムに実現できる。

元々は影を計算したりテクスチャを貼ったりするための物だったけど、GPUパワーに目をつけた人たちがGLSL単体でアート活動をし始めて、現在では独特なコミュニティを形成している。
GLSL SandboxShadertoy には、異常な努力と才能によって書かれたアニメーションが溢れている。

GLSLはいわゆるメガデモ界隈でも愛用されている。
日本のデモパーティTokyo Demo Festでは、GLSLだけで作品を作るコンテストがあったりする。

tokyodemofest.jp

僕の活動

GLSLを書いたり、GLSLからGIFアニメを生成するツールを作ったりしているので見てくれ!!

fand/webgl-study

fand.github.io

これまでに作ったアニメーションとその制作メモをGitHub Pagesにまとめている。

GLSLを動作させる環境は、Three.jsを利用して自分で実装した。
Shadertoy等を利用することも考えたが、いずれGLSLだけでなくWebGL全般について学んでいきたいと思っているので、GLSL環境から自分で構築することにした。

技術的には、glslifyとWebpackを組み合わせている。
glslifyはGLSLのコードをbrowserifyのようにバンドルするためのツール。
Webpack用のloaderも提供されていたり、glslifyを前提としたライブラリがnpmで公開されていたりする。

glslifyと関連ライブラリのお陰で、うろ覚えでも気軽にレイマーチング入門できた。 これまでに覚えたテーマとしてはこんな感じ。

レイマーチング

Web Audio APIを使った、FFTと連動するアニメーション

シェルピンスキーのギャスケット

ビルド済みのGLSLファイルは、このレポジトリの docs/shaders/ 以下に置いてある。

github.com

fand/glsl2img

amagitakayosi.hatenablog.com

GLSLのコードからPNG画像やGIFアニメを生成するツール。 webgl-studyの開発フローに組み込んで、サムネイル画像を簡単に作れるようにしている。

技術的には、headless-glを利用してNode.js上でWebGLを動作させ、pngjsやgifencoderで画像を出力している。

glslifyにPullReqを出した (WIP)

Atomにはlinter-glslというパッケージがあり、GLSLの構文エラーを教えてくれる。
しかし、glslifyには対応していないので、glslifyを利用したコードでは本質的ではないエラーが大量に表示されてしまう。

これを解決するには、linter-glslをglslifyに対応させるだけでなく、glslifyをsourcemapsに対応させる必要がある。
単純にglslifyを通すだけでは、linter-glslはビルド済みのコードに対してlintを実行することになるので、エラーの行数がズレてしまうからだ。

というわけで、glslifyのコードを読んで、sourcemapsに対応するPullReqを作ってみたんだけど、今のところ反応がない……

[WIP]Sourcemaps support by fand · Pull Request #6 · stackgl/glslify-bundle · GitHub

学習リソース

以下のWebサイトや書籍を読んで、色々学んでいる。
GLSLはあまり情報が豊富ではないが、幸いにもいくつかWeb書籍などが存在する。

wgld.org

wgld.org

WebGLに関する情報が大量にまとまっているサイト。
GLSLカテゴリでは、レイマーチングの基本が丁寧に解説されている。

The Book of Shaders

thebookofshaders.com

GLSLについて、WebGLの事を何一つ知らなくても学べるWeb書籍。
文中にあるGLSLコードは編集可能になっていて、結果をリアルタイムに確認しながら学習できるようになっている。

初めてのThree.js

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

オライリーのThree.jsの本。
日本語でサッと把握できて良いかな〜という事で購入したけど、まだあんまりThree.jsを活用できてない。
MMDの解説もあるので、そのうち初音ミクとか表示してなんか出来たら楽しそうだなあ。

Moleman 2

メガデモ文化を追ったドキュメンタリー映画
日本語字幕つきでYouTubeに公開されている。

www.youtube.com

いろんなすごいデモやすごい人達が紹介されていて、やる気が高まる。
僕はこれ見てコモドール64ほしくなった。ヤフオクで16万……。


ここまで読んでくれたあなたは、きっと今頃GLSLを書きたくて仕方ないはず。
みんなGLSLやろうぜ、そしてライブコーディングしたりデモ作ったりしよう!