技術 - WebGLの記事一覧
Three.js Editor Extension for Google Chrome – Three.jsコンテンツを編集できるChrome機能拡張
WebGLはWebという冠はついているものの、HTMLやJavaScriptとは全く異なる言語となっています。そのため、素のWebGLを扱うのはとても面倒であり、ラッピングしたライブラリを使うことが多いようです。その中で最も有名なのはThree.jsでしょう。Three.jsを使えばWebGLコンテンツを扱いやすくなる...
Blend4Web – Blenderで作った3DデータをWeb上で
WebGLの登場もあって、今後3DをはじめとしてリアルなグラフィックスがWeb上でも実現することでしょう。WebGLとOpenGLは似ているとは言え、WebGL向けにはまだ専用のツールなどは揃っていません。作るのに大きなコストがかかるのではなかなか広まらないでしょう。そこで既存の仕組みで作られたデータを取り込めるのがベ...
Wizard Warz - WebGLを使ったWeb向けマルチプレイヤーゲーム
今後、Webブラウザを使ったゲームが増えていくのは間違いありません。かといってかつてのソシャゲのようなものではなく、Flashも使いません。使うのはHTML5であり、WebGLやWebSocketになるでしょう。ゲームは一人でやるのも良いですが、やはりみんなでわいわい遊ぶのが楽しいものです。そこで今回はWizard W...
Shader Editor – Google ChromeのDevToolsでWebGLコンテンツの編集
WebGL（OpenGL）で大事な技術がシェーダーでしょう。3Dが立体的に認識されるためには陰影があったり、頂点によって影の濃さが異なるためではないかと思います。しかしOpenGLのように整備された環境がない中、スムーズに作るのは難しいかも知れません。そこで使ってみたいのがShader Editor
Parrot Hunt - Webブラウザで遊べる。WebGLを使ったハンティングゲーム
Webベースのゲームがどんどん作られていますが、高度なゲームになるとグラフィックスにこだわりが必要になるでしょう。そこで使われるのがWebGLになります。今回はその参考になりそうなゲーム、ParrotHunt
HTML GL – HTML構造をそのままWebGL化
Web上でのアニメーション、エフェクトについては多くの問題を抱えています。特に大きいのは、その実行速度のようです。CSS3を使うと改善しますが、それでも複雑なアニメーションが行える訳ではありません。そこで生み出されたのがHTML GL
Tangram - 地図 + Open Street Mapでできる面白さ
HTML5になってWebの表現力は格段にあがっています。その表現力を担うのがCanvasやWebGLになります。特にWebGLはiOS8からようやく使えるようになったとあって、今後注目を集めるのではないでしょうか。その一例として今回はTangramを紹介します。Open Street MapとWebGLを組み合わせた素...
frame.js - FlashのようにWebGLアニメーションを編集
まだ開発途中ながらこれは期待大！WebGLはHTML5上で3Dグラフィックスを扱うために作られた技術です。その可能性は大いに感じられるところですが、扱うのが難しいためになかなか手出ししづらいものがあります。ごりごりコーディングするのは面倒で、やはり専用のエディタが欲しいと思うでしょう。そのためのエディタになるのがfra...
Interstellar – 宇宙空間を漂ってみよう
VR（仮想現実）デバイスが発達するのにつれて仮想空間でどこでも旅ができるようになっています。知らない海外の風景を見ることもできますし、海の中を漂うこともできます。映像さえあればどこだっていけるのです。それは何も地球だけではありません。宇宙だっていけるようになるでしょう。そんな未来を感じさせてくれるのがInterstel...
WebGL Fluid – WebGLで水の動きを再現
コンピュータが苦手なのは自然の造形、動きをコンピュータの中で再現することです。3D CGの映画は自然のように描くのを目標に年々進化しています。水、雲、雪、雷、木の育ち方など自然はとても複雑にできています。その一つ、水の動きをWebGLでエミュレートするのがWebGL Fluidです。## WebGL Fluidの使い方...
Flood - WebGLを使った3Dプログラミング環境
3Dモデリングって聞くと何となく敷居が高く感じられますよね。専用のソフトウェアを使って、サーバサイド/アプリのプログラミングとは全く異なるプロセスを辿るような気がします。しかし3Dプリンタも出てきている今、無視する訳にはいきません。そこで使ってみたいのがFlood、Webブラウザベースのビジュアルプログラミング環境です...
jThree - 体験必須！jQueryでWebGLコンテンツを作成
先日行われたHTML5 Japan Cupで個人的にひと際目を引いたのがjThreeです。WebGLコンテンツを作るというのはとても大変で、なかなか量が増えていかないのですが、jThreeを使えば一気に増えていく可能性があります。## jThreeの使い方!こちらはデモです。YouTubeのように見えますがWebGLで...
PlayCanvas - 今後のトレンド！HTML5/WebGLなゲームエンジン
iOS 8からSafariがWebGLに対応することが発表されました。これによりスマートフォンにおいてもWebGLを使ったコンテンツが広がりを見せるでしょう。特に利用されると思われるのがゲーム分野かと思います。そこで注目したいのがWebGLによるゲームエンジンを提供するPlayCanvasです。オープンソースなゲームエ...
Famo.us – WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレン...
2014/06/10
2014/06/10使えるWebサービス・オープンソース（29）「WebGL」
今回のテーマはWebGLです。iOS 8においてようやくSafariがWebGLをサポートするようになります。これでスマートフォン、タブレットにおいてもWebGL利用が広がっていくと思われます。そこでWebGL利用を促進させてくれるようなWebサービス、オープンソース・ソフトウェアを紹介します！# Webサービス## ...
Babylon.js - WebGLを高度に操る3Dグラフィックスフレームワーク
WebGLを使えば高度なグラフィックスが描けるというのは分かっていても、実際どれ程度のことができるのかはサンプルがあまり多くありません。それだけグラフィックスの作り込みが大変ということでしょう。そんな中登場したのがBabylon.js、WebGLを扱うためのJavaScriptフレームワークです。Babylon.jsを...
他にも使えそう。GitHubユーザを可視化「Github Globe」
Github GlobeはHTML5/WebGL製のオープンソース・ソフトウェア（GPL v3）です。世界中にいるGitHubユーザをビジュアル化するソフトウェアがWebGL Globeです。みんながどこで生活し、コミットしているかが分かるのは面白いですよ。アクセスするとWebGLを使って地球を描き出します。マウスを使...
胸熱。Webブラウザ上のMikuMikuDance「MMD.js」
MMD.jsはPMD/VMDを読み込んでWebGLを使って描画するソフトウェアです。先日mmd.jsを紹介しましたが、さらに完成度の高いMMDをWebGLを使ってレンダリングするのがMMD.jsです。踊っている1シーン。かなりスムーズです。見ている向きを変更できます。上からができる、ということは…。後ろ向きだってもちろ...
膨大なデータを瞬時に描画。WebGLをつかったヒートマップ「WebGL Heatmap」
WebGL HeatmapはWebGLを使って高速に動作するヒートマップライブラリです。ヒートマップを描こうと思うとまず必要なのがポイントの膨大なデータで、それらを集計してサマライズして中央を濃く、周辺にいくに従って薄くなるように計算して…と結構複雑な感じがします。しかしWebGL Heatmapを使うと高速に、かつ滑...
- 2012/12/04
WebGLを体感できるサービス・ソフトウェア19選
HTML5以降で体感できる新しい技術として有名なWebGL。まだまだ実践的に使われている機会は多くありませんが、今後のリッチなWeb体験を語る上で欠かせない要素になるでしょう。そこで今回はWebGLを体験できるWebサービスおよびオープンソース・ソフトウェアをまとめて紹介します。