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

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

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

先週末に開催したチャネル#16 のライブ映像を公開しました。 https://t.co/YgpC3YYC0B #unity3d #tidal #maxmsp #tokyo #BRDG #livecoding #kodelife pic.twitter.com/rWaHodipUA
— BRDG / VRDG (@tokyomax) 2017年5月2日

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

GLSLとは

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

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

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

レイマーチング

yay!! #GLSL pic.twitter.com/LPZbqbcNxi
— オウテカ (@amagitakayosi) 2017年6月3日

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

この前ので音量取れるようになったから、音楽に合わせてグリッチっぽいのしたり色収差つけたり簡単にできた #glsl pic.twitter.com/skKofzw3yB
— オウテカ (@amagitakayosi) 2017年6月1日

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

シェルピンスキーのギャスケット、愚直に正三角形を描くと重くてマトモに表示できなかったので、直角二等辺三角形を描いたあとskewしてあげた。もっといい方法ありそう https://t.co/dhhwLBzK0S #glsl pic.twitter.com/kPG80g2KF1
— オウテカ (@amagitakayosi) 2017年5月18日

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

github.com