ちょっとすごい30のWebGL実験！

見込んでください、大きな約束を持った素晴らしい道具があなたの目に入ってきます。速くて滑らかです。それは3Dをレンダリングし、そしてそれが統合されて動くと、それが何であるかと思いますか？ HTML5？ CSS3？いいえ、それはWebGLと呼ばれ、インタラクティブな3Dグラフィックを生成するためにJavaScriptの機能を拡張するソフトウェアライブラリです。そして、はい、プラグインなしで!

このショーケースでは、私たちはあなたに通常のものを見せたくありません。私たちはあなたに披露したいです 30 WebGLの実験感動的であるだけでなく、Webの将来がどのようになるかについても垣間見ることができるWebGLの真の力を目の当たりにするためにプロの開発者によって慎重に作られたもの。クリック後に未来へジャンプ!

最新バージョンのデベロッパー版のGoogle Chromeを使用してこれらのデモを表示することを強くお勧めします。ほとんどのデモはFirefox、Google Chrome、Safariの最新版をサポートしていますが.

3黒の夢

Google Data Arts Teamの執筆者である3 Dreams of Blackは、豊富な2D図面とインタラクティブな3Dシーケンスが織り込まれたアニメーションの組み合わせによって構築された3つの夢の世界にあなたを導きます。素晴らしい経験のために不思議をチェックしてください!

アニメーションボリュームパーティクル

これは本当に芸術的です - フロートテクスチャとフレームバッファオブジェクトを使用して3Dパーティクルによって構築されたアニメーションの動物。マウスを動かすともっと驚きます!

水族館

水中環境をシミュレートする？これはWebGLにとって問題ではありません。このデモは、高品質のテクスチャ、シーンアニメーション、ピクセルシェーダアニメーション、反射、屈折、コースティクスを備えた3Dモデルを特徴としています。!

アザチオプリン

おそらく最も叙事詩的なWebGLのデモだ、と十分に語った。作者Jochen Wilhelmyへのハットチップ.

アトラクターズトリップ

3Dを体験したい場合、これはあなたにとって最高のデモです。また、MartinのHopalong公式を使用して、WebGL生成グラフィックスの莫大な美しさに瞑想してください。.

クラゲ

“手続き的モデリングはSide FX Houdiniで行われました。 Pythonのエクスポーターでjson形式にエクスポートしました。 Autodesk Mudboxを使ってテクスチャを描いた。頂点シェーダでアニメーション化.”

クリサオラ

これは通常のアニメーションデモではありませんが、動的にシミュレートされたスケルトン、部分的なサーバーサイドシミュレーション、WebSocketとの同期、カメラに面したパーティクルシステム、ボリュームライトエフェクト、およびVladimirVukićevićのmjsマトリックスライブラリを特徴とします。要するに、複雑な作品を使った素晴らしい実験.

ハローレーサー

HelloEnjoyによって独占的にもたらされた、ハイエンドのインタラクティブカーシミュレーションの紹介.

材料：車

ブラウザにBugatti Veyron、Lamborghini Gallardo、Ferrari F50、Chevrolet Camaroがあります。あなたの乗り心地を選んで景色を楽しみましょう。一体、あなたも彼らの色を選ぶことができます.

WebGL車

ニードフォースピードシリーズの将来はウェブブラウザになるでしょう。野心的すぎる？ダイナミックキューブマップ、シャドウマップ、後処理エフェクトでレンダリングされたこれらの車を訪れたことがないのであれば間違いありません.

私のロボット国

さて、フィギュアがあなたのお気に入りではない場合は、その後クールで魅力的なロボットを構築し、あなたの友人に自慢して見てみてください！あなたはそれを本当の取引にするためにあなたの金を使うことさえできます.

パックメイズ

3Dパックマンゲームはどうですか？グラフィック＆ゲームプレイは素晴らしいです、そして最も重要なのはそれは楽しいです!

赤い射撃フード

今ここにかわいいのか…または流血のものです。これはトップダウンシューティングゲームに発展したときにWebGLの機能を紹介する面白いゲームに他なりません。きっと楽しくておもしろい.

TankWorld

あなたはそれを推測する、使う武器と探検する地図を持った楽しい戦車シューティングゲームです、そしていくつかのレベルであなたは世界を探検するためにヘリコプターさえ手に入れることができます！本当に普通のゲーム以上のもので、グラフィックは快適に見えます!

パルポ

シンプルなグラフィックとアニメーションが、完成したときに人々を感動させることができる最高の例.

表面

Paul Lewisによるエレガントで感動的な実験、Surfaceをチェックしてください。デモの大きさ、弾力性、自動軌道、ワイヤーフレーム、雨滴を変更できるだけでなく、自分のイメージをドラッグ＆ドロップして効果を変えることもできます。.

フォト粒子

このデモにあなたのお気に入りの画像をドロップするだけで、それが1トンの粒子に爆発して何らかの形の磁気と相互作用するのを見るのを楽しんでください。実験は4つの技術の組み合わせです：HTML5のドラッグアンドドロップ、ファイルAPI、キャンバスとWebGL.

Rutt-Etra-Izer

Rutt-Etra-Izerは、古典的なRutt-EtraビデオシンセサイザーのWebGLエミュレーションです。このデモでは、自分のイメージを中に入れて操作することができます。このようにして、2D画像は3Dのようにさえ見えます。!

ウォブルダンス

異方性ライトシェーダとゆらぎ頂点変形を使った、WebGLがどれほど流動的であるかを示す、シンプルでありながら注目に値するデモ.

ウルトラノワール

WebGLの可能性を紹介するもう1つの素晴らしい実験。 Nouvelle Vagueは、Twitterをベースにした詩的でインタラクティブなリアルタイム3D体験を提供します。そして、あなたが目にするものは、さまざまな飛行物体を使って実行されるツイートです。つぶやきを楽しむための確かに芸術的な方法.

起伏のある猿

“今回は、JavaScriptで直接いくつの頂点位置と法線を更新できるかをテストすることを望みました。 2,000が問題ないことがわかった:)私はまた、環境マッピングのビットを追加しました。そして奇妙です。常に奇妙さを加える.”

ビデオFX

あなたがハッピーフィート2トレーラーに複数の同時後処理効果を適用することを可能にするDaniel Petterssonによって行われた印象的なアプリ。試して楽しんでください!

ボクセル液

古典的な2D水効果アルゴリズムの3D表現は、インタラクティブなWebGLがいかにあるかあなたにも示します.

WebGL本棚

Google Data Arts Teamによって開発されたこのWebGL Bookcaseで、1万冊以上の本の表紙を閲覧できます。また、件名で検索し、それをクリックしてそれぞれの3Dモデルを開き、QRコードを使って携帯電話に書籍をダウンロードすることもできます。.

WebGLグローブ

美しくエレガントで未来的なデータの視覚化により、実際にあなたが未来にいるような気分にさせるクールなGoogleチームの実験.

ワールドフライト

主要航空会社の飛行経路を視覚化する視覚的に魅力的なもう1つのデータ視覚化アプリ。!

WebGL画像フィルタ

WebGLとグラフィックエディタアプリケーション？不可能ではありません。何よりも、それは速くて滑らかです!

WebGLウォーター

“反射、屈折、コースティクス、および周囲の閉塞でレンダリングされた水のプール。プールは高さフィールドでシミュレートされ、水面と相互作用することができる球を含みます.”

反射

WebGLが直面した最大の問題は、おそらくそのセキュリティです。ウィキペディアによると、米国のコンピュータ緊急対応チーム（US-CERT）は、WebGLには、任意のコードの実行、サービス拒否、さらにはクロスドメイン攻撃につながる可能性がある複数のセキュリティ問題が含まれるという警告を出しました。これは、Webサイトの所有者にとって非常に重要なことです。.

しかし、MozillaとGoogleを含むKhronosグループは、考えられるセキュリティ上の脅威に対するセキュリティを強化するための考えられる解決策と将来の開発アプローチを提案しています。 WebGLには、才能のあるプロの開発者が示すように、多くの可能性があるので、問題を減らし、将来解決することさえできれば幸いです。!

どの実験があなたを最も驚かせているかを私たちに知らせてください、そしてもちろん、あなたがそれを手に入れたならば私たちに自慢して見せてください!

より関連した投稿：

HTML5ウェブサイト：48のFlash Killingデモの可能性
HTML5ウェブサイト：15の実験
感動的なCSS3アニメーションデモ