ex-Workshop06『three.jsを使ってモデリングソフトを試作する』

1. ! three.jsを使って  モデリングソフトの試作するメディア芸術表現基礎ワークショップ ex-Workshop06  「形態と機能Ⅱ コンピュテーショナル・リアライゼーション」 ver.1.0.1 © Takahiro Hirata

2. はじめに • 2013年11月23日に発表したものを修正してます

3. 自己紹介 • 名前：平田孝広（ひらたたかひろ）  http://takahirohirata.com  http://fabable.net  takahiro.hrt@gmail.com • ソフトウェアエンジニア、クリエイター • 修学：プロダクトデザイン、CGプログラミング、など © Takahiro Hirata

4. アンケート • 使用ブラウザ • プログラミングの経験  （C, C++, OpenGL, oF, javascript, html, three.js, WebGLなど） • 変数、関数、ライブラリ、if文、for文 © Takahiro Hirata

5. 今日の目標３Dモデリングソフトを作れるようになる © Takahiro Hirata

6. パソコン環境の確認 • MebiusRingをクリックしてブラウザで表示 • 環境の確認：  - MebiusRingが表示  - 左上のボタンで、stlデータをダウンロードできるか © Takahiro Hirata

7. stlデータを3Dビューワーで表示 • MeshLabというソフトをダウンロード • MeshLabを起動し、File>Inport Meshで先ほど保存した mebius.stlを選択 • MeshLabはマウスドラッグで回転 © Takahiro Hirata

8. 今日の流れ ① three.jsの説明 ② jsdo.itを使ってみる ③ jsdo.it上でthree.jsをプログラミング © Takahiro Hirata

9. three.js © Takahiro Hirata

10. three.jsとは • ３次元を描画するためのプログラミングを楽にしてくれる  ライブラリ  - WebGLを簡単にしたもの  - javascriptでプログラミング、ブラウザ上で動作 ※ライブラリ：ある特定の機能を持ったプログラムを、他のプログラムから利用できるように部品化し、複数のプログラム部品を一つのファイルにまとめたもの。ライブラリ自体は単独で実行することはできず、他のプログラムの一部として動作する。（e-Wordsから抜粋） ※WebGL：ブラウザ上で3次元グラフィックスを表示させるための標準仕様 © Takahiro Hirata

11. three.jsのサイト • three.jsのサイト © Takahiro Hirata

12. three.jsの良い点 • javascriptなので比較的プログラミングが楽 • サンプルが豊富 • 世界の流れ • インターネットで世界中に公開！ © Takahiro Hirata

13. three.jsの欠点 • ブラウザが限定される  - Crome、Firefox、OperaはOK  - Safariは設定が必要  - IEは、IE11からだけど△ • 表示されない場合：各ブラウザでWebGLの設定方法 © Takahiro Hirata

14. three.jsの参考になるもの • サイト：田所さんの授業の資料  Webデザイン第10回：HTML5実践 Three.jsで3Dプログラミング • 書籍：  - three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実現するOpenGL(WebGL)の世界（内容充実、今回参考にしてます）  - 「WebGL/three.js」ではじめる3D-CGプログラミング  - JavaScript逆引きハンドブック（多少載ってます） © Takahiro Hirata

15. three.js(WebGL)を使った  モデリングソフトの事例 • n-e-r-v-o-u-s.com（WebGL） • shapeshifter.io © Takahiro Hirata

16. プログラミングを始める © Takahiro Hirata

17. three.jsを  プログラミングするには？ • ローカル環境でテキストエディタを使ってプログラミングが可能だが、サーバーなど設定が不要 • 今回は、web上でプログラミングできる、jsdo.itを使用 • jsdo.itの良い点  - javascriptをweb上でプログラミングできる  - ブラウザ上で実行  © Takahiro Hirata

18. jsdo.itを始める • 始めるには、jsdo.itにログイン © Takahiro Hirata

19. jsdo.itを操作する一連の流れ • 上部の+ボタン押して新規プロジェクト作成 • 右の再生ボタンで実行 • javascriptの編集は  - javascriptタブをクリック  - テキストを編集して右の再生ボタンで実行  ('Hello, World!’内の文字を変更してみよう） • セーブ方法：上部の「saved」ボタンを押す or 「 +S」キー  （ショートカットキーの詳細は、右下） • 自分のアカウントのページを表示する場合は、URLで、  http://jsdo.it/アカウント名（http://jsdo.it/dengurix2/） © Takahiro Hirata

20. three.jsのサンプルを触ってみる • 今回用意したcubeのサンプルを触ってみる  - cubeをforkして  - 右画面の再生ボタン押して実行  - マウス操作（左ドラッグ：回転、中ホイール：前後移動、右：上下移動）  - “download” ボタンをクリックしてstlをダウンロード © Takahiro Hirata

21. 3Dデータのフォーマット © Takahiro Hirata

22. 3Dプリンターで  プリントアウトするには？ • 3Dプリンターで読み込める３Dデータフォーマットを  用意すれば良い  （画像でいう.bmp、.png、.jpgのような決まったフォーマット） © Takahiro Hirata

23. ３Dフォーマットの種類 • メジャーな２つ  - stl：色の情報無しの3D情報（シンプル）  - obj：色やテクスチャー付きの３D情報 • その他のフォーマット © Takahiro Hirata

24. stlフォーマット概要 • 拡張子：∼.stl （例）cube.stl • ASCII（文字データ）とバイナリ • 法線の向き 3番目の頂点 2番目の頂点中身：１番目の頂点 • ポリゴン（面）の情報 • ポリゴンを構成する各頂点の情報（x座標,y座標,z座標） • ポリゴンの向き（法線）の情報（x座標,y座標,z座標） © Takahiro Hirata

25. stlフォーマットの中身 solid cube-ascii! ! ! ! //ファイルの始まり! facet normal 0 0 1!! ! //1番目のポリゴン、normal：法線座標（x,y,z）! outer loop! vertex 0.0 0.0 0.0! ! //1番目の頂点座標（x,y,z）! vertex 1.0 0.0 0.0! ! //2番目の頂点座標（x,y,z）! vertex 0.0 1.0 0.0! ! //3番目の頂点座標（x,y,z）! ! ! ! endloop! endfacet! ! facet …! …! endfacet! endsolid! ! ! ! 3番目の頂点 //ファイルの終わり (0.0, 1.0, 0.0) 法線の向き 2番目の頂点  １番目の頂点  (1.0, 0.0, 0.0) (-1.0, 0.0, 0.0) © Takahiro Hirata

26. stlフォーマットのファイルを作ってみる solid cube-ascii! facet normal 0 0 1! outer loop! vertex 0.0 0.0 0.0! vertex 1.0 0.0 0.0! vertex 0.0 1.0 0.0! endloop! endfacet! endsolid • ◀クリックするとサイトを表示します上記内容をテキストエディタ等でファイルにコピペし test.stlとして保存（※テキストの最後に改行が必要）  （テキストエデット.appを使用の場合は、テキストエデット.appの環境設定で標準テキストにチェック後、ソフトを再起動） © Takahiro Hirata

27. stlファイルを修正してみる • 先ほどのstlファイルの頂点座標を変更してみましょう！ • 面を追加してみましょう！ • 変更したstlをMeshLabで確認してみましょう！ © Takahiro Hirata

28. 3Dプリンターで出力できる  ３Dデータを作るには • 複数の面（ポリゴン）で囲まれたstlデータを作れば良い • 注意点：  - 面（ポリゴン）面との間に間が出ないようにする  - 法線は外向き © Takahiro Hirata

29. three.jsのプログラミング © Takahiro Hirata

30. cubeサンプルコードの流れ • 全体で使用する変数（数字や文字やオブジェクトを入れる箱）を用意 • 実行する関数を記述 • 初期化する関数：（最初に一度だけ実行）  - htmlの設定  - レンダラ（描画）の設定  - 空間（シーン）を用意  - カメラを用意してシーンに配置（マウスでカメラを操作する設定も）  - ライトを用意してシーンに配置  - ジオメトリ（オブジェクト）を作ってシーンに配置 • ループする関数：（何回も実行）  - カメラからの見えるシーンをレンダリング © Takahiro Hirata

32. three.jsのジオメトリ関数 • three.jsには形状を生成できるジオメトリー関数が用意されている（サンプルはCubeGeometory関数を使用） • まずは色んなGeometry関数を見てみる • geometriesのサンプルをフォークして右のメニューで切り替えてみる © Takahiro Hirata

33. LatheGeometry関数 • モデリングに使いやすいGeometry関数 • XY平面に座標をZ軸上に回転して3Dオブジェクトを作る • latheのサンプルをforkして触ってみる • lathe（意味：ろくろ） © Takahiro Hirata

35. three.jsでモデリングソフトを  作るいくつかの方法 • 既存のGeometry関数のパラメーターを変更  （先ほど紹介したものを変更、他にもある） • 既存のGeometry関数を修正して新しく作る（難易度:中） • 0から面を作っていくプログラミングそする（難易度:高） © Takahiro Hirata

36. 既存のジオメトリ関数を修正 • 作りたい形に近いGeometry関数を持ってきて修正 • サンプル：my geometry  （CubeGeometryを修正して使う場合） • three.js-r62/build/three.jsの32858行∼33010行を持ってくる  （フォルダ内で ”CubeGeometry” を検索して見つける） © Takahiro Hirata

38. プログラミング始める前に • three.jsのサンプルは、r62を使用してます • three.jsのドキュメントのサイト、もしくは、  フォルダのthree.js-r62/docs/index.html • guiは、dat.guiのサイト © Takahiro Hirata

41. 今回説明できなかったこと•発展 • カラーの3Dデータの出力 • 2次元のベクターデータを立体化 • フォントを立体化 • 複数のジオメトリを配置 • ジオメトリにペイント • KinectやLeapMotionによるモデリング © Takahiro Hirata

ex-Workshop06『three.jsを使ってモデリングソフトを試作する』

ex-Workshop06『three.jsを使ってモデリングソフトを試作する』

Recommended

More Related Content

Similar to ex-Workshop06『three.jsを使ってモデリングソフトを試作する』

Similar to ex-Workshop06『three.jsを使ってモデリングソフトを試作する』(20)

Recently uploaded

Recently uploaded(8)

ex-Workshop06『three.jsを使ってモデリングソフトを試作する』