3d photo tool by ruby/sinatra + javascript
DESCRIPTION
3D Photo Creation Tool by Ruby/SInatra + JavaScript.learn-ruby-in-kansai 50th event.TRANSCRIPT
今話題の今話題の3D3D写真を写真を気軽に撮って鑑賞しよう気軽に撮って鑑賞しよう
西本 圭佑 (NISHIMOTO Keisuke)[email protected] , @keisuke_n
2011/08/06 第50回 Ruby/Rails勉強会@関西 2
自己紹介
➔ 緒言➔ 西本 圭佑 (NISHIMOTO Keisuke)➔ [email protected]➔ Twitter: keisuke_n
➔ 仕事➔ Webアプリとか, スマートフォンアプリ作成とか
➔ 趣味➔ プログラミング, 電子/機械工作, 鉄道/宇宙開発ウォッチ
2011/08/06 第50回 Ruby/Rails勉強会@関西 3
今日のお話
➔ お題➔ *普通のデジカメで3D写真を撮って鑑賞する
➔ 説明➔ 3D写真の概要
➔ デモ➔ デモ➔ 解説
2011/08/06 第50回 Ruby/Rails勉強会@関西 4
3D写真の概要 その壱
➔ 人はどうやって立体視しているか?➔ 視点をずらして左右の目で見る (3D撮影)➔ 脳が左右の映像から奥行を認識 (3D認識)
2011/08/06 第50回 Ruby/Rails勉強会@関西 5
3D写真の概要 その弐
➔ 3D写真の仕組➔ 撮影: 左右2つのカメラ (3D撮影: 3Dカメラ)➔ 映像化: 左右2つの映像をなんらかの手法で左右の目
に分けて表示 (3D表示・投影)
2011/08/06 第50回 Ruby/Rails勉強会@関西 6
3D写真の概要 その参
➔ 3D表示方式➔ 3Dヘッドマウントディスプレー
➔ 3Dモニタ・3D TV➔ 時分別法 (液晶シャッタ)➔ フィルタ法 偏光フィルタ/視差フィルタ・レンズ
2011/08/06 第50回 Ruby/Rails勉強会@関西 7
3D写真の概要 その四
➔ 3D表示方式➔ *アナグリフ
➔ 色フィルタが付いた眼鏡で見る
➔ *その他➔ いろんな手法が提案されている
2011/08/06 第50回 Ruby/Rails勉強会@関西 8
*デモ その壱
➔ コンセプト➔ *手間をかけない
➔ 面倒なことはしない
➔ *お金をかけない➔ 今あるものだけでどうにかする
➔ *それなりに簡単で便利➔ コンソールアプリではなく➔ *GUI(デスクトップ)アプリを作る
2011/08/06 第50回 Ruby/Rails勉強会@関西 9
デモ その弐
➔ 実演
2011/08/06 第50回 Ruby/Rails勉強会@関西 10
デモ その参
➔ 構成 (撮影)➔ *3Dカメラ(デジカメ+自作撮影器具)
➔ *1つのカメラで視点を変えて左右2枚撮影
➔ スライド式3D写真撮影台座の写真
2011/08/06 第50回 Ruby/Rails勉強会@関西 11
デモ その四
➔ 構成 (3D表示,アプリ)➔ ファイル管理
➔ Ruby + Sinatra➔ 3D写真の保存➔ アルバムの管理
➔ GUI, I/O➔ HTML + CSS + JavaScript (jQuery)
➔ 画像処理➔ HTML Canvas + 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'
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
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]} 削除
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
2011/08/06 第50回 Ruby/Rails勉強会@関西 16
まとめ その壱
➔ *今回の方法だと➔ 静的な写真しか取れない➔ *撮る時に気をつかう
➔ 台座が動かないように➔ 2枚目の写真撮影に時間がかかると条件が変わりすぎる
➔ *でも➔ *安価に効果的な3D写真が撮れる
➔ *画像加工によって➔ 様々な3D表示に対応可能(アナグリフ,プルプル3D写真...)➔ 奥行きの判定など付加情報を取得できる
2011/08/06 第50回 Ruby/Rails勉強会@関西 17
まとめ その弐
➔ *でも➔ 3Dデジカメが安くなってきた...
➔ Nintendo 3DSが8/11から15k円...➔ VGA程度だが3Dカメラ付き
➔ 裸眼3Dモニタ搭載
➔ MPO(3DS専用)ファイルを作れば3D写真が鑑賞可能
2011/08/06 第50回 Ruby/Rails勉強会@関西 18
*まとめ その参
➔ *とはいえ➔ Webアプリによって実装が楽に
➔ そこそこ複雑なGUIアプリが、あら簡単
➔ Ruby+Sinatoraは考えることが少なくていい
➔ JavaScriptで画像処理などなんでもできるようになっちゃってた
➔ わりとハードル低いので➔ WebアプリによるデスクトップGUIアプリ
➔ 3D写真システム➔ ぜひやってみてください
2011/08/06 第50回 Ruby/Rails勉強会@関西 19
おわり
ご清聴ありがとうございました
Any Questions?
2011/08/06 第50回 Ruby/Rails勉強会@関西 20
Appendix 1
➔ トップ画面 / 3D写真の選択1
2011/08/06 第50回 Ruby/Rails勉強会@関西 21
Appendix 2
➔ 3D写真の選択2 / 視点の調整
2011/08/06 第50回 Ruby/Rails勉強会@関西 22
Appendix 3
➔ 3D写真の閲覧 アナグリフ/プルプル立体写真
2011/08/06 第50回 Ruby/Rails勉強会@関西 23
Appendix 4
➔ アルバム表示