SlideShare uma empresa Scribd logo
1 de 23
Baixar para ler offline
今話題の3D写真を
気軽に撮って鑑賞しよう




  西本 圭佑 (NISHIMOTO Keisuke)
keisuken@cappuccino.ne.jp , @keisuke_n
自己紹介
 ➔   緒言
      ➔      西本 圭佑 (NISHIMOTO Keisuke)
      ➔      keisuken@cappuccino.ne.jp
      ➔      Twitter: keisuke_n
 ➔
     仕事
      ➔      Webアプリとか, スマートフォンアプリ作成とか
 ➔   趣味
      ➔      プログラミング, 電子/機械工作, 鉄道/宇宙開発ウォッチ


2011/08/06                  第50回 Ruby/Rails勉強会@関西   2
今日のお話
 ➔   お題
      ➔      *普通のデジカメで3D写真を撮って鑑賞する
 ➔   説明
      ➔      3D写真の概要
 ➔   デモ
      ➔
             デモ
      ➔
             解説




2011/08/06             第50回 Ruby/Rails勉強会@関西   3
3D写真の概要 その壱

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




2011/08/06           第50回 Ruby/Rails勉強会@関西   4
3D写真の概要 その弐

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




2011/08/06             第50回 Ruby/Rails勉強会@関西   5
3D写真の概要 その参

 ➔   3D表示方式
      ➔      3Dヘッドマウントディスプレー
      ➔      3Dモニタ・3D TV
             ➔   時分別法 (液晶シャッタ)
             ➔   フィルタ法 偏光フィルタ/視差フィルタ・レンズ




2011/08/06               第50回 Ruby/Rails勉強会@関西   6
3D写真の概要 その四

 ➔   3D表示方式
      ➔      *アナグリフ
             ➔   色フィルタが付いた眼鏡で見る




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



2011/08/06              第50回 Ruby/Rails勉強会@関西   7
*デモ その壱
 ➔   コンセプト
      ➔      *手間をかけない
             ➔   面倒なことはしない
      ➔      *お金をかけない
             ➔
                 今あるものだけでどうにかする
      ➔      *それなりに簡単で便利
             ➔
                 コンソールアプリではなく
             ➔   *GUI(デスクトップ)アプリを作る




2011/08/06                第50回 Ruby/Rails勉強会@関西   8
デモ その弐
 ➔   実演




2011/08/06   第50回 Ruby/Rails勉強会@関西   9
デモ その参

 ➔   構成 (撮影)
      ➔      *3Dカメラ(デジカメ+自作撮影器具)
             ➔   *1つのカメラで視点を変えて左右2枚撮影
             ➔   スライド式3D写真撮影台座の写真




2011/08/06              第50回 Ruby/Rails勉強会@関西   10
デモ その四

 ➔   構成 (3D表示,アプリ)
      ➔
             ファイル管理
             ➔   Ruby + Sinatra
             ➔   3D写真の保存
             ➔
                 アルバムの管理
      ➔      GUI, I/O
             ➔   HTML + CSS + JavaScript (jQuery)
      ➔      画像処理
             ➔   HTML Canvas + JavaScript


2011/08/06                    第50回 Ruby/Rails勉強会@関西   11
デモ その五

 ➔   Sinatra / ファイル構成
     ./
       tdphototool.rb    # Webアプリ本体
       views/            # HAMLテンプレート
       public/           # CSS,JavaScript,画像ファイル
 ➔   Sinatra / require部
     require 'sinatra'
     require 'uri'
     require 'json'




2011/08/06                第50回 Ruby/Rails勉強会@関西    12
デモ その六

 ➔    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勉強会@関西             13
デモ その七

 ➔   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
デモ その八

 ➔    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勉強会@関西       15
まとめ その壱

 ➔   *今回の方法だと
      ➔
             静的な写真しか取れない
      ➔      *撮る時に気をつかう
             ➔   台座が動かないように
             ➔   2枚目の写真撮影に時間がかかると条件が変わりすぎる
 ➔   *でも
      ➔      *安価に効果的な3D写真が撮れる
      ➔      *画像加工によって
             ➔   様々な3D表示に対応可能(アナグリフ,プルプル3D写真...)
             ➔   奥行きの判定など付加情報を取得できる
2011/08/06               第50回 Ruby/Rails勉強会@関西     16
まとめ その弐

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




      ➔      Nintendo 3DSが8/11から15k円...
             ➔   VGA程度だが3Dカメラ付き
             ➔   裸眼3Dモニタ搭載
             ➔   MPO(3DS専用)ファイルを作れば3D写真が鑑賞可能

2011/08/06               第50回 Ruby/Rails勉強会@関西   17
*まとめ その参

 ➔   *とはいえ
      ➔      Webアプリによって実装が楽に
             ➔   そこそこ複雑なGUIアプリが、あら簡単
             ➔   Ruby+Sinatoraは考えることが少なくていい
             ➔   JavaScriptで画像処理などなんでもできるようになっちゃって
                 た
      ➔      わりとハードル低いので
             ➔   WebアプリによるデスクトップGUIアプリ
             ➔   3D写真システム
             ➔   ぜひやってみてください

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


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


               Any Questions?




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

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




2011/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

Mais conteúdo relacionado

Destaque

End Of The War
End Of The WarEnd Of The War
End Of The Wardschall
 
Prueba
PruebaPrueba
Pruebafacc
 
60 Election
60 Election60 Election
60 Electiondschall
 
Ike FP: Soviet Union
Ike FP: Soviet UnionIke FP: Soviet Union
Ike FP: Soviet Uniondschall
 
Data URI scheme: okayama-js-2
Data URI scheme: okayama-js-2Data URI scheme: okayama-js-2
Data URI scheme: okayama-js-2NISHIMOTO Keisuke
 
jvmlang.daitokai 1: ScalaはEdisonの夢を見る
jvmlang.daitokai 1: ScalaはEdisonの夢を見るjvmlang.daitokai 1: ScalaはEdisonの夢を見る
jvmlang.daitokai 1: ScalaはEdisonの夢を見るNISHIMOTO Keisuke
 
第8回 天領倉敷 ScalaScala In Kurashiki 8
第8回 天領倉敷 ScalaScala In Kurashiki 8第8回 天領倉敷 ScalaScala In Kurashiki 8
第8回 天領倉敷 ScalaScala In Kurashiki 8NISHIMOTO Keisuke
 
Siphone coffeemaker okayama-js-1
Siphone coffeemaker okayama-js-1Siphone coffeemaker okayama-js-1
Siphone coffeemaker okayama-js-1NISHIMOTO Keisuke
 
Gulf of Tonkin
Gulf of TonkinGulf of Tonkin
Gulf of Tonkindschall
 
Vietnam Board 2007
Vietnam Board 2007Vietnam Board 2007
Vietnam Board 2007dschall
 
Vietnam: Introductory Notes
Vietnam: Introductory NotesVietnam: Introductory Notes
Vietnam: Introductory Notesdschall
 

Destaque (14)

End Of The War
End Of The WarEnd Of The War
End Of The War
 
Prueba
PruebaPrueba
Prueba
 
60 Election
60 Election60 Election
60 Election
 
Ike FP: Soviet Union
Ike FP: Soviet UnionIke FP: Soviet Union
Ike FP: Soviet Union
 
Data URI scheme: okayama-js-2
Data URI scheme: okayama-js-2Data URI scheme: okayama-js-2
Data URI scheme: okayama-js-2
 
jvmlang.daitokai 1: ScalaはEdisonの夢を見る
jvmlang.daitokai 1: ScalaはEdisonの夢を見るjvmlang.daitokai 1: ScalaはEdisonの夢を見る
jvmlang.daitokai 1: ScalaはEdisonの夢を見る
 
Suburbs
SuburbsSuburbs
Suburbs
 
第8回 天領倉敷 ScalaScala In Kurashiki 8
第8回 天領倉敷 ScalaScala In Kurashiki 8第8回 天領倉敷 ScalaScala In Kurashiki 8
第8回 天領倉敷 ScalaScala In Kurashiki 8
 
Scalaで実装するGC
Scalaで実装するGCScalaで実装するGC
Scalaで実装するGC
 
Siphone coffeemaker okayama-js-1
Siphone coffeemaker okayama-js-1Siphone coffeemaker okayama-js-1
Siphone coffeemaker okayama-js-1
 
Gulf of Tonkin
Gulf of TonkinGulf of Tonkin
Gulf of Tonkin
 
Vietnam Board 2007
Vietnam Board 2007Vietnam Board 2007
Vietnam Board 2007
 
Air War
Air WarAir War
Air War
 
Vietnam: Introductory Notes
Vietnam: Introductory NotesVietnam: Introductory Notes
Vietnam: Introductory Notes
 

Semelhante a 3D Photo Tool by Ruby/Sinatra + JavaScript

Sinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶSinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶHiroshi Oyamada
 
Building Static Website With Github And Jekyll
Building Static Website With Github And JekyllBuilding Static Website With Github And Jekyll
Building Static Website With Github And JekyllYoji Shidara
 
20101106 ramaze発表
20101106 ramaze発表20101106 ramaze発表
20101106 ramaze発表Fukui Osamu
 
シェルスクリプトワークショップ資料 - 上級者向け「シェル芸」
シェルスクリプトワークショップ資料 - 上級者向け「シェル芸」シェルスクリプトワークショップ資料 - 上級者向け「シェル芸」
シェルスクリプトワークショップ資料 - 上級者向け「シェル芸」博文 斉藤
 
Nseg第32回勉強会
Nseg第32回勉強会Nseg第32回勉強会
Nseg第32回勉強会ko ty
 
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないときNode.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないときRyunosuke SATO
 
そろそろRStudioの話
そろそろRStudioの話そろそろRStudioの話
そろそろRStudioの話Kazuya Wada
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
NodeにしましょうYuzo Hebishima
 
僕の Serverless web application
僕の Serverless web application僕の Serverless web application
僕の Serverless web application祐樹 夏目
 
Ruby Sapporo Night Vol4
Ruby Sapporo Night Vol4Ruby Sapporo Night Vol4
Ruby Sapporo Night Vol4Koji SHIMADA
 
【19-B-5】出張!DDD難民救済キャンプ
【19-B-5】出張!DDD難民救済キャンプ【19-B-5】出張!DDD難民救済キャンプ
【19-B-5】出張!DDD難民救済キャンプkentaro watanabe
 
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらFlashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらHiroaki Okubo
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分 Toshio Ehara
 
ドメイン駆動設計入門
ドメイン駆動設計入門ドメイン駆動設計入門
ドメイン駆動設計入門Yukei Wachi
 
20090712 Shibuya Trac 勉強会
20090712 Shibuya Trac 勉強会20090712 Shibuya Trac 勉強会
20090712 Shibuya Trac 勉強会Kaoru NAKAMURA
 
JavaScriptをまじめに考えました+
JavaScriptをまじめに考えました+JavaScriptをまじめに考えました+
JavaScriptをまじめに考えました+Hiroaki Okubo
 
2011-7-17 !RubyKaigi (NotRubyKaigi) 発表資料「WindowsマシンでRuby系勉強会へ行くと凹むことの考察」
2011-7-17 !RubyKaigi (NotRubyKaigi) 発表資料「WindowsマシンでRuby系勉強会へ行くと凹むことの考察」2011-7-17 !RubyKaigi (NotRubyKaigi) 発表資料「WindowsマシンでRuby系勉強会へ行くと凹むことの考察」
2011-7-17 !RubyKaigi (NotRubyKaigi) 発表資料「WindowsマシンでRuby系勉強会へ行くと凹むことの考察」Hiro H.
 
Pythonで検索エンジン2
Pythonで検索エンジン2Pythonで検索エンジン2
Pythonで検索エンジン2Yasukazu Kawasaki
 

Semelhante a 3D Photo Tool by Ruby/Sinatra + JavaScript (20)

Sinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶSinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶ
 
Building Static Website With Github And Jekyll
Building Static Website With Github And JekyllBuilding Static Website With Github And Jekyll
Building Static Website With Github And Jekyll
 
20101106 ramaze発表
20101106 ramaze発表20101106 ramaze発表
20101106 ramaze発表
 
シェルスクリプトワークショップ資料 - 上級者向け「シェル芸」
シェルスクリプトワークショップ資料 - 上級者向け「シェル芸」シェルスクリプトワークショップ資料 - 上級者向け「シェル芸」
シェルスクリプトワークショップ資料 - 上級者向け「シェル芸」
 
Aiming study#6pdf
Aiming study#6pdfAiming study#6pdf
Aiming study#6pdf
 
Nseg第32回勉強会
Nseg第32回勉強会Nseg第32回勉強会
Nseg第32回勉強会
 
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないときNode.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
 
そろそろRStudioの話
そろそろRStudioの話そろそろRStudioの話
そろそろRStudioの話
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
Nodeにしましょう
 
僕の Serverless web application
僕の Serverless web application僕の Serverless web application
僕の Serverless web application
 
Ruby Sapporo Night Vol4
Ruby Sapporo Night Vol4Ruby Sapporo Night Vol4
Ruby Sapporo Night Vol4
 
【19-B-5】出張!DDD難民救済キャンプ
【19-B-5】出張!DDD難民救済キャンプ【19-B-5】出張!DDD難民救済キャンプ
【19-B-5】出張!DDD難民救済キャンプ
 
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらFlashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分
 
ドメイン駆動設計入門
ドメイン駆動設計入門ドメイン駆動設計入門
ドメイン駆動設計入門
 
20090712 Shibuya Trac 勉強会
20090712 Shibuya Trac 勉強会20090712 Shibuya Trac 勉強会
20090712 Shibuya Trac 勉強会
 
JavaScriptをまじめに考えました+
JavaScriptをまじめに考えました+JavaScriptをまじめに考えました+
JavaScriptをまじめに考えました+
 
2011-7-17 !RubyKaigi (NotRubyKaigi) 発表資料「WindowsマシンでRuby系勉強会へ行くと凹むことの考察」
2011-7-17 !RubyKaigi (NotRubyKaigi) 発表資料「WindowsマシンでRuby系勉強会へ行くと凹むことの考察」2011-7-17 !RubyKaigi (NotRubyKaigi) 発表資料「WindowsマシンでRuby系勉強会へ行くと凹むことの考察」
2011-7-17 !RubyKaigi (NotRubyKaigi) 発表資料「WindowsマシンでRuby系勉強会へ行くと凹むことの考察」
 
Sinatra
SinatraSinatra
Sinatra
 
Pythonで検索エンジン2
Pythonで検索エンジン2Pythonで検索エンジン2
Pythonで検索エンジン2
 

Mais de NISHIMOTO Keisuke

3Dプリンタの出力は遅いのでどうにかしたい
3Dプリンタの出力は遅いのでどうにかしたい3Dプリンタの出力は遅いのでどうにかしたい
3Dプリンタの出力は遅いのでどうにかしたいNISHIMOTO Keisuke
 
第2回IoT勉強会 in 岡山 | 2部 IoTデバイスを触ってみよう!
第2回IoT勉強会 in 岡山 | 2部 IoTデバイスを触ってみよう!第2回IoT勉強会 in 岡山 | 2部 IoTデバイスを触ってみよう!
第2回IoT勉強会 in 岡山 | 2部 IoTデバイスを触ってみよう!NISHIMOTO Keisuke
 
第2回IoT勉強会 in 岡山 オープニング
第2回IoT勉強会 in 岡山 オープニング第2回IoT勉強会 in 岡山 オープニング
第2回IoT勉強会 in 岡山 オープニングNISHIMOTO Keisuke
 
IoTの概要・IoT界隈の動向
IoTの概要・IoT界隈の動向IoTの概要・IoT界隈の動向
IoTの概要・IoT界隈の動向NISHIMOTO Keisuke
 
パンジャンドラム (忘年会議2018)
パンジャンドラム (忘年会議2018)パンジャンドラム (忘年会議2018)
パンジャンドラム (忘年会議2018)NISHIMOTO Keisuke
 
第4回宇宙開発勉強会 in 岡山: 宇宙開発トピック
第4回宇宙開発勉強会 in 岡山: 宇宙開発トピック第4回宇宙開発勉強会 in 岡山: 宇宙開発トピック
第4回宇宙開発勉強会 in 岡山: 宇宙開発トピックNISHIMOTO Keisuke
 
Movidius Neral Compute Stickを使ってみた
Movidius Neral Compute Stickを使ってみたMovidius Neral Compute Stickを使ってみた
Movidius Neral Compute Stickを使ってみたNISHIMOTO Keisuke
 
LE-9: 第1回宇宙開発勉強会 in 岡山
LE-9: 第1回宇宙開発勉強会 in 岡山LE-9: 第1回宇宙開発勉強会 in 岡山
LE-9: 第1回宇宙開発勉強会 in 岡山NISHIMOTO Keisuke
 
3Dプリンタことはじめ
3Dプリンタことはじめ3Dプリンタことはじめ
3DプリンタことはじめNISHIMOTO Keisuke
 

Mais de NISHIMOTO Keisuke (10)

3Dプリンタの出力は遅いのでどうにかしたい
3Dプリンタの出力は遅いのでどうにかしたい3Dプリンタの出力は遅いのでどうにかしたい
3Dプリンタの出力は遅いのでどうにかしたい
 
第2回IoT勉強会 in 岡山 | 2部 IoTデバイスを触ってみよう!
第2回IoT勉強会 in 岡山 | 2部 IoTデバイスを触ってみよう!第2回IoT勉強会 in 岡山 | 2部 IoTデバイスを触ってみよう!
第2回IoT勉強会 in 岡山 | 2部 IoTデバイスを触ってみよう!
 
Jetson Nano Lチカ
Jetson Nano LチカJetson Nano Lチカ
Jetson Nano Lチカ
 
第2回IoT勉強会 in 岡山 オープニング
第2回IoT勉強会 in 岡山 オープニング第2回IoT勉強会 in 岡山 オープニング
第2回IoT勉強会 in 岡山 オープニング
 
IoTの概要・IoT界隈の動向
IoTの概要・IoT界隈の動向IoTの概要・IoT界隈の動向
IoTの概要・IoT界隈の動向
 
パンジャンドラム (忘年会議2018)
パンジャンドラム (忘年会議2018)パンジャンドラム (忘年会議2018)
パンジャンドラム (忘年会議2018)
 
第4回宇宙開発勉強会 in 岡山: 宇宙開発トピック
第4回宇宙開発勉強会 in 岡山: 宇宙開発トピック第4回宇宙開発勉強会 in 岡山: 宇宙開発トピック
第4回宇宙開発勉強会 in 岡山: 宇宙開発トピック
 
Movidius Neral Compute Stickを使ってみた
Movidius Neral Compute Stickを使ってみたMovidius Neral Compute Stickを使ってみた
Movidius Neral Compute Stickを使ってみた
 
LE-9: 第1回宇宙開発勉強会 in 岡山
LE-9: 第1回宇宙開発勉強会 in 岡山LE-9: 第1回宇宙開発勉強会 in 岡山
LE-9: 第1回宇宙開発勉強会 in 岡山
 
3Dプリンタことはじめ
3Dプリンタことはじめ3Dプリンタことはじめ
3Dプリンタことはじめ
 

Último

IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 

Último (12)

IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 

3D Photo Tool by Ruby/Sinatra + JavaScript

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