search

i-camp / tsukamoto-ar

MIT License
0 stars 0 forks source link

[WIP] ThreeJSでARするメモ #11

Closed okashitay closed 6 years ago

okashitay commented 7 years ago

マージはしなくていいです。Three.jsの使い方、AR.jsの使い方のメモを残しておく。 ネットだとライブラリのバージョンによって実装方法がまったく ことなってくるのでexamplesの中を調べること。

Three.jsについて

webgl_loader_obj.html
webgl_loader_obj_mtl.htmlで
ロードした3Dモデルが動くサンプルを動かせるようにしとく
但しar.js(ver1.5.1)内のvendor/three.js/build内の
three.jsはrevision86だからそれに合わせたload方法かどうか見ておく

AR.jsについて

basic.htmlでARが動くようにした。
どうもsafariだとar.js内のdomElement.style.position = 'absolute'
を設定しているところでWebRTCのエラーがでる、
WebRTCに対応していないとだめ、safariはiOS11〜対応している)

マルチマーカーについての調査

どうやらAR.jsではマルチマーカーは固定されている状態だと
発動できるけど...難易度たかそう。
そして、マーカー自体が動いていると認識は難しい
https://medium.com/arjs/area-learning-with-multi-markers-in-ar-js-1ff03a2f9fbe
によると固定されたマーカーの位置などを学習させて判別している
Note: It is very important that you don’t move the markers once you have learned them, 
their position is considered stable, and must remain like this.
マーカーを移動させてはいけないとのこと...

tsukamotoさん3D銅像が白い状態のままの原因は

3Dモデルを表示させるには
.OBJファイル 形状を表すファイル
.MTLファイル 画像ファイルの色が形状のどの位置に相当するか関係性を表す(マテリアル表現)
.png/jpg/gif 色や外観・質感を表すことができる

今回tsukamoto3Dモデル作成で使用したkinectで出力した.OBJファイルは
MeshLabsやPhotoShopでは色がついた状態だがあれはmaterialはふくまれていない。
頂点カラーを出力している。頂点カラーはマテリアルとは異なるので
(blender3Dソフトや今回のARでは)色がついた状態ではなく白い3Dモデルが表示されてしまう。
有償版はtexture書き出して、精度もいいらしい。

参考
https://cubic9.com/Devel/Kinect/3D%A5%B9%A5%AD%A5%E3%A5%CA%A5%BD%A5%D5%A5%C8%A4%CE%C8%E6%B3%D3/

TODO 1

three.js(revision86) : モデルデータの現在の画面の中心にあるか検証 ←これはできると思う

画面中心座標と3Dモデルの当たり判定

var screenX = 画面の中心X座標
var screenY = 画面の中心Y座標

WebGL座標に正規化
normScreenX =  (screenX/window.innerWidth)  * 2 - 1;
normScreenY = -(screenY/window.innerHeight) * 2 + 1;

位置ベクトル
var centroidVec3 = new THREE.Vector3(normX, normY, 1);

スクリーン座標系をオブジェクト座標系にする
centroidVec3.unproject(camera);
レイを作成
var ray = new THREE.Raycaster(camera.position, centroidVec3.sub(camera.position).normalize());

交差判定
var obj = ray.intersectObjects(対象となるMesh配列);

if (obj.length) > 0 {
    交差してる
}

TODO2

three.js(revision86) : モデルデータの現在の座標位置を取得できるか検証 ←これはできると思う
three.js(revision86) : json形式のデータ読み込みの方がいいか検証 
(時間があれば)
軽い3Dのデータ形式はまだわからない

動かし方(macの場合)

ローカルサーバーを動かし
このブランチ内にあるThreeJS_TestをそのままPublicにいれて
http://127.0.0.1:8080/ThreeJS_Test/ar_basic.htmlやwebgl_loader_obj.html
にアクセスするとみれます
okashitay commented 6 years ago

memoはissueに移動させて、こちらをとじますー。