この記事はteam411 Advent Calender 2025の2日目の記事です。
当アドベントカレンダーの他の記事はこちらから閲覧できます。
おはこんばんにちは(死語)、team411のてるよしです。
この記事ではシェーダーの基礎概念と作品例、そしてシェーダーを始めるにあたって便利なサービスやサイトを紹介します。詳細なシェーダープログラミングの書き方などはすでに多くのチュートリアル記事があるので、ここでは割愛します。
シェーダーとは
Minecraftの影モッドや、Unity・UEなどのゲームエンジンに触れていれば聞いたことがあるかもしれません。名前からわかる通り、影(shade)をつけるヤツ(er)です。
もうちょっとちゃんと定義すると、「3Dポリゴンデータや光源、マテリアルやテクスチャなどの様々なデータを入力として受け取り、画面に映る2Dピクセルデータに加工して出力するプログラム」です。影を付ける以外にも、多様な(本当に多様な！)グラフィクス表現を行うことができます。
(電通大生向けに補足すると、コンリテや基礎プロの最終課題でやったプログラミングを超強化したものだと考えるといいでしょう。)
一般的なプログラムはCPUで動作し上から順に実行されていく(ピクセルの描画は1つずつ順番に行う)のに対し、シェーダープログラムは主にGPUで動作し、各ピクセルごとに独立した処理が同時並行で走るため、ピクセル描画に関しては圧倒的にCPUのものより高速です。(その代わりに多少の制約が加わります。)
以下の動画が非常に直感的でわかりやすいです。
シェーダーを学ぶとできること
実際にシェーダーで作られた作品を見てみましょう。
以下のサイトに飛ぶと大量の作品が出てきます。気になったやつをクリックすると詳細を見ることができます。
一部の作品は音やマウス・キー入力やカメラの情報などを使って動的に動画の性質が変化していくのが見て取れるでしょう。このように、能動的にこちらから映像に干渉することでリアクションが返ってくるインタラクティブ性がシェーダーの大きな魅力の一つです。
動画や画像として出力するだけでなく、実際にUnityなどのゲームエンジンで活用することもできます。これができると独創的な世界観の表現に非常に有用です。
また、AviUtl2やAdobe AfterEffectなどの動画編集ソフトではシェーダーを記述する手段が用意されています。これを利用することで通常実現することが難しい新しいタイプの映像演出を作り出すことができるほか、使いまわせるスクリプト制作にも役立てられます。
シェーダーのはじめかた
Webエディターを搭載していて手軽に試せるShadertoyやGLSL Sandboxなどのサービスが便利です。
はじめのうちは何をすればいいかわからないでしょう。実際シェーダーはできることが多すぎて到底ここだけで説明しきれる内容ではないので、代わりに私が勉強するときに特に参考にしたサイトを以下にまとめます。
(↓内容が多い&高度で私も読み切れてないです)
その他、上で紹介した作品が転がっているサイトからそのソースコードを見ることもできるので、気に入った表現があったらどうやって実装しているのか見に行くと力がつくでしょう。
また、Copilot使っていると思いもよらない表現が見つかったりするので、頑張ってVSCode上でシェーダーが動くように環境整備するとQOL上がるかもしれません。(本当はそこまで解説したかったけど時間がなかった...ごめんなさい...)
おまけ1: SESSIONS 2025について
12/13,14にSESSIONS 2025というクリエイティブコーディングなどの「技術ベース創作」が集まるお祭りがあるので、興味がある方は見に行くとよいでしょう。オンラインでの視聴だけなら無料で、現地での参加は学生なら3000円でできるそうです。(筆者は現地参加するか悩み中...時間ないかもな～)
また、過去のアーカイブもこちらの公式チャンネルから見れます。
おまけ2: p5.jsについて
いつか話しておきたかったけど、ここ以外で話す機会なさそうなので出しちゃいます。
p5.js自体はシェーダーではないのですが、マウスやキー入力などを利用したインタラクティブな表現ができるプラットフォームの一つです。また、WebGLを内部で扱う機能を持っているため、シェーダーとの連携も容易です。p5.jsはシェーダーよりもさらに直感的なので、ビジュアルプログラミングの入門としてはこちらの方がいいかもしれません。
基礎的なプログラミングの知識があれば1週間程度でこれらの作品が作れるようになれます。
明日のアドベントカレンダーはechoさんの「標準化の必要性と真の価値創造へ」です！お楽しみに～！
Discussion