タロットカードをモチーフにした GLSL シェーダアートを学べるオリジナルカードがプレオーダー受付中！
期間限定で販売されている希少品
今回ご紹介するのは、WebGL を使ったサイトではあるものの、そのコンテンツとしての主題はタロットカードのようなオリジナルカードを販売しているサイトです。
非常に興味深いのは、そのカードのデザインと描かれているものの内容です。
なんとこのカード、カードの片方の面には図柄が白黒で描かれており、その裏面には、その図柄をシェーダで表現するにはどういうコードを書けばいいのか、という詳細が書かれています。
なんとも面白い商品ですよね。
Patricio Gonzalez Vivo 氏のプロダクト
GLSL について勉強したことがある方は、たぶん Book of Shaders という GLSL の解説サイトを見たことがあるんじゃないかなと思います。
なんと今回のこのオリジナルカードのプロダクトは、その Book of Shaders の著者である Patricio Gonzalez Vivo さんのプロダクトです。
シェーダの記述をタロットカードに見立てて勉強しながら楽しめるという今回のこのプロダクト、その発想からして本当に素晴らしいですし、カードのデザインなども含めて、とても素晴らしい出来栄えになっています。
そんなカードが宙に舞うような動きで漂う WebGL デモが、サイトのトップ部分と、最下部に置かれています。
黒をベースにしたシンプルなデザインの柄が特徴的ですが、このカードに白黒で描かれている形状こそが、シェーダによって描かれる図形のイメージになります。
非常にシンプルな例を示すと、たとえば次の画像にあるように、カードには黒と、白を使って、何かしらの図形や模様が描かれています。
そしてそのカードを裏返すと、その模様を描くための GLSL のコードが出てきます。
サイト上では、マウスをホバーさせると、その場でクルリとカードが裏返るような演出を見ることができます。
これ、ほんとにアイデアがすごいですよね。
カードのデザインもかっこいいし、なおかつシェーダアートの勉強にもなるというのならぜひともほしいと、思わず感じさせる仕上がりになっていると思います。
その他、サイト内には、カードに書かれている情報に関するインフォメーションや、同梱されるカードの図形一覧などが閲覧できるようになっています。
まずはカードに描かれた図形や模様を見て、それがどのようなシェーダのコードで描き出すことが可能なのか考えてみる……そして裏をめくって実際にコードを眺める――
そんなふうに楽しみながら GLSL と向き合うことができそうです。
用意されている図形のサンプルは多彩なバリエーション！
GLSL だけを用いて様々な図形や模様を描き出す技術は、シェーダに不慣れなうちは何が何だかわからないというか、意味不明な謎の技術に見えます。
実際私も、パッと見ただけではどうしてそのような結果になるのか、まったく想像のつかない作品も世界中でたくさん公開されています。
今回のカードの柄を見ると、それなりに基本的な内容からちょっと捻りのきいたものまで、幅広く扱っているようですね。
カードに掲載されている GLSL のコードはロジックの中心部分で、周辺の実装については触れられていませんが、恐らく Book of Shaders のサイトにあるシェーダエディタにペーストして動く形になっているのだと思います。
本物のカードとして注文することができ、6 月くらいまでプレオーダーを受け付けているようです。※即オーダーした
サイトの WebGL 実装は基本的な内容のものですが、サイト全体のシックな雰囲気はカードのデザインとの一体感もあり、なかなかきれいにまとまっています。
シェーダに興味のある方は、購入を検討してみても、いいかもしれません。
ぜひチェックしてみてください。
