【実践】VR動画をYouTubeにアップする方法



こんにちは〜
一気に秋らしく涼しくなりましたね、デザイナーのKです。

さて、今回の投稿ではYouTubeにVRモードで閲覧できる動画を作成してアップする方法を紹介します。Googleのスマホも発表され、VRビューワーも登場したので、それまでにちょっとしたVR動画をアップしておけば、どやっ、とできること請け合いです。(今のYouTubeアプリでも見れます。)

VR動画とは



まずは実際にVR動画を紹介します。最近ハマってライブにも行ったAwesome City ClubのPVです。ミュージシャンのプロモーションでも結構よく見ますね。Safariは今のところ対応していないので注意してください。PCでは画面をつかんで360°ぐるぐるでき、スマホなら加速度センサーで方向を切り替えることができます。

今回は
①Blenderで作る動画VR②パノラマ画像から作る静止画VRの2つの方法を紹介します。
②の方が初心者でも簡単に作れると思いますので、ツールに慣れていない方でVRを作りたい方は②の方を参考にしていただければと思います。



①Blenderで作る動画VR


VR動画はアニメーションレンダリングができるソフトなら作成可能だと思います。
今回は無料の3DCGソフトのBlenderを使用します。BlenderはこちらからDLできます。

まず、VRであることがわかりやすいように四方に壁のある空間をモデリングします。
見ている方向の違いがわかりやすいように色もつけてみましょう。


動画の方は動きも見たいので、動かすオブジェクトを配置します。Cubeを反対方向に2個配置して、色も設定しておきます。ライティングも立体感が分かるようにArea lightを上の方において明るさを調整します。


ここからカメラの設定になります。

カメラをVR視点(デフォルトでユーザーが見る視点)に配置し、

  • Renderer を Cyclesに変更
  • カメラを選択して
    [Projection(投影図法)= Panoramic(パノラマ状)]
    [Panorama Type = Equirectangular(正距円筒図)]
    に設定を変更



こんな感じの配置位置にしました。



この状態で静止画レンダリングしてみます。

このようにパノラマの全景画像が書き出されれば設定はOKです。


あとは動画の書き出しですが、YouTubeの場合、最終的に.mp4の動画を後述のVR用エンコーダーで変換してアップする必要があるのでフォーマットをMPEG−4で書き出します。
VRは高いfpsがないと酔いの原因になりますが、その分書き出す枚数は増えてしまいます。以前やった時は何日もかかるような設定にしてしまい結局あきらめたため、今回はfps30(1秒間に30コマ描画)で10秒の動画を作成する設定にしました。


②パノラマ画像から作る静止画VR


VR用のエンコードの説明はあとでまとめてするとして、先に静止画からVRにする方法を説明します。この方法はシンプルで、静止画を連続の「コマ」として動画化すればいいのです。なので、フリーソフトで[静止画]→[タイムラインを持った.mp4]に出来るものがあればパノラマからVRを生成することが可能です。この方法なら高解像度のパノラマをVR化するのにヒトコマヒトコマレンダリングする必要はないので、早く出来ます。


今回は、効果音やちょっとしたフィルタもかけたかったのでiMovieで動画化しました。
秋なので秋っぽいものを。。。

4Kの解像度ですが、そこまで時間はかかりませんでした。
この方法ならiPhoneで撮影したパノラマ写真を「ちょっといい感じのVRシアター」にして、どやっ、と出来ますね。


VR用の.mp4への変換


①②それぞれの方法で.mp4ファイルが作成できたら最後にYouTubeから提供されている360 Video Metadata アプリを使ってエンコードしてください。
[My video is spherical(=球体)]にチェックを入れて動画ファイルを開き[inject metadata]で変換されたファイルが作成されたら完了です!
これをYouTubeにアップし、VRに変換されたらURLからVR動画が楽しめます!
(だいたい、すぐには変換されません。何度か間をおきましょう)



VR動画①


VR動画②





こちらがアップしたVR動画です!(シュ、シュール.........笑)

スマホで見ると本当に小窓から空間を覗いているような感覚になりますね!!
高価なヘッドセットには及びませんが、メジャーなプラットフォームでいつでもどこでもVRが見れるとみんなと気軽に体験を共有できて楽しいですね!!

よかったらぜひ、この芸術の秋に制作してみてください!!!


参考リンク)
https://youtu.be/tZgG7n-lhUc
http://www.cgradproject.com/archives/3448
http://blender3dcg.blog.jp/archives/1050448417.html


トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

PICO-8 introductory tutorial

Hello reader!

I bring you an introductory tutorial to PICO-8.



In this tutorial we are going to:
  • Create a player character.
  • Apply movement to it.
  • Create a simple level for the character to move in.
Please note that this tutorial assumes that you have some basic programming knowledge.

First of all, fire up PICO-8 and enter the console. In order to start off a new project just type.

save [projectname]

In my case it was `save tongull_test` which generated a file tongull_test.p8 . Once generated I typed `load tongull_test` to load the project in memory and then pressed escape to enter the PICO-8 IDE.


Displaying a character on screen


First off, I drew my little character in the sprite editor. I drew 3 sprites, one for when the character is standing still and 2 more for when the character is walking.



If you noticed, each sprite has an index assigned to it. This index is used in code. In order to display my character, I made use of the `_draw()` function which is called once every visible frame(roughly 30fps).

Please note that the _draw() function should be used for drawing objects on screen; logic is handled by the _update() function(more reliably called at 30fps). Inside that function we first call the cls() function which clears the the screen, then we call the spr() function in order to draw our sprite. In this function we will pass the index of the sprite and the X and Y coordinates of where we want to draw it.

In order to test out the application press CTRL+S to save and ESCAPE to enter the console then to run the application type `run [projectname]`

-- Double dash is used to write comments
function _draw()
    cls() -- Clear Screen
    spr(0, 50, 50) -- Sprite Index, x, y
end



Character Movement


Now that I displayed my character, let’s try to move it around! First of all I create an object called player to represent the player character and give it properties I needed.

player = {} -- initialising the object
player.x = 50 -- this will hold the player’s x co-ordinate
player.y = 50 -- this will hold the player’s y co-ordinate
player.sprite = 0 -- the current player sprite
player.speed = 2 -- the speed at which the player is going to move
player.moving = false -- Is used as a marker to see if the player is moving


Now that we have our object ready let’s create a function to handle the movement sprite animation. In the function we will cycle through the sprites to have movement animation.

function moveanim()
    player.moving = true -- Set the marker to indicate that the player is moving
    -- Check if the index is between 0 and 2
    if player.sprite > 2 then
        player.sprite = 0 -- if the index is over 2, reset
    end
end


Now in the `_update()` function we will listen the the user's input via the `btn()` function. In PICO-8 each player has up to 6 inputs(represented by index), 4 of which are directional. For player 1 the arrow keys serve as directional keys. Since our character will be only moving left and right we will use of 0 (left arrow key) and 1 (right arrow key) indexes.

When the left/right keys are pressed, the player x co-ordinate is modified by the player speed. If the x co-ordinate goes beyond the screen boundaries, we will set it to the opposite part of the screen.

In order to Log the X value, we will make use of the `print(text, x,y)` function. In Lua to concatenate string values we use `..` .

function _update() --called at 30fps
    player.moving = false
    if (btn(0)) then -- if left key is pressed
    
    player.x -= player.speed -- decrease the x by the speed
        if player.x < -10 then -- If the character moves beyond the left bound
            player.x = 128 -- Place character at the other side of the screen
        end
        moveanim() -- Call the move function
    end
    if (btn(1)) then
    
    player.x += player.speed
        if player.x > 128 then
            player.x = -10
        end
        moveanim()
    end
    if not player.moving then
        player.sprite = 0
    end
end

function _draw()
    cls() -- clear screen
    spr( player.sprite, player.x, player.y) -- draw the sprite using the values of our player object 

    print("x :"..player.x, 0, 0) -- Log the x value
end




Map/Level Editor

Now that our character is moving, but he is moving in empty space. Let's create a level for him to move in!

In order to do that we will make use of the sprite editor to create "tiles" to use in the map editor. The map editor is pretty simple to use, just select a sprite and draw it on the map.



The code is pretty simple too, just make use of the `map(cel_x, cel_y, sx, sy, cel_w, cel_h)` function.

function _draw()
    cls()
    map(0,0,0,20,124,124)
    spr(player.sprite, player.x, player.y)
    print("x:"..player.x, 0, 0)
end 




And there you have it, we have a little game to play around with.

You can see the finished project with an added little intro animation here . The source code is also available on github . Feel free to take a look and play around with it.


See you next time!

Pocket C.H.I.P and Pico-8

Hello again readers!


I am back and with a new toy that I bought to tinker with. What I am talking about is the Pocket Chip, a little device that utilises the Single Board Computer called C.H.I.P which is very similar to the Raspberry Pi in both price and functionality.


The beauty of the Pocket C.H.I.P is that it turns the C.H.I.P into a portable PC with it’s keyboard, battery and touch screen. It also has GPOI breakouts for those who want to dabble in electronics.

Pocket C.H.I.P


Included in Pocket C.H.I.P’s linux operating system is an application called a sic “fantasy console for making, sharing and playing tiny games and other computer programs.“




Pico-8 Editor


The interesting thing about this Fantasy Console/Game Engine is that it has carefully chosen limitations(such as lines of code capped at 8192) in order to inspire simple and creative games/applications.


Being a developer and a fan of games, I want to embark on learning how to use this game engine and share my experiences and knowledge to you the reader. Join me in the next blog where I explain the basics to help you get started in making your own game!



トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

おら東京さ行くだ

お久しぶりです、最初のブログ投稿からおよそ1年ぶりに登場しましたディレクターのMです。

こんにちは、いよいよ大阪も梅雨入りしてきましたね。
ジメジメと湿度が高く気持ちが悪いですが、トンガルマン社内はカラッとドライな雰囲気です。

さて、少し前になりますが、ワタクシおよそ10日間、大阪から東京への長期出張に行っておりました。

はい、それはなぜかと申しますと、GW前からトンガルマン社員一同で携わっていました、
JRA競馬の祭典「日本ダービー」特設イベントに出展したコンテンツの立ち合いのためでございます。




そして感想ですが、、

いやぁ、楽しかったです!
弊社は会場内の全4コンテンツ中、3コンテンツの開発を行ったのですが
どれも、なかなかの盛況ぶりでした。





























ワタクシがディレクションを担当したのは、会場でもメインコンテンツとなる「FORTUNE DARBY」
手相の画像解析と、Leapmotionを使用したジェスチャートラッキングでのレースゲーム。
200インチ大型モニターに表示されたコンテンツは、開発・テスト時に確認していた小型モニターと違って迫力がありました。
実際に大勢の人に体験してもらい、みなさん楽しそうでした。

あと、ワタクシ個人的に楽しかった事はと言うと
オペレーター・スタッフの女の子が皆可愛いかったです!
そしてお弁当がおいしい!
初めて馬券を買ったのですが、ビギナーズラックならずでした。残念!
でも競馬って面白い!!!中継を見て鳥肌が立ちました。
次回は必ず勝ちたいと思います。


そんなわけで来年も「日本ダービー」コンテンツに携わりたいです!



トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

ASO対策とは




バズマーケティングを意識したソーシャルなコンテンツを
ジャストアイデアを連発しながら考案し、

実際にPDCAをまわしていく上で、時には大幅なピヴォットも経験し、

クライアントのベネフィットに寄与するのがマーケッターのミッション

そうしてクライアントのみならずユーザーとのエンゲージメントも高めていく

そんなマーケッターに俺はなりたい。

        



エンジニアのJです。

そんな訳のわかんない話より、レイヤー(笑)を変えて
現場レベルに目を向けた実践的な事を覚えたいですよね。

という事で
ASO対策(アプリの検索順位を上げる施策)の基本を説明していきます。





そもそもASOってなに?


Appli Store Optimaizationの略でSEOの
App storeバージョンです。

IT業界の人は横文字使いたいマンなので、ASOとか言ってますが

単純にアプリのダウンロード数が、少なすぎる時に対策すると
上位に出てきやすくなってダウンロード数が増えるってやつです。






で、ASOってどうすればいいの?


対策したいアプリがどの層にならウケるか考えて、
大体3つぐらいのキーワードを正しく散りばめる

基本はこれだけです。

例えば主婦向けの家計簿アプリを作ったとしてターゲットを主婦に設定します。
そして潜在ユーザー層の主婦が検索しそうなキーワードを、
ルールに則って散りばめます。









↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑



今の上の文章では主婦という言葉を違和感がないよう3つ散りばめています。

実はこの含有率を意識するというのが、
ASOないしSEOでは大事です。


しかし難しいのが、「そういう人が検索しそうなキーワード」を選定する事です。

ユーザーが全然検索していない言葉で、上位に出てきてもダウンロード数は
伸びないので上位表示されても自己満足で終わってしまいますね。



エビデンス(笑)をきっちり集めましょう。




ASOツール活用


色々なASO向けツールを活用して
ユーザーはどんなキーワードで検索しているのか?

自分の推論は間違っていないか?などを、
きちんと検討するためのツールをご紹介します。



・Searchman
競合アプリなどを分析できるASOツール
https://searchman.com/ja/



・App Annie
今の順位情報など、傾向などを分析できる
https://www.appannie.com/


・グーグルトレンド、キーワードプランナー
どういう風に検索されているか、
旬なキーワードなどを分析できる
https://www.google.co.jp/trends/









ASO対策まとめ

今回は基本編なので、具体施策については言及しませんでした。
ですが大事な事は、

1、ターゲットに合ったキーワードを選定

2、含有率などを意識して正しくキーワードを散りばめる

3、競合などを分析して再度キーワードを選定して対策


上記の様なPDCA(笑)をまわしていく事なので、
そんなに難しい内容ではありません。


少し長くなったので、具体的なASO施策については次回でご説明します。



お付き合いありがとうございました。





























記事の中でASOという言葉を何回使ったでしょうか?











トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

Google I/O 2016振り返り




こんにちは、かなり暖かくなってきましたね。
最近携帯をずっと使ってたiPhoneからAndroid端末に変えようか検討中のKです。

さて、現地時間の5/18〜20まで開催されたGoogleの開発者向けカンファレンスであるGoogle I/Oについて、今回は多岐に渡るいろんな分野の発表があったこともあり自分なりに少しまとめてみたいと思います。

公式ページ

まず今回のGoogle I/Oは、これまでやっていた室内の会場ではなく、屋外の会場で行われたこともひとつの話題としてあがっていました。Youtube上の360°動画で見ることもできますが、天気が良さそうでまるで夏フェスみたいですね。






Google Home



音声で家電を操作したり、ググったり、スケジュールをアナウンスしてくれるハードウェアGoogle Homeが発表されました。デモでは子供の宿題を手伝ったりしていましたが、超優秀な秘書と家庭教師と物知り老人が同居してるような感じですね。すごいです。映画「her」を彷彿とさせます。ただ結構いろんなデバイスをインターネットに繋げておかないといけないので家族全員に高いリテラシーが必要そうですね。


Allo



機械学習機能を搭載したメッセンジャーのAlloですが、特に驚いたのはテキストだけではなくて送られた画像に対しても会話を補足して返答を作成してくれていた場面です。ちょうど先日の社内勉強会で機械学習のことを学んだのですが、画像認識の研究者で、独自の機械学習を実験されていた外部講師の方が、「結局は学ばせるデータを“沢山集める”工程が最も大変だ」という話をされていたので、このあたりはさすが世界最大のデータベース企業.....驚異!!


Daydream



Android NでVRに対応したモードが追加されるとのこと。ハードウェアはサードパーティが作る想定とのことなので、製品というかVRプロジェクトの総称ですかね?...Daydream(=白昼夢)って中二病っぽくていいいですね。
会社にはOculusのriftの製品版が来たのでVR体験はよくやるのですが、やはりデバイスとPCを合わせて数十万という価格と手軽さがないことは個人にはネックです。気軽にVRが体験できることは楽しみですね。


TPU



 最後に機械学習をより効率化できるTensor Processing Unitというチップが発表されました。
 ”great software shines brightest with great hardware underneath.”とあるように、頭のいい子を作るための脳みそ作っちゃったような感じです。。。すごい。(Googleって検索の会社だったはずじゃ。。)
これは囲碁の世界チャンピオンとも対決した人工知能AlphaGoにも搭載されていたらしいのですが宇宙の組み合わせ以上のものを効率よく計算できるコンピュータって、もはやそれ新しい宇宙や〜(ノ゚ο゚)ノ オオオオォォォォォォ-.やぱやぱ〜


以上、勢いをより強く感じたGoogle I/O 2016!!!でした!!!
TensorFlow試してみます!!!


トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

VR元年!VRゴーグルまとめ




入社して体重が10数kg増えました。
ディレクターNです。


Oculus社の"Rift"やSONYの"Play Station VR"が発売になり、
到着を心待ちにしている方々をいらっしゃるかと思います。

VRが一般家庭にも普及するVR元年ともいえる」2016年、どのようなVRゴーグル(HMD)が発表されているのかまとめてみようかと思います!


rift



VRを世間一般に広めることになった"Oculus lift DK2"の製品版です。
今までのものはあくまで開発者用キットで今回発表されたのは一般家庭でも楽しめるように
改良を行ったものです。


同時に公式アプリストア"Oculus Home"も先日公開されました。



そして公式サイトで公開されたサンプル動画がコチラ。







しゅごい…


これに3Dヘッドフォンも内蔵されているので、多分没入感、臨場感はとんでもないことになるでしょう。





また、発売は遅れてしまいましたが、"Oculus Touch"というコントローラーも発表されています。










しゅごい…


こんなに自由自在…

riftは弊社も絶賛到着待ちですので、届いた際は体験頂けますので是非。


via : https://www.oculus.com/en-us/



PlayStation®VR





SONYが本気出してきました。
今年発売が発表されたPlayStation®VRです。

以前は"Project Morpheus"という名前で展示されていました。

"サマーレッスン"というメンズは歓喜過ぎるコンテンツを発表し話題になりました。







しゅごい…




PlayStation®4につないで実際にゲームを行えるとのことで、注目度はかなり高くなっています。

インストールベースで元々ストアもあり、liftを脅かす存在になりそうです。


via : http://www.jp.playstation.com/psvr/

HTC Vive





HTCが開発した、トラッキング特化型のVRゴーグルです。

どのように特化していてるかというと、画像横にある2つのセンサー。

このセンサーがユーザーがいる空間をトラッキングすることで歩き回ることが出来ます!









公式のセットアップ動画のキャラが可愛い…




こちらもコントローラーが同梱されており、空間内を歩き回り操作を行うという他には無い体験が
デフォルトで行えます。






また、"SteamVR"システムを内蔵しており世界最大級のゲームプラットフォーム"Steam"との連携も期待されています!


via : https://www.htcvive.com/jp/





Gear VR




SAMSUNG社が発表し、Oculus社も共同開発を行ったスマートフォン装着型のVRゴーグルです。
他のVRゴーグルとは違い、PCを使用しないのでケーブルレスでリーズナブル。
手軽にVR体験を行えるのが魅力なVRゴーグルです。





動画サイトNetFlixのアプリも登場し、より没入した環境で映画やドラマが楽しめることも話題になりました。







主に同社のスマートフォン"Galaxy"を使用し、その端末の進化と共にGearVRも進化していっているので今後の展開にも期待大です!


via : http://www.samsung.com/jp/product/gearvr/


他にも、ハコスコやGoogle Cardboradといった超お手軽なVRや視線検知機能を搭載したFOVE、
等個性豊かなVRゴーグルが登場してきています。







VR元年、様々なニーズに適したVRゴーグルが登場しています。
VRが一家に一台になる日も近いかもしれませんね。



弊社も日々VRコンテンツの開発を行っております。
エアロバイクと連動した"ヴァーチャリ"を筆頭に様々なコンテンツをご体験頂けますので、
お気軽に足をお運びくださいませ。
























トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman