カテゴリー別アーカイブ: AR

BlippAR 02

標準

BlippARアプリにいれる基本プログラム

package.jsonはだいたいどれにも共通なので割愛(前記事参照

main.jsについて

最初のBlipp例~基本

var blipp = require('blippar').blipp; //blipparクラスをすべて読み込み
var scene = blipp.addScene(); //最低ひとつのシーンが必要なので、シーンを世界に追加

// Scene creation
scene.onCreate = function() {
    var Plane = scene.addSprite().setColor('#ff7d32aa').setScale(400);
//  スプライト(枠)を追加する。色アルファを設定。スケールサイズを設定(400ピクセル四方)
}

両方のファイル(main.jsとpackage.json)をUTF-8で保存し、iTunesを通して、iOSデバイスに転送する。

公式チュートリアルにある、マーカー図形(下図)をBlipparアプリで覗くと、最初に設定されていた結果(マインクラフトっぽいデモデータ)と違う、薄いオレンジの四角形がマーカーの上に浮かび上がる。

m4__page_4

Blipparアプリで見た状態(下図)

blippar01

===============

何番目かのチュートリアルで、デバイスのスクリーン上に画像を貼り付けるという事例があり、その中で、setType(‘aura’) というのがあったので、setTypeについて

setType

 setType(’hider’ (default), ‘phantom’, ‘aura’, ‘solid’ or ‘sensor’)とは
奥行きバッファーをどう使うかを指定する
hider(デフォルト)はアルファが透過しない
aura は奥行きバッファーを考慮しない。したがって、オブジェクトは前面に描かれる。
phantom は奥行きバッファーを試すが、描かれない。つまり、後ろに配置されたものも描画される。
solid は奥行きは考慮されるがアルファは有効にならない。
sensor  は一切描かれない。

getScreenOrientation

getScreenOrientation(): 0 = Portrait, 90 = landscape left, 180 = upside down, 270 = landscape right
Returns number
.
getScreenHeight(): Height of the screen in pixels. This will ALWAYS be the narrow dimension of a rectangular screen
長方形スクリーンの細いほうの高さ(ピクセル単位)

setClickable

setClickable(boolean): Either true or false. Default is true Returns this.

 使い方 model.setClickable(false)

 

addScene

addScene(name): Add a scene with optional name in case of multiple scenes
Returns node
.
defaultという名前のシーンは必ずスタート時に必要。
シーンに名前を設定しておき、そのシーンに飛べ、という命令を出せそう

Parameter

name: optional name of the scene to create and add to the blipp

Usage
var scene = blipp.addScene('default')

addTransform

addTransform(name): Attach an invisible Transform to this node
Returns node
.
このノードに見えない変形を加える
使い方
var root = node.addTransform("root")
Overview
Base Class used for all default Node properties
Sceneのスーパークラスでもある
広告

BlippAR でARに再チャレンジ 01

標準

最初のBlipp

1.インストールと設定

1)BlipparアプリをiOSデバイスとPCのiTunesにインストールする

2)デバイスでBlipparアプリを起動し、メニュー>設定>開発

3)公式サイトhttps://developer.blippar.com/ へのログインと同じIDでログインする

4)デバッグメニューとログが可能である(Enable Debug Menu and Log)というメッセージが左上に出ている画面に変わる

5)ホームに戻り、Blippingをスタートする Blipparは終了してよい。

6)iOSデバイスとPCをUSBケーブルで接続する

7)iTunesを開き、デバイスアイコンをクリックして開き、アプリ一覧からファイル共有の欄でBlipparを選択する(図は、公式サイトチュートリアルより拝借)

testing_ios

8)Blipparで必要なファイルをここにドラッグ(最初は空のはず)して使う (つまりside-loadを使ってプログラム転送)

===========転送プログラムの基本============

1.main.js

1)blipparクラスすべてをblippという変数に呼び込む require(‘blippar’).blipp

2)シーンが一つは必要なので、それを追加する addScene()

3)シーンの作成 scene.onCreate() = function(){ ….}

4)上記関数の中は、addSprite だったり、setColorだったり、setTextureだったり、setScaleだったり。。。

2.package.json

~BlippAR API Betaを使うために必要。

{
    "version": "1.0.0",
    "description": "Blippar JS test application",
    "main": "main.js",
    "blipp" : {
        "title": "My first blipp",
        "shortTitle": "1st blipp"
    },
    "dependencies": {
        "blippar": "1.2.45"
    }
}

main.jsも、package.jsonも、UTF-8の文字コードで保存したほうがよい。

3.その他

画像ファイルなども。

===

パブリッシュする場合には、

一つのフォルダに、

assets フォルダ および、javascriptフォルダにまとめ、ZIPで圧縮したファイルをオンラインBlippar作成サイトでアップロードすればよい。

metaio creator3を使って360°パノラマAR

標準

360°パノラマを作成する方法

1)トラッカブル画像を適当に選択

2)載せるコンテンツとして360°パノラマ選択

3)自動的に、それをストップするインターフェースが作成される

4)再びトラッカブル画像をクリックすると、その上に、球が浮いている

5)その球を右クリックして、プロパティを出す

6)球タイプか、立方体タイプか、パノラマ画像の読み込み、終了ボタンをつけておくかどうかなどが設定できる

http://www.youtube.com/watch?v=RFu_wMisWZ0

の25分あたりが参考になる。

 

<立方体用の画像を作成する方法>

チュートリアル元記事
http://dev.metaio.com/creator/tutorials/tutorial-13-creating-maps-for-360-experience/

metaio creator3になり、360°パノラマも作成できるようになりました。

まず、球か立方体を選択

・球 画像サイズは4096×2048, 4096×4096, 8192×2048 and 8192×4096

・立方体 同 3072×2048, 3072×4096, 6144×2048 and 6144×4096

1)必要なもの

・Blender 3D立方体や球の UV展開マップを作成するのに使うらしいです

・360°パノラマビュー画像

・オプションで、計算用のOctave(オープンソース)またはMatlabなどの数値計算システム

 

junaioプラグイン利用AR開発について2

標準

まずはアンドロイドで。

なぜチュートリアルがエラーになるかわかりました!

Centos5をサーバとして使っているのですが、

どうやっても、Validateが通らないので、Telnetで直接、GLUE_5を乗っけた場所で、
%php index.php

をかけてみました。

そうしたら、SIMPLEXMLExtended.php の12行目でエラー発生。

dom_import_simplexmlを理解していない様子。ぐぐってみたところ、php-domが入っていないということなので、

#yum install php-dom

を行うも、今度は、リポジトリのURLが見つからない、というエラー

そこをあちこと見ながら直して、やってみたら、今度はパッケージの依存関係でエラー

http://labs.web-mix.jp/php/php-xml-5-2-17/

を参考にしながら、

# yum –enablerepo=epel,remi install php-xml

を行い、

# /etc/init.d/httpd restart

にてhttpd再起動して、もう一度 試したら何とか成功しました。

ふうふう、それにしても、皆さんは、このあたりを軽々とおりこしていらっしゃるのでしょうか???

何はともあれ、この一週間頭を悩ませていた、are_XMLHelperを使った事例の junaio チュートリアルGLUE_5に関して、そっくりサーバにのせ、

http://cat.tama.ac.jp/asakusa/GLUE_5/index.php (コールバックURL)

を指定したものが、ValidateすべてOK!通りました。

 

===

チュートリアル参照サイト
http://www.cybernet.co.jp/ar-vr/documents/products/junaio/junaio_Tutorial_Sample.pdf

junaioプラグイン利用AR開発について

標準

日本語による手引きは、こちらのサイトに詳しい

http://www.cybernet.co.jp/ar-vr/products/metaio/junaio/develop.html

1)Junaio Developperとして登録し、プラグインダウンロードを行う。

2013/6/3現在、metaio SDKが4.5にあがったタイミングで、junaio PluginもSDK4.5に含まれた。
従って、metaio SDK 4.5 + metaio Cloudをダウンロード展開しておけばよい。

2)外部からアクセスできる、Webサーバなどを利用する

  1. Getting Started with PHP Packageをダウンロードする。
  2. phpファイルを編集して各種設定を記述する。
  3. 編集したphpファイルとコンテンツをサーバにアップロードする。
  4. MyChannelでARアプリのチャンネルを作成する。
  5. junaioで確認してARアプリが表示されればOK。

※webサーバ上では、PHP5が必須。

2.junaio SDK

3Dモデルの取り扱い

junaioは2種類の3Dフォーマットに対応しています.

  • md2
  • obj

ポリゴン数(1モデルあたり) : 500-1000推奨
テクスチャサイズ: 最大512×512,256×256推奨

Step 2:それぞれのアプリOSで、junaioプラグインを統合する方法を学ぶ

Learn how to integrate the junaio Plugin with your app:
iOS: http://dev.metaio.com/junaio/junaio-plugin/ios-development/
Android: http://dev.metaio.com/junaio/junaio-plugin/android-development/

Step 3:自分のjunaioプラグインをアプリIDと一緒に登録する

こちらで登録(metaioのウォーターマークは出る)

Register your junaio Plugin with your app identifier for free at:
https://mobiledeveloperportal.ar-live.de/
Your app will contain a small metaio watermark in the camera view unless you have purchased a metaio Cloud license (see step 4)

Step 4:

Purchase a metaio Cloud license option for 6,12 or 24 months in order to remove the watermark from your junaio Plugin application. You can purchase a license here:
http://www.metaio.com/Cloud .
With your license purchase you will receive an activation key which needs to be entered in the licensing portal in order to remove the watermark from one of your apps. You can move your license within the licensing period and activate it with any other of your applications in your developer account.

Start with application development on Android or iOS

Once above steps are completed, you can proceed to create your application on either Android or iOS.

===引用終わり

ここからは、ダウンロードしたGetting Started with PHP Packageを解凍したフォルダ(Getting Started)に入っていた、readme.pdfの情報

必要となるもの

1)Appache Web サーバ

2)php5

3)Zend Framework minimal package (PHPアプリ用のモダンフレームワーク)

http://framework.zend.com   ここからダウンロードする

インストール

1)すべてのファイルを解凍する

(2)/htmlを指す、バーチャルホストを作る(必須ではない))

3)Rename_.htaccessというファイルを単に .htaccess に書き換える

(4)Zend Frameworkを/library/Zend にコピーするか、リンクを貼る)

5)config.phpを書き換える

=====

Hello “GLUE”

What should you have done by now?

サンプルを動かしてみる

  1. You should know where you want to upload your channel files to. You will need a web host that supports PHP. You could use servers supporting other languages such as ASP .NET as well, but the quick starts are written in PHP. Most of the server spaces you can rent or sign up to work well with junaio. どこにチャンネルファイルをアップロードしたいか押さえておく。PHPが動くWebサーバが必要である。
  2. You should install a nice development environment. Eclipse is a nice-to-have environment with the PDT (PHP Development Tool) installed (Download from Eclipse). Eclipse などの開発環境を構築しておくとよい。
  3. It helps to have a local apache running (e.g. XAMPP) to test things quickly
  4. And you should of course have a Developer Account (Sign Up here).
  5. Download the quickstarts or check out from github: GLUE_1_HelloGlue

What will you learn?

Scan the QR Code on the left with junaio to see what you are getting…

  • Creating your first GLUE POI
  • Creating a tracking configuration (information about the reference image)
  • Link a website to the metaio man
  • Troubleshooting your channel/server if something does not work as planned

Get started

The “Hello GLUE” Example you have just downloaded is the most cut down information you can provide to still have a running channel. The callback URL of your channel will have to point to the arel.xml in the channel folder on your server. So let’s see what happens if a user opens your channel

ダウンロードした「ハローGLUE」の例で説明する。チャンネルのコールバックURLは、サーバにおいたチャンネルフォルダ中のarel.xmlを指す。

When you have a look at the arel.xml you will see that the information for junaio is a regular XML. All necessary information is included in that XML.

この中身を覗いてみれば、junaio情報が、普通のXMLだということがわかる。すべての必要情報は、このXMLの中にある。

Your first Object only get the most important information, no title and no icon, but at least a description in the popup as well a button with a link to a website, but you can also link videos, sounds, images, to route, to call, write sms, etc. Please check this overview of protocols that are supported specific for mobile phones.

Most importantly, since it is a 3D Model, we need to add 3D assets, such as a model and a texture and information how to position it, so translation, scale and rotation.

Also important is to tell junaio, on which image this model should be glued. The CoordinateSystemID says to attach this model to the first image in the tracking configuration.

An overview of all parameters usable in your XML return can be found here.

参照イメージは

http://dev.junaio.com/tools/trackingxmlcreator

で作成することができる

junaio GLUE/SCAN Tracking Configuration Creator

In order to assign reference images to be used with GLUE, you have to create a tracking configuration. If you wonder what all that is, have a look at the “GLUE” – documentation and at the GLUE Quickstart: Hello GLUE GLUEで使う参照イメージを出すためには、トラッキングマーカーを作る必要がある。

You can choose any image file (png, gif, ppm, pgm) to be used as a reference image/pattern for GLUE. Simply choose your image file(s) and click “Create Tracking XML”. Store the returned file and upload it to your server. 単純にどんな絵でもいいので選んで、下の「トラッキングXMLを作る」ボタンをクリックする。戻ってきたファイルを保存して、サーバにアップロードする。

Please make sure to use the junaio Scan Icon on your patterns, so users find out quickly about the combination of your print medium and junaio. For any questions, please contact us directly.

パターンには、Junaioスキャンアイコンをいれること。

Download the Logo as pdf

The order in which you provide your image files is important and must be remembered. This is the order the coordinateSystemID of your Objects (API 1.0 cosID of your POIs) must be assigned.
Also have a look at the according Quickstart Tutorials if you have any questions.

Please also keep in mind, that tracking xmls are cached on the device based on the URL. In order to use the same URL with changed information, please clear the cache of your phone.

たとえば葛飾区役所

35.743490,139.847206

http://user.numazu-ct.ac.jp/~tsato/tsato/geoweb/googlemaps/coordinates/advanced.html