webgl and javascript

WebGL と javascript に関するニュースやトピックまとめ ※当ブログは1記事作成5分以内を目安に更新する仕様です

シェーダまるでスケッチのようなポストエフェクトを加えるためのチュートリアル

Implementing a "sketch" style of rendering in webGL | Floored 解説されている内容がシェーダにまで及びなかなか有用。 こういうことができるのは、WebGL を用いたプログラマブルシェーダならでは……という感じですが、いまどきシェーダに手入れできること…

炎の表現も非常に美しい WebGL デモ

3D Real-time Unigine Crypt demo | WebGL 影の表現や炎の表現が非常に美しい。 比較的動作も軽めで、参考にできる点が多いので一度見てみるとよいのでは。

blend4Web の新しいデモはコースティクスの表現も抜群に美しくて完成度高し

Azure Grotto 負荷もそれなりに大きいけど、水面や上空から射しこむ光の表現など、みどころが多いデモ。 こういうのを見るといい刺激になりますね。

WebGL のみならず様々なコンテンツがそろっている個人サイト

Lewpen.com - Games, development articles & blog ゲーム開発や 3D プログラミングに関する豊富なコンテンツがそろっている。 フラクタルのレンダリングなども得意な方のようで、Twitter アカウントにもよくフラクタルのレンダリング結果画像が流れてきたり…

自由に動き回れるアートギャラリーは誰でも参加できるオープンソース方式

GALLERY404 Github にテンプレートなども置かれているので、誰でも参加できるようになってるっぽい。 アートギャラリーのビューに切り替わると、FPS 風の操作でギャラリー内を自由に移動したりジャンプしたりできる。ミュージアムでジャンプする必要性はまっ…

Web での 3D 表現用フレームワーク x3DOM

X3DOM - home 非常に秀逸なチュートリアルや実装例が豊富に置かれていて、フレームワークを使うことに限定しなくても参考になりそうなページが多い。 Oculus Rift に対応しているサンプルまであった。今まであまり聞いたことがなかったけどこれはなかなか良…

インタラクティブに家の中を歩き回れる3Dビュー

Matterport 3D Showcase カーソルの位置に追従する青いサークルが描かれているんだけど、その形状がしっかりとシーン内の状況に合わせて変化するのが何気にすごい。 実際に家の中を歩いているかのような気持ちになれる。 これを不動産業界に持ち込むなんてこ…

見た目はシンプルだけど中身は濃い WebGL Examples

WebGL examples 久しぶりに見に行ってみたら昔よりサンプルが増えてた…… なかなか他では見られないタイプのサンプルも多いので気になる方は見てみてはいかがでしょうか。

火星の上に降り立った気分になれる WebGL Mars Panorama Viewer

WebGL Mars Panorama Viewer いくつかのシーンが用意されていて、右側にあるメニューから変更可能。 360 度あらゆる方向を見渡すことができる。 まるで砂漠みたいな風景だけど、本物の火星の地表が映し出されていると思うとなにか感慨深いものがある。

WebGL と GLSL により実装されたリアルな流体シュミレーション

GPU MC & SPH マーチングキューブ、そして SPH 法と呼ばれる手法を用いた流体力学シュミレーション。 非力なマシンだとちょっときついかもしれない……でも見た目は非常にリアリティがあってすばらしいですね。

動的にフラクタルを生成できるオンラインエディタ兼ビューア

Fractal Lab - Interactive WebGL Fractal Explorer いろいろと多岐に渡る手入れができるので、非常に楽しい。 UI も洗練されていていい感じ。

canvas と Three.js を駆使したスクロール連動型ロゴ

Monument Mimic | Dynamic WegGL Text Effects based on Monument Valley | Andrew Cobley スクロールに連動してロゴが三次元に展開する。 canvas の正しい使い方っぽい雰囲気がする。

動的に 3D のマップ生成をサポートする Mapbox の WebGL バージョン

Mapbox GL | Mapbox 動的に WebGL を用いてマップを生成するための一連のツール群及びライブラリ。 興味深いのは、試していないけど Objective-C からでも利用できるっぽい点。iOS の場合はネイティブアプリの中で OpenGL を使う感じなのかな?

Blender との連携が強力なフレームワーク Blend4Web のインタラクティブデモ

Blend4Web - Furnishing a Room. Part 1: Dynamic Loading Blend4Web は Blender との連携を考慮した 3D フレームワーク。 割と、公開されるサンプルは常に高品位な感じなんだけれども、今回のデモは自由にオブジェクトをシーン内に追加できるというモノ。 …

完成度の高い WebGL デモが見られる個人サイト

@Cabbibo 単に WebGL というよりも、サイト全体の雰囲気が完成度高く仕上がっていてすごい。 こういうのはプログラミングテクニックもさることながら、本当にセンスが光る。

Google とコラボしたと謳う NIKE のデモサイトがすごい!

Nike Risk Everything ダイナミックにシーンを遷移させ、ページを移動することなくコンテンツを楽しめる設計になっている。 3D シーンでは、キャラクターを捉えるアングルのほか、ステッカーなどを自分好みのものに変更してキャプチャ、短縮 URL で得ること…

WebGL をサポートするフレームワーク OSG.JS

OSG.JS パッと見た感じだと、リファレンスなども豊富にそろっていて example もなかなか見ごたえがあるものが多い。 独自形式のデータをエクスポートする機能などもあるみたいなので、WebGL 関連のフレームワークとして候補のひとつとして考えてもよさそう。

思わず唖然とした驚きの手書き風 WebGL デモンストレーション

Ballpoint Bot これはすごいなあ。本当にすごい。 しばらく放心状態になったわ。 手書きで線を引いたような動きから、それがそのまま 3D モデルとしてレンダリングされる。先日、WebGL ではない似たようなデモを見たけど、これはこれで十分にすごい。 一定部…

いちいち完成度が高すぎるプロモーションサイトにあったカッコいい WebGL コンテンツ

Roberts Space Industries よくわからないんだけど、たぶんゲームかなんかのサイト? なのかな。 まずサイト全体に漂う雰囲気がいちいちカッコいいのだけれど、ページ上部にあるメニュー部分から「STAR CITIZEN」→「SHIP STATS」と選択すると、宇宙船の一覧…

3D モデルを検索できる驚きの検索エンジン Yobi3D

Yobi3D - Free 3D Model Search 3D モデルを配布しているサイトはいくつか心当たりがあるけど、こんなふうに複数のサイトをまたがって検索できるとは驚き。 見た目もかっこよくて、ぜひ一度見ておきたいサイト。

WebGL + OculusRift で室内を歩き回れる素晴らしいデモンストレーション

Real-time architectural visualizations in a browser | Shapespark 普通に WebGL のデモとしてもレベルが高いと思わされるのに、さらに OculusRift 用の視点に切り替えることができる。 これはぜひ実物で見てみたい。

世界中のテロの発生件数を視覚化した今までにないグローブ

Global Terrorism, visualized on the WebGL Globe 一見すると、割とよくある WebGL 製のグローブに見える。 これは世界中のテロ発生件数をマッピングしたものだそうだ。 年度別に変化を見ることができる。

青白く溢れるブルームも WebGL 製アイアンマンが完成度高い

Goo Project - Goo Create Goo Project は WebGL に明るい人なら一度はデモを見たことがあると思う。 このアイアンマンは版権モノだけど、見た目はかなりしっかりしていて目を引く。 カッコいい!

API を利用することもできる WebGL Earth

WebGL Earth API examples: Leaflet compatible API 割と汎用的に使えるようになっているみたいで、実装も簡単そう。 地図、あるいは位置情報に関連するプロジェクトでは利用する価値があるかも。 サイトのつくりがおしゃれですね。

オンラインでシェーダもモデルもリアルタイム編集可能なゲームエンジン KickJS のサイト

KickJS | WebGL game engine オンラインエディタまで一式あるのは素晴らしいなと思った。 サイトの雰囲気にも、あんまり華やかさはないけど example も揃っているし、技術を見稽古するにはいいかもしれない。

WebGL のデモもある WebGL 関連ツールのサイト

www.webgl-publisher.com これは、たぶんモデルデータのコンバータか何かなのかな。WebGL-Publisher というのは商品の名前っぽいですね。 独自形式を利用するみたいだけど、中身はどんな感じになってるのだろうか。サイトにはデモもあるので興味のある方はど…

行列やクォータニオンについて詳しく解説されたテキスト

Matrix and Quaternion FAQ 英語のテキストで、しかも画像などがほとんどなく全体が文字ベースなので華やかさはないけれど、かなり役に立つ基本が網羅されている。 古いテキストだけど大変参考になると思う。

マリオの歴史を振り返りつつ堪能できる素晴らしいサイト

IGN presents Museum of Mario 前半はそうでもないけど、後半は唐突に WebGL が出てくる。 しかしどのページを見てもクオリティが半端ではない。ぜひ一度見てみたほうがいい。 音が出るのでその点だけ注意。

インタラクティブな二次元ライトシミュレータ

pls ライトを任意に配置したり、色や強さを変更したりできる。 スクリーン内に追加もできるボックスは物理演算で処理されている。

BETA 導入された WebGL 版を見ることもできる lytro のサイト

Lytro Living Pictures ピント合わせが後からでも出来るというのが売りの Lytroカメラ。 そのギャラリーでは、マウスを使ってウェブ上でインタラクティブにフォーカスする焦点を変えられる。これはかなり楽しい。 ベータ仕様で WebGL 版が導入されているけど…