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

アプギガトップ > インターネット > Web上に実装された「3DCGプログラミング」事例10選が、もはや神の領域!
注目記事ピックアップ
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
インターネット
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2014/06/03 23:00

Web上に実装された「3DCGプログラミング」事例10選が、もはや神の領域!


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

Web上で表現できる技術は、毎年のように向上しています。

なかでも、ネット回線の高速化、PCの性能向上などによって、ブラウザから誰でも高度な「3DCG」を活用したサービスを利用できるようになってきました。

今回は、数あるサービスのなかでも、特に「3DCG」をメインコンテンツにしているWebサービスをご紹介しようと思います!

 

無数の映像を「球体状」に表示させる技術!
goo-video-sphere


この球体を形成している「四角のマス」1つずつに、しっかりと映像が映し出されているのに驚きます。

HTML5/WebGL技術をベースにして、非常にパワフルなグラフィックスエンジン「Goo Engine」を活用してつくられたサービスとなっています。

 

球体の内部に入ると、そこはもう…映像の異次元世界となっています…。


まるで、SF映画にでも出てくるようなイメージですね。

マウスで球体を回転させたり、スクロールしてズームなどができるうえ、どれか好きな映像をクリックすればしっかりと動画再生も始まります。

<参考>

【 goo-video-sphere

 
高度な地形モデリングシミュレーター!
project-windstorm


こちらは、JavaScript/WebGLを駆使して作られた地形シミュレーター。

美しいグラフィックスもスゴイですが、非常に細かい設定ができる項目を用意しているのにも驚きです。

 

各ウィンドウから、空のパターン変更やマップ/地形の変更、マウスによる操作、フライトシミュレーターなども搭載しています。


現在の処理結果ログも出力されているので、学習者にも最適でしょう。

<参考>

【 project-windstorm

 
平面の映像を「3D表示」させるサービス!
WebGL_Video3D


サイトを訪れると、普通に映像が流れているだけなのかと思いきや…、マウスを動かすとその方向へ平面の映像が立体的に動きだします。

 

このサービスは、画像で見るよりも実際の映像を体験した方が数倍おもしろいでしょう…。



平面的な映像では分かりにくいような箇所も、物体のある箇所が立体的に浮き上がるので分かりやすくて面白いですよ。

<参考>

【 WebGL_Video3D

 
映像に合わせた3D色調解析サービス!
3d-color-histogram-analysis


現在流れている映像に使用されている「色」の情報を、3Dで立体的に視覚化できるサービスです。

どの部分の色が多く使われているかや、色調の相対的な量などを把握するのに便利で、3Dのグラフィックスは3種類から選択することもできます。

 

また、画面が真っ黒になれば、もちろん3Dの部分も黒色の量が圧倒的に多くなります。


動く映像の中にある色情報というのは、なかなか把握しきれない部分もあるので面白い発想かもしれませんね。

<参考>

【 3d-color-histogram-analysis

 
流れている映像を「爆破」できるサービス!
destructive-video


いかにも子供が喜びそうな仕掛けですが、大人がやっても意外にハマります…。

固定概念があるせいか、映像は「四角い表示のまま」と思い込んでいるため、マウスでクリックするとその箇所が爆発するアクションは新鮮で面白いです。

 

爆発後は、すぐにまた元通りに戻るので、何度もクリックして爆破させたくなります。


これは、何らかのゲームにも使えそうな技術ですね。

<参考>

【 destructive-video

 
「手のひら地球」をストリートビューから作れる!
eco-lapse


「手のひら地球」と、勝手に命名しましたが、小さな球体のカタチをした不思議な地球を作り出すことができます。

 

Googleマップから、任意の区間を指定すれば、自動的にその区間内を繋ぎ合わせて球体に変換してくれます。


そして、くるくると回転したアニメーションを見せてくれる愉快なサービスとなっています。

ぜひ!お試しあれ。

<参考>

【 eco-lapse

 
映像を、バラバラに切り裂いたパズル!
video puzzle


イラスト風のパズルはよくありますが、こちらは映像をバラバラにしたパズルゲーム!

画像では分かりにくいですが、1コマずつがちゃんと動く映像になっています。その動いている映像を頼りに、コマを並び替えて1本の動画に完成させればクリアというもの。

 

レベルは3種類あって、一番難しいレベルだとクリアできる気がしません…。



パズルに強い方は、挑戦してみてください。

<参考>

【 video puzzle

 
異次元レベルの高クオリティな「眼球」!
eye-texture-raytracer


恐ろしいクオリティに、かなりビビリますよ…コレ。

瞳孔の開き方も自然でリアルだし、マウスの動きに合わせて眼球が動くのも凝っています。目の種類やカラー、モデリングの状態など、細かく設定で変えられるのも俊敏。

 

ちなみに、ターミネーターのようなサイボーグバージョンもあります。


こちらは、より一層怖いですが…。

<参考>

【 eye-texture-raytracer

 
Web上に「宇宙」を再現したサイト!
100000-stars


広大で謎の多い宇宙を、可能な限りWeb上に詰め込んだのがコチラのサービス!

マウスのスクロールによって、人間が一生かかっても到達できないような遠くの宇宙から、我々のよく知る太陽の近くまでズームインできるようになっています。

また、画面左上の再生ボタンをクリックすることで、自動的にアニメーションを再生することも可能。

<参考>

【 100000-stars

 

 
マウスの動きに合わせて、映像が変化するサービス!
3-dreams-of-black



冒頭の映像が少し始まったあと、マウスの動く方向によって映像がどんどん変化するインタラクティブなサービスになっています。

通常の映像は、流れている動画をただ見るだけですが、こちらはマウスによって見たい方向を自分で操作したり、アクションをマウスで指定したりなどが可能になっています。

初めて体験する人は、かなり新鮮ですよ!

<参考>

【 3-dreams-of-black

 
おまけ
最後に、過去にアプギガでご紹介した、その他のWeb技術を詰め込んだサービスをご紹介しておきます。

【 これから「革命」を起こしそうなWebサービス7選を一挙公開!


今回は映像系に絞っていますが、こちらはジャンルを問わず、さまざまなサービスを紹介しているので、ご興味のある方はぜひ!

 
まとめ
今回ご紹介したサイトやサービスを見ていると、今後のWeb技術はどこまで向上するのかワクワクしてきます。

3DCGなどのサービスは、やはり高速なネット回線と相応のパフォーマンスを持ったPCが望ましいですが、ほんの数年前まで実現できなかったようなことが表現できるようになっているのには驚きです。

みなさんは、今回のサービスを通して…どのように感じられたでしょうか。

 

written by まさとらん

 

まさとらん

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

twitter:0310lan

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

ページトップへ戻る