技術 - WebGLの記事一覧
glTF Viewer - WebGLを使ったglTFビューワー
glTFは3Dモデル界隈で今最も注目されているフォーマットだそうです。3Dモデル界隈におけるJPEGを目指すと言われているので、まさにデファクトを目指すべく作られています。執筆時点での最新版は2.0で、1.0とは互換性がないとのことです。そんなglTFのファイルをWebブラウザ上で閲覧するビューワーがglTF View...
Fractal Fantasy - WebGLを使った芸術的表現
Webブラウザの表現力は年々増しています。特にCanvasやWebGLによって、表現できる幅が大きく広がりました。使いこなすのは簡単ではありませんが、これまでのWebとは一線を画す表現が可能になります。今回紹介するFractal FantasyはそんなWebGLを使った多彩な表現を集めたソフトウェアです。極めればここま...
WebGL Fluid Simulation - 流体の動きをシミュレーション
流体の動きは実に不思議です。そもそも私たちに最も身近である水ですら、とても不思議な特性を持ち合わせています。水の上に水彩絵の具を垂らして、それが広がっていく様子を楽しんだり、紙に写し取ったりして遊んだ経験は誰もがあるのではないでしょうか。そんな流体の動きをシミュレートしたのがWebGL Fluid Simulation...
Tetris - Zig製のテトリス
最近、あらゆるプログラミング言語でテトリスを作る試みが行われいるのでしょうか。かつてはWikiや掲示板が作られていましたが、テトリスもシンプルなルールですし、ゲームとしてのインタフェースの面白さもあります。今回紹介するTetrisはZigというプログラミング言語を使って作られたテトリスです。## Tetrisの使い方画...
Shree - 軽量版Three.js
Three.jsといえばWebGLを使った高度な表現を可能にするライブラリですが、機能が相当に多く、ファイルサイズも大きいのが難点です。素のWebGLを触るのは相当に難度が高いですが、Three.js経由でも難しいという印象があります。そんな中登場したのがShreeです。Three.jsの主要な機能を残して実装された軽...
Slye - WebGLを使って3D文字スライドを作成
プレゼンテーションは聴衆の目を引かなければなりません。そのため、ちょっとしたアニメーションであったり、文字サイズの変化など見た目の急激な変更が行われたりします。個人的にはあまり使いませんが、逆に多用する人もいます。今回紹介するSlyeはWebGLを使って派手な3Dテキストとアニメーションを実現するソフトウェアです。##...
MineCraftWebGL - WebGL製のMinecraft
Minecraftにハマっている人は大勢います。サバイバルで生き残るのはもちろん、クリエイターとして大きなものを作るのも楽しみ方の一つです。難点なのはアプリケーションをインストールしなければならないことでしょう。そこで使ってみたいのがMineCraftWebGLです。WebGLで作られたMinecraftです。## M...
woscope - WebGLベースのオシロスコープ
電気などの波形を見るのに使われるのがオシロスコープです。工学系の方であれば誰もが一度は使ったことがあるのではないでしょうか。ツマミを回して写し出される波形の変化を楽しんだことがあるはずです。そんなオシロスコープをWebGLで再現したのがwoscopeです。## woscopeの使い方もちろん電気は流せないので、音楽を使...
WebGL Scroll Spiral - WebGLとスクロールを組み合わせたデジタル作品
WebGLは普段使っているJavaScriptではなく、OpenGLに近いものになります。そのため、自分のやりたいことを実現するために覚えるべきことがたくさんあります。しかしゲームなどでも使える技術なので覚える価値があるでしょう。そんなWebGLとWebブラウザのスクロールを組み合わせた作品がWebGL Scroll ...
webgl editron - Electron製のWebGL/GLSLエディタ
WebGLにトライしてみたいと思いつつも、効率的な開発環境を整えたりするのが億劫に感じてしまっている人は多いのではないでしょうか。何かベースがあると、それを編集しながら学習していこうという気にもなるでしょう。今回はそんなWebGL/GLSLを編集するためのエディタ、webgl editronを紹介します。## webg...
Astray - WebGLを使った迷路ゲーム
Webの表現力が低いと言われたのはとうに昔で、HTML5によってぐっと向上しています。とは言え、簡単にできるかと言われるとそうでもないのですが、それでも多くのライブラリやフレームワークによって実現する方法も増えています。今回はWebGLを使った迷路ゲーム、Astrayを紹介します。単純な2Dに比べて高度な表現が特徴です...
WebGLDetector.js - ブラウザのWebGLバージョンを判定
iOSでもWebGLが使えるようになり、デスクトップとスマートフォンでWebGLを使った、より高度な表現が実現できるようになりました。しかしWebGLにもバージョンがあり、バージョンによって実現できる機能差があります。WebGLのバージョンを逐一調べながら表現法を変えるのは面倒ですが、WebGLDetector.jsを...
Web Blocks - Webブラウザで遊べるMinecraftクローン
Minecraftはブロックを積み重ねて世界を創っていくという、レゴ好きにはたまらないゲームです。日々多くの人たちが一生懸命建設に励んでいます。また、開発者にとっては別な見方もできます。コンセプトがシンプルなだけに同じようなものを自分で作ってみたいと思えるのです。今回はWebGLを使ったWeb Blocksを紹介します...
GPU.js - GPUを使ったアニメーションライブラリ
Webブラウザ上で3Dをぐりぐりと動かすようなアニメーションを作る場合、WebGLを使うのは基本として、処理においてもGPUを使う方が効率的になります。とはいえ、GPUを使ってどう処理を行えば良いのか分からないことでしょうそこで使ってみたいのがGPU対応のライブラリです。今回はアニメーションライブラリとしてGPU.js...
2016/06/10
2016/06/10業務で使えるオープンソース（194）「WebGL」
今回のテーマはWebGLです。HTML5が普及し、その中でWebGLも使いやすくなってきました。iOS9でもWebGLがサポートされたこともあって、スマートフォンでもWebGLコンテンツが普及しはじめています。今回はそんなWebGLの使われ方と、関連オープンソース・ソフトウェアを紹介します。### ゲーム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ベ...