23
今話題の 今話題の 3D 3D 写真を 写真を 気軽に撮って鑑賞しよう 気軽に撮って鑑賞しよう 西本 圭佑 (NISHIMOTO Keisuke) [email protected] , @keisuke_n

3D Photo Tool by Ruby/Sinatra + JavaScript

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: 3D Photo Tool by Ruby/Sinatra + JavaScript

今話題の今話題の3D3D写真を写真を気軽に撮って鑑賞しよう気軽に撮って鑑賞しよう

西本 圭佑 (NISHIMOTO Keisuke)[email protected] , @keisuke_n

Page 2: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 2

自己紹介

➔ 緒言➔ 西本 圭佑 (NISHIMOTO Keisuke)➔ [email protected]➔ Twitter: keisuke_n

➔ 仕事➔ Webアプリとか, スマートフォンアプリ作成とか

➔ 趣味➔ プログラミング, 電子/機械工作, 鉄道/宇宙開発ウォッチ

Page 3: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 3

今日のお話

➔ お題➔ *普通のデジカメで3D写真を撮って鑑賞する

➔ 説明➔ 3D写真の概要

➔ デモ➔ デモ➔ 解説

Page 4: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 4

3D写真の概要 その壱

➔ 人はどうやって立体視しているか?➔ 視点をずらして左右の目で見る (3D撮影)➔ 脳が左右の映像から奥行を認識 (3D認識)

Page 5: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 5

3D写真の概要 その弐

➔ 3D写真の仕組➔ 撮影: 左右2つのカメラ (3D撮影: 3Dカメラ)➔ 映像化: 左右2つの映像をなんらかの手法で左右の目

に分けて表示 (3D表示・投影)

Page 6: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 6

3D写真の概要 その参

➔ 3D表示方式➔ 3Dヘッドマウントディスプレー

➔ 3Dモニタ・3D TV➔ 時分別法 (液晶シャッタ)➔ フィルタ法 偏光フィルタ/視差フィルタ・レンズ

Page 7: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 7

3D写真の概要 その四

➔ 3D表示方式➔ *アナグリフ

➔ 色フィルタが付いた眼鏡で見る

➔ *その他➔ いろんな手法が提案されている

Page 8: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 8

*デモ その壱

➔ コンセプト➔ *手間をかけない

➔ 面倒なことはしない

➔ *お金をかけない➔ 今あるものだけでどうにかする

➔ *それなりに簡単で便利➔ コンソールアプリではなく➔ *GUI(デスクトップ)アプリを作る

Page 9: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 9

デモ その弐

➔ 実演

Page 10: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 10

デモ その参

➔ 構成 (撮影)➔ *3Dカメラ(デジカメ+自作撮影器具)

➔ *1つのカメラで視点を変えて左右2枚撮影

➔ スライド式3D写真撮影台座の写真

Page 11: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 11

デモ その四

➔ 構成 (3D表示,アプリ)➔ ファイル管理

➔ Ruby + Sinatra➔ 3D写真の保存➔ アルバムの管理

➔ GUI, I/O➔ HTML + CSS + JavaScript (jQuery)

➔ 画像処理➔ HTML Canvas + JavaScript

Page 12: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 12

デモ その五

➔ Sinatra / ファイル構成 ./ tdphototool.rb # Webアプリ本体

views/ # HAMLテンプレート

public/ # CSS,JavaScript,画像ファイル

➔ Sinatra / require部 require 'sinatra' require 'uri' require 'json'

Page 13: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 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}end

Page 14: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 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]} 削除

Page 15: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 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 ...end

Page 16: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 16

まとめ その壱

➔ *今回の方法だと➔ 静的な写真しか取れない➔ *撮る時に気をつかう

➔ 台座が動かないように➔ 2枚目の写真撮影に時間がかかると条件が変わりすぎる

➔ *でも➔ *安価に効果的な3D写真が撮れる

➔ *画像加工によって➔ 様々な3D表示に対応可能(アナグリフ,プルプル3D写真...)➔ 奥行きの判定など付加情報を取得できる

Page 17: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 17

まとめ その弐

➔ *でも➔ 3Dデジカメが安くなってきた...

➔ Nintendo 3DSが8/11から15k円...➔ VGA程度だが3Dカメラ付き

➔ 裸眼3Dモニタ搭載

➔ MPO(3DS専用)ファイルを作れば3D写真が鑑賞可能

Page 18: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 18

*まとめ その参

➔ *とはいえ➔ Webアプリによって実装が楽に

➔ そこそこ複雑なGUIアプリが、あら簡単

➔ Ruby+Sinatoraは考えることが少なくていい

➔ JavaScriptで画像処理などなんでもできるようになっちゃってた

➔ わりとハードル低いので➔ WebアプリによるデスクトップGUIアプリ

➔ 3D写真システム➔ ぜひやってみてください

Page 19: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 19

おわり

ご清聴ありがとうございました

Any Questions?

Page 20: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 20

Appendix 1

➔ トップ画面 / 3D写真の選択1

Page 21: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 21

Appendix 2

➔ 3D写真の選択2 / 視点の調整

Page 22: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 22

Appendix 3

➔ 3D写真の閲覧 アナグリフ/プルプル立体写真

Page 23: 3D Photo Tool by Ruby/Sinatra + JavaScript

2011/08/06 第50回 Ruby/Rails勉強会@関西 23

Appendix 4

➔ アルバム表示