弊社で長年、開発してきたWeb3Dのウォークスルー。

ゲーム機など、専用のコントローラーではない、「マウス」や「タッチ操作」が入力インターフェースになるPCやスマホ・タブレットの場合、どうすればストレスなく操作できるか。
常に最適解を求めて開発しています。

例えば衝突判定。

立体空間の移動を制限する「衝突判定」は必要か。

例えばゲームなら壁が抜けられなくても、その不便さ自体がルールとなり、それを抜けていく、越えていく楽しさを提供します。
が、3Dウェブとして、3Dコンテンツとして考えたらどうだろうか。
壁、という障害は、それこそウェブ閲覧からの「離脱」要因になってしまわないだろうか。
とも考えられるのです。

「少しでも多くの人に見てもらう」そのためのコンテンツであれば、「見る」操作に障害は少ないほうがいい。

「3D空間として認識できる」ことはWeb3Dのバーチャルギャラリー、バーチャルショールームとして最大限の特徴だから、「壁」という存在は必須。

が、それを避ける操作に失敗しても「自分が思った通りのところに進むことができる」「操作時に混乱しない」といった空間であれば「3D空間として認識」しながらも「操作にストレスを与えない」ということを実現できるのではないかと考えます。

マウスのスクロールホイール

3D空間をウェブサイトを見るように、画面をスクロールするように、移動（閲覧）できたらストレスがないのでは？

その考えのもと、バーチャルショールーム開発では、マウスホイールの前後で、ウェブサイトをスクロールするように前後移動できる様、実装しています。

ウェブページ内で上下にスクロール移動し、コンテンツを見るように、3D空間内でも展示してあるコンテンツを、スクロールホイールで前後移動。自由に閲覧できます。

「3Dのバーチャル空間」であると同時に「3Dウェブサイト」とも呼べる操作感を提供します。

タッチデバイスのピンチイン/アウト

スマホで、タブレットで、もっと詳細を見たい時、二本指で広げる操作をピンチアウト、日本指でつまむ操作をピンチインと言います。

もっと見たい時・大きく見たい時（前に進みたい時）に、スマホで画面を拡大する。
もっと全体を見たい時（後ろに下がりたい時）にスマホで画面を縮小する。

スマホで拡大・縮小する感覚で前後移動できます。

.
.
.

「3D空間でコンテンツをみる」ユニークさと、「操作のスムーズさ」を両立。
そんなバーチャル空間作りをこれからも進めてまいります。

AgWORKS開発のUI/UXを体験ください

バーチャルショールームデモ
https://3d-showroom.net/?uid=AgWORKS&n=1

バーチャルショールームサービス
だれでもショールーム
https://daredemo-sr.com/

AR Quick Lookサンプルページ制作しました！

※※※※※※※※※※※※※※※※※※※※※※※

http://www.ag-works.com/tech/tech-quicklook/

※※※※※※※※※※※※※※※※※※※※※※※

AR、といっても実際使ってみないと良さも、活用アイデアも浮かびませんよね。

お時間のある時にでもおためしください。

①上記ページにiPhoneまたはiPadにてアクセスし、
・CAR MODEL
・ARCHITECTURE
・HUMAN MODEL
いずれかの「AR Quick Lookをみる」をタップ

②3Dが表示されたら多面上部ボタンの「AR」をタップ

③空間把握のためiPhone/iPadを上下左右に動かします

すると現実空間にARオブジェクトが現れます！

いろんな角度から見たり、近づいてでティールを見たり、拡大・縮小してみたり。自由に閲覧ください。

ARCHITECTUREの場合はウォークスルー的な使用もできます。

コンテンツ制作のアイデア、ヒントとして是非！

尚、閲覧にはiOS12以上のiPhone 6s以降、iPad Pro、iPad第5世代以上が必要です。

3DパーツをCMSの様に管理して、大量にARが作れるサービス「だれでもシミュレータ」
組み合わせをシミュレーションし、その結果をそのままARに変換します！

だれでもシミュレータ
https://daredemo-3dsim.com

★★★★★★★★★

こんにちは。代表の増本修二です。

iOS12のARkit2でAR Quick Look作ってみたので、改めてARと、AR Quick Lookについてまとめてみました。
以下ご参照ください。

ー

AR Quick Look サンプルページはこちら
http://www.ag-works.com/tech/tech-quicklook/

ー

AR営業ツール制作サービスはこちら
http://www.ag-works.com/service/service-ar/

ー

【ARとは】
Augumented Realityの略で、拡張現実と呼ばれています。

・空間認識型AR
空間内の色差を測り、空間全体をを把握して
現実のサイズとして表示する（今回のパターン）タイプがあります。
> 空間認識型サンプル動画はこちら

・マーカー認識型AR
画像などをトリガにして表示させます。
以前はこのタイプが主流でした。
> マーカー型ARサンプル動画はこちら

・GPS位置情報連動型AR
ポケモンGOなど、ある特定の地点で表示させるタイプもあります。

例えばsnowなど、顔を認識し、表示するタイプなどもあります。

※Microsoftのholorensの様に専用グラスをかけ、現実世界と同時に表示させるのを
MR（MixReality）と呼びます

今回のARは、このMRをグラスではなく、iPhoneを通して見る、というイメージです。

ー

【ARを体験する環境】

主にスマホやタブレットのカメラを通して体験します。
後述しますが今回のAR Quick Lookは比較的新しいiPhone、最新のiOSが必要になります。

ー

【どう行った仕組みか】

iOS12のARプラットフォーム、ARKit2の機能で表示させます。

ARKit2では、空間に配置されたテーブルや椅子、床、壁の境界など、色差、明度差から空間を把握し、実際の空間サイズを計測します。

その計測した空間に、「USDZファイル」というモデルやテクスチャなど3Dデータを一つに圧縮したファイルを「AR Quick Look」という機能でAR表示します。

Apple AR Quick Lookサンプルページ
https://developer.apple.com/arkit/gallery/

ー

【どのようにして作れるか】

大まかな流れは

①表示するデータを用意する
↓
②USDZファイルに変換する
↓
③ウェブサーバーにアップする

となります。

作る環境としては主に下記が必要です。

ハードウェア：Mac
OS：MacOSX High Sierra 以上
開発用アプリ：Xcode10
3D編集アプリ：Blender

ー

【何を表示させるか】

表示させるデータは基本的に3Dのデータです。
その3Dデータを作る必要があります。

作る方法には、
・「Blender」を使用して0から作る
・3D素材を購入する
・フォトグラメトリで撮影して作る
等があります。

今回の人物モデルはフォトグラメトリで作成しています。

フォトグラメトリとは全方位から撮影した画像をつなぎ合わせてリアルなモデルを作る手法です。
以前、レスパスビジョン様にて撮影いただいたデータを使用しました。
http://www.steam-studio.jp/3dscan-iris.htm

このデータをBlenderで調整し、OBJ形式で書き出します。

尚、表示させるUSDZファイルには下記制約があります。
・10万ポリゴンまで
・アニメーションは10秒まで
・テクスチャーは2048×2048まで

ー

【どうやって配信するか】

上記で作成したOBJデータをUSDZに変換し、ウェブサーバーにアップします。

USDZはxcode10のコマンドラインで変換しますが、
下記サイトの様な変換サービスもある様です。
https://www.vectary.com/get-in/

ウェブサーバーにUSDZファイルを設置し、そこにiOS safariでアクセスすることで、iOSのAR機能が起動する、という仕組みです。

実際のデータは下記からご確認ください。
ー

※※※※※※※※※※※※※※※※※※※※※※※※※
AR Quick Look サンプルページはこちら
http://www.ag-works.com/tech/tech-quicklook/
※※※※※※※※※※※※※※※※※※※※※※※※※

iOS12以上、iPhone6s以上のsafariでアクセスしてください。
モデルは車と建築、そしてヒゲのおじさんで恐縮ですが（笑）

Hqing VRメガネ 3D スマホ ゲーム 映画 ビデオ ゴーグル 超3D映像効果 仮想現実 頭部装着 4－6インチのAndroidやIOSスマホ適用 G-VR002 (黒 二代)

プラスチックですが、質感悪くないです。

中はこんな感じです。

スマホをかませるところがあり、ガッチリ固定されていい感じです。

iPhone6でこんな感じ。iPhone6プラスまではいけました。

レンズ部分はこんな感じ。クッション部分もいい感じです。

上部にピントと、レンズの左右の幅を調整するネジがあります。

…と、2000円ちょっとで買えるVRゴーグルとしてはかなり品質高いかも？
特にiPhone6プラスなど、大きめのスマホと組み合わせると、かなり高画質な感じがします！

もしよろしければウチのVRデモコンテンツで、フェラーリの運転席体験などもいかがでしょうか？

http://www.ag-works.com/carviewer/ferrari488vr/

このゴーグルで、是非VRコンテンツ楽しんでください！！！

プロトタイプコンテンツを更新しました。

https://goo.gl/6SqSgZ

今回は「フェラーリ488スパイダー」をWEBGLで作ってみました。

Three.js、バージョンが月次で更新されて（このモデルはr82）、実装時に悩むこともありますが、どしどし新機能も追加されていい感じです。

今回はポルシェモデルよりもマテリアルを少しリアルにするため、物理シェーダーを使用してみました。

かなりリアルなWEBGL、提案時のコンテンツとして、かなりインパクトがあるのでは？などと考えると、作っていてワクワクします。

アプリよりも広くアプローチできて、アプリと同等の表現ができ、またWEBコンテンツやDBとの連携のハードルも低い（はず）。

ピッチ案件時、十分フックになるのでは、と思います。

おひとついかがでしょうか？？

WEB VRコンテンツ検証用に、ダンボール製ではないVRゴーグル買ってみました。

【amazon】VOX+　3Dメガネ 3DVR ゴーグル HMD 3D体験 焦点、瞳孔距離調節可能　4- 6.5インチのスマートフォンに適用　ゲーム、ビデオ映画適用　ブラック

値段はちょっと高い（ダンボール製が1000円ちょっと、これは2000円くらい）ですが、まぁ失敗してもそこまで後悔しないレベルです。

梱包もしっかり、値段の割には満足度高いかも？と期待が膨らみます。

開梱してみると、本体の他に、

・スマホのサイズによって差し込む調整用の板？のようなもの
・バンド
・ポーチ
・メガネ拭き

と、これだけ付属していて、ダンボール製ゴーグルとの違いを感じます。

早速iPhone6をセットします。

きちんと固定できるように、スライド式のツメのようなものがついていました。

固定してみましたが、安定感はバッチリです。

覗いてみます。

？
ちょっとボケてます。

見てみるとレンズ部分全体がネジになっていて調整できます。

！！！

うわ！ダンボール製の小さいレンズと違ってめちゃくちゃクリア！
でもちょっと狭い…?

！！！！！

本体下にレンズ幅を広げる機能が！

うぉ〜！！！

と、驚くほど、綺麗です！！！！

オキュラスほどではない（対DK2比）ですが、この金額でこれならめちゃくちゃいい！

と感動してしまいました。

これだけ綺麗だったら、もっとWEB VRも見てもらえるかも？

もちろん、ウチのデモ
WEB VR CITY DRIVE
http://www.ag-works.com/city/

を見るのにも使って欲しいですが、他にもandroidやiOS用アプリでVRコンテンツたくさんありますので、ぜひこのゴーグル手に入れていただいて、VRを楽しんでみてはいかがでしょうか？

※WEB VRコンテンツの記事はこちらです。
簡単・手軽なWEB VRコンテンツ。必要なのはスマホと千円程度のVRゴーグルだけ。
http://www.ag-works.com/blog/web-vr/

最近、積極的に取り入れているWEBGLを使用した3Dコンテンツ。そのプロトタイプ・コンテンツとして、「AUTOMOBILE　VIEWER」を公開しています。

http://www.ag-works.com/carviewer/

ポルシェ好き、ボクスターオーナーさんに、是非見ていただきたい。
スマホでいつでも、ポルシェを眺められます!

・折角クルマを手に入れても、普段立体駐車場に入れているのでなかなか眺められない

・暇さえあれば、クルマを眺めていたい。

そんなクルマ好きの方に、このコンテンツを是非ご覧いただきたいです。

AgWORKSではこのようなクルマモデルのウェブコンテンツ化サービスを実施しています。
ポルシェ、フェラーリ、ランボルギーニ、メルセデスベンツ、BMW、AUDIなど、愛車のウェブコンテンツ化をご希望の方はお気軽にお問い合わせください。

お問い合わせはこちら
http://www.ag-works.com/contact/

簡単に、手軽に楽しめるWEB VR。そのプロトタイプコンテンツを制作しました。
http://www.ag-works.com/city/

街中を走り回る車に乗って、ミニチュアの街並みをVRで見学できます。
体験方法は下記です。

①好きな色の車を選ぶ
②表示されるリンク先、QRコードにスマホでアクセス
③VR表示されたスマホをゴーグルにセット

これでミニチュアの街中をVRで体験出来ます！

尚、VRゴーグルはGoogle　cardboard対応の物をご使用ください。

※Googlecardboardについて

「Google Cardboard なら、誰でも簡単に手頃な価格で没入体験を楽しめます。自分でビューアを作成するか、「Google Cardboard 対応」の認定ビューアを購入すれば、スマートフォンでのバーチャル リアリティ体験はすぐそこです。最大 6 インチの画面に対応する新しい I/O 2015 ビューアなど、多種多様なビューアからお選びいただけますので、お気に入りがきっと見つかります。」
※Google cardboardサイトより抜粋

簡単・リーズナブルに入手可能！
対応ゴーグルは下記サイトにて掲載されています。
https://vr.google.com/intl/ja_jp/cardboard/get-cardboard/

アマゾンや楽天、家電量販店などの通販サイトで入手できます。

↓2,000円くらいですが、段ボールのハコスコとは全然違ってよいです！オススメのゴーグルです。
VOX+ Z3　3Ｄメガネ　3DVR ゴーグル HMD 3D体験 焦点、瞳孔距離調節可能　4- 6インチスマートフォンに適用　ゲーム、ビデオ映画適用

お時間があるときにでも、是非ご覧ください！

こんにちは。エージーワークス代表の増本です。

最近では、予算の都合などでカメラマンさんに依頼できず、iPhoneなどスマートフォンで撮影した画像をサイトにしようしたい、なんて話もよくあります。

確かに、最近のスマートフォンはどれも高性能で、撮り方、用途によっては充分使用に耐えうる場合もあります。

※私の知る旅行作家さんで、iPhoneでプロ顔負けの写真を撮っている方もいらっしゃいます。

上手に撮るにはいくつかコツが必要ですが、今回は

「iPhone撮影のコツ その② 暗い被写体を明るく撮る方法」

のご紹介です。

例えば背景が明るい空の場合、よく被写体が暗くなる事があります。これを「逆光」といいます。
この逆光の時に、被写体を明るくしたい時がありますよね。

この時に綺麗に撮るコツが、「HDR」と「AE/AFロック」の活用です。

カメラのセンサーは、全体の明るさを判断してバランス良く明るさの調整をします。例えば明るい部分の面積が多ければ、その部分がきれいに見えるように、全体の明るさ調整をします。
被写体より背景が明るくて面積が広い場合、背景を綺麗に見えるように調整するため、被写体が暗くなってしまいます。

そこで被写体にピントと明るさ（露出）を合わせる「AE/AFロック」を使用します。
使い方は簡単で、画面上の被写体部分を「AE/AFロック」と表示されるまで長押しするだけ。

それだけでピントも露出もそこに固定されるので、暗く露出設定されてしまいがちな部分を適正露出に調整してくれます。

ただし、こうするとその分背景が明るくなりすぎてしまいます。それを少しでも軽減するのが「HDR」です。
「HDR」とはハイ・ダイナミック・レンジの略で、露出の異なる画像を３枚同時に撮影、合成し、白とびや黒つぶれを防ぎ、自然な階調を表現する機能です。

iPhoneのカメラアプリの上部に「HDR」という表示があるのでそこをタップして「オン」にすれば、「AE/AFロック」時の明るくなりすぎ、暗くなりすぎを防げると思います。

この二つの機能を使いこなして、是非良い写真を沢山撮っていただき、ウェブサイトをさらに素敵なものにしていってください！

その① 背景のぼかし方はこちら

こんにちは。エージーワークス代表の増本修二です。

暑い日が続きますね。東京も、北九州も同じくらい暑い…

まぁ、嫌いじゃないんですが（笑）

そんな、暑い北九州の会社様の制作実績追加のお知らせです。

弊社ではデザイン制作を請け負っているだけなのですが、そのご活躍ぶりに陰ながら憧れと尊敬、畏怖の念を持っている、玉中さんの会社、「マッハ車検」さんのウェブサイトを制作しました。

http://www.ag-works.com/works/web-design/mach5/
サービスの幅も広いので、その内容にアクセスしやすい様、デザインしています。

北九州発でこれだけ活躍されている姿は本当にご立派です。

私も北九州発で頑張っているつもりですが、まさに雲の上の存在です。

少しでも近づける様、努力していきたいと思っています。

玉中社長、担当の武安さん、ありがとうございました！今後ともどうぞ宜しくお願いします！