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

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

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

映像資料

スライド資料

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

本日の課題

本日の映像資料を参考に、3D空間でのアニメーションによる表現を行ってください。いつものようにOpenProcessingに作成し下記の投稿フォームからURLを提出してください。本日のタグは、geidaima230623 です!

投稿フォーム

サンプルコード

3D基本図形

法線マテリアル

スペキュラーマテリアル

立方体の反復による表現