• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ex-Workshop06『three.jsを使ってモデリングソフトを試作する』
 

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

on

  • 1,062 views

メディア芸術表現基礎ワークショップ ex-Workshop06「形態と機能Ⅱ ...

メディア芸術表現基礎ワークショップ ex-Workshop06「形態と機能Ⅱ コンピュテーショナル・リアライゼーション」にて、『three.jsを使ってモデリングソフトを試作する』ワークショップ時に使用したスライド。

【サイト】
http://www.iamas.ac.jp/6072

【更新履歴】
2013年11月27日:ver.1.0.1
2013年11月23日:ver.1.0

Statistics

Views

Total Views
1,062
Views on SlideShare
941
Embed Views
121

Actions

Likes
6
Downloads
3
Comments
0

2 Embeds 121

http://takahirohirata.com 117
https://twitter.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • ! three.jsを使って
 モデリングソフトの試作する メディア芸術表現基礎ワークショップ ex-Workshop06
 「形態と機能Ⅱ コンピュテーショナル・リアライゼーション」 ver.1.0.1 © Takahiro Hirata
    • はじめに • 2013年11月23日に発表したものを修正してます
    • 自己紹介 • 名前:平田孝広(ひらたたかひろ)
 http://takahirohirata.com
 http://fabable.net
 takahiro.hrt@gmail.com • ソフトウェアエンジニア、クリエイター • 修学:プロダクトデザイン、CGプログラミング、など © Takahiro Hirata
    • アンケート • 使用ブラウザ • プログラミングの経験
 (C, C++, OpenGL, oF, javascript, html, three.js, WebGLなど) • 変数、関数、ライブラリ、if文、for文 © Takahiro Hirata
    • 今日の目標 3Dモデリングソフトを作れるようになる © Takahiro Hirata
    • パソコン環境の確認 • MebiusRingをクリックしてブラウザで表示 • 環境の確認:
 - MebiusRingが表示
 - 左上のボタンで、stlデータをダウンロードできるか © Takahiro Hirata
    • stlデータを3Dビューワーで表示 • MeshLabというソフトをダウンロード • MeshLabを起動し、File>Inport Meshで先ほど保存した mebius.stlを選択 • MeshLabはマウスドラッグで回転 © Takahiro Hirata
    • 今日の流れ ① three.jsの説明 ② jsdo.itを使ってみる ③ jsdo.it上でthree.jsをプログラミング © Takahiro Hirata
    • three.js © Takahiro Hirata
    • three.jsとは • 3次元を描画するためのプログラミングを楽にしてくれる
 ライブラリ
 - WebGLを簡単にしたもの
 - javascriptでプログラミング、ブラウザ上で動作 ※ライブラリ:ある特定の機能を持ったプログラムを、他のプログラムから利用できるように部品化し、複数 のプログラム部品を一つのファイルにまとめたもの。ライブラリ自体は単独で実行することはできず、他のプ ログラムの一部として動作する。(e-Wordsから抜粋) ※WebGL:ブラウザ上で3次元グラフィックスを表示させるための標準仕様 © Takahiro Hirata
    • three.jsのサイト • three.jsのサイト © Takahiro Hirata
    • three.jsの良い点 • javascriptなので比較的プログラミングが楽 • サンプルが豊富 • 世界の流れ • インターネットで世界中に公開! © Takahiro Hirata
    • three.jsの欠点 • ブラウザが限定される
 - Crome、Firefox、OperaはOK
 - Safariは設定が必要
 - IEは、IE11からだけど△ • 表示されない場合:各ブラウザでWebGLの設定方法 © Takahiro Hirata
    • three.jsの参考になるもの • サイト:田所さんの授業の資料
 Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング • 書籍:
 - three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実 現するOpenGL(WebGL)の世界(内容充実、今回参考にしてます)
 - 「WebGL/three.js」ではじめる3D-CGプログラミング
 - JavaScript逆引きハンドブック(多少載ってます) © Takahiro Hirata
    • three.js(WebGL)を使った
 モデリングソフトの事例 • n-e-r-v-o-u-s.com(WebGL) • shapeshifter.io © Takahiro Hirata
    • プログラミングを始める © Takahiro Hirata
    • three.jsを
 プログラミングするには? • ローカル環境でテキストエディタを使ってプログラミン グが可能だが、サーバーなど設定が不要 • 今回は、web上でプログラミングできる、jsdo.itを使用 • jsdo.itの良い点
 - javascriptをweb上でプログラミングできる
 - ブラウザ上で実行
 © Takahiro Hirata
    • jsdo.itを始める • 始めるには、jsdo.itにログイン © Takahiro Hirata
    • jsdo.itを操作する一連の流れ • 上部の+ボタン押して新規プロジェクト作成 • 右の再生ボタンで実行 • javascriptの編集は
 - javascriptタブをクリック
 - テキストを編集して右の再生ボタンで実行
 ('Hello, World!’内の文字を変更してみよう) • セーブ方法:上部の「saved」ボタンを押す or 「 +S」キー
 (ショートカットキーの詳細は、右下) • 自分のアカウントのページを表示する場合は、URLで、
 http://jsdo.it/アカウント名(http://jsdo.it/dengurix2/) © Takahiro Hirata
    • three.jsのサンプルを触ってみる • 今回用意したcubeのサンプルを触ってみる
 - cubeをforkして
 - 右画面の再生ボタン押して実行
 - マウス操作(左ドラッグ:回転、中ホイール:前後移動、右:上下移動)
 - “download” ボタンをクリックしてstlをダウンロード © Takahiro Hirata
    • 3Dデータのフォーマット © Takahiro Hirata
    • 3Dプリンターで
 プリントアウトするには? • 3Dプリンターで読み込める3Dデータフォーマットを
 用意すれば良い
 (画像でいう.bmp、.png、.jpgのような決まったフォー マット) © Takahiro Hirata
    • 3Dフォーマットの種類 • メジャーな2つ
 - stl:色の情報無しの3D情報(シンプル)
 - obj:色やテクスチャー付きの3D情報 • その他のフォーマット © Takahiro Hirata
    • stlフォーマット概要 • 拡張子:∼.stl (例)cube.stl • ASCII(文字データ)とバイナリ • 法線の向き 3番目の頂点 2番目の頂点 中身: 1番目の頂点 • ポリゴン(面)の情報 • ポリゴンを構成する各頂点の情報(x座標,y座標,z座標) • ポリゴンの向き(法線)の情報(x座標,y座標,z座標) © Takahiro Hirata
    • 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番目の頂点
 (1.0, 0.0, 0.0) (-1.0, 0.0, 0.0) © Takahiro Hirata
    • 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
    • stlファイルを修正してみる • 先ほどのstlファイルの頂点座標を変更してみましょう! • 面を追加してみましょう! • 変更したstlをMeshLabで確認してみましょう! © Takahiro Hirata
    • 3Dプリンターで出力できる
 3Dデータを作るには • 複数の面(ポリゴン)で囲まれたstlデータを作れば良い • 注意点:
 - 面(ポリゴン)面との間に 間が出ないようにする
 - 法線は外向き © Takahiro Hirata
    • three.jsのプログラミング © Takahiro Hirata
    • cubeサンプルコードの流れ • 全体で使用する変数(数字や文字やオブジェクトを入れる箱)を用意 • 実行する関数を記述 • 初期化する関数:(最初に一度だけ実行)
 - htmlの設定
 - レンダラ(描画)の設定
 - 空間(シーン)を用意
 - カメラを用意してシーンに配置(マウスでカメラを操作する設定も)
 - ライトを用意してシーンに配置
 - ジオメトリ(オブジェクト)を作ってシーンに配置 • ループする関数:(何回も実行)
 - カメラからの見えるシーンをレンダリング © Takahiro Hirata
    • サンプルコードを修正してみる • パラメーターを変更してみる • ダウロードしてMeshLabで表示してみる
 © Takahiro Hirata
    • three.jsのジオメトリ関数 • three.jsには形状を生成できるジオメトリー関数が用意さ れている(サンプルはCubeGeometory関数を使用) • まずは色んなGeometry関数を見てみる • geometriesのサンプルをフォークして右のメニューで切 り替えてみる © Takahiro Hirata
    • LatheGeometry関数 • モデリングに使いやすいGeometry関数 • XY平面に座標をZ軸上に回転して3Dオブジェクトを作る • latheのサンプルをforkして触ってみる • lathe(意味:ろくろ) © Takahiro Hirata
    • three.jsを使ってモデリング
 ソフトをプログラミング © Takahiro Hirata
    • three.jsでモデリングソフトを
 作るいくつかの方法 • 既存のGeometry関数のパラメーターを変更
 (先ほど紹介したものを変更、他にもある) • 既存のGeometry関数を修正して新しく作る(難易度:中) • 0から面を作っていくプログラミングそする(難易度:高) © Takahiro Hirata
    • 既存のジオメトリ関数を修正 • 作りたい形に近いGeometry関数を持ってきて修正 • サンプル:my geometry
 (CubeGeometryを修正して使う場合) • three.js-r62/build/three.jsの32858行∼33010行を持って くる
 (フォルダ内で ”CubeGeometry” を検索して見つける) © Takahiro Hirata
    • 0からmeshを作る • 頂点と面と法線の設定をしてシーンに追加 • 難易度高い • 一応サンプルを用意しました original mesh © Takahiro Hirata
    • プログラミング始める前に • three.jsのサンプルは、r62を使用してます • three.jsのドキュメントのサイト、もしくは、
 フォルダのthree.js-r62/docs/index.html • guiは、dat.guiのサイト © Takahiro Hirata
    • プログラミングタイム! © Takahiro Hirata
    • 最後に © Takahiro Hirata
    • 今回説明できなかったこと•発展 • カラーの3Dデータの出力 • 2次元のベクターデータを立体化 • フォントを立体化 • 複数のジオメトリを配置 • ジオメトリにペイント • KinectやLeapMotionによるモデリング © Takahiro Hirata
    • “おつかれさまでした” takahiro.hrt@gmail.com © Takahiro Hirata