#つぶやきGLSL というハッシュタグが面白い! 1ツイートに GLSL のコードを詰め込むシェーダーコーディングの世界
頭の体操にも……なるかもしれない……
ここ最近、GLSL に明るいひとたちの間で(スコープがめっちゃ狭いが……)、#つぶやきGLSL というハッシュタグを付けて GLSL のコードをツイートするのが流行っています。
@butadiene121 さんが当該ハッシュタグを付けてツイートしたことを皮切りに、VRChat 界隈を始めとするいろんなジャンルの人たちが参戦し、あっという間に多くの作品が Twitter 上に投稿されました。
WebGL やシェーダ作品をそれなりに観察してきた私の目から見ても、本当に驚くような作品ばかりが投稿されていて、こんなに短いコードでも多彩な表現ができる GLSL の新たなる地平線を見せつけられたような気分です。
今回は、そんな #つぶやきGLSL に投稿したいときに便利なオンラインエディタ環境、twigl.app と共にご紹介しようと思います。
追記:
twigl.app はまだまだベータ実装で、いきなり新機能が追加されたり見た目が変わったりすることがあるかもしれません。直近では、サウンドシェーダや WebGL 2 対応などを進めていく予定です。
リンク:
#つぶやきGLSL - Twitter検索 / Twitter
シェーダーコードを圧縮するのだ!
今回紹介する twigl.app は、@butadiene121 さんが何個か目の #つぶやきGLSL タグつきのツイートをしていたのを見かけたときに「アニメーション GIF かなんかを簡単に作成できて、文字数カウントしてくれる WebGL 製エディタがあったら便利かもな」と思ったのが制作に至った最初の動機でした。
思い立ったが吉日ということで、その日のうちにシュッと実装して公開すると、さっそく Pull Request や要望をいただくこともでき、一部の方々には便利に使っていただけてるのかなと思ってます。
作者としても、嬉しい限りです。
今回紹介している #つぶやきGLSL ハッシュタグ付きのツイートでは、当たり前ですが、1つのツイートに GLSL のコードがすべて収まっていることが条件になっています。
文字数はハッシュタグが入る分を考慮すると、たぶん最大で 270 文字前後なので、かなり GLSL のコードを圧縮して記述してやる必要があります。
twigl.app では、フォントを大きめに設定しつつ、文字数のカウント数を表記したり、いくつかのモードを選択できるようにしたり……
その場でアニメーション GIF を生成してダウンロードすることができるようにしたり、いくつか機能を実装してあります。
この上の画像は、コードペインの部分を原寸でキャプチャしたものですが、文字数カウントやステータスの表示がされているのがわかると思います。
また、デフォルトの状態では precition highp float
の精度修飾子宣言と、3つの uniform 変数が定義されています。このあたりは、GLSLSandbox などと同様ですね。
twigl.app には、@FMS_Cat 氏が実装して Pull Request してくれたものも含め、3つのモードがあります。
上の画像のように、uniform 変数が普通に英単語になっている通常のモードは「クラシックモード(classic)」で、これが既定。
2つ目のモードは「ギークモード(geek)」で、このモードでは uniform 宣言される変数が アルファベット1文字 に設定されます。
変数名が1文字違うだけでも、#つぶやきGLSL の世界では地味にこれが効いてくることもあるので、変数名が1文字になるとかなりコードに余裕が出る感じですね。
さらに、第3のモードとして「ギーカーモード(geeker)」という、より先鋭化されたモードもあり、こちらのモードの場合は precition や uniform の宣言文自体がなくなります。
レギュレーション的にこういったモードの違いはどうなの? という意見もあるかもしれませんが、GLSL は誰のものでもないので…… 個人的には、こういうモードが楽しいと思えるなら、それでいいんじゃないかなって思います。
文字数は大幅に削減されるので、初心者にもとっつきやすく、モード名とは裏腹に実は入門者向けのモードになるのかなと思います。
そもそも GLSL が書けない(あるいは読めない)ということになると、このサイトを使うのはちょっと難しいかもしれないですが……
とは言え、Twitter でハッシュタグ検索してもらえれば、頭のおかしな人達が生み出した超ミニマム・シェーダーと、その僅かな文章量から生み出される未知のグラフィックスを堪能することができます。
記事の末尾に、Twitter 検索のページへのリンクも置いてありますので、ぜひ作品鑑賞だけでも構いませんのでご覧になってみてください。
FMS_Cat くん、tar-bin さん、Pull Request ありがとう!
twigl.app は GitHub でソースコードを公開していて、誰でも閲覧や PR 作成を行えます。
思い立ってから一晩という短時間で突貫で作ったので、まあいろいろ怪しいところもあるのですが、いまのところは割と安定して動いているようです。
画面の右側に並んでいるリストから、指定フレーム数と、指定解像度で、アニメーション GIF を生成してダウンロードすることもできます。
最初はちょっと難しいかもしれないですが、逆に短いコードでいろいろ表現を模索する楽しさもあり、実は初心者でも楽しめるジャンルなんじゃないかなと思います。
ぜひ twigl.app や #つぶやきGLSL のハッシュタグ、またいろんな人の素晴らしい作品たちをチェックしてみてください。