【重要】サービス終了のお知らせ

Chrome で AR してみる

xl1

License: MIT License

Fork
6
Fav
6
View
14100
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • CoffeeScript 186 lines
  • HTML 28 lines
  • CSS 0 lines

getUserMedia() でカメラの映像を取得 → WebGL で 3D モデルを表示

表示サンプル

マーカー マーカー

下の QR コードから携帯などでアクセスすると、マーカーが表示されるので簡単とおもいます

  • 画像からマーカー切りだす部分は js-aruco を使っています
  • 3D モデルは http://blog.r3c7.net/?p=121 から頂いた Colladaファイルを Blender で obj ファイルに変換して https://gist.github.com/4049600 で JSON に変換しました
  • テクスチャ画像がそのままでは大きかったので PNG8 に圧縮しています

2012/9/24 追記

  • 7月末に Chrome stable 21 に getUserMedia() 載りました
  • コードを CoffeeScript に差し替えました
  • README を markdown にしていろいろ書き換えました

2012/10/19 追記

  • texImage2D で 'no video' というエラーが出ることがある
  • video.videoWidth, video.videoHeight がとれない(0 になる)ことがあるが、一体どのタイミングなら確実に取れるのかわかりません、教えてください

2013/03/18

  • MicroGL の仕様変更による修正
  • Chrome で AR してみる
  • [library] WebCam
  • [library] MicroGL
  • [library] js-aruco/aruco.js
  • [library] js-aruco/cv.js
  • Chrome で AR してみる

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

xl1

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by