yoppa.org


前橋工科大学 – データ構造とアルゴリズム 2022

p5.jsで3Dグラフィクスをプログラミング

ここまで、この講義ではp5.jsを用いた2次元のグラフィクスやアニメーションを取り扱ってきました。p5.jsでは、2次元のだけでなく、3次元のグラフィクスやアニメーションを描画することが可能です。

p5.jsの3D描画には、WebGLというウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様を使用してレンダリングを行います。WebGLはグラフィクスカード(GPU)を用いて描画を行うため、とても高速な3Dグラフィクスの表示を可能にしています。

今回は、p5.jsでの3D表示の基本から始めて、アルゴリズムを用いた生成的な3Dグラフィクス表現までを目指します。

スライド資料

サンプルコード

3D基本図形

法線マテリアル

スペキュラーマテリアル

立方体の反復による表現

アンケート

本日の授業に参加した方は以下のアンケートに答えてください。

アンケート