p5.jsで3次元アニメーションを試してみた - infosmith.biz
気づけば前回のエントリから既に1カ月以上が経過。いかんですね。正直、コードはいっぱい書いているのですが、それをエントリ化しようと整理し始めると、追加で調べてみたいことや試してみたいことが次から次へと出てきて、なかなか手が進みません。 今回は「p5.js」の3次元機能について。Processingでは、「size」関数の第3引数に「P3D」あるいは「OPENGL」と書いておくことで、スケッチ内で3次元座標を扱えるようになります。「p5.js」にも同等の機能が用意されており、createCanvas関数の第3引数として「WEBGL」と指定してやります。 試しに、以前Processingで書いた3次元のスケッチをp5.js向けに書き直してみました。 （2017/10/12追記：このスケッチは5.14向けのものですが、p5.jsでは5.16以降でWebGL関連の機能が大きくアップデートされており、
p5.jsがWebGL＆3D対応。軽くいじってみます - Qiita
地味に拡張しているp5.js。久々にウォッチしてみると2015/10/05のリリースでWebGL対応していて、それに伴い3Dのサポートもはじめたようです。他のライブラリには色々先を越されていると思いますが、いじってみました。 最後は、時間がなかったのでシンプルなUFO作って終了 基本テンプレート 見るところは公式サイトのチュートリアル、あとはリファレンスにはそれに載り切らない実装がありました。まずは基本テンプレを p5パッケージのサンプルファイルの、コメント冒頭にはShiffmanのサイトへのリンクが。宣伝乙であります // Learning Processing // Daniel Shiffman // http://www.learningprocessing.com // Example 1-1: stroke and fill function setup() { createC
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ThreeNodes.js
