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