webgl and javascript

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

2014-06-01から1ヶ月間の記事一覧

非常に美しいサウンドビジュアライザ

Confessions 今まで見た中では、個人的にいちばん美しいと感じたサウンドビジュアライザ。 見ているだけで癒される不思議。

地図データから動的に 3D マップを生成するデモンストレーション

Mapzen Vector map 動的に地図を 3D で生成する。 この手のデモは以前にもいくつか見たことがあるけど、読み込みは比較的早い印象。 リアルタイムにデータを取得しているみたい。

モダンな Doom ? WebGL で動く本格 FPS

gorescript 以前にも紹介したことがある……ような気がするんだけども、少なくともかなりパワーアップしている印象だったのでご紹介。 動画を見ていると上手に操作すればこんなふうになるんだなというのもわかる。個人的にはこの手のゲームは苦手ですw

腹が減ったら蝶を食え! なんともシュールな WebGL ゲーム

Evolving butterflies ゲーム開始早々、あなたはおなかのすいた鳥です! と言われ蝶を食うことを強制されるというなんとも言えない素敵なルール。 ゲームとしてはボリュームはないけれど、飛び回る蝶は、それぞれ羽の模様が違っていたりする。

点群(point cloud)を WebGL でレンダリングするプロジェクトのデモ

Potree | WebGL pointcloud renderer あまり詳しくはないんだけど、いわゆる点群と呼ばれるデータ形式の三次元データを WebGL でレンダリングするプロジェクト。 レーザーでスキャンして点としてデータをサンプリングするらしい。

Web のアニメーションに関するテクニックを網羅したスライド

Animate your HTML5 CSS をはじめ、もちろん WebGL も登場します。 スライドのなかには実際に紹介されている技術を使ったデモが埋め込まれており、見た目的にも、また動作確認用にも非常に有用。 すばらしいなあ。

rethink のワールドカップサイトはなかなかの完成度

Brazil | ESPN FC World Cup Essentials これはなかなか見ごたえもある。 なにより、センスがいい!

いずれはお世話になることもありそうな Device Orientation Event API の話

Dev.Opera — Practical application and usage of the W3C Device Orientation API ジャイロセンサー、加速度センサーなど、モバイルで主に利用される Device Orientation API について解説されたテキスト。 W3C のページにもそれなりに解説が載っているがこ…

まさかの Khronos 公式! WebGL ウィジェットコンテスト!!

Show off your WebGL Widget Contest ソースコードのサイズや実行される canvas の大きさなどに制限があるのは、実際に Khronos のウェブサイトに置かれるウィジェットになるからのようです。 応募してみようかな……

実際にプロの現場で使われているノウハウが非常に参考になります

HTML5ゲームのできるまで~起動の高速化~ — Mobage Developers Blog WebGL はブラウザ上で実行されるので、ここで紹介されている内容が非常に参考になる。 こういう技術についても、もっと自分自身勉強する必要があるなあと思った。

WebGL の間違いやすいバッドノウハウをあえて列挙した記事

WebGL Anti Patterns « games.greggman.com それほどボリュームのある記事ではないけれど、たしかにそうだなあと思わされる部分もいくつかあったりして参考になった。

ポップアップカードを WebGL でインタラクティブにデザインできるページ

Chrome Experiments - "3D Pop Up Card" by Caa1211 非常に秀逸なのは、動的にデザインを行えるような設計になっているところ。 データのロードやセーブに対応しており、自分だけのオリジナルなポップアップカードを作成できる。

Three.js + カスタム頂点シェーダで実装された WebGL デモ

kyberia sound system - webgl banner on Vimeo 上記リンク先は動画のページだけど、ページ内に実際に動作するデモへのリンクがある。 ソースを見ると、カスタム頂点シェーダを利用して動的にノイズを生成しつつ、モデル座標をいじっているみたい。 Three.js…

2D でのシャドウィングテクニックの解説テキスト

2D Pixel Perfect Shadows · mattdesl/lwjgl-basics Wiki · GitHub ポストエフェクトのお勉強にもなって、すばらしい。 英語がわからなくても、コードが掲載されているので活用のしがいがありますね。

WebGL で実装されたシューティングゲーム toho like shoothing

Toho like shooting with JavaScript 個人的にはリプレイの機能がついているのがすばらしいなと思います。

tokyo demo fest 2014 のデモを移植した驚きの WebGL デモ

tokyo demo fest 2014 webgl @kioku_systemk さんが作った Tokyo Demo Fest 2014 Invitation の WebGL 版。 もういろいろすごすぎて何も言えない感じになりますね。こういうものが作れるようになりたい……ほんとに。 実行にはそれなりにハイパワーを求められ…

ray marching に簡単に触れただけのスライドだけど

slider 001 はい、手前味噌で大変恐縮ですが、一応シェアの意味でここにもリンクを張っておきます。 wgld.org にもテキストを今後増やしていく予定ですが、導入として、ray marching がどんなものなのかを知るにはちょうどいいかなと思います。

完成度の高い WebGL 製デモを紹介

Flashback 2014 - Cydonia 非常に見ごたえのあるデモ。 たぶん、Three.js を使ってるのかな? にしても素晴らしいできばえ。

様々なデモを観賞できる wab.com

www.wab.com 一昔前のデモを、ブラウザ上で実行できるように canvas に移植している。 音が流れるのでちょっとだけ注意。

OpenGL の深~い話が満載の個人ブログ

shikihuiku | - 色不異空 – Real-time rendering topics in Japanese. 珍しく日本語のページを紹介してみるシリーズ。 @shikifuiku さんのブログ。 OpenGL 系全般にかかわる一つ踏み込んだ深い話が聞ける。すごい。

小さな兵士たちが戦いを繰り広げる WebGL 製の WarGame

WarGame いわゆる三すくみで互いに力関係を持っている兵士たちが、球体上で戦うデモンストレーション。 クリックで兵士を増やすことができ、倒れた兵士の姿がなんとも哀愁を誘う一品。

three.js を深く探究した素晴らしいテキストがたくさんある個人ブログ

Everyday Pieces :: もしかしたら知っている人も多いのかな。 three.js を使った実験的試みは、既にひとつのデモとしてもかなり完成度の高いものになっていて、初心者にはかなり参考になることが多いと思われます。 日本語の解説記事はけして多くないので、…

iOS 8 の WebGL 解禁で作られたデモ……なのかもしれない

Safari WebGL とりたてて面白いことも何もないのですけど、見た目はすごくキレイでやっぱり WebGL いいなあと再認識したのでご紹介。

サッカーワールドカップの歴史を紐解く秀逸な WebGL デモ

World Cup Town | globoesporte.com 非常によくできていて、見ているだけでも楽しい。 サッカーはあまり見ないのだけれど、世界のサッカー事情に詳しい方はより楽しめるのでは。

実際に操作することもできる WebGL 製カーデモ

Car Github にソース も公開されているカーデモ。 jsdo.it で似たようなのを見たような気がするけど……どちらが元なんだろ。sea3d を使っているのかな。

本格的な FPS ゲームが遊べる gorescript

gorescript あいにくと、FPS のたぐいは非常に苦手でしてまったく前に進めませんw でもよくできているように……見えます。

ios 8.0 での各種 HTML5 対応状況一覧が見れる HTML5 test

HTML5test - How well does your browser support HTML5? 一応、現時点でこれを見る限りは WebGL も有効になっているようですね。

有益なプログラミングテクニックやアルゴリズムを紹介する海外のブログ

//game dev log of martins upitis 直接 WebGL を扱っているわけではないものの、有益な GLSL コードなどの情報が非常に多いのでご紹介。 GLSL のコードさえあればある程度移植が簡単なのは WebGL の嬉しい特徴。

めずらしく日本語の記事を紹介 海外サイトのブラウザゲームがたくさん

海外サイトPC Gamerが選ぶフリーゲームのベスト100 Flash ゲームなんかも混じっているけど、意外と知らないのがたくさんあったのでご紹介しておきます。 WebGL ゲームももっと増えるといいですね。