![GoでHARKの標準出?力力を処理理
?? GoからHARKのbatch?owコマンドを実?行行
cmd ?:= ?exec.Command(“batch?ow”, ?[ネットワークファイル])
stdout, ?err ?:= ?cmd.StdoutPipe()
if ?err ?!= ?nil ?{
? ? ? ?log.Fatal(err)
}
if ?err ?:= ?cmd.Start(); ?err ?!= ?nil ?{
? ? ? ?log.Fatal(err)
}
in ?:= ?bu?o.NewScanner(stdout)
for ?in.Scan() ?{
? ? ? ?s ?:= ?in.Text()
....
time: ?198, ?ID: ?0, ?x: ?9.250000e-‐??001 ?2.480000e-‐??001 ?2.870000e-‐??001, ?power: ?3.869943e+001, ?
ID: ?1, ?x: ?8.680000e-‐??001 ?-‐??4.050000e-‐??001 ?2.870000e-‐??001, ?power: ?4.168919e+001, ?
ax ?:= ?strings.Split(val[1], ?" ?")
x0, ?_? ?:= ?strconv.ParseFloat(ax[0], ?64)
x1, ?_? ?:= ?strconv.ParseFloat(ax[1], ?64)
radian ?:= ?math.Atan2(x1, ?x0)
ラジアンは、アークタンジェント2で求めれる
HARKからの標準出?力力
(SourceTrackerのログ)
↓HARKの起動コマンド](https://image.slidesharecdn.com/webrtcmeetup20161121-161123033911/85/Inside-of-by-O2-13-320.jpg)
![映像をオブジェクトに描画
thetaview.js ? ?※Ricoh提供のライブラリ
https://raw.githubusercontent.com/ricohapi/video-‐??streaming-‐??sample-‐??app/master/samples/common/thetaview.js
<script ?src=/slideshow/inside-of-by-o2/69437405/"three.min.js"></script>
<script ?src="thetaview.js"></script>
class ?ThetaViewWrapper ?extends ?ThetaView ?{
…
}
let ?viewer ?= ?document.getElementById('viewer');
let ?thetaview ?= ?new ?ThetaViewWrapper();
let ?canvasList ?= ?[];
let ?localStream;
navigator.mediaDevices.getUserMedia({video: ?true, ?audio: ?false})
? ? ? ?.then(function ?(stream) ?{ ?// ?success
? ? ? ? ? ? ? ?localStream ?= ?stream;
? ? ? ? ? ? ? ?thetaview.setContainer(viewer);
? ? ? ? ? ? ? ?viewer.?rstChild.src ?= ?window.URL.createObjectURL(localStream);
? ? ? ? ? ? ? ?thetaview.start(viewer.?rstChild);
…
メッシュオブジェクトに描画
映像の描画にはthree.jsとthetaview.jsを使?用
Dual-‐??Fisheye
?～ライブラリの中?身について解説?～](https://image.slidesharecdn.com/webrtcmeetup20161121-161123033911/85/Inside-of-by-O2-16-320.jpg)
![サブ画?面の描画
ひとつのシーン、ひとつのメッシュオブジェクトに対し、
複数のカメラで投影
this._?subRenderer[i].render(this._?scene, ?this._?subCamera[i]);
それぞれのキャンバスに描画
_?addSubView(canvas) ?{
? ? ? ?var ?i ?= ?this._?canvasNum;
? ? ? ?const ?w ?= ?this._?container.clientWidth;
? ? ? ?const ?h ?= ?this._?container.clientHeight;
? ? ? ?this._?subCamera[i] ?= ?new ?THREE.PerspectiveCamera(75, ?w ?/ ?h, ?1, ?1100);
? ? ? ?this._?subCamera[i].target ?= ?new ?THREE.Vector3(0, ?0, ?0);
? ? ? ?this._?subRenderer[i] ?= ?new ?THREE.WebGLRenderer({"canvas": ?canvas});
? ? ? ?this._?canvasNum++;
}](https://image.slidesharecdn.com/webrtcmeetup20161121-161123033911/85/Inside-of-by-O2-22-320.jpg)
![?角度度の切切替
カメラのrotationの変更更で描画位置を変更更
this._?subCamera[i].rotation.y ?= ?[?角度度];](https://image.slidesharecdn.com/webrtcmeetup20161121-161123033911/85/Inside-of-by-O2-23-320.jpg)
Inside of 聖徳玉子 by O2
- 1. Inside ?of ?聖徳?玉?子 インフォコム技術企画室 ??大津
- 2. ?自?己紹介 ?? ?大津 ?学(おおつ ?まなぶ) –? インフォコム技術企画室所属 –? 部署の活動はVR、IoT、AIなどの 先端技術の研究、調査です ?? 前職はゲーム会社で開発してました Angry ?Birdsに?色々要素を増やしたゲーム
- 4. デモ
- 6. ?音の?方向を定位し、 ログ出?力力 ?音の?方向をリアルタイムで処理理 標準?入?力力のログから ?角度度を抽出 WebSocket ?Client WebSocketで?角度度を送信 並列列処理理並列列処理理 ?音の?方向を?角度度に変換し、WebSocketで送信 リアルタイム処理理はGoの並列列処理理(Goroutine)で橋渡ししている 並列列処理理間でメッセージを送信 WebSocket ?Server package websocket https://godoc.org/golang.org/x/net/websocket
- 7. ?音の?方向 製品名「たまご型マイクアレイ」 by ?システムインフロンティア ?音の?方向はハードウェアとソフトウェアで実現 ８?方向にマイクが付いている 全?方位の?音を取得 マイクの配置には意味があり、 マイク毎に?音の到達時間が異異なる。 この遅延性を利利?用し、?方向を識識別する by ?ホンダ?リサーチ?インスティチュート?ジャパン ハード ソフト http://hark.jp
- 10. HARKの設定 ?? HARKの設定はブラウザから?行行う ?? ノードと呼ばれるパーツを配置し、 ネットワークの構成を?行行う 保存データは「ネットワークファイル」と呼ばれるファイルで管理理 HARK設定画?面 1.? マイク?入?力力 2.? ?高速フーリエ変換 3.? ?音源定位 4.? ?音源トラッキング 5.? 出?力力のインターバル 6.? 定位位置の表?示 7.? 定位位置の保存
- 11. HARKの設定２ ネットワークファイルはXMLフォーマットで記述 今回はSourceTrackerのログを標準?入?力力に利利?用 <Node ?name="node_?SourceTracker_?1" ?type="SourceTracker" ?x="410" ?y="310"> ? ? ? ?<Parameter ?name="THRESH" ?type="?oat" ?value="38.5" ?description=“…."/> ? ? ? ?<Parameter ?name="PAUSE_?LENGTH" ?type="?oat" ?value="1200" ?description="…"/> ? ? ? ?<Parameter ?name="MIN_?SRC_?INTERVAL" ?type="?oat" ?value="20" ?description="…"/> ? ? ? ?<Parameter ?name="MIN_?ID" ?type="int" ?value="0" ?description="…"/> ? ? ? ?<Parameter ?name="DEBUG" ?type="bool" ?value="true" ?description="…"/> </Node>
- 13. GoでHARKの標準出?力力を処理理 ?? GoからHARKのbatch?owコマンドを実?行行 cmd ?:= ?exec.Command(“batch?ow”, ?[ネットワークファイル]) stdout, ?err ?:= ?cmd.StdoutPipe() if ?err ?!= ?nil ?{ ? ? ? ?log.Fatal(err) } if ?err ?:= ?cmd.Start(); ?err ?!= ?nil ?{ ? ? ? ?log.Fatal(err) } in ?:= ?bu?o.NewScanner(stdout) for ?in.Scan() ?{ ? ? ? ?s ?:= ?in.Text() .... time: ?198, ?ID: ?0, ?x: ?9.250000e-‐??001 ?2.480000e-‐??001 ?2.870000e-‐??001, ?power: ?3.869943e+001, ? ID: ?1, ?x: ?8.680000e-‐??001 ?-‐??4.050000e-‐??001 ?2.870000e-‐??001, ?power: ?4.168919e+001, ? ax ?:= ?strings.Split(val[1], ?" ?") x0, ?_? ?:= ?strconv.ParseFloat(ax[0], ?64) x1, ?_? ?:= ?strconv.ParseFloat(ax[1], ?64) radian ?:= ?math.Atan2(x1, ?x0) ラジアンは、アークタンジェント2で求めれる HARKからの標準出?力力 (SourceTrackerのログ) ↓HARKの起動コマンド
- 15. ビデオソースの取り込み let ?viewer ?= ?document.getElementById('viewer'); … navigator.mediaDevices.getUserMedia({video: ?true, ?audio: ?false}) ? ? ? ?.then(function ?(stream) ?{ ?// ?success ? ? ? ? ? ? ? ?localStream ?= ?stream; ? ? ? ? ? ? ? ?viewer.?rstChild.src ?= ?window.URL.createObjectURL(localStream); … WEBカメラからビデオソースの取り込み <div ?id="viewer"><video ?id="mainView" ?autoplay></video> ブラウザに?用意されたAPIをコールし、 ビデオタグに反映している
- 16. 映像をオブジェクトに描画 thetaview.js ? ?※Ricoh提供のライブラリ https://raw.githubusercontent.com/ricohapi/video-‐??streaming-‐??sample-‐??app/master/samples/common/thetaview.js <script ?src=/slideshow/inside-of-by-o2/69437405/"three.min.js"></script> <script ?src="thetaview.js"></script> class ?ThetaViewWrapper ?extends ?ThetaView ?{ … } let ?viewer ?= ?document.getElementById('viewer'); let ?thetaview ?= ?new ?ThetaViewWrapper(); let ?canvasList ?= ?[]; let ?localStream; navigator.mediaDevices.getUserMedia({video: ?true, ?audio: ?false}) ? ? ? ?.then(function ?(stream) ?{ ?// ?success ? ? ? ? ? ? ? ?localStream ?= ?stream; ? ? ? ? ? ? ? ?thetaview.setContainer(viewer); ? ? ? ? ? ? ? ?viewer.?rstChild.src ?= ?window.URL.createObjectURL(localStream); ? ? ? ? ? ? ? ?thetaview.start(viewer.?rstChild); … メッシュオブジェクトに描画 映像の描画にはthree.jsとthetaview.jsを使?用 Dual-‐??Fisheye ?～ライブラリの中?身について解説?～
- 18. オブジェクトの作成 ビデオソースをテクスチャに置き換えたマテリアルを作成 _?createGeometryでは dual-‐???sheye?用の3Dモデルを作成。 計算で座標や?面を構成し、?面にUVを配置 this._?mesh ?= ?new ?THREE.Mesh(this._?createGeometry(), ?this._?createMaterial(videoDOM)); 画像参照: ?https://en.wikipedia.org/wiki/UV_?mapping _?createMaterial(video) ?{ ?// ?video:DOM ? ? ? ?const ?texture ?= ?new ?THREE.VideoTexture(video); ? ? ? ?texture.minFilter ?= ?THREE.LinearFilter; ? ? ? ?texture.magFilter ?= ?THREE.LinearFilter; ? ? ? ?return ?new ?THREE.MeshBasicMaterial({ ? ? ? ? ? ?map: ?texture, ? ? ? ? ? ?side: ?THREE.BackSide, ? ? ? ?}); } Texture
- 19. オブジェクトの作成 円形の映像を半球体に投影 Dual-‐??Fisheye THETAの場合 this._?mesh ?= ?new ?THREE.Mesh(this._?createGeometry(), ?this._?createMaterial(videoDOM)); ビデオソースを引数にメッシュオブジェクトの?生成
- 20. カメラの表?示領領域をレンダリング this._?scene ?= ?new ?THREE.Scene(); this._?scene.add(this._?mesh); const ?w ?= ?this._?container.clientWidth; const ?h ?= ?this._?container.clientHeight; this._?camera ?= ?new ?THREE.PerspectiveCamera(75, ?w ?/ ?h, ?1, ?1100); this._?camera.target ?= ?new ?THREE.Vector3(0, ?0, ?0); シーンにメッシュオブジェクトを配置 カメラを配置 this._?renderer ?= ?new ?THREE.WebGLRenderer({"canvas": ?canvas}); this._?renderer.render(this._?scene, ?this._?camera); カメラの表?示領領域をレンダリング
- 21. サブ画?面の描画 <body> ? ? ? ?<div ?id="viewer"><video ?id="mainView" ?autoplay></video> ? ? ? ?<canvas ?id="subView1" ?class="subview" ?style="left: ?0%"></canvas> ? ? ? ?<canvas ?id="subView2" ?class="subview" ?style="left: ?25%"></canvas> ? ? ? ?<canvas ?id="subView3" ?class="subview" ?style="left: ?50%"></canvas> ? ? ? ?<canvas ?id="subView4" ?class="subview" ?style="left: ?75%"></canvas> ? ? ? ?</div> </body> ひとつのビデオソースを元にキャンバスに映像を投影 画?面分割のサンプルコードを?用意 https://gist.github.com/otmb/b2ee019a28e6d80dee141473ee22666e SubView1 ?～SubView4 ?～どのようにカスタムしているか?～
- 22. サブ画?面の描画 ひとつのシーン、ひとつのメッシュオブジェクトに対し、 複数のカメラで投影 this._?subRenderer[i].render(this._?scene, ?this._?subCamera[i]); それぞれのキャンバスに描画 _?addSubView(canvas) ?{ ? ? ? ?var ?i ?= ?this._?canvasNum; ? ? ? ?const ?w ?= ?this._?container.clientWidth; ? ? ? ?const ?h ?= ?this._?container.clientHeight; ? ? ? ?this._?subCamera[i] ?= ?new ?THREE.PerspectiveCamera(75, ?w ?/ ?h, ?1, ?1100); ? ? ? ?this._?subCamera[i].target ?= ?new ?THREE.Vector3(0, ?0, ?0); ? ? ? ?this._?subRenderer[i] ?= ?new ?THREE.WebGLRenderer({"canvas": ?canvas}); ? ? ? ?this._?canvasNum++; }
- 24. 説明は以上になります
- 25. Theta ?x ?IoT ?デベロッパー コンテスト受賞 〇コンテスト受賞ページ http://award.contest.theta360.com/prize1.html 〇ソースコードダウンロードページ https://lab.infocom.co.jp/2016/08/theta.html