全国の杏を愛してやまないPの皆様、こんにちは。前回はブラウザに杏を描画してニヤニヤしていた訳ですが、あくまでアレは2次元の世界の話。杏inほぼ現実世界その1【three.jsでMMD】https://www.theuri.net/%E6%9D%8Fin%E3%81%BB%E3%81%BC%E7%8F%BE%E5%AE%9F%E4%B8%96%E7%95%8C%E3%81%9D%E3%81%AE1%E3%80%90three-js%E3%81%A7mmd%E3%80%91/全国の杏Pの皆様、おはようございます。前回の予告通り、今回は3Dモデルをブラウザに描画してみます。昨夜は公開用にソースを整理しましたので早速...今からあなたのスマホのブラウザに杏を召喚します。行ってらっしゃい!!注意:Twitterアプリ上で開くとガクガクにな...やりたい事は我々の存在する3次元空間に杏を降臨させる事です。物理的には無理だけど、現実の世界を無理矢理2次元空間に描画する事で疑似的に現実を作り出す「凹型2.5次元」を実現させるための第2ステップを実装しましょう。大げさに言ってみましたが、これなんて事は無い「スマホなら最初から出来る事」なんですよね。体験してみてください!注意:前回のサンプルをTwitterアプリ上で開くと凄まじく重かったので、下記リンクのURLをコピーしてブラウザに貼りつけると滑らかなはず。imascg.theuri.netWebRTChttps://imascg.theuri.net/anzu/test2.htmlはい、ズバリ「カメラ」です。カメラこそ現実空間を2次元に描画する最高のデバイスって訳ですね。これ実はAndroid端末なら結構前から出来る事だったんですが、iOSはずっと出来なかったんですよ。ブラウザからカメラは開けたんだけど、スタンドアロンでカメラが開くだけでインラインに実行出来なかった訳です。iOS11のリリースでWebRTCと言う技術が解禁された訳ですが、こいつの最大の目玉は「端末同士でP2P出来る!」って部分。ビデオチャットとかするにしてもサーバ立てなくても行けるとか、かなり凄い技術なんですが、今回はその機能の中のほんのひとつまみだけを利用しています。この辺りの詳しい解説は諸先輩方に任せるとして、このストリーミング部分をHTML5のタグに渡してやるとインラインに実行出来るって寸法です。注意:このカメラのリソースをインラインに実行するためにはセキュアな通信、つまりSSL領域(https)で実行してやる必要があります。...問題はこの描画されている背景にMMD部分を乗っける事が出来るのだろうか、アレに透過背景と言う概念があるのかって事ですが...canvasに渡して描画ってのも上手く行ってるし、MMD側の背景に流し込んじゃえばなんとかなるかな。ここからはコードの解説となります。今回は全てネイティブに実装されているので、ライブラリ不要でシンプルですね。13-14(GUI部分)それぞれがカメラ起動ボタン、カメラ停止ボタンとなります。19(カメラに写っている物を描画する部分)videoタグのソースにカメラから取得したストリーミングオブジェクトを渡すと、それがレンダリングされます。ここでのポイントはインラインで「autoplay」と「playsinline」を指定しておく事、指定しない場合はスクリプト側から「video.start()」とかを叩いてやれば行けるかも知れないけど、省略出来るならするべきかなと。25(videoの内容をそのまま描画)canvasは現時点では「最もやりたい放題出来る要素」なので、描画テストをしてみた。仕事で使う案件があったので、それをベースに最低限だけを実装。iOS11用に書き直したのに古いAndroidでも動いたので、個人的には今の所ベストプラクティス。コンストラクタクラスがインスタンス化されたらまず実行されます、例によってグローバルに使う変数を準備しておく。前回(SummonAnzuClass)とは違うクラスなので、勿論同じ名前の変数名にしてもOK!オブジェクト指向の一番分かりやすいメリットですね。連続して呼ぶやつ、前回のレンダラーに相当します。このタイミングで色々加工してやる事で、やりたい放題出来ると言う仕組み。window.requestAnimationFrame($rtv.draw);};canvasのコンテキストに実装されているdrawImageにvideoオブジェクトを丸投げするだけ、結構雑に扱える事に感動した。(後ろのゼロ2つは描画開始位置なので、これだと左上から描画となる。)今回も勿論登場する「requestAnimationFrame」さん、チラッと紹介してた止める方法もサンプルとして実装してみました。(timerに返り値を持たせておく)カメラを起動する今回の肝がここ、getUserMediaを使ってブラウザからカメラにアクセスします。{window.console.log(e);});};getUserMediaの引数は「モードなどのオプション(オブジェクト)」「成功した時の処理(関数)」「失敗した時の処理(関数)」となっている。ベンダープレフィックスが付いている実装だと第1引数がオブジェクトじゃなかったりするけど、最新の実装はオブジェクト形式で渡さないと動きません。videoの指定で「facingMode:{exact:”environment”}」としているのはリアカメラにアクセスするよ!と言う意思表示で、trueだけで指定すると何故かインサイドカメラにアクセスします。デフォルトは自撮りと言う、ナルシストな一面が垣間見えます。アクセスに成功したら、ローカルのカメラからストリームオブジェクトが返されるので、それをvideo要素の「srcObject」に放り込みます。調べていた記事が少し古かったようで、ここが「video.src」に渡して動かないって感じでちょっとハマりましたので、ご注意ください。渡したらすぐに「requestAnimationFrame」さんの出番です、獅子奮迅の活躍です。カメラを停止する杏が降臨した世界との繋がりを停止するなんて以ての外!とか言って最終的には削除されそうな機能です。500);}};兼ねてよりtimerに渡しておいたオブジェクトを「cancelAnimationFrame」の引数に指定すればOK、video要素に渡されているストリームオブジェクトもnullを渡して切断、canvasへはclearRectで描画面を透明で塗りつぶす命令も出して綺麗さっぱりです。その他クラスのインスタンス化と最初に色々する部分。false);まぁ特に変わった事はしていませんね。インスタンス化して、ビデオとキャンバスはこれだと指定して、キャンバスの大きさ決めて、コンテキストを取得して、スタートとストップのボタンにそれぞれ関数を割り当てて。こんな感じで、実行して「startボタン」をタッチすると...。見慣れた現実世界が2次元空間に描画されましたね!OKこれで良い。ここまでは十分に下調べしていたので順調ですが、次からが未知の領域であるジャイロセンサーについての調査に入ります。デバイスの傾きを探知する物らしいけど、もし出来るなら夢のような空間を「うろうろしてみたい」と言う願望もあるので位置情報とか高さ情報とかも詳細に取れないかな?と思っています。GPSってどれぐらいの精度あるのかにかかっている訳ですけど、gmapとか結構「???」ってなる事多いからなぁ。それにしてもジャイロセンサーなんかカッコいいよね、某鉄球の黄金回転を思い出してしまいます。双葉杏をほぼ現実世界に召喚してみたい【概念】https://www.theuri.net/%e5%8f%8c%e8%91%89%e6%9d%8f%e3%82%92%e3%81%bb%e3%81%bc%e7%8f%be%e5%ae%9f%e4%b8%96%e7%95%8c%e3%81%ab%e5%8f%ac%e5%96%9a%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f%e3%81%84%e3%80%90%e6%a6%82%e5%bf%b5%e3%80%91/全国の担当をもっと愛でたいPの皆様、こんにちは。ここ1週間ぐらい新規プロジェクトの準備に費やしていたうりPです。杏inほぼ現実世界その1【three.jsでMMD】https://www.theuri.net/%E6%9D%8Fin%E3%81%BB%E3%81%BC%E7%8F%BE%E5%AE%9F%E4%B8%96%E7%95%8C%E3%81%9D%E3%81%AE1%E3%80%90three-js%E3%81%A7mmd%E3%80%91/全国の杏Pの皆様、おはようございます。前回の予告通り、今回は3Dモデルをブラウザに描画してみます。昨夜は公開用にソースを整理しましたので早速...今からあなたのスマホのブラウザに杏を召喚します。});theuri本家を知らないデレステP、根っからの親指勢。