ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

VRオンラインWebアプリ STYLY VR

ChromebookでVR作品を制作するツールとしてオンラインWebアプリ「STYLY」を使って、4年前にSketchfabにアップしていた3DCGモデルをダウンロードしてSTYLYにアップロードし自動撮影したYouTube動画を紹介します。

はじめに

ChromebookでVR作品を制作するにはオンラインWebアプリを使うのが手軽で好ましいです。

最近ではWebVRの技術が進歩して、従来のハイエンドなPCで専用のソフトを使ってVR作品を制作していたような環境がブラウザー上で実現できるようになりました。

今回はそういったオンラインWebアプリの代表である「STYLY」を使って、手始めに4年前にSketchfabにアップしていた3DCGモデルをダウンロードして、STYLYにアップロードしてSTYLYのカメラで自動撮影した映像をYouTubeにアップしたので紹介します。

なお、STYLY Studioの起動ができなくなった場合は、JavascriptCookieが関係しているかもしれないので、文末の「まとめ」に掲載している設定を参考にしてください。

STYLY

以下のサイトに行きます。

7ef0afab0621f831cc79ffa2baea1846 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
STYLY - VR creation platform
VR空間を駆使した新たな表現・体験を創造するプラットフォーム「STYLY」。STYLY Studioで直感的にVR空間のデザインでき、VIVE・Oculus Rift・DaydreamなどのVRHMD向けに配信することができます。
Screenshot2019 08 12at18.52.54 1 1024x519 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

サインアップ

VR作品を制作するにはサインアップしてログインする必要があります。トップメニュー右端の「SIGN UP」をクリック。

Screenshot2019 08 12at16.21.52 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

基本的に英語ですべて記入して「Sign up」をクリック。

Screenshot2019 08 12at16.22.53 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

STYLY Studioを起動

Launch STYLY Studio」をクリック。

Screenshot2019 08 12at17.07.51 1024x545 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

いきなりチュートリアルが始まります。しかも英語ですが、試しにGoogle翻訳してみましたが日本語への翻訳はできませんでした。

このチュートリアル自体がVRコンテンツになっているので、リアルにVR作品を制作するプロセスが学べますが、終わるまでにかなりの時間がかかります。

チュートリアル画像を一部紹介

全部紹介すると膨大な枚数になるので、一部のスクリーンショット画像をピックアップして紹介します。ここに出てくる動物たちや背景はリアルタイムで動いています。

Screenshot2019 08 12at17.09.00 1024x546 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
Screenshot2019 08 12at17.11.02 1024x546 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
Screenshot2019 08 12at17.22.34 1024x696 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
Screenshot2019 08 12at17.30.29 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
Screenshot2019 08 12at17.32.01 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
Screenshot2019 08 12at17.34.50 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
Screenshot2019 08 12at17.41.47 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
Screenshot2019 08 12at18.00.19 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
Screenshot2019 08 12at18.03.32 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
Screenshot2019 08 12at18.05.53 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

新しくシーンを作成

ここからは自分オリジナルのシーンを作成します。今回はシンプルに3DCGモデルを読み込んで、STYLYのカメラで自動で回転させながら映像を撮影してYouTubeにアップしました。

左上のメニューアイコンをクリック。

Screenshot2019 08 12at18.06.34 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

これは既存のシーンのリストです。さきほどのチュートリアルがあります。

Create Scene」タブをクリック。

Screenshot2019 08 12at18.07.28 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

シーン名を入力し「CREATE」をクリック。

Screenshot2019 08 12at18.08.10 1024x546 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

最初にSketchUpの3D WarehouseからダウンロードしたSKPシーンファイルをアップしてみましたが、これは表示されませんでした。

そこで、4年前にSketchfabにアップしていた3DCGモデルをダウンロードして、STYLYにアップすると表示されたので紹介します。

Sketchfabから3DCGモデルをダウンロード

以下は私のページです。

a0e53a5f726f3e7a0f039f24d28d2700 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
kirayan4852 (@kirayan4852)
View the profile and 3D models by kirayan4852 (@kirayan4852). Web designer,Blog administration
Screenshot2019 08 12at19.19.14 1024x761 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

Tiffy-04-2」をクリック。ダウンロード可能でダウンロードサイズが50MB以下のものを選びました。

Screenshot2019 08 12at19.17.27 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

Download 3D Model」をクリック。

Screenshot2019 08 12at19.16.03 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

下側の「Autoconverted(glTF)」の「DOWNLOAD」をクリック。

STYLYの「My Models & Upload」タブをクリックし、先ほどダウンロードしたファイルを指定。

ZIPのままでOKです。というか、展開すると50MBをオーバーしてアップロードできなくなります。

Screenshot2019 08 12at19.20.30 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

Upload」をクリック。

Screenshot2019 08 12at19.22.54 1024x632 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

アップロードが完了しても暫くは使えません。使えるようになるとメールが届くので、他のことをやりながら待ちます。

Screenshot2019 08 12at19.24.53 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

ここで念の為に、いったんログアウトしてChromebookをシャットダウン後再起動します。

オマジナイですが、特にメモリーの少ない機種ではこれをやっておいた方が重いアプリの場合は有効な場合が多いです。

3DCGモデルを使って撮影しYouTubeにアップ

My Models」に先ほどアップロードしたモデルが表示されます。

Screenshot2019 08 12at19.26.01 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

モデルをクリック。

Screenshot2019 08 12at19.29.10 1024x565 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

モデルのサイズが巨大なので全身が見えません。右側のモードボタンを「scale」に変更しマウスドラッグして通常サイズに縮小します。

Screenshot2019 08 12at19.33.25 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

次にモードを「rotate」に変更し横回転します。

Screenshot2019 08 12at19.36.24 1024x566 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

左上のカメラアイコンをクリックし「Auto Orbit」タブにします。

Screenshot2019 08 12at19.47.47 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

適当にパラメーターを調整して、回転速度や視野を調整します。スペースバーで撮影スタートし再度押すと撮影が終了しファイルを保存するダイアログが表示されます。

保存したファイルをダブルクリックして開いて動画を確認します。

Screenshot2019 08 12at19.50.56 1024x599 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

YouTubeにアップします。

YouTubeにアップした動画

ChromebookでVRオンラインアプリSTYLYを使って撮影したモデル

STYLYで照明やカメラワークを変えて撮影すればもっと良い作品になるかもしれません。

まとめ

Chromebookのような低スペックのPCでも、この程度のVR作品をかなりリッチな環境で制作できるようになりました。

WindowsなどのPC上でChromeなどの最新ブラウザーでも同様のことが可能だとは思いますが、WebVR技術を最大限駆使しているので、ブラウザーが安定してWebVRを使える環境である必要があります。

ChromebookやCloudReadyは自動的にChrome OSが最新の状態に保たれているので問題なく使えると思います。

ちなみに、この3DCGモデルを作った時の記事は以下です。

2c13e9bfdf12cf6c870294be5bf1afaa - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
【3DCG】DAZ Studio4のコンフォームヘアーで「風」を表現すると?!
前回はダイナミックヘアーを用いて、風になびく髪を表現してみました。 物理シミュレーションを使うのでリアルな感じにはなりますが、一方で作者の意図を自由に表現するには厄介な方法です。今回は従来のコンフォームヘアーを用いて「風」を表現してみました

この記事だけ読んでも3DCG初心者の方にはわからない事が多いですが、以下の記事あたりから始めると良いと思います。

0acb028eb90369193c639294f2a10658 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
【3DCG】無料のFaceGenDemo版をWindows上で動かしてみた?!
無料のFaceGenを使って、顔写真から3Dキャラクターを作る方法を紹介します。FaceGenはWindows専用のソフトなので、Mac上では動かせないので、今回はAmazon WorkSpacesというクラウドサービスを使ってみました。

顔写真にメークをして3Dモデル化しレンダリングしたり、ブラウザー上で3Dアニメーションを簡単に制作したり、SketchfabにアップしてVRで公開したりする3DCG系の記事リストは以下で紹介しています。少々古いですが・・・

7ac9111b772221174d0815980cee9738 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!
“3dcg daz studio facegen” の検索結果 | 音もにッシュ
生活の中に溶け込む音楽と趣味とブログ

今からだと、3DCGを始めるよりSketchfabから好みのモデルをダウンロードしてSTYLYで作品を制作する方が楽しいと思います。3DCGは今となっては少々ハードルが高いです。

私が3DCGを始めた頃はPCの性能もネット上の環境も今からは比べ物にならないくらい低かったので、静止画レンダリングで作品を作って3DCGのコミュニティー上にアップして仲間と遊んでいました。

今とは違った楽しみ方でしたが、今に合った楽しみ方を開拓する方が先決であり、それからでも3DCGは遅くはないという気がしますが・・・

STYLY Studioが起動できない場合の対処方法

画面右下の時刻表示をクリック。

Screenshot2019 08 14at10.44.31 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

右上の歯車アイコン(設定)をクリック。

Screenshot2019 08 14at10.46.12 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

下にスクロール。

Screenshot2019 08 14at10.47.08 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

詳細設定」をクリック。

Screenshot2019 08 14at10.49.39 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

下にスクロール。

Screenshot2019 08 14at10.50.51 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

サイトの設定」をクリック。

Screenshot2019 08 14at10.52.05 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

下にスクロール。

Screenshot2019 08 14at10.53.15 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

Javascript」をクリック。

Screenshot2019 08 14at10.55.19 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

許可」の「追加」ボタンをクリックしてSTYLY StudioのURLhttps://webeditor.styly.cc/built/)を追加してください。

上記の表示ではhttps://webeditor.styly.ccになっています。おそらくトップドメインが登録されます。

URLをクリック。

Screenshot2019 08 14at10.58.05 - ChromebookでVR?オンラインWebアプリのSTYLYにSketchfabの3DCGモデルをアップして撮影?!

これは私の現在の設定です。特に「Javascript」を「許可」にすれば良いと思います。

わたしの場合はオマジナイで「広告」も「許可」にし、「使用状況」の「データを削除」も実行したところ、STYLY Studioが起動できるようになりました。

参考にしてください。

ではでは、きらやん

(Visited 18 times, 1 visits today)

コメント