芸大 – メディアアート・プログラミング I 2023
p5.jsで3Dグラフィクスをプログラミング
ここまで、この講義ではp5.jsを用いた2次元のグラフィクスやアニメーションを取り扱ってきました。p5.jsでは、2次元のだけでなく、3次元のグラフィクスやアニメーションを描画することが可能です。
p5.jsの3D描画には、WebGLというウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様を使用してレンダリングを行います。WebGLはグラフィクスカード(GPU)を用いて描画を行うため、とても高速な3Dグラフィクスの表示を可能にしています。
今回は、p5.jsでの3D表示の基本から始めて、アルゴリズムを用いた生成的な3Dグラフィクス表現までを目指します。
映像資料
スライド資料
本日の課題
本日の映像資料を参考に、3D空間でのアニメーションによる表現を行ってください。いつものようにOpenProcessingに作成し下記の投稿フォームからURLを提出してください。本日のタグは、geidaima230623 です!
サンプルコード
3D基本図形
法線マテリアル
スペキュラーマテリアル
立方体の反復による表現