Xで、水面のきらめきや、ゼリーみたいにぷるぷる動くオブジェ——コードだけで描かれた美しい表現を見かけて、「私も作ってみたい」と思ったこと、ありませんか。
今はAIにお願いすれば、それらしいものを一瞬で作ってくれる時代です。でも、Web制作やプログラミングをやったことがないと、「どういう仕組みで動いてるんだろう？」と不思議に思っても、そこから先へ進むのはなかなか難しいですよね。「シェーダー」や「GLSL」なんて言葉を見た日には、もうお手上げです。
でも、少しだけ仕組みを知ると、世界が変わります。AIが作ってくれた作品を見て、「ここをもう少し光らせたい」「色を変えたい」「もっとゆらゆら動かしたい」——その希望を、自分で形にできるようになるからです。
このページは、そんな表現の世界を ①眺める → ②シェーダーの仕組みを知る → ③自分の手元で動く環境 ─ 3段の階段にして案内します。
① まずは、眺めることから
いきなり作らなくて大丈夫です。まずは、世界中の人が作った作品を眺めるところから。
コードで絵を描く作品を集めた、2つの美術館があります。
- OpenProcessing … 比較的やさしい作品が多い場所。動く模様やアート作品が、コードごと公開されています。
- Shadertoy … 本格的なシェーダー作品が集まる場所。あの「水面のきらめき」も「ぷるぷるのゼリー」も、ここで見つかります。
どちらも、絵の下にその絵を描いたコードが全部書いてあります。 美術館なのに、描き方まで教えてくれる。まずは眺めて、「こんな表現があるんだ」と驚くところから始めましょう。
💡 ひとつ、種明かしを。AIが出してくる絵は、魔法ではありません。レイマーチング、ノイズ、距離関数——長年かけて磨かれ、みんなの共有財産になった「定番の手法」を、AIが学んで組み直したものです。その元になった手法が、まさにこの2つの美術館に並んでいます。
② 仕組みを知る ─ 数式で絵を描く（自由研究）
正直に打ち明けます。シェーダーは、AIに聞いてもなぜか分かりにくいんです。 質問すれば正確な答えは返ってくる。なのに、頭に絵が浮かばない。私は何度もそこでつまずきました。
それもそのはず。シェーダーというのは、画面のピクセル1つ1つに向かって「あなたは何色？」と数式で一斉に答えさせる、という仕組みです。数式を説明されるほど、かえって像が結ばないんです。
そこで私は、AIに「小学生に教えるみたいに説明して」とお願いしました。すると——目からうろこ。急に絵が浮かんだんです。
このシリーズは、そのとき教わった順番を、そのまま並べたもの。子供の夏休みの自由研究のつもりで、うんと噛み砕いています。丸をひとつ描くところから始めて、色がつき、動きだし、最後には万華鏡が回ります。
③ 自分の手元で動かしてみる
仕組みが分かってきたら、最後の段。Shadertoyで見つけた「あの絵」を、自分の手元で動かすところまで。
「クリエイティブコーディング」とは、コードで絵や模様を描く遊びのこと。このシリーズでは、まず p5.js という読みやすい世界から始めて、シェーダーの魔法へ、そして最後は React Three Fiber という道具を使って、拾ってきたシェーダーを実際に動かします。
💡そして実は、ここまでで3Dへの下地ができています。
この連載で扱ったのは「平らな板」に描くところまでですが、React Three Fiber という道具は、もともとゲームで見るような立体の3Dモデルを動かすためのもの。板に絵を描く感覚が身につけば、その同じ道具で、3Dモデルの表面に模様を纏わせたり、空間ごと光らせたり——そんな表現にも手が届くようになります。