技術 - WebGLの記事一覧
GLSlideshow.js – WebGLを使ったスライドショー
Web上で写真やスライドを切り替えるスライドショーは数多くあります。その多くはCSS3を使ったアニメーションで切り替えるものが多いかと思います。しかしもっと高度なエフェクトを実装したいと思ったことはないでしょうか。今回はWebGLを使ったスライドショーアプリケーション、GLSlideshow.jsを紹介します。写真のス...
Goo Engine - 多彩な機能をもったWebGLエンジン
Webの進化によって、今後はますますリッチなUIに注目が集まっていくでしょう。その一つとして3Dが考えられます。そし3Dを担っている技術といえばWebGLになります。そのままでは扱いづらいWebGLですが、Goo Engineを使うことで3Dコンテンツが開発しやすくなるかもしれません。## Goo Engineの使い方...
Spriter - SCMLを使ったJavaScriptアニメーションライブラリ
アクションゲームの要とも言えるのがキャラクターの動きです。3Dゲームとなると60fpsで動くようなレベルで求められるでしょうが、2Dにおいてもそこまでいかなくとも多彩な動きが求められるはずです。今回はそんな2Dキャラクターのアニメーションをサポートするライブラリ、Spriterを紹介します。JavaScript製なので...
VoxLords - Voxelを使ったWebGLゲーム
Voxelと言えばMinecraftが有名です。Minecraftはモノを作ったり、他のプレイヤーと争ったりすることはできますが、ルールは基本的に存在しません。ユーザにすべてが委ねられていると言えるでしょう。そんなVoxelを使ってゲームを開発しているのがVoxLordsです。コミカルなキャラクターながら面白いゲームに...
Pannellum – WebGLを使ったパノラマビューワー
写真は撮影する機材も大切ですが、その後の閲覧方法も考えなければなりません。一枚の写真であれば額に入れれば良いですが、最近の全天球カメラのような写真はコンピュータを使わなければ楽しめないでしょう。そこで今回はパノラマ写真を楽しめるPannellumを紹介します。Googleマップライクにズームイン/アウトができるWebベ...
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
使えるWebサービス・オープンソース（29）「WebGL」
今回のテーマはWebGLです。iOS 8においてようやくSafariがWebGLをサポートするようになります。これでスマートフォン、タブレットにおいてもWebGL利用が広がっていくと思われます。そこでWebGL利用を促進させてくれるようなWebサービス、オープンソース・ソフトウェアを紹介します！# Webサービス## ...