ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - WebGLの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2015/07/04

Blend4Web – Blenderで作った3DデータをWeb上で

WebGLの登場もあって、今後3DをはじめとしてリアルなグラフィックスがWeb上でも実現することでしょう。WebGLとOpenGLは似ているとは言え、WebGL向けにはまだ専用のツールなどは揃っていません。作るのに大きなコストがかかるのではなかなか広まらないでしょう。そこで既存の仕組みで作られたデータを取り込めるのがベ...

List

  • 2015/04/26

Wizard Warz - WebGLを使ったWeb向けマルチプレイヤーゲーム

今後、Webブラウザを使ったゲームが増えていくのは間違いありません。かといってかつてのソシャゲのようなものではなく、Flashも使いません。使うのはHTML5であり、WebGLやWebSocketになるでしょう。ゲームは一人でやるのも良いですが、やはりみんなでわいわい遊ぶのが楽しいものです。そこで今回はWizard W...

List

  • 2015/04/25

Shader Editor – Google ChromeのDevToolsでWebGLコンテンツの編集

WebGL(OpenGL)で大事な技術がシェーダーでしょう。3Dが立体的に認識されるためには陰影があったり、頂点によって影の濃さが異なるためではないかと思います。しかしOpenGLのように整備された環境がない中、スムーズに作るのは難しいかも知れません。そこで使ってみたいのがShader Editor

List

  • 2015/04/19

Parrot Hunt - Webブラウザで遊べる。WebGLを使ったハンティングゲーム

Webベースのゲームがどんどん作られていますが、高度なゲームになるとグラフィックスにこだわりが必要になるでしょう。そこで使われるのがWebGLになります。今回はその参考になりそうなゲーム、ParrotHunt

List

  • 2015/04/16

HTML GL – HTML構造をそのままWebGL化

Web上でのアニメーション、エフェクトについては多くの問題を抱えています。特に大きいのは、その実行速度のようです。CSS3を使うと改善しますが、それでも複雑なアニメーションが行える訳ではありません。そこで生み出されたのがHTML GL

List

  • 2015/04/09

Tangram - 地図 + Open Street Mapでできる面白さ

HTML5になってWebの表現力は格段にあがっています。その表現力を担うのがCanvasやWebGLになります。特にWebGLはiOS8からようやく使えるようになったとあって、今後注目を集めるのではないでしょうか。その一例として今回はTangramを紹介します。Open Street MapとWebGLを組み合わせた素...

List

  • 2015/02/21

frame.js - FlashのようにWebGLアニメーションを編集

まだ開発途中ながらこれは期待大!WebGLはHTML5上で3Dグラフィックスを扱うために作られた技術です。その可能性は大いに感じられるところですが、扱うのが難しいためになかなか手出ししづらいものがあります。ごりごりコーディングするのは面倒で、やはり専用のエディタが欲しいと思うでしょう。そのためのエディタになるのがfra...

List

  • 2015/02/05

Interstellar – 宇宙空間を漂ってみよう

VR(仮想現実)デバイスが発達するのにつれて仮想空間でどこでも旅ができるようになっています。知らない海外の風景を見ることもできますし、海の中を漂うこともできます。映像さえあればどこだっていけるのです。それは何も地球だけではありません。宇宙だっていけるようになるでしょう。そんな未来を感じさせてくれるのがInterstel...

List

  • 2015/01/01

WebGL Fluid – WebGLで水の動きを再現

コンピュータが苦手なのは自然の造形、動きをコンピュータの中で再現することです。3D CGの映画は自然のように描くのを目標に年々進化しています。水、雲、雪、雷、木の育ち方など自然はとても複雑にできています。その一つ、水の動きをWebGLでエミュレートするのがWebGL Fluidです。## WebGL Fluidの使い方...

List

  • 2014/10/08

Flood - WebGLを使った3Dプログラミング環境

3Dモデリングって聞くと何となく敷居が高く感じられますよね。専用のソフトウェアを使って、サーバサイド/アプリのプログラミングとは全く異なるプロセスを辿るような気がします。しかし3Dプリンタも出てきている今、無視する訳にはいきません。そこで使ってみたいのがFlood、Webブラウザベースのビジュアルプログラミング環境です...

List

  • 2014/08/21

jThree - 体験必須!jQueryでWebGLコンテンツを作成

先日行われたHTML5 Japan Cupで個人的にひと際目を引いたのがjThreeです。WebGLコンテンツを作るというのはとても大変で、なかなか量が増えていかないのですが、jThreeを使えば一気に増えていく可能性があります。## jThreeの使い方!こちらはデモです。YouTubeのように見えますがWebGLで...

List

  • 2014/06/19

PlayCanvas - 今後のトレンド!HTML5/WebGLなゲームエンジン

iOS 8からSafariがWebGLに対応することが発表されました。これによりスマートフォンにおいてもWebGLを使ったコンテンツが広がりを見せるでしょう。特に利用されると思われるのがゲーム分野かと思います。そこで注目したいのがWebGLによるゲームエンジンを提供するPlayCanvasです。オープンソースなゲームエ...

List

  • 2014/06/18

Famo.us – WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク

スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。しかしWeb(HTML5)の進化は止まりません。ついにここまで!というフレームワークがFamo.usです。3Dを備えたレン...

List

  • Premium_s 2014/06/10

使えるWebサービス・オープンソース(29)「WebGL」

今回のテーマはWebGLです。iOS 8においてようやくSafariがWebGLをサポートするようになります。これでスマートフォン、タブレットにおいてもWebGL利用が広がっていくと思われます。そこでWebGL利用を促進させてくれるようなWebサービス、オープンソース・ソフトウェアを紹介します!# Webサービス## ...

List

  • 2013/11/28

Babylon.js - WebGLを高度に操る3Dグラフィックスフレームワーク

WebGLを使えば高度なグラフィックスが描けるというのは分かっていても、実際どれ程度のことができるのかはサンプルがあまり多くありません。それだけグラフィックスの作り込みが大変ということでしょう。そんな中登場したのがBabylon.js、WebGLを扱うためのJavaScriptフレームワークです。Babylon.jsを...

List

  • 2013/10/16

他にも使えそう。GitHubユーザを可視化「Github Globe」

Github GlobeはHTML5/WebGL製のオープンソース・ソフトウェア(GPL v3)です。世界中にいるGitHubユーザをビジュアル化するソフトウェアがWebGL Globeです。みんながどこで生活し、コミットしているかが分かるのは面白いですよ。アクセスするとWebGLを使って地球を描き出します。マウスを使...

List

  • 2013/04/25

胸熱。Webブラウザ上のMikuMikuDance「MMD.js」

MMD.jsはPMD/VMDを読み込んでWebGLを使って描画するソフトウェアです。先日mmd.jsを紹介しましたが、さらに完成度の高いMMDをWebGLを使ってレンダリングするのがMMD.jsです。踊っている1シーン。かなりスムーズです。見ている向きを変更できます。上からができる、ということは…。後ろ向きだってもちろ...

List

  • 2013/02/23

膨大なデータを瞬時に描画。WebGLをつかったヒートマップ「WebGL Heatmap」

WebGL HeatmapはWebGLを使って高速に動作するヒートマップライブラリです。ヒートマップを描こうと思うとまず必要なのがポイントの膨大なデータで、それらを集計してサマライズして中央を濃く、周辺にいくに従って薄くなるように計算して…と結構複雑な感じがします。しかしWebGL Heatmapを使うと高速に、かつ滑...

45148?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f03%2fscreenshot-2012-03-22-21.31.54_thumb

  • Premium_s 2012/12/04

WebGLを体感できるサービス・ソフトウェア19選

HTML5以降で体感できる新しい技術として有名なWebGL。まだまだ実践的に使われている機会は多くありませんが、今後のリッチなWeb体験を語る上で欠かせない要素になるでしょう。そこで今回はWebGLを体験できるWebサービスおよびオープンソース・ソフトウェアをまとめて紹介します。

41000?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f07%2fscreenshot-2012-07-19-11.24.00_thumb

  • 2012/07/29

再現性高し。Webブラウザで遊べるMinecraft「MineCraftWebGL」

MineCraftWebGLはWebGLで再現したMinecraftです。とてもシンプルな要素ながら、その自由度の高さで人気があるMinecraft。そんなMinecraftの世界をWebGLを使ってHTML5で表現したのがMineCraftWebGLになります。トップページです。WebGL対応ブラウザで遊べます。まさ...