今話題の3D写真を気軽に撮って鑑賞しよう  西本 圭佑 (NISHIMOTO Keisuke)keisuken@cappuccino.ne.jp , @keisuke_n
自己紹介 ➔   緒言      ➔      西本 圭佑 (NISHIMOTO Keisuke)      ➔      keisuken@cappuccino.ne.jp      ➔      Twitter: keisuke_n ➔  ...
今日のお話 ➔   お題      ➔      *普通のデジカメで3D写真を撮って鑑賞する ➔   説明      ➔      3D写真の概要 ➔   デモ      ➔             デモ      ➔             ...
3D写真の概要 その壱 ➔   人はどうやって立体視しているか?      ➔      視点をずらして左右の目で見る (3D撮影)      ➔      脳が左右の映像から奥行を認識 (3D認識)2011/08/06           第...
3D写真の概要 その弐 ➔   3D写真の仕組      ➔      撮影: 左右2つのカメラ (3D撮影: 3Dカメラ)      ➔      映像化: 左右2つの映像をなんらかの手法で左右の目             に分けて表示 (3...
3D写真の概要 その参 ➔   3D表示方式      ➔      3Dヘッドマウントディスプレー      ➔      3Dモニタ・3D TV             ➔   時分別法 (液晶シャッタ)             ➔   フ...
3D写真の概要 その四 ➔   3D表示方式      ➔      *アナグリフ             ➔   色フィルタが付いた眼鏡で見る      ➔      *その他             ➔                 いろ...
*デモ その壱 ➔   コンセプト      ➔      *手間をかけない             ➔   面倒なことはしない      ➔      *お金をかけない             ➔                 今あるものだ...
デモ その弐 ➔   実演2011/08/06   第50回 Ruby/Rails勉強会@関西   9
デモ その参 ➔   構成 (撮影)      ➔      *3Dカメラ(デジカメ+自作撮影器具)             ➔   *1つのカメラで視点を変えて左右2枚撮影             ➔   スライド式3D写真撮影台座の写真20...
デモ その四 ➔   構成 (3D表示,アプリ)      ➔             ファイル管理             ➔   Ruby + Sinatra             ➔   3D写真の保存             ➔   ...
デモ その五 ➔   Sinatra / ファイル構成     ./       tdphototool.rb    # Webアプリ本体       views/            # HAMLテンプレート       public/  ...
デモ その六 ➔    Sinatra / albumリスト部 (Ruby)get /album do   album = Dir.glob(./public/album/*.tdi).map! do |path|      dirname, ...
デモ その七 ➔   Sinatra / albumリスト部 (HAML)- album.each do |record|     %div{:class => "album_photo"}       %div{:class => "albu...
デモ その八 ➔    Sinatra / 3D写真情報の取得get /view do   content_type applicationt/json, :charset => utf-8   if name && name.length >...
まとめ その壱 ➔   *今回の方法だと      ➔             静的な写真しか取れない      ➔      *撮る時に気をつかう             ➔   台座が動かないように             ➔   2枚目の...
まとめ その弐 ➔   *でも      ➔      3Dデジカメが安くなってきた...      ➔      Nintendo 3DSが8/11から15k円...             ➔   VGA程度だが3Dカメラ付き       ...
*まとめ その参 ➔   *とはいえ      ➔      Webアプリによって実装が楽に             ➔   そこそこ複雑なGUIアプリが、あら簡単             ➔   Ruby+Sinatoraは考えることが少なく...
おわり             ご清聴ありがとうございました               Any Questions?2011/08/06      第50回 Ruby/Rails勉強会@関西   19
Appendix 1 ➔   トップ画面 / 3D写真の選択12011/08/06    第50回 Ruby/Rails勉強会@関西   20
Appendix 2 ➔   3D写真の選択2 / 視点の調整2011/08/06   第50回 Ruby/Rails勉強会@関西   21
Appendix 3 ➔   3D写真の閲覧 アナグリフ/プルプル立体写真2011/08/06   第50回 Ruby/Rails勉強会@関西   22
Appendix 4 ➔   アルバム表示2011/08/06    第50回 Ruby/Rails勉強会@関西   23
Upcoming SlideShare
Loading in...5
×

3D Photo Tool by Ruby/Sinatra + JavaScript

2,962

Published on

3D Photo Creation Tool by Ruby/SInatra + JavaScript.
learn-ruby-in-kansai 50th event.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,962
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

3D Photo Tool by Ruby/Sinatra + JavaScript

  1. 1. 今話題の3D写真を気軽に撮って鑑賞しよう 西本 圭佑 (NISHIMOTO Keisuke)keisuken@cappuccino.ne.jp , @keisuke_n
  2. 2. 自己紹介 ➔ 緒言 ➔ 西本 圭佑 (NISHIMOTO Keisuke) ➔ keisuken@cappuccino.ne.jp ➔ Twitter: keisuke_n ➔ 仕事 ➔ Webアプリとか, スマートフォンアプリ作成とか ➔ 趣味 ➔ プログラミング, 電子/機械工作, 鉄道/宇宙開発ウォッチ2011/08/06 第50回 Ruby/Rails勉強会@関西 2
  3. 3. 今日のお話 ➔ お題 ➔ *普通のデジカメで3D写真を撮って鑑賞する ➔ 説明 ➔ 3D写真の概要 ➔ デモ ➔ デモ ➔ 解説2011/08/06 第50回 Ruby/Rails勉強会@関西 3
  4. 4. 3D写真の概要 その壱 ➔ 人はどうやって立体視しているか? ➔ 視点をずらして左右の目で見る (3D撮影) ➔ 脳が左右の映像から奥行を認識 (3D認識)2011/08/06 第50回 Ruby/Rails勉強会@関西 4
  5. 5. 3D写真の概要 その弐 ➔ 3D写真の仕組 ➔ 撮影: 左右2つのカメラ (3D撮影: 3Dカメラ) ➔ 映像化: 左右2つの映像をなんらかの手法で左右の目 に分けて表示 (3D表示・投影)2011/08/06 第50回 Ruby/Rails勉強会@関西 5
  6. 6. 3D写真の概要 その参 ➔ 3D表示方式 ➔ 3Dヘッドマウントディスプレー ➔ 3Dモニタ・3D TV ➔ 時分別法 (液晶シャッタ) ➔ フィルタ法 偏光フィルタ/視差フィルタ・レンズ2011/08/06 第50回 Ruby/Rails勉強会@関西 6
  7. 7. 3D写真の概要 その四 ➔ 3D表示方式 ➔ *アナグリフ ➔ 色フィルタが付いた眼鏡で見る ➔ *その他 ➔ いろんな手法が提案されている2011/08/06 第50回 Ruby/Rails勉強会@関西 7
  8. 8. *デモ その壱 ➔ コンセプト ➔ *手間をかけない ➔ 面倒なことはしない ➔ *お金をかけない ➔ 今あるものだけでどうにかする ➔ *それなりに簡単で便利 ➔ コンソールアプリではなく ➔ *GUI(デスクトップ)アプリを作る2011/08/06 第50回 Ruby/Rails勉強会@関西 8
  9. 9. デモ その弐 ➔ 実演2011/08/06 第50回 Ruby/Rails勉強会@関西 9
  10. 10. デモ その参 ➔ 構成 (撮影) ➔ *3Dカメラ(デジカメ+自作撮影器具) ➔ *1つのカメラで視点を変えて左右2枚撮影 ➔ スライド式3D写真撮影台座の写真2011/08/06 第50回 Ruby/Rails勉強会@関西 10
  11. 11. デモ その四 ➔ 構成 (3D表示,アプリ) ➔ ファイル管理 ➔ Ruby + Sinatra ➔ 3D写真の保存 ➔ アルバムの管理 ➔ GUI, I/O ➔ HTML + CSS + JavaScript (jQuery) ➔ 画像処理 ➔ HTML Canvas + JavaScript2011/08/06 第50回 Ruby/Rails勉強会@関西 11
  12. 12. デモ その五 ➔ Sinatra / ファイル構成 ./ tdphototool.rb # Webアプリ本体 views/ # HAMLテンプレート public/ # CSS,JavaScript,画像ファイル ➔ Sinatra / require部 require sinatra require uri require json2011/08/06 第50回 Ruby/Rails勉強会@関西 12
  13. 13. デモ その六 ➔ Sinatra / albumリスト部 (Ruby)get /album do album = Dir.glob(./public/album/*.tdi).map! do |path| dirname, filename = File.split(path) file_name = filename.gsub(/.tdi/, ) name, dx, dy = read_3d_info(file_name) { :name => name, ... :delete => deletePhoto(" + to_js_str(name) + "); } end haml :album, :locals => {:album => album}end2011/08/06 第50回 Ruby/Rails勉強会@関西 13
  14. 14. デモ その七 ➔ Sinatra / albumリスト部 (HAML)- album.each do |record| %div{:class => "album_photo"} %div{:class => "album_title"}= record[:name] %img{:src => record[:thumbnail]} %div %button{:class => "album", :onclick => record[:view]} 表示 %button{:class => "album", :onclick =>record[:delete]} 削除2011/08/06 第50回 Ruby/Rails勉強会@関西 14
  15. 15. デモ その八 ➔ Sinatra / 3D写真情報の取得get /view do content_type applicationt/json, :charset => utf-8 if name && name.length > 0 ... name, dx, dy = read_3d_info(file_name) JSON.pretty_generate({ :name => name, ... :dy => dy, }) else ... end ...end2011/08/06 第50回 Ruby/Rails勉強会@関西 15
  16. 16. まとめ その壱 ➔ *今回の方法だと ➔ 静的な写真しか取れない ➔ *撮る時に気をつかう ➔ 台座が動かないように ➔ 2枚目の写真撮影に時間がかかると条件が変わりすぎる ➔ *でも ➔ *安価に効果的な3D写真が撮れる ➔ *画像加工によって ➔ 様々な3D表示に対応可能(アナグリフ,プルプル3D写真...) ➔ 奥行きの判定など付加情報を取得できる2011/08/06 第50回 Ruby/Rails勉強会@関西 16
  17. 17. まとめ その弐 ➔ *でも ➔ 3Dデジカメが安くなってきた... ➔ Nintendo 3DSが8/11から15k円... ➔ VGA程度だが3Dカメラ付き ➔ 裸眼3Dモニタ搭載 ➔ MPO(3DS専用)ファイルを作れば3D写真が鑑賞可能2011/08/06 第50回 Ruby/Rails勉強会@関西 17
  18. 18. *まとめ その参 ➔ *とはいえ ➔ Webアプリによって実装が楽に ➔ そこそこ複雑なGUIアプリが、あら簡単 ➔ Ruby+Sinatoraは考えることが少なくていい ➔ JavaScriptで画像処理などなんでもできるようになっちゃって た ➔ わりとハードル低いので ➔ WebアプリによるデスクトップGUIアプリ ➔ 3D写真システム ➔ ぜひやってみてください2011/08/06 第50回 Ruby/Rails勉強会@関西 18
  19. 19. おわり ご清聴ありがとうございました Any Questions?2011/08/06 第50回 Ruby/Rails勉強会@関西 19
  20. 20. Appendix 1 ➔ トップ画面 / 3D写真の選択12011/08/06 第50回 Ruby/Rails勉強会@関西 20
  21. 21. Appendix 2 ➔ 3D写真の選択2 / 視点の調整2011/08/06 第50回 Ruby/Rails勉強会@関西 21
  22. 22. Appendix 3 ➔ 3D写真の閲覧 アナグリフ/プルプル立体写真2011/08/06 第50回 Ruby/Rails勉強会@関西 22
  23. 23. Appendix 4 ➔ アルバム表示2011/08/06 第50回 Ruby/Rails勉強会@関西 23
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×