前橋工科大学 – データ構造とアルゴリズム 2022
p5.jsで3Dグラフィクスをプログラミング
ここまで、この講義ではp5.jsを用いた2次元のグラフィクスやアニメーションを取り扱ってきました。p5.jsでは、2次元のだけでなく、3次元のグラフィクスやアニメーションを描画することが可能です。
p5.jsの3D描画には、WebGLというウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様を使用してレンダリングを行います。WebGLはグラフィクスカード(GPU)を用いて描画を行うため、とても高速な3Dグラフィクスの表示を可能にしています。
今回は、p5.jsでの3D表示の基本から始めて、アルゴリズムを用いた生成的な3Dグラフィクス表現までを目指します。
スライド資料
サンプルコード
3D基本図形
法線マテリアル
スペキュラーマテリアル
立方体の反復による表現
アンケート
本日の授業に参加した方は以下のアンケートに答えてください。