できること

• GLSLを使って、WebでGPUの力を最大限活用したシェーダーアートを作る。
• p5.jsを使って、Webでインタラクティブな視覚化を行う。
• 最高の知識が凝縮されたAtlasシリーズを見て、作品のインスピレーションを得る。
• 30分間の作業タイムでユニークなアート作品を自由に作り、みんなで発表する。

※今回は、詳細解説は省き、出来ることの紹介と、サンプルを示すのみとします。

※後続の講義との関連性は低いので気になったもののみ調べてみてください

資料

0 オープニング

0.1 今週やったこと

0.2 用語の解説

※個人的な理解に基づいた解説です

• シェーダー : GPUを使った映像処理のプログラム等を指す。
• ジェネラティブアート : プログラムからリアルタイムで生成されるアート
  • インタラクティブアート : ユーザーの動きに合わせてリアルタイムで変化するアート
• プロシージャルデザイン : 不可逆的な手動での編集ではなく、合成・変形といった3D処理の組み合わせによって形状を定義するデザイン手法
  • パラメトリックデザイン : 3D形状が関数によって定義されており、変数の変更によって動的に出力形状を調整する手法

1 GLSLを使ったシェーダーアート

1.1 GLSLとは

• GPUを用いた計算を簡単に行うことができる言語
• 3Dオブジェクトの頂点を処理するVertex Shaderと、2D画像を処理するFragment Shaderが存在
• 本チュートリアルではFragment Shaderを扱う