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

技術 - WebGLの記事一覧

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

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

もっと見る

List

  • 2016/03/18

GLSlideshow.js – WebGLを使ったスライドショー

Web上で写真やスライドを切り替えるスライドショーは数多くあります。その多くはCSS3を使ったアニメーションで切り替えるものが多いかと思います。しかしもっと高度なエフェクトを実装したいと思ったことはないでしょうか。今回はWebGLを使ったスライドショーアプリケーション、GLSlideshow.jsを紹介します。写真のス...

List

  • 2015/12/09

Goo Engine - 多彩な機能をもったWebGLエンジン

Webの進化によって、今後はますますリッチなUIに注目が集まっていくでしょう。その一つとして3Dが考えられます。そし3Dを担っている技術といえばWebGLになります。そのままでは扱いづらいWebGLですが、Goo Engineを使うことで3Dコンテンツが開発しやすくなるかもしれません。## Goo Engineの使い方...

List

  • 2015/10/12

Spriter - SCMLを使ったJavaScriptアニメーションライブラリ

アクションゲームの要とも言えるのがキャラクターの動きです。3Dゲームとなると60fpsで動くようなレベルで求められるでしょうが、2Dにおいてもそこまでいかなくとも多彩な動きが求められるはずです。今回はそんな2Dキャラクターのアニメーションをサポートするライブラリ、Spriterを紹介します。JavaScript製なので...

List

  • 2015/08/26

VoxLords - Voxelを使ったWebGLゲーム

Voxelと言えばMinecraftが有名です。Minecraftはモノを作ったり、他のプレイヤーと争ったりすることはできますが、ルールは基本的に存在しません。ユーザにすべてが委ねられていると言えるでしょう。そんなVoxelを使ってゲームを開発しているのがVoxLordsです。コミカルなキャラクターながら面白いゲームに...

List

  • 2015/08/15

Pannellum – WebGLを使ったパノラマビューワー

写真は撮影する機材も大切ですが、その後の閲覧方法も考えなければなりません。一枚の写真であれば額に入れれば良いですが、最近の全天球カメラのような写真はコンピュータを使わなければ楽しめないでしょう。そこで今回はパノラマ写真を楽しめるPannellumを紹介します。Googleマップライクにズームイン/アウトができるWebベ...

List

  • 2015/07/30

Three.js Editor Extension for Google Chrome – Three.jsコンテンツを編集できるChrome機能拡張

WebGLはWebという冠はついているものの、HTMLやJavaScriptとは全く異なる言語となっています。そのため、素のWebGLを扱うのはとても面倒であり、ラッピングしたライブラリを使うことが多いようです。その中で最も有名なのはThree.jsでしょう。Three.jsを使えばWebGLコンテンツを扱いやすくなる...

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サービス## ...