シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > ブラウザだけでOK!たった一人で作れる「3DCGアニメーション」の作り方が話題に!
注目記事ピックアップ
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2014/04/18 21:30

ブラウザだけでOK!たった一人で作れる「3DCGアニメーション」の作り方が話題に!


どうも、まさとらん(@0310lan)です!

最近の3Dで描かれたCGモデルは、非常に滑らかな動きを見せてくれます。

ゲームや映画でもよく登場するわけですが、このようなCGアニメーションをたった一人で、しかもブラウザ上ですべて完結できるとしたらどうでしょうか?

そんな、夢のような技術を可能にしているのが「Mixamo」です!


しかもコレ…、ほとんど無料で使えます!

 

3DCGモデルを用意する!
まずは、アニメーションをさせたい「CGモデル」が必要となります。

自分で用意してアップロードすることもできるし、Mixamoが無償で提供している「Fuse」という3Dモデル作成ソフトを使っても良いでしょう。

しかし、もっと簡単な方法があります!

 

ユーザー登録後に、トップページの「Create」→「Character Collection」を選択します。


 

すると、様々なキャラクターが一覧表示されます。


 

気に入ったキャラクターが見つかれば、あとは「DOWNLOAD」ボタンをクリックするだけで、とてもリアルな3Dモデルをゲットすることが出来ます。


画面に表示されたキャラクターは、マウスで拡大・縮小や回転などをしながらじっくり鑑賞できるようになっています。

 

ファイルに書き出す際には、「.bvh」「.fbx」やUnityに最適化された形式などを選択できます。



 
3Dモデルに「命」を吹き込む方法!
それでは、3Dモデルをまるで生きているようにアニメーションさせてみましょう!

今度は、トップページの「Rig」から「UPLOAD A CHARACTER」を選びます。


 

「UPLOAD FILE」ボタンをクリックして、先ほど入手した3Dモデルを指定すればOKです。


 

たったこれだけで、3Dキャラクターの中に、人間のような骨格が自動的に埋め込まれます。


この作業を、普通に行うと非常に時間の掛かる作業なのですが、Mixamoを使うとあっという間に完了してしまいます。

 

次に、「Animate」から「APPLY ANIMATIONS」を選択します。


 

すると、豊富なアニメーションパターンを選択できる画面が表示されます。


(パターンは、無料・有料に分かれています)

 

アニメーションの種類はとても多いので、自分がイメージしているアクションを探していきます。

そして、気に入ったアクションがあれば、それをクリックするだけで先ほどアップロードしたキャラクターに自動適用されます。



まるで「命」が吹き込まれたように、滑らかな動きを見せてくれます。

あとは、「DOWNLOAD」ボタンをクリックするだけで、アニメーションパターンを含めたファイルが一気にダウンロードできます。

 

ゲームエンジンとして人気の「Unity」と、今回ご紹介したMixamoを駆使すれば、以下の様なショートクリップも不可能ではありませんよ。



もし、欲しいアニメーションが見つからなくても、Mixamoではアニメーションの「リクエスト」を募集しているので、こちらを有効に活用するのも1つの方法でしょう。

 
おまけ
3Dモデルを用意する方法として、もしiPadをお持ちの方であればオススメのアプリがあります。

123D Creature」です!


まるで粘土細工をしているように、指でタッチしながらいろんなキャラクターを作れてしまいます。

このアプリはファイルに書き出しも可能なので、「Mixamo」を利用してアニメーションさせれば、きっと楽しい世界が広がりますよ!

 
まとめ
少し前までは、3DのCGモデルを作るなんて絶対ムリ!…と、思っていました。

ところが、今回ご紹介したMixamoを活用すれば、ブラウザ上で簡単にキャラクターを作って、様々なアニメーションをさせることまで可能になります。

みなさんも、ぜひ活用して自分だけのゲームやショートムービーなどを作ってみてください!

 

 

written by まさとらん

 

 

 


 

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る