読者です 読者をやめる 読者になる 読者になる

webgl and javascript

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

新サイト設立と移行のお知らせ

このブログは、更新時間 5 分以内で毎日更新というルールで、昨年の末から運営してきました。 WebGL というテクノロジーを広く知ってもらいたいという思いから始めたものでしたが、よくもまあネタが尽きることもなくこれまで毎日更新できたなあと思います。 …

アクセサリーをオンラインで WebGL プレビューできるサイト

uformit なかなか高品位な WebGL プレビューが実行できる。 こういうビジネスに直結するような取り組みに利用されているというのがいいですね。

WebGL と画像の顔認証技術を合わせた未来の顔予測デモ

Orange #futureself 上の画像はイントロ部分。 実際のデモではこんな未来の風景がレンダリングされるわけじゃありません。 画像やウェブカメラからの映像を使って、顔認証、さらにそれをもとに20年後のその人の顔を予想。 最終的には、その20年後の顔をテク…

ついに WordPress のプラグインにも WebGL の余波が到来

WordPress - Fly! 3D - Attractive Plugin for WordPress | CodeCanyon 画面全体を覆う文字やハートマークのスプライト。 このプラグインの需要があるのかどうかについては…… なにも考えないことにしておきますw

熱帯魚を助けるというよくわからないけど美しい WebGL ゲーム

Saving Nemo 水面の表現がきれいでなんとなく癒し系なんだけど、なぜか熱帯魚たちが空気の泡に包まれて昇天していってしまうという謎の状況。 マウスクリックでどんどん助けましょう。 やっぱり水の表現っていいなあ。

脳内の神経回路、ニューロンネットワークを模した WebGL デモンストレーション

Neural-Network 見た目が非常になんというか、幻想的。 学術的な裏付けのあるデモなのかどうかはわからないけど、発想がいいですね。

オンラインで体験できる WebGL 製ゲームがベータ公開中

Urban Galaxy Online WebGL を利用したものとしては比較的大規模なもの。 細部にいたるまでよく作りこまれていて、普通に遊べる。 しかし、3D 表現という意味で言うと、やはり WebGL は最先端の 3D 表現と比較して若干遅れていることを痛感させられる。 たぶ…

その名のとおりの美しい秋の情景を表現した美しいデモ

Autumn こういう圧倒的な物量で魅せる系のデモは WebGL ならではといった感じ。 色合いが非常に美しいですね。

パーティクルの密度も調節可能な流体シミュレータ

WebGL Fluid Experiment 一見すごく重いのかなと思いきや、そこまでものすごく重いというほどでもない。 さすがにパーティクルの量を増やすとだんだん厳しくなってくるものの、見た目は非常に美しい。

ios8 に WebGL がやってきた! それをうまく表現した実にすばらしいデモ

Browser Bots これは ios8 関連で作られた WebGL デモのなかで群を抜いてセンスが良い。 見た目も非常に美しいし、動きのあるコンテンツにこれほどの威力があるのかと痛感。

PlayCanvas を利用した新型 iPhone6 のデザインデモ

PlayCanvas いよいよ iOS にも WebGL がやってくるということで、なにかと話題の Apple 製品。 PlayCanvas という WebGL を扱えるフレームワークでレンダリングされた iPhone 6 Plus のデモンストレーションですね。 画像のように中身を分解したビューになる…

WebGL を利用したシンプルなクリックゲーム Clicky

Clicky - Goo Create なんとなくキャプチャ画像を見ただけで想像つくと思いますが…… ルールは非常にシンプル。小さい数字から順番にクリックしていくだけです。シーン全体がゆらゆらと揺れるので意外な難しさ。初挑戦で 6 秒も掛かってしまったw

地球の温暖化を視覚的に表した珍しいグローブデモ

philogb.github.io/page/temperature-anomalies/ 大気の温度を視覚的に表した WebGL デモンストレーション。 こうして見てみると、急激に大気温度が上昇しているのだなあというのがわかりますね。 浮動小数点テクスチャを使っているみたい。

視覚に訴えることをこれほど追求したスライドがあっただろうか!

OneJS 欧州で開催されているイベントのスライド? なのかな。 とにかくその視覚効果がすごいので一見の価値があると思います。

美しいパーティクルと疑似プロジェクションマッピングで魅せるプロモーションサイト

Under Armour Women - I Will What I Want - Gisele Bündchen Under Armour はアメリカのスポーツインナーウェアを扱うメーカー。 キャプチャ画像では画面上を飛び交うパーティクルが見えていると思うけど、これらのひとつひとつがソーシャルコメントのメッ…

モデリングもオンラインで完結する時代? 久しぶりに見たら Clara.io がパワーアップしてた

Clara.io: Online 3D Modeling, 3D Rendering, Free 3D Models 前に見たときは、本当にまだまだベータリリースという感じだったんだけど、だいぶ規模が大きくなってきたようなのであらためて紹介。 投稿されたモデルを見ると、結構気合が入ってるものもあり…

#jsstg 企画でもご紹介したライズアートさんのサイトが大幅リニューアル

ウェブサイトをリニューアルオープンしました | 株式会社ライズアート 先日の #jsstg という企画のスライドでもご紹介した、ライズアートさんのサイトがリニューアルしました。 トゥーンシェーディングのカーモデルが、相変わらずのカッコいいカメラワークで…

マクドナルドの 40th アニバーサリーサイトのクオリティがすごい!

McDonald's 40th Anniversary やっぱり風土の違いなのか、同じマクドナルドでもアメリカではこういうサイトが作られるのだなあ。 もっとがんばって WebGL の認知度を上げていかなければと感じる今日この頃。

最近こういうの流行ってるのか? パーティクルで人の動きを表現したデモンストレーション

Disintegration 先日の流体パーティクルと見た目的には似ている。 キャプチャではわかりにくいと思うけど、今回のやつは人が走っているような感じのモーションがパーティクルで表現され、さらに後方に流れていくようになっている。 オンボード GPU だと、LOW…

道を繋いで歩行者を誘導する 3D パズルゲーム

Fragmented Memories 分断されてしまっている道を破たんなく繋いでいくパズルゲーム。 シンプルなので最初どう遊んでいいやらよくわからなかったw

動的にマンデルブロ集合とジュリア集合が切り替わるデモンストレーション

Julia Morpher using WebGL クリックした座標の位置により、ジュリア集合へと変遷する際のパラメータが変化するみたいで、アニメーションする様子が非常に美しい。 ちょっと地味だけど、こういうのも嫌いじゃないです。

AUTODESK の本気を見た……autodesk360 はかなりガチだった

www.autodesk360.com クラウドでデータを共有でき、マルチデバイス対応。 もちろん、WebGL によるプレビュー機能も備える総合ワークスペース。 肝心の WebGL プレビューはサンプルを見てもそれなりに重い。これは単純に描画しているモデルがそこそこ複雑+数…

まるで流体シミュレーションのような不思議なノイズのデモンストレーション

GPU Curl Noise Curl Noise と呼ばれる、まるで流体力学をシミュレートしたかのような動きをするノイズのデモンストレーション。 これがノイズだというのだから驚き。Curl Noise というのは初めて知ったのですが、これはかなり面白そう。

シェーダで描かれる粘度の高い流体デモ MELTER!

MELTER! フラグメントシェーダでがっつり書かれている。 その割にはけっこう軽めな印象。

ノイズを利用したエフェクトなどみどころの多い日本語記事

dev diary on scriptogr.am こういったコンテンツが日本語で公開されていること自体が珍しいと思いますが…… クオリティも高く、見ているだけで本当に楽しい。 ノイズを利用してこんな演出もできるのだということを感じていただけるかと。素晴らしいですね。

被写界深度によるボケも上手に表現されている流体パーティクル

Volumetric Particle Flow これすごいなあ。 パーティクルの量を増やすと重いけど本当にすごい。マウスのドラッグで視点を変更するとパーティクルがぼやけて被写界深度のように遠近感が出るようになってる。 実にすばらしい。

WebGL を利用したバネ運動のデモンストレーション

GPU springs いろいろパラメータをいじってみると面白いですね。 こっち系はそのうちちゃんと自分でやってみたいなあ。

動きもスムーズで気軽に遊べる WebGL 製のブロック崩しゲーム

www.holoduke.nl/3dbricks/ ゲーム自体は普通のブロック崩しなんですが、見た目もなかなかキレイでちょっとした時間に楽しめます。 ブロックの色によって特殊な効果が得られるものなどもあり、おもしろいですね。

2015 年に正式版がリリース予定の大規模 WebGL 製オンラインゲーム Oort Online

Oort Online by Wonderstruck 今も資金調達の最中。 まだ正式版が公開されているわけではないので、日本ではまだ知名度は全然高くないものの、かなり気合の入ったプロジェクトであることがうかがえる。 トレーラーを見ているだけでも楽しめるのでは。

現実で描かれたアートが形を変えて WebGL デモに Sunlight Graffiti

Little Sun | Sunlight Graffiti 一見するとただの globe みたいな見た目をしているけど、その実態はなんとアートのイベントで人が描いた光のラインを寄せ集めて描かれたものらしい。 Vimeo にある動画を見ると、その光のラインがどのようにして描かれていっ…

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

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