Daily GLSL Sketch on GLSL Sandbox 30

友人の @matthanns@TimRolls_ が1年間毎日 Processing やそのフレームワークである Hype 等を使って Generative art を投稿していく SuperColony というサイトをやってて、まねしごんぼでコピーキャットな俺も何かやりたいけど1日1時間程度で終わるのが好いよねということで GLSL Sandbox を使ってかねてから興味のあった GLSL (ここでは fragment shader のみ)で遊ぶことにしました。

流石に1年間はテンションが持つ気がしなかったのでまずは30日で区切ることに。ちなみに GLSL でできることは多々あると思うのですが現時点の俺は「GPU を使って少ないコード量でもすごいことやってそうなアニメーションが作れるもの」程度の認識でやってます。

以下参考にしているサイトです。

WebGL – OpenGL ES 2.0 for the Web
WebGL Reference Card の3、4ページ目が GLSL 関連です。
Webグラフィックをハックする(最終回):WebGLの能力を引き出すプログラマブルシェーダー (1/5) – @IT
Three.js 前提の記事ですが、2/5 と 3/5 が GLSL 関連です。
Pixel Shaders: An Interactive Introduction to Graphics Programming
ウェブカムを使ったサンプルが楽しいですが BasicquasicrystalNoise あたりでまずはお勉強。
WebGL 開発支援サイト wgld.org
硬派な WebGL 情報サイト。GLSL のカテゴリーにチュートリアルがあります。
demoscene.jp
デモシーンの情報サイトです。
WebGL halftone shader: a step-by-step tutorial
GLSL でのハーフトーンパターンのチュートリアルです。
Into to GLSL – Google Slides
GLSL について分かりやすく説明してくれている解説スライドです。

以下は GLSL Sandbox 上でのチュートリアルです。完全コピペ可の素晴らしさ。

GLSLで簡単2Dエフェクト « demoscene.jp
GLSL で光の点をぐるぐるアニメーションさせるやつ書いてみた – 凹みTips
7 Lines GLSL Graphics Compoに挑戦してみよう!
なんだか雲行きの怪しい雑記帖 週アレ(12) GLSLで遊ぶ(GLSL Sandbox)

さて、スケッチの方は昨日一区切りついたので以下まとめです。WebGL 対応のブラウザで見てみてください(Chrome 推奨ですが 2014年7月16日現在 Safari 以外だいたい見れるはず)。スケッチによっては負荷がかかってPC がフリーズしてしまう可能性中なのでこの機会に大事なファイルは保存しておくことをお勧めします。

001

1/30 glslsandbox.com/e#17529.0

002

2/30 glslsandbox.com/e#17549.0

003

3/30 glslsandbox.com/e#17566.1

004

4/30 glslsandbox.com/e#17586.0

005

5/30 glslsandbox.com/e#17602.0

006

6/30 glslsandbox.com/e#17627.0

007

7/30 glslsandbox.com/e#17668.2

008

8/30 glslsandbox.com/e#17690.0

009

9/30 glslsandbox.com/e#17726.1

010

10/30 glslsandbox.com/e#17739.0

011

11/30 glslsandbox.com/e#17790.0

012

12/30 glslsandbox.com/e#17825.2

013

13/30 glslsandbox.com/e#17850.0

014

14/30 glslsandbox.com/e#17860.0

015

15/30 glslsandbox.com/e#17886.0

016

16/30 glslsandbox.com/e#17920.0

017

17/30 glslsandbox.com/e#18401.0

018

18/30 glslsandbox.com/e#17959.0

019

19/30 glslsandbox.com/e#17586.0

020

20/30 glslsandbox.com/e#18120.0

021

21/30 glslsandbox.com/e#17886.1

022

22/30 glslsandbox.com/e#17886.2

023

23/30 glslsandbox.com/e#17886.3

024

24/30 glslsandbox.com/e#18243.0

025

25/30 glslsandbox.com/e#18263.0

026

26/30 glslsandbox.com/e#18285.0

027

27/30 glslsandbox.com/e#18303.2

028

28/30 glslsandbox.com/e#18331.0

029

29/30 glslsandbox.com/e#18349.0

030

30/30 glslsandbox.com/e#18386.0

以上です。初心者なので意味もよく分からないまま GLSL Sandbox 上の既存ステキスケッチや、チュートリアルサイトにあるものをコピペして関数を調べて値を変えてみる、他のスケッチで使った関数やどっかで見た数式を適当に使ってみるというのを繰り返しています。Tofino に遊びに行って何日か中断したり、後半ややだれてしまった感否めませんがどうにか終えました。

GLSL Sandbox にはユーザー登録等が無いため誰がどれを作ったのか分かりません。なので俺は Twitter のアカウントと通し番号を署名として入れました。他の人のスケッチを軽く fork しただけのものでも厚かましく自分の署名を入れてるので気が引けるのですが、fork 先のリンクや参照先は残しています。

少し充電期間を置いてまた GLSL やりたいと思います。もう少し思い通りに作れるようになってきたら Shadertoy に挑戦したい~\(^o^)/

Update: 参考サイト追加しました。参考サイトの位置をスケッチの上にしました。