3Dアニメーション

three.jsで作られた3DCGのミュージックビデオやサイトがかっこいい!!!

こんにちは!

皆さんthree.jsはご存知ですか?

普段はVR/ARや3DCAD・CGなどを中心に色々とご紹介してますが3Dモデルの活用はそれだけではありません。

今回はウェブブラウザ上で多彩な3D表現ができるthree.jsを紹介していきます。

three.jsとは

three.jsとは端的に言うと「JavaScriptで3DCGが簡単に動かせるライブラリ」とのこと。

そもそもPC上で3Dを描画するためのOpenGLという技術があり、これをブラウザ上で操作することが出来るWebGLという技術が生まれました。

WebGLはJavaScriptというプログラミング言語を使って操作します。

このWebGLを使い勝手を良くしたライブラリがthree.jsです。ウェブ上で3D表現を行う場合はこのthree.jsを使うことがスタンダードになりつつあるとのこと。

開発者以外はなかなか想像しにくいですのでこの技術によって表現が可能となったウェブサイトをいくつかご紹介していきます!

Through The Dark

Through The Dark

Through The Darkは、ヒップホップアーティストのHilltop HoodsとGoogle Playミュージックのコラボレーションです。

オーストラリアの音楽をサポートするというGoogleの取り組みの一環として、アートとテクノロジーを融合させたミュージックビデオとなります。

PCでも見ることができますがスマートフォンの加速度センサーに連動しており、スマートフォンを反転させると映像の世界も反転します。

Through The DarkのMV

冒頭はメロディーと共にお父さんと息子が登場します。この曲は歌っているDaniel Smithという方の息子、Liam君が8歳で白血病と診断された時を歌った曲となります。二人の闘病生活の光と暗闇の世界を描いたミュージックビデオです。

Dennis

Dennis

DennisはAlways&Foreverというデザイナーが作成したミュージックビデオになります。

音楽に合わせて2個1組の立方体が音楽に合わせて組み合わさる映像です。この映像はリアルタイムで生成されており事前にレンダリングなどはされていません。そのためもう一度、再生すると同じ動画では無く別の形状が現れたりします。

これも動画ではなくブラウザ上で動いているからこそできる演出ですね。

WebCamMesh

WebCamMesh

最後はWebCamMeshです。

こちらはアクセスするとWebカメラが起動し取り込んだ映像をリアルタイムでエフェクトを掛けてくれるサイトになります。

それだけなのですがブラウザ上でリアルタイムで映像にエフェクトが掛かるって凄いですね。

如何でしたでしょうか。

今回はVRやARの最新ニュースではなくブラウザ上で3D表現ができる技術をご紹介しました。もしブラウザ上でVRが楽しめたりする場合はこの技術が使われているはずです!

3Dモデルの活用事例は様々ですのでこれからもたくさんご紹介していきます!

それではまた次回!


関連記事

  1. 3Dデータが無料でダウンロードできるサイトまとめ(CG/アニメー…
  2. 直感的にARやVRコンテンツを作成できる! Amazonが発表し…
  3. 【マスクマンの世界】3Dモデルアバターが、動画に合わせて動く研究…
  4. MMD互換アプリケーション「nanoem」の使い方・動画の作り方サムネイル画像 MMD互換アプリケーション「nanoem」の使い方・動画の作り方…
  5. 3DCGのアニメーションの手法について
  6. ゼルダファンは一度見てほしい。ファンが作った「ムジュラの仮面」の…
  7. 3Dデータをあえて2Dっぽく見せる!? トゥーンレンダリング技術とはサムネイル画像 3Dデータをあえて2Dっぽく見せる!? トゥーンレンダリング技術…
  8. David Lewandowski氏による狂気のCG映像をご覧く…

新着記事

  1. 【Fusion 360】覚えておくと便利なショートカットキー一覧サムネイル画像
  2. Windows10用ソフト「3D Builder」で3Dモデリング!サムネイル画像

PICK UP

  1. 3Dの井戸
  2. Blenderの使い方基礎インストール編サムネイル画像
  3. 次世代iPhoneは3D写真撮影が可能に? 3D領域が広がると噂されるリーク内容とはサムネイル画像
PAGE TOP