SONICJAM Developerz Blog @sjdevel - Tumblr Blog

Posts

RICOH THETA S をつかったリアルタイム360°ビューワーをつくった話

こんにちは！今回のブログは研究開発部泉田と開発部長谷川の共著でお送りします！

実は先日、RICOH THETA S という360°カメラを購入しました！

今回はこの THETA S を利用して、リアルタイム 360°ビューワーを制作した模様を解説したいと思います。

RICOH THETA S とは？

RICOH THETA S は RICOH社が製造販売している民生用360°カメラです。

https://theta360.com/ja/about/theta/s.html

特徴は何といってもデバイス両サイドについている大きなレンズ！方半球を撮影できるレンズを両サイドに１つずつ持つことによって全天球360°の撮影が可能となっています。

全天球写真の他、動画なども撮影できるスグレモノです。

また、THETA シリーズの３代目となる THETA S ではライブストリーミング機能が新たに追加されました！

このライブストリーミング機能が非常に画期的なのです！

THETA S のライブストリーミング

THETA S の本体下部には micro USB の端子穴がつています。

そこに USB ケーブルを挿し PC と接続することで、なんと USBカメラと同じように非常に簡単に THETA S の 360°リアルタイム映像を PC で使用することができるのです！

……ただし、問題点が１つ。

THETA S から出力されるリアルタイム映像は以下のようになっています。

つまり、両サイドのレンズで撮影された映像が「そのまま」出力されてしまっているのです。

このままでは以下のような 360°自由に閲覧できる動画として見ることができません。

そこで今回、THETA S を使って↑のような閲覧ができるリアルタイム360°ビューワーを、vvvv用と openFrameworks用それぞれ制作してみました！

vvvv 360°ビューワー

vvvv で 360°ビューワーを作るために必要な手順は以下のとおりです。

ピクセルシェーダーで THETA S からの画像をパノラマ画像に変換する。

パノラマ画像をつかって Cube Map する。

2 については vvvv の標準のノードに Cube Map 用のノードが用意されているので比較的簡単に実現できます。したがって、今回は 1 の部分を主に作りました。

vvvv では HLSL で書いたシェーダーを vvvv のノードとして登録できる機能があります。なので、その機能を使ってピクセルシェーダーによるリアルタイム画像変換を実現してみました。

こんな感じで THETA S からの画像を

THETA S から読み込んできた変換前の状態

パノラマ状テクスチャへ変換した状態

それを元に Cube Map した状態

のそれぞれの状態で閲覧できるようにしてあります。

今回制作したノードの使用方法や詳しい技術解説については泉田の個人ブログの方に詳しく掲載してあるので、興味ある方は御覧ください。

THETA S x vvvv でリアルタイム360°ビューワーつくった話 | poipoiです。

openFrameworks 360°ビューワー

今回製作した openFrameworks のビューワーも、vvvvのビューワーと基本的には同じようなことをやっています。まずはTHETA S の画像をシェーダを通してパノラマ画像に変換します。

(こちらの動画は、openFramworks上でシェーダーによる変換の実行結果をキャプチャしたものです。)

そして、得られたパノラマ画像を球のオブジェクトの内側に貼り付け、球の内部が見えるように画面上に配置し、マウスによるインタラクションをつけて完成です。

(こちらはビューワーの実行結果をキャプチャしたものです。マウスでドラッグして向きを変更、マウススクロールで大きさを変更できます。)

今回製作したopenFrameworks製のビューワーの詳細は長谷川の個人ブログで解説しています。 (そこまで詳しくないですが。。)

Ricoh THETA S Real Time Stitching | dev.tkmh.me

締め

さて、そんなこんなで今回は vvvv と openFrameworks の両方で実装してみました。

どちらもインタラクティブなコンテンツを作る際には非常に扱いやすいプラットフォームですので、これでイベントなどの演出にも360°ストリーミングを取り入れることができるようになりました！

今回作ったものを利用して色々面白いコンテンツを作っていけたらと思います！

それでは、今回はこの辺で。

openFrameworks v0.9.0 をブラウザで動かしてみる

みなさんこんにちは。研究開発部泉田です。

今回は、openFrameworks 0.9.0 から導入された Emscripten 対応を試してみました！

oF が Web ブラウザ上で動くようになりますのでいろいろと使い方が広がりそうな気がします！

それでは以下よりどうぞ！

※こちらの記事は、泉田の個人ブログからの転載記事です。転載元記事: openFrameworks v0.9.0 をブラウザで動かしてみる | poipoiです。

どうもこんにちは。

久々のブログ投稿です。今日はoFネタです。

先日(2015年 11月8日)、openFrameworks v0.9.0 が無事正式リリースになりました！

で、リリース文を読んでみたら、気になる１文が載ってるではありませんか。

Emscripten きたなー。ついにoFもブラウザで動く時代か、、、 https://t.co/Q17V47tYOO

— poipoi (@peeping_poipoi) 2015, 11月 9

oF が正式に Emscripten 対応になったのです！なのでWEB上で動くのです！！

Emscripten とは？

Emscripten とは、LLVM -> JavaScript 変換ができるアツいヤローです。なので、C++ -> LLVM -> JavaScript みたいな感じで、C++ で書かれたコードを JS コードに変換できちゃいます。

C++ -> JS の変換が出来て何が嬉しいの？と思う方もいるかもしれませんが、これまでのゲーム系などのC/C++で書かれたコード資産をそのままWebに流用出来たり、asm.js に変換して高速な実行ができたりなんて利点があるらしいです。（詳しくは知らない。）

で、C++ -> JS 変換ということはですよ。まさに oF をブラウザ上で動かすことができるようになるのですよ！

試してみた

と、いうことで、物は試しとばかりに早速やってみました。詳しいやり方はこちらの Setup guide に載っているので、皆様ご自分の環境に合わせてトライしてみましょう！

http://openframeworks.cc/download/

ちなみに私は Mac 環境だったので、Mac に入れてみた流れをなんとなく書いていきたいと思います。

また、私がつまずいたポイントも備忘録的に記しておこうと思います。

まずは Emscripten を入れる！

なにはともあれ、まずは Emscripten を入れなければなりません。

Emscriptenの公式ページは以下になります。

http://kripken.github.io/emscripten-site/index.html

Emscripte を入れるための環境を作る。

まずは Emscripten を入れる前に、Emscripten を入れるための環境づくりが必要です。

こちらのページに Emscripten を入れるために必要なモノが書いてあるのでセコセコとインストールします。

http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html#platform-notes-installation-instructions-portable-sdk

XCode Command Line Tools

git

cmake

node.js

python 2.x

もともとWeb系の方であれば、上記の環境もすでにいろいろとインストール済みかもしれません。自分の環境にすでに上記が入っているかどうかは、以下のように確認ができるようです。

http://kripken.github.io/emscripten-site/docs/building_from_source/toolchain_what_is_needed.html#toolchain-test-which-dependencies-are-installed

つまずきポイント１：cmake の Command LIne 版のインストールについて

cmake のインストールパッケージをそのまま入れると、GUI版のcmakeが入ります。ただ、そのままだと Command Line 上から使えないため、Emscripten のインストールでエラーが出てしまいます。

Command Line 版の cmake を入れるには

GUI版 cmake を起動する

[Tool] → [How to Install For Command Line Use] を選択

ポップアップで出てきた指示にしたがう。

という手順で行えます。私の場合は一番上の直接パスを通す方法を使いました。

つまずきポイント２：El Capitan での/usr/binの以下の書き換え

python2 に関しては以下のようにしろと Emscripten のページに書いてあります。

cd /usr/bin sudo ln python python2 sudo ln ../../System/Library/Frameworks/Python.framework/Versions/2.7/bin/python2.7 python22.7

ですが、El Capitan だと Rootless というセキュリティ機能が入っているらしく、そのままでは上記コマンドがエラーになってしまいます。

対処法としては以下を参考にしました

http://applech2.com/archives/46435268.html

Emscripten のインストール

必要な環境を構築できたら、Emscripten 自体をダウンロード＆インストール！

詳細はこちらに載っているので参照のこと。

http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html

まずはパッケージをダウンロード＆解凍し、適当なディレクトリに置きます。

そしてそのディレクトリ内で以下のコマンドを叩きます。

# Fetch the latest registry of available tools. ./emsdk update # Download and install the latest SDK tools. ./emsdk install latest # Make the "latest" SDK "active" ./emsdk activate latest

で、Mac/Linux の人は更に以下を叩きます。

# Set the current Emscripten path on Linux/Mac OS X source ./emsdk_env.sh

これでアクティブにしたEmscriptenにパスが通るらしいです。

インストールは結構時間がかかったので気長に待つといいと思います。

つまずきポイント３：Emscripten のバージョン

実は上述の ./emsdk install latest だと私の場合下記のようなエラーが発生してしまいました。

Command '['make', '-j3']' returned non-zero exit status 2 Installation failed!

私が実行した時の最新バージョンが 1.35.7 だったのですが、どうもこれが不安定だったようです。

下記の示す様に 1.35.0 を入れるようにしたらうまくいきました。

./emsdk update sdk-tag-1.35.0-64bit ./emsdk install sdk-tag-1.35.0-64bit ./emsdk activate sdk-tag-1.35.0-64bit

パスを通す

最後に Emscripten のもろもろのバイナリがあるディレクトリにパスを通します。

ディレクトリは以下になりますので、忘れずに通してください。

(Emscriptenディレクトリ)/emscripten/(Emscripten のバージョン番号)/

oF を Emscripten でビルドする

さて、ようやく Emscripten がビルド出来たので、次は oF のソースを Emscripten でビルドしてみたいと思います。

やり方は以下のとおり。

http://openframeworks.cc/setup/emscripten/

まずはビルドしたいプロジェクトのディレクトリに移動し、以下のコマンドを叩きます

emmake make

しばらくするとビルドが完了するので、そのまま動作チェックしたい場合は

emrun --browser chrome bin/(プロジェクト名).html

と実行すると Chrome が立ち上がってブラウザ上で動いているのが確認できます。

また、サーバーにアップしたい場合は、bin/ 以下のファイルをすべてアップロードすれば良い模様です。

取り急ぎ examples/3d/eDPrimitivesExample をビルドしてみた結果、以下のようになりました！

https://www.googledrive.com/host/0B0kSi87phV3Ia015ejhHNlEwRGM/3DPrimitivesExample.html

おまけ

ちなみに、作ったoFのページを公開するのには、Google Drive を使った以下の方法を参考にしました。 http://ninagreen.hatenablog.com/entry/2015/09/14/030704

簡単にWEBページを公開できてお手軽です！

それでは、またそのうち。

#izumida #openframeworks #emscripten

Hello Pepper

こんにちは。研究開発部のキムです。

この度、Pepperくんがソニックジャムに来ました。

PepperではChoregrapheという開発環境を使うことで、ブロックを組み合わせるように簡単にPepper用アプリを作ることができます。Pepperくんには年齢と性別が分かる賢い機能が元々入っているので、今回はその機能を使い人の年齢を教えてくれるアプリを作ってみました。

アプリを作るChoregrapheにはいろんなライブラリーがあって、人のことを感知するライブラリー(Human Understanding)の中に年齢や性別、人の感情を教えてくれるものも準備されてます。基本的にはボックス(ライブラリー)をステージに置いて、それをつなげて作っていくビジュアルプログラミング方式です。また、ボックスの中身は pythonで書かれているので、ライブラリーに準備されてないものは自分で作ることも可能です。

pythonコード修正

まずは年齢を判別するために Get Age ボックスをステージに置いて実行してみました。ところがそこは心優しい(？)Pepperくん。なぜか実際より10歳若い年齢を答えてくれました！なので Get Age ボックスの中身を修正します。 self.age の値が元々は 0 でしたが、それを10にしてみたらいい感じになりました。

モジュール化する

Max/MSPなどの他のビジュアルプログラミング環境もそうですが、このようにボックスをつなげてプログラミングする方式では、複雑になるほど全体の構造が見づらくなるという欠点があります。そこで重複する部分をモジュール化することで全体の見通しを良くします。Choregrapheにはモジュール化するためのDiagramというボックスがあり、その中にボックスをまとめることができます。これで全体的にスッキリしましたね！

sayTextを改造する。

Pepperくんにもっと自然に話してもらうようにするために、年齢だけではなく、年齢も含めた一連の文章を話してもらうように改良しました。ただ、年齢を喋るボックス(sayText)と決められたセリフを喋るボックス(say)を単に組み合わせただけだと、話のあいだに間ができてしまい不自然でした。これも年齢を喋らせるボックス(sayText)を修正し、このボックスの中に決められたセリフを入れるコードを追加することで自然に話せるようになりました。

今回は簡単に触ってみただけでしたが、Pepperくんにはいろいろな可能性を感じました。今後もPepperくんにはソニックジャムでいろんな役を担当してもらおうと思っていますので、これからももっとたくさんPepperくんと遊んでいきたいと思います！

#kim #pepper #choregraphe #python

iPhoneのsafariでバウンススクロールしたときの背景色を動的に変えてみたテスト

こんにちは！開発部の池田ですこちらのiPhoneのsafari(iOS8~)でバウンススクロールした際に見える背景色ですが、通常であれば、cssでbodyに対してbackground-color:#FF0000とかで自由に変える事ができます。(グラデーションや画像は不可) この部分を動的に変えて欲しい、っていう機会は滅多になく、まさか動的に変えられるとは思ってなかったのですが、やったら普通にできました。一体いつ使うのかは不明ですが、一応こんな風に見えます。バウンススクロールした距離によって黒から白にグラデーションさせています。さらに、無理やりですが、この機能を使ったデモを作ってみました ※iOS8~ safari限定 MazeMazeColor 上下に別れた色(タップ&長押しで変更可)を混ぜた色をバウンススクロールで見えた部分に反映させ、さらにスクロールを続けると、例えば下にスクロールして、下部分の色が隠れていくにつれ、混ぜた色から下の色が引かれていくような見え方になっています。毎フレームbodyのbackground-colorの値を変えているだけですが、githubにソースをアップしておきます。 github 敷居は高いですが(iPhoneのsafari(iOS8~)限定なので)、ここまで凝ることができれば、かなり意識の高いコンテンツを作れるのではないでしょうか！どうか試させてください！

#ike #バウンススクロール #css

Three.jsでトゥーンシェーディング

こんにちは。フロントエンドエンジニアの長谷川です。 3Dの表現のなかで割りと好きなトゥーンシェーディングをThree.jsで実装してみました。

※こちらの記事は、長谷川の個人ブログからの転載記事です。転載元記事: Three.jsでトゥーンシェーディング | dev.tkmh.me

DEMO

トゥーンシェーディングの主な特徴は

・エッジがはっきりと縁取られている・陰影がはっきりしている

です。アニメっぽい表現のシェーディングです。アニメキャラが登場するゲームでよく使われる手法です。

最近だと以下のミュージックビデオコンテンツもWebGLのトゥーンシェーディングっぽい表現で作られていました。

http://www.dennis.video/

今回のデモは、缶の3Dモデル(objファイル)をThree.jsで読み込み、テクスチャを適用して表示しています。

3Dデータは以下のサイトでフリーのものをダウンロードしました。

3D Models, Download 3D Models at TurboSquid http://www.turbosquid.com/Search/3D-Models/free

ダウンロードしたデータをblenderでインポートし、テクスチャをつくるためにUV展開図なるものを生成しました。

要は缶の展開図なのですが、この形に合わせてテクスチャを作れば、3Dモデルに綺麗に貼り付けてくれます。このUV展開図に合わせてつくったテクスチャが以下のものです。側面と上の方を青くしたいだけなので、その部分を青で塗りつぶし、それ以外の領域はグレーにしています。雑です。

実際は以下の画像はテクスチャとして使用していませんが、UV展開図とテクスチャを重ねると、どの部分を青くしてるのかわかりやすいかと思います。

トゥーンシェーディングに加え、金属光沢を再現するために、3D空間上の点光源が反射しているような表現と、凹凸感を表現をするためのバンプマップ(法線マップ)という手法をGLSLで実装しています。バンプマップ用の法線マップ画像はなんとphotoshopのフィルタ機能で作ることができました。楽ちん。

この画像を使用して、GLSLでゴニョゴニョっとやってあげるだけで、凹凸感を実現できます。缶側面のgithubのロゴの部分がへこんだように見えるかと思いますが、これは3Dモデルが実際にへこんだ形になっているのではなく、擬似的にそう見えるように計算して表示させる技法です。

ソースコードはこちら。主な処理はすべて https://github.com/takumi0125/E-Can/blob/master/gulp/src/assets/js/index.coffee に記述されています。

実装した頂点シェーダ・フラグメントシェーダを以下に記載します。 Three.jsでGLSLでマテリアルを記述できる仕組み (THREE.ShaderMaterialクラス)を使用しており、GLSLの組み込み変数に加えてThree.js独自の組み込み変数も存在します。詳しくはこちら。

頂点シェーダ

uniform float edgeWidthRatio; uniform bool edge; uniform vec3 lightPosition; varying vec2 vUv; varying vec3 vEyeDirection; varying vec3 vLightDirection; void main() { vec3 pos = (modelMatrix * vec4(position, 1.0)).xyz; if(edge) { pos += normal * edgeWidthRatio; } else { vec3 eye = cameraPosition - pos; vec3 light = lightPosition - pos; vec3 t = normalize(cross(normal, vec3(0.0, 1.0, 0.0))); vec3 b = cross(normal, t); vEyeDirection = normalize(vec3(dot(t, eye), dot(b, eye), dot(normal, eye))); vLightDirection = normalize(vec3(dot(t, light), dot(b, light), dot(normal, light))); vUv = uv; } gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); }

フラグメントシェーダ

uniform vec3 lightDirection; uniform sampler2D stepTexture; uniform sampler2D texture; uniform sampler2D normalMap; uniform samplerCube envMap; uniform bool edge; uniform vec4 edgeColor; varying vec2 vUv; varying vec3 vEyeDirection; varying vec3 vLightDirection; void main(void){ if(edge) { gl_FragColor = edgeColor; } else { vec3 mNormal = (texture2D(normalMap, vUv) * 2.0 - 1.0).rgb; vec3 halfLE = normalize(vLightDirection + vEyeDirection); float step = clamp(dot(mNormal, vLightDirection), 0.1, 1.0); float specular = pow(clamp(dot(mNormal, halfLE), 0.0, 1.0), 100.0); gl_FragColor = texture2D(texture, vUv) * texture2D(stepTexture, vec2(step, 1.0)) + vec4(vec3(specular), 1.0); } }

縁取りを実現する方法はいくつかあるようですが、今回は頂点シェーダで頂点の位置を頂点法線ベクトルの方向に少しだけ位置を移動し、指定の単色で塗りつぶしたたオブジェクトを、ポリゴンの裏側だけ描画することによって実現しています。ポリゴンの裏側だけをレンダリングするには、shaderMaterialのsideプロパティをTHREE.BackSideにセットします。

@toonShaderMaterial.side = THREE.BackSide;

同じオブジェクトを本体と縁取りの分、2回レンダリングしているのですが、2回のレンダリングは同じシェーダを使用しています。縁取りをレンダリングする際は、edgeという変数にtrueを渡し、edgeWidthRatioに縁取りの太さ (厳密には太さの割合)、edgeColorに縁取りの色を渡します。

頂点シェーダでは、カメラの位置と光源の位置を用いて、頂点の色を決定するための各種ベクトルを計算しています。視線とカメラのベクトルを接平面に変換して云々かんぬん・・・というけっこう難しい話なのですが、こちらの記事に詳しく記載されています。こちらのブログを執筆している方は相当賢いのではないか。。

簡単な3D表現であればCSSでも実現できますが、WebGLを使うと表現の幅が一気に広がりますね。

#hasegawa #webGL #javascript #html5 #3d #threejs

【後編】Google Geocoding APIを使用して平面地図にマッピング

前編でGoogle Geocoding APIを利用して、世界の首都の座標データを作りました。

今回はそれを使ったThree.jsによるデモを紹介。画像をクリックするとデモページに飛びます。

※こちらの記事は、長谷川の個人ブログからの転載記事です。転載元記事: 【前編】Google Geocoding APIを使用して平面地図にマッピング | dev.tkmh.me 【後編】Google Geocoding APIを使用して平面地図にマッピング | dev.tkmh.me

ドラッグでグリグリ動かせます。あと、マウスホイールで拡縮できます。緑の三角形は首都の場所を示しており、ある程度近づくと国名と首都名が表示されるようになっています。国名・首都名はビルボード処理を入れているので、常にカメラの方向を向いています。

…それだけです。

データを作る際には上のの画像を使ったんですが、これだと変なところで大陸が切れてしまっているので、こちらのでデモでは下の画像を使っています。あと、南極大陸は入れたくなかったので、Three.jsのTextureのrepeatプロパティを使用して切り取っています。そのため、座標位置の調整が若干入っています。

画像の南極大陸部分を切り取っている箇所は以下の部分です。 _MAP_VERTUAL_HEIGHTは南極大陸を含めた画像の高さ、_MAP_HEIGHT南極大陸を除いた画像の高さです。

texture.repeat.set 1, _MAP_HEIGHT / _MAP_VIRTUAL_HEIGHT texture.offset.set 0, (_MAP_VIRTUAL_HEIGHT - _MAP_HEIGHT) / _MAP_VIRTUAL_HEIGHT

Textureクラスのrepeatメソッドは本来画像のリピート数を設定するものですが、1以下の値を設定すると、その割合分の高さを使用できます。それにともなって画像の開始位置のオフセットも設定する必要があります。

データ生成時の画像と使用している画像が違うので、x座標の調整が必要ですが、以下の部分で調整しています。 _MAP_OFFSET_Xはオリジナルとのズレ、_MAP_HALF_WIDTHは画像の幅の半分の値です。 posXはPinクラスのインスタンスのx座標です。

# データ生成時の地図画像と使用している地図画像の差異を吸収 posX = data.x - _MAP_OFFSET_X if posX < -_MAP_HALF_WIDTH then posX += _MAP_HALF_WIDTH

使用している画像は、オリジナルの左端(_MAP_OFFSET_X分)を右端にくっつけているので、上記の処理で吸収できます。

まぁそれ以外は対して難しいことしてません。

今回のソースコードはこちらです。

#3d #webgl #hasegawa #html5

【前編】Google Geocoding APIを使用して平面地図にマッピング

こんにちは。フロントエンドエンジニアの長谷川です。

とある案件で、世界各国のあるデータを平面の世界地図上にマッピングすることになったのですが、各国の座標のデータを作るのが手間なので、何とかならないかなと思っていたところ、Google Geocoding APIにたどり着きました。

Google Geocoding APIでは、住所の文字列から緯度経度を取得することができるので、国名のリストがあれば簡単に座標データを作れるなと思った次第です。

ただし、注意書きとして「ユーザーの入力にリアルタイムで応答することを目的としては設計されていません。」という一文がありました。どういうことだろうと思っていたのですが、使ってみて納得。結構厳しめの制限がありました。こちらに記述されてはいないのですが、1秒間で10回までしかAPIをコールできません。

つまり、200カ国以上ある国の座標のデータをリアルタイムで一瞬で作ることができません。よって、座標のデータは予めjsonデータ等にキャッシュしておく必要があります。このjsonデータを出力できる仕組みを作りました。

案件では国のデータでしたが、今回は各国の首都の座標データを作ることにしました。

まずは事前準備として、各国の国名と首都の名前をリスト化する必要があります。こちらよりコピペ、変形してJSで使える形に変換しました。このデータはJS内にハードコーディングしてしまっています。

次に準備するのは、変換する平面地図の画像です。地図の形式は色いろあるのですが、最も一般的と言われるミラー図法の地図を使っています。

使用した画像は以下のものです。

画像の幅、高さや、その他必要な値もスクリプト内にハードコーディングしています。特に意味はないです。

座標データ作成用のページは以下のリンクから。途中経過が何となく分かるようにインジケータ的なものを何となくつけています。

座標データ作成用ページ

※処理が完了すると、「complete」とalertされて、画面上にjsonのテキストが出力されるのですが、APIの制限があるため、「complete」と出ても何も表示されないことがあります。 ※consoleを開くとリアルタイムで取得しているデータを見ることができます。

座標データ作成用のクラスです。ハードコーディングしているデータが長いです。すみません。。jQueryも使用しています。 ※Coffee Scriptを使用しています。 ※一部省略しています。

class project.MapData @COUNTRY_DATA = [ { country: "United Arab Emirates", capital: "Abu Dhabi" } { country: "Nigeria", capital: "Abuja" } { country: "Ghana", capital: "Accra" } { country: "Pitcairn Islands", capital: "Adamstown" } { country: "Ethiopia", capital: "Addis Ababa" } { country: "Algeria", capital: "Algiers" } { country: "Niue", capital: "Alofi" } { country: "Jordan", capital: "Amman" } { country: "Netherlands", capital: "Amsterdam" } { country: "Andorra", capital: "Andorra la Vella" } { country: "Turkey", capital: "Ankara" } { country: "Madagascar", capital: "Antananarivo" } { country: "Samoa", capital: "Apia" } { country: "Turkmenistan", capital: "Ashgabat" } { country: "Eritrea", capital: "Asmara" } { country: "Kazakhstan", capital: "Astana" } { country: "Paraguay", capital: "Asunción", query: "Asuncion" } { country: "Greece", capital: "Athens" } # 長いので省略 ] _NUM_CALLS_PER_INTERVAL = 10 # 一回のサイクルで呼び出すAPIコール数 _MAP_IMG_WIDTH = 1280 # 地図画像の幅 _MAP_IMG_HEIGHT = 930 # 地図画像の高さ _EQUATOR_ON_IMG = 465 # 地図が層の赤道の位置 (上端から[px]) _CENTRAL_LONGITUDE_ON_IMG = 0 # 地図画像の中心の軽度 # ミラー図法から変換した際のY座標の最大値 _MILLER_CYLINDRICAL_PROJECTION_POS_Y_MAX = 5 / 4 * Math.log(Math.tan(1 / 4 * Math.PI + 2 / 5 * 90 / 180 * Math.PI)) constructor: -> @$body = $ 'body' @$pre = $('<pre>').appendTo @$body @$current = $ '.current' @$total = $ '.total' # HTML上にJSON形式のデータを出力 displayData: ()=> @data = project.MapData.COUNTRY_DATA @numData = @data.length @totalAPICallCount = Math.floor(@numData / _NUM_CALLS_PER_INTERVAL) + 1 @currentAPICallCount = 0 @$total.text @totalAPICallCount @outputData = [] $.when.apply($, (for i in [0...@totalAPICallCount] then @appendDataPerInterval(i))).done => # すべてのデータ log 'complete', @outputData alert 'complete' str = '' for data in @outputData # JSONの形で出力 str += """ { "country": "#{data.country}", "capital": "#{data.capital}", "x": #{data.x}, "y": #{data.y} }, """ @$pre.text str # サイクルごとのデータを取得 appendDataPerInterval: (index)=> d = new $.Deferred() start = index * _NUM_CALLS_PER_INTERVAL end = Math.min start + _NUM_CALLS_PER_INTERVAL, @numData setTimeout (=> # APIをコールしてデータを追加 $.when.apply($, (for i in [start...end] then @appendData(@data[i]))).done => d.resolve() @currentAPICallCount++ @$current.text @currentAPICallCount ), index * 2000 return d.promise() # APIをコールして座標変換したものを出力用データに追加 appendData: (data)=> country = data.country capital = data.capital regexp = new RegExp ' \$.*\$' query = "#{capital.replace(regexp, '')},+#{country.replace(regexp, '')}".replace(/ /g, '+') if data.query? then query = data.query return $.getJSON "https://maps.googleapis.com/maps/api/geocode/json?address=#{query}&language=en&key=AIzaSyCRj5hoOWV05oaN5hFRtLmx5VFicAzzXXA" .done (json)=> # console.logに出力 log country, capital, json # データがなければ終了 geocodeData = json.results if geocodeData.length isnt 1 geocodeData = geocodeData.filter (item)-> return $.inArray('political', item.types) isnt -1 if geocodeData.length is 0 log query, country, capital, geocodeData return location = geocodeData[0].geometry.location # X座標は(取得した軽度 - 画像の中心の軽度)を基準計算 x = location.lng - _CENTRAL_LONGITUDE_ON_IMG # -180 < x < 180 if x < -180 then x += 360 # ピクセルへ変換 x = x / 360 * _MAP_IMG_WIDTH # y座標を算出 y = 5 / 4 * Math.log(Math.tan(1 / 4 * Math.PI + 2 / 5 * location.lat / 180 * Math.PI)) / _MILLER_CYLINDRICAL_PROJECTION_POS_Y_MAX * _MAP_IMG_HEIGHT / 2 # データを追加 @outputData.push country: country capital: capital x: x y: y

このクラスのインスタンスを生成して、displayDataを実行しています。

※log関数(Math.logじゃないよ)はconsole.logをラップしている関数です。

ミラー図法で計算する上で、画像上の赤道の位置[px] (_EQUATOR_ON_IMG)と画像の中心の経度(_CENTRAL_LONGITUDE_ON_IMG)が必要なのでその値もハードコーディングしています。

今回使用した地図の画像はグリニッジ天文台が中心の世界地図なので、_CENTRAL_LONGITUDE_ON_IMGは0です。

COUNTRY_DATAから国名、首都名で住所の文字列を生成し、2秒おきに10回のAPIコールが発生します。 addressパラメータに住所の文字列を渡しますが、"首都名, 国名"となるようにしています。ただし、スペースは"+"に変換しています。

APIをコールすると、文字列のみで検索しているので、多少のあいまいさを含むため、検索結果が複数返ってくる場合があります。基本的にはデータの先頭を使用していますが、上記のクエリだけでは正しく検索できない場合もあったので、その場合はクエリを調整しています。 (COUNTRY_DATAの各要素の中に"query"という要素を保つ場合はこの値をaddressパラメータに使用。)

また、結果のフィルタリングもしています。首都を示すデータの場合は、データのtypes要素に"political"が含まれるらしいので、その条件で結果の配列にフィルタをかけています。

上記の調整でいい感じのデータが作れました。

あとは返ってきたデータに位置情報(緯度・経度)が含まれるので、その値を平面の世界地図の座標に変換します。座標の以下の式を使用します。

λは経度、φは緯度です。この場合のx, yは画像の中心からの値です。

x座標はこの式だと角度のままなので、画像の大きさに合わせてピクセルの値に変換します。

# X座標は(取得した経度 - 画像の中心の経度)を基準計算 x = location.lng - _CENTRAL_LONGITUDE_ON_IMG # -180 < x < 180 if x < -180 then x += 360 # ピクセルへ変換 x = x / 360 * _MAP_IMG_WIDTH

y座標もこの式だと、φが90°の時が最大値、-90°の時が最小値のよくわからない値になるので、ピクセルに変換します。ピクセルの値に変換する際に、φが90°の時の最大値が必要になるので、予め_MILLER_CYLINDRICAL_PROJECTION_POS_Y_MAXに入れておきます。

# ミラー図法から変換した際のY座標の最大値 _MILLER_CYLINDRICAL_PROJECTION_POS_Y_MAX = 5 / 4 * Math.log(Math.tan(1 / 4 * Math.PI + 2 / 5 * 90 / 180 * Math.PI))

# y座標を算出 y = 5 / 4 * Math.log(Math.tan(1 / 4 * Math.PI + 2 / 5 * location.lat / 180 * Math.PI)) / _MILLER_CYLINDRICAL_PROJECTION_POS_Y_MAX * _MAP_IMG_HEIGHT / 2

これで座標のデータが完成したので、jsonデータに保存しました。あとはこのデータを使用して、実際に地図上に場所をマッピングしたデモは後編で。

#hasegawa #google

chrome extension 作成から公開までやってみました

こんにちは、コーダーの西塚です。

今更ですが、chromeユーザーならほとんどの方が使っていると思う、chrome extension（拡張機能）を作成から公開までやってみました。

■やりたかったこと →サイト構築時のメタチェック、でもソースを見るのは解りずらい、なのでボタンをポチっと押したら、そのページのメタ情報が出てくる。もう一回押すと消える。（たぶん他にも似たようなのあると思う）

で、公式のドキュメントを見ながらやってみました。こんな感じ。

なので、作成から公開までの流れをさくっと説明させてもらいますね。

まずchromeの拡張機能には大きく３種類あります。

ツールバーの右に常駐していて、アイコンクリックで起動する「Browser Action」

特定のサイトで、アイコンが出現する「Page Action」

右クリックで起動させる「Context Menu」

ここに詳しく載ってます。

https://developer.chrome.com/extensions/overview

今回は Browser Actionで良かったんですが、ツールバーにたくさんアイコンが増えるのが嫌だったのでPage Actionで作成しました。といってもそんなに開発時の違いはありません。また、開発は基本的にJSでできます。

必ず必要なファイルですが

manifest.json

background.js（別名でも可）

icon.png（別名でも可）

です。それ以外もありますが、必須なのは3つ。

■manifest.json

拡張機能の定義をします。

{ "name": "metaCheckMan", "version": "0.0.2", "manifest_version": 2, "description": "metaデータのチェック", "permissions": [ "activeTab" ], "background":{ "scripts": ["background.js"] }, "page_action": { "default_icon": "off19.png", "default_title": "meta Check" }, "icons" : { "128": "128.png" } }

name → 拡張機能の名前

version → 拡張機能のバージョン。更新するたびに修正する。

manifest_version → これは２にしないと動作しない。

description → 拡張機能の説明文

permissions → 拡張機能をどの範囲で動作させるかの範囲、例えば【"http:///"】のようにワイルドカードのように書いたり【"http://www.sonicjam.co.jp/"】のように特定のドメインでを指定したり、【activeTab】のように設定できる。

background → バックグラウンドで動作させるスクリプトを記述

page_action.default_icon → ページアクションで使うicon 19×19のサイズ

default_title → iconをホバーしたときに表示される文字

icons.128 → chrome://extensions/で使用されるicon

■background.js

ここで、chrome.tabs～って何？？とお思いですよね。実はchromeの拡張内ではchromeオブジェクトが提供されていて様々なAPIが用意されています。これはchromeの拡張からしかアクセスできないオブジェクトです。

(1).拡張機能管理画面で、バックグラウンドページをクリック

(2).コンソールが立ち上がる、ここは今閲覧しているページとは違う領域。

(3).chromeオブジェクト内に沢山のプロパティがある。（通常のコンソールでは出ません）

今回の場合は、（１）タブが更新されたら→ページアクションを出す（アイコンを出す）（２）iconを押したら→アクティブタブ内でCSSとjsを読み込む（３）jsとcssがDOMにアクセスして目的の処理をするという処理をやっています。

■実際のソ－スはこちらです https://github.com/underground0930/chrome_metaCheckMan

ここでのポイントは

googleのエンジニアが言っているように実際のページと、 Content Scripts（今回でいうとjquery-1.11.3.min.js、script.js）は実行されている環境がが閲覧ページと隔離されています。なので、jqueryを使ってもお互いで干渉しあうことはありません。しかし、DOMにはアクセスできるので、Content Scriptsからでもページ内の操作ができるというわけです。

実際はいろいろゴニョゴニョやると、お互いアクセスできるようになるのですがここでは割愛します。

そんなわけでエクステンションを下記に公開しました。

■chrome ウェブストア https://chrome.google.com/webstore/detail/metacheckman/pbaikbiiaamibbojlnkonhhbbpofbgeh?hl=ja

拡張機能なんですが、今年の５月から厳しくなって、ウェブストア経由でインストールしないと、 chromeさんが「怪しい」といって拡張機能を削除しちゃいます、ウェブストアに登録するには初回時に5$かかります。。悪意のあるアプリをなるべく弾くためなんだそう。。

これでビジネスをするのはなかなか難しいかもしれませんが、 webサイトやwebアプリなどを開発する上での補助ツールとしてはかなり役に立ちそうです。JSで開発できるところもありがたいですね。

それではまた。

#chrome #go

Maker Faire Tokyo 2015でSONICJAM R&Dチームとして参加しました！

こんにちは！開発部の池田です先日行われたMaker Faire Tokyo 2015にSONICJAMの研究開発チームが出展したものの中で、研究開発部の泉田くんが企画・開発したUnderwater Livingという水のタッチセンサーを利用した作品があるのですが、そのビジュアル部分で今回コラボすることになりました。上記作品は研究途中というのもあり、「水に触れた」という事した検知できないので、どうせなら動いた時にいろんなところが動く生き物をモチーフにしようと思い、クラゲをwebGLで作成しましたせっかくなので少しweb用にインタラクションを追加したものを公開したので、よかったらいじってみてくださいー http://ikeryou.jp/mft/ ※水をタッチするとマウスのクリックとして認識してくれるセンサーを泉田くんが作ってくれたので連携に関してはラクチンでした実際に完成したものや、その他SONICJAMで展示したものはSONICJAM BLOGで紹介するのでもう少々おまちください！僕は基本的にはweb大好き人間なんですが、たまにこうやってweb以外でアウトプットすると違った楽しさがあっていいですねお客さんの反応を直で見れるのも大変勉強になりました！機会があればまた研究開発チームとコラボして色々と公開できればと思います！

#ike

周りに流されないつぶやき

こんにちは！開発部の池田です僕のiPhone6でたまたま発見したのですが、 webサイトを閲覧中にiPhone6を横にして、さらにそこから180度回転させると画面も回転して正しく閲覧できる仕組みがあるのですが、このときサイト内のアニメーションって停止しないんですよね (縦から横は、おそらくリサイズの処理が発生するからアニメーションは停止する) で、この仕組みを使ってなんかできないかなーって考えてて先日、社内の自主制作MTGでこんなの作って発表しました周りに流されないつぶやき http://ikeryou.jp/oui/na/ ※ iPhone6限定 github https://github.com/ikeryou/nagasarenai おそらく多くの方は再現できないと思うので(汗) GIFアニも用意しましたどういうものかというと、横から横に端末を回転させる瞬間に、中央のテキストを反対に回転させて、結果あたかも中央のテキストだけは端末の向きに影響されてないように見える。というものです。言いたかったことはなんなのか、というとですね。サイト中央のテキスト(twitterのつぶやき)だけは、端末の向きに影響されない。端末が周っても変わらない。つまり、"周り"に流されないつぶやき。ということです。超絶マニアックな仕組みを利用した演出ですが、もし機会があれば案件で使ってみたいものです。おまけスマホを動かすと逃げちゃう猫 http://ikeryou.jp/oui/get/ ※ webGLが使える端末限定 github https://github.com/ikeryou/getcat こちらは、スマホをちょっとでも動かすと猫が振り向いて逃げちゃうやつですスマホをじっと持って待ち続けてください

#ike

絶対に歩きスマホできないサイトになるjavascriptライブラリ

こんにちは！開発部の池田ですみなさん歩きスマホしてますか？危険と分かっていてもwebサイトが気になっちゃって、ついついしちゃいますよね！これはとてもよくないですそこで今回、絶対に歩きスマホできないサイトになる javascriptライブラリを作りました https://github.com/ikeryou/taaa このjsを読み込んで2行ほどjsを書くと、自分自身の回転とwebサイトのスクロールが連動するようになります回転例指でのスクロールはできなくなりますので、おのずと立ち止まって、くるくるすることでしかサイトを閲覧できなくなります (歩きスマホが不可能になります) ※実機デモ(iphoneのみ) http://ikeryou.jp/oui/taaa/example/ 座りながら普通にサイトが見れなくなるというデメリットもありますが、スマホならではの一風変わったUIとして採用するのも面白いかもしれませんぜひスマホで体験してみてください

#html5 #ike

社内イベントのシステムとWeb MIDI APIの話

お世話になっております。okuharaです。

先日、SJ-AWARD 2015という、一年に一度の社内イベントが開催されまして、その中の余興の一つ、大喜利同好会による大喜利イベント「SJ OGR」のリアルタイム投票システムを実装しました。

※SJ OGRの様子。オモシロ回答を考える回答者の皆さん。ブルーシートとスクリーンにDIY精神があふれています。

リアルタイム投票システム

各回答者の回答に対してオーディエンスが面白いと思ったらスマホ上のボタンを押しまくり、回答者ごとに押された回数の集計がリアルタイムにスクリーンに表示されるものです。 HTMLとNode.js(socket.io)にて実装しました。 socket.ioの使い道としては、よくありがちな使い方だと思います。

特に特筆するポイントもなく実装完了したのですが、司会者が回答者を切り替える時に物理的なボタンが使えると良いなーと思い、 Web MIDI APIを使ってみることにしました。

ブラウザとMIDI

@okuparaが投稿した動画 - 2015 6月 30 5:05午前 PDT

5月にリリースされたchrome43でchromeはWeb MIDI APIに正式対応し、 chrome://flagsなどでフラグを立てなくても普通に使えるようになりました。 (※こちらのシステムは4月末に作ったもので、当時まだ正式対応ではなかったせいかMIDIコントローラの認識が非常に不安定で、実は本番時も急に認識しなくなりました・・正式対応以降は結構安定して使えている印象です・・！！)

実装例

以下、MIDI部分の処理を抜粋したコードです。

MIDIデバイスの初期化メソッド、navigator.requestMIDIAccessはPromiseを返すので、.then()の中にコールバックを書く事ができます。ただ、ローカルにあるファイルを直接ブラウザでみる(file://〜)と、

Uncaught (in promise) DOMException: An attempt was made to break through the security policy of the user agent.

というエラーが出てしまいました。理由はよくわからなかったのですが、webサーバー経由でhttp://〜で見る分には、このエラーは出ないようです。

また、今回はNovation社のLaunch Controlを使いました。パッド部分のノートナンバーや、それらのLEDを光らせたり消したりするメッセージはMIDIコントローラごとに違うので、この辺りは仕様書をよくチェックしましょう。

まとめ

このような感じで、Web MIDI APIで簡単にHTMLと物理コントローラが連携できます。最近のMIDIコントローラはLEDで光るやつが結構あるので、その辺りを組み合わせれば音楽以外の用途でも直感的なインターフェースとしていろいろと使えそうだ、と思った次第です。

よろしくお願いいたします。

※独特の世界観でオーディエンスを沸かせる國井くん。

#webmidi #mame

kinect for windows v2 + Visual Gesture Builder

ソニックジャム研究開発部のkimです。今回はKinect v2 のVirtual Gesture Builder をopenFrameworksの環境で使ってみたので、その説明をします。

概要

今まではkinectを使って人のジェスチャーを取るためには、プログラムの内部でアルゴリズムを作って判断していましたが、このやり方は、結構間違えが多かったり、コードの量もそのアルゴリズムによって増えたりして複雑でした。しかし、kinect SDK 2.0のVisual Gesture Builderを使うことで、より簡単で正確な結果を得ることができました。 Visual Gesture Builderは、サンプルになる映像を分析しデータベースファイル(.gbd)を作ってくれます。ジェスチャーの精度を上げるためには、もっと大量のサンプルを用意し、データベースをアップデートすれば可能です。

参考ーVisual Gesture Builderの仕組みや使い方が良く分かります。 http://channel9.msdn.com/Blogs/k4wdev/Custom-Gestures-End-to-End-with-Kinect-and-Visual-Gesture-Builder http://channel9.msdn.com/Blogs/k4wdev/Custom-Gestures-End-to-End-with-Kinect-and-Visual-Gesture-Builder-part-2-

addonの使い方

Visual Gesture Builderの一番いいところは、１つのgbdファイルに複数ジェスチャーを入れられる事です。つまり、ジェスチャーが増えてもコードはそこまで増えません。今回のaddonも１つのgbdファイルで複数のジェスチャーを検知する事ができるように作りました。まずはC:\Program Files\Microsoft SDKs\Kinect\v2.0-PublicPreview1409\Redist\VGB\x86\にあるKinect20.VisualGestureBuilder.dllをプロジェクトのbinフォルダーにコピーします。そして中にあるvgbtechsフォルダーをそのままbinフォルダーにコピーします。これは以下のコマンドでも可能です。⬇︎

xcopy "$(KINECTSDK20_DIR)\Redist\VGB\$(Platform)\vgbtechs" "$(TargetDir)\vgbtechs" /S /R /Y /I

これをプロジェクトのプロパティ -> ビルドイベント -> ビルド後に入れればいい話なんですが、これがうまくいかず、今回は直接入れました。これが今回一番の落とし穴でした。

参考 https://social.msdn.microsoft.com/Forums/it-IT/588c0f7c-9483-463d-addf-4c99113fc4b3/error-adding-gesture-to-visualgesturebuilderframesource?forum=kinectv2sdk

このaddonはofxKinectForWindows2をベースにしてるので、基本はofxKinectForWindows2を使う時と同じです。変更したのはDeviceとsource/Bodyのclassです。DeviceのsetDatabaseメソッドを使いgbdファイルを読み込みます。

bool setDatabase(wstring _gbd);

gbdファイルは基本binフォルダー以下ならどこに置いても大丈夫です。そして_gbdにはその経路をwstringで(ファイルの拡張子は無し)書くとデータベースがロードされます。（setDatabase関数を使う前に必ずinitBodySource()を呼ぶ必要があります。）ジェスチャーを判断するのに使うメソッドは以下のものです。

const int &getGestureID(int n) { return getGestureResult(n) ? gestureResults[n].id : -1; }

nにはbodyの番号を入れます。 bodyがジェスチャーをするとそのジェスチャーのidを出力してくれます。なんのジェスチャーも発見できない場合は-1の値を返します。 Visual Gesture Builder使う前は以下のようなコードを書いて、値を修正したり、ジェスチャーが変わる度にアルゴリズムやメソッドを変えたりしました。

ofVec2f checkClap(int n){ float dis = player[n].leftHandPos.distance(player[n].rightHandPos); float h = player[n].leftHandPos.y - player[n].leftShoulderPos.y; float hl = player[n].rightHandPos.y - player[n].rightShoulderPos.y; float x = -1; float y = -1; float back = ofMap(player[n].headPos.z, 1.0, 3.0, 300, 98, true); float clapArea = ofMap(player[n].headPos.z, 1.0, 3.0, 98, 35, true); if (bClapMode){ if(bAddClaps[n] && dis >= back){ bAddClaps[n] = false; } //複数のユーザーのための修正必要！! if (dis >= 0 && dis < clapArea && !bAddClaps[n]){ setClap(n); } }else{ if(bAddClaps[n]){ if(h >= 0 && hl >= 0){ bAddClaps[n] = false; } } //複数のユーザーのための修正必要！ if (!bAddClaps[n]){ if (h < 0 || hl < 0) { setClap(n); } } return ofVec2f(x, y); }

Visual Gesture Builderを使うことでこれが結構楽になり、mainのプログラムではこのようにif文の中にジェスチャーの種類別にアクションを書くことだけに集中すればいいようになりました。

for (int i = 0; i < kinect.getBodySource()->getBodies().size(); i++){ int id = kinect.getBodySource()->getGestureID(i); if(id == -1){ //ジェスチャーをしてない cout<<"no gesture"<<endl; }else { //何かのジェスチャーをしてる switch (id){ case 0: //ジェスチャーid cout<<"bang love"<<endl; //アクション break; } } }

今回作ったaddonはgithubからダウンロードできます。

#kinectV2 #Visual Gesture Builder #openFrameworks #kim

WebGLで全天球

最近、全天球コンテンツに興味があるので、Three.jsで全天球画像(動画)ビューワを作ってみました。

※こちらの記事は、長谷川の個人ブログからの転載記事です。転載元記事: Paranomic Ball Contents Viewer | dev.tkmh.me

全天球画像ビューワ自体は簡単に作れました。要は球を作ってEquirectangular形式(正距円筒図法)の画像を球の内側に貼り付けるだけ。

DEMO

ソースコードはこちら。

実装方法はいろいろ転がってましたが、球の内側にマウスのインタラクションを付けたかったので、現在の形に落ち着きました。

ちなみに、スマホでも見れますが、Androidは未検証です。多分重い。 iOS(ver.8以上)では割と軽快に動きますが、やはりVideo問題が。

iOSではビデオを再生するときは、ユーザーが明確にクリックなどで再生のスタートをさせないと、動画が再生できない上、iPhone/iPod touchの場合は全画面で動画が立ち上がります。

こちらのサンプルはPCでは問題無いですが、iOSでは上にある「play」ボタンをクリックしないと動画が再生されません。また、iPhone/iPod touchでは、再生されても全画面で立ち上がり、再生をストップした時点でその状態の画像がTextureとしてCubeに反映されます。

要はiOSで全天球動画をHTMLで見ることはできない！(はず。)

Androidではそもそも画像が表示されなかったり、画像は表示されても動画がiOSと同じく再生されなかったりと、いろいろ問題があります。

球の内側のマウスオーバー(スマホはスワイプ時)のインタラクションですが、Three.jsのRaycasterクラスを使用して実現しています。

Three.jsのRaycasterを使って、画面内のオブジェクトを得る

上記の記事と、Raycasterクラスのドキュメントを参考にしました。 Raycasterの考え方はこちらを参照 (ただし古いProjecterクラスを利用した実装方法です)。

球の内側にインタラクションを付けたかったのですが、そのためにはMaterialのオプションに

side: THREE.BackSide

を指定する必要があったので、GeometryやMeshを反転させるのではなく、Textureを反転させて貼り付ける実装方法を採用しました。

以下、クラスメソッドを抜粋したものです (CoffeeScript)。※一部省略

# テクスチャ生成 createTexture: (src, width, height)=> canvas = document.createElement 'canvas' canvas.width = width canvas.height = height ctx = canvas.getContext '2d' ctx.translate width, 0 ctx.scale -1, 1 ctx.drawImage src, 0, 0, width, height texture = new THREE.Texture canvas

srcはimgやvideo、widthとheightはそれぞれsrcの幅と高さです。 videoの場合は描画更新時に都度ctx.drawImageする必要はありますが、基本同じです。

マウスオーバーのインタラクションはRaycasterのintersectObjectメソッドで取得できるface (球のGeometryのface)の色をランダムで変更しています。以下クラスメソッドの抜粋です。

@sphereGeometryは球のGeometry、@canvasElmは描画しているcanvasエレメント、@imgSphereは球のMeshです。また、mouseMoveHandler、getRaycasterIntersectsの引数はマウスのx, y座標を入れます。

アニメーションのライブラリはTweenMaxを使用しています。

# mosue move (touch move) mouseMoveHandler: (clientX, clientY)=> intersects = @getRaycasterIntersects clientX, clientY # 交差しているMeshがあれば、intersectsの配列に格納される if intersects.length > 0 intersect = intersects[0] color = @sphereGeometry.faces[intersect.faceIndex].color TweenMax.killTweensOf color TweenMax.to color, 0.2, { r: Math.random() * 6, g: Math.random() * 6, b: Math.random() * 6, ease: Sine.easeOut, onUpdate: => @sphereGeometry.colorsNeedUpdate = true } TweenMax.to color, 0.6, { r: 1, g: 1, b: 1, ease: Sine.easeInOut, delay: 0.2, onUpdate: => @sphereGeometry.colorsNeedUpdate = true }

# インタラクション判定 getRaycasterIntersects: (clientX, clientY)=> # スクリーン上のマウス位置を取得する mouse = new THREE.Vector2() mouse.x = (clientX / @canvasElm.width) * 2 - 1 mouse.y = -(clientY / @canvasElm.height) * 2 + 1 raycaster = new THREE.Raycaster() raycaster.setFromCamera mouse, @camera # 交差判定 # 引数は取得対象となるMeshの配列を渡す。(子要素も対象とする場合は第二引数にtrueを指定する) return raycaster.intersectObject @imgSphere, true

次に、画像の切り替えのトランジションです。最初はGeometryの各頂点が球の中心に直線的に収束していくものを作ったんですが、微妙でした。そこで、球上のクリックした位置に頂点が収束するようにしました。かつ、直線的にではなく、球の表面上を沿ってアニメーションします。

考え方としては、各頂点を原点が球の中心のベクトルとし、クリックした点まで回転運動させるイメージです。各頂点もクリックした点も球上の点なので、ベクトルの長さは同じです。よって回転運動だけでOKです。

簡単に説明すると、2つのベクトルが作る平面の法線ベクトルを軸として、クォータニオンを使って回転させます。以下、クラスメソッドの抜粋です。

_POINT_ZEROは原点(球の中心)です。メソッドの引数のindexは頂点のインデックス番号、fromは移動前の座標(Vector3)、toは移動後の座標(Vector3)です。出現時と収束時で頂点のアニメーション開始の時間(delay)を調整しているため、その判断をするためにshowという引数(真偽値)を設けています。

# クォータニオン回転 quaternionRotate: (index, from, to, show = true)=> # 回転の軸となる法線ベクトルを求める normal = _POINT_ZERO.clone() normal.crossVectors(from, to).normalize() # 角度を求める theta = Math.acos(from.dot(to) / (from.distanceTo(_POINT_ZERO) * to.distanceTo(_POINT_ZERO))) if show delay = (Math.PI - Math.abs(theta)) / Math.PI else delay = Math.abs(theta) / Math.PI tweenObj = { r: 0 } return TweenMax.to tweenObj, 0.6 + delay, { r: theta delay: delay ease: Expo.easeInOut onUpdate: => # 4x4の回転行列を掛けるので、ベクトルも4x1に vector4 = new THREE.Vector4 from.x, from.y, from.z, 1 # 法線ベクトルと角度からクォータニオンを生成 quaternion = new THREE.Quaternion() quaternion.setFromAxisAngle normal, tweenObj.r # 生成したクォータニオンから回転行列を生成、ベクトルに掛ける matrix = new THREE.Matrix4() matrix.makeRotationFromQuaternion quaternion vector4.applyMatrix4 matrix # 変形後の頂点を反映 @sphereGeometry.vertices[index].set vector4.x, vector4.y, vector4.z @sphereGeometry.verticesNeedUpdate = true }

さすが3Dのライブラリ。クォータニオンから回転行列の算出とかも一発です。楽ちん。

全天球コンテンツは3Dと絡められるので楽しいですね。ただ、やっぱりAndroidは面倒です。。

#webgl #html5 #3d #hasegawa

メインビジュアルを更新しました

こんにちは！開発部の池田です少しずつ改良しております弊社開発部ブログですが、このたびトップのメインビジュアルを新たに作りました！テーマは「SONICJAMの見え方を作る」このブログを通じて、常に新しいSONICJAMをみなさまに伝えていけたらと思いますつまりはがんばって更新するので見て欲しいということです！よろしくお願いしますせっかくWebGLで作ったので、タッチイベントでグリグリできるやつもこちらにアップします WebGL対応のスマホをお持ちの方はぜひ(iOS8~とか)

#webgl #html5

自主制作MTGレポート 2014.11

ちょっと時間が経ってしまったのですが、11月末に自主制作MTGを行いました。

自主制作MTGとは・・・

SONICJAMでは、スタッフの自主的な制作活動を推進していて、

だいたい2ヶ月に1度くらい、制作中のものや、企画中のもの、

仕事のtipsやノウハウなどを発表したりする会の事です。

併せて、会の後にはJUN’S BARが開催されることも多いので、

社外の方にも参加いただいて、終了後に美味しい料理を頂きつつ懇親会・・

ということも多いです。

以下、今回の発表内容を簡単にご紹介していきます。

■発表者：デベロッパー宮西

「スマートフォンのブラウザで、電子コンパスを使う。」

iPhoneのWEBブラウザでJavaScriptから電子コンパスを使い、iPhoneを太陽の方角に向けると、仏像に後光が差すページのデモを作っていました。

太陽の方角は外部APIから取得しているようです。

Androidのブラウザでも利用可能ですが、端末によっては、

まだJavaScriptから電子コンパスが使えないとのこと。

■発表者：デベロッパー池田

「ios8でWebGLを使う。」

iOSでも8からWebGLに対応したとのことで、そのデモを見せてくれました。

WebGLは、グラフィックを高速に描画できるOpenGLを、WEBブラウザからでも、JavaScriptのAPIとして使えるもので、負荷の高い3Dグラフィック処理などに使われたりします。

http://ikeryou.jp/particlock/

このデモでは300個くらいの球体で描画していて、WebGLをより直感的に扱えるJavaScriptライブラリThree.jsを使っているとのこと。

特に今年はこういったスマートフォンサイト上での、リッチな表現の可能性がどんどん広がっていく予感がします・・

■発表者：デザイナー原

「アドビで遊ぼうアドビ場」

グラデーションツールやブラシツールを使って、サイケデリックなグラフィック作ったり、Illustratorのオブジェクトの変形を繰り返し適用することで、幾何学文様のグラフィックを作れる、というtipsを見せてくれました。

■発表者：デザイナー伊南

「アドビで遊ぼうアドビ場2」

PhotoshopやIllustratorで文字や色・テキスト設定・カラーチップ・図形・レイヤー効果などを共有できるライブラリ機能について話してくれました。

プロジェクト間の共有はもちろん、PhotoshopとIllustratorのソフト間や

ネットワーク越しでの共有も可能とのことです。

「個人的に後でもうちょっと教えてください」と言うデザイナーも。

発表者：デベロッパー泉田

「vvvvでライブコーディング」

ビジュアル表現などに強い、グラフィカルなプログラミング環境、vvvvのワークショップに参加したということで、vvvvの紹介をしながら、ライブコーディングを行ってくれました。

敷居の低い開発環境のようなので、プログラミング経験の少ない人でも

インタラクティブなビジュアルなどをつくりやすいのかな、と思いました。

「Intel Edisonを使ってみた。」

最近発売されてWEBエンジニア界隈でも話題のWifi、Bluetoothを搭載した小型コンピュータ、Intel Edisonの紹介をしつつ、こちらもLEDを光らせたりするライブコーディングを見せてくれました。

IoTなどに興味のある方は是非・・とのこと。

■発表者：デベロッパー西川

「オープンソースで構築するストリーミングサーバー」

最近の映像のストリーミングサービス事情はどうなってるんだろう？

というところから、いろいろ調べて、オープンソースのソフトウェアで構成されたストリーミング配信のデモを見せてくれました。

■発表者：デザイナー森田

「サイネージに表示する3DCG映像のデモ」

ここ最近3DCG界隈では、ローポリゴンのCGが流行っているとのことで、

実際にそんな感じの3DCG映像を制作し、サイネージに表示して見せてくれました。

今後はエンジニアなどと組んで、よりインタラクティブな作品にしていきたいとのこと。

■発表者：Summally フロントエンドエンジニア奥山さん

外部よりSummallyの奥山さんにお越しいただきました。

弊社デザイナーの原とは、元々同じWEB制作会社で働いていたそうで、WEB受託制作からWEBサービス制作へ転身した立場からそれぞれの違いや、現在業務で行っていることや、これからやっていきたいことなどをフロントエンドエンジニアとしての切り口でお話ししていただきました。

我々が普段、主に行っている受託制作とは違った、自社サービス開発のお話を聴けて、とても良い刺激をうけました。

以上、SONICJAMの自主制作MTGのレポートでした！

8月に自主制作MTGを行いました！

今回は社内のみでシッポリと開催

一発目は、「Leapかき氷 Ver.2」

・医療用のチューブポンプを採用

・手を回すと氷が削れる

・指を曲げるとかけれるシロップが1種から5種に

などなど、シュールにアップデート！

続いては「プロトタイピングについての話」

・ディスプレイをトラッキングするテスト

・ピエゾ素子を使った振動マイクの試作

続いて「録音した音声のピッチに連動する数学的アニメーション」

ラストは、デザイナーから。

Adobe Edge Animate を使って一風変わった世界観を披露！

デザイナーとチーム組むのも面白いかも！

いつも実案件の合間を縫っての開催ですが、

みなさんお疲れさまでした！

Trending Blogs

Recently Viewed Blogs

SONICJAM Developerz Blog