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

技術 - WebGLの記事一覧

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

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

もっと見る

List

  • 2020/11/23

Origami Simulator - 折り紙をWebGLでシミュレーション

折り紙は日本のみならず、世界中で愛されている存在です。1枚の紙から、技巧を凝らして折ることでさまざまな造形を可能にします。中には、どうやって折ったのか分からないものも多数あります。そんな折り紙をシミュレーションできるソフトウェアがOrigami Simulatorになります。## Origami Simulatorの使...

List

  • 2020/11/13

Detect GPU - GPUの性能を取得するライブラリ

WebブラウザでもGPUを利用する機会が増えてきています。3Dゲームを提供する、CSSアニメーションをする、さらに機械学習でWebGLを利用することもあります。しかしGPUはすべて同じではなく、性能の良し悪しがあります。一口にGPUといってもピンキリです。今回紹介するDetect GPUはGPUの性能を簡易的に取得でき...

List

  • 2020/10/12

WebGui - WebGL上でImGuiを使ってUIを構築する

OpenGLでUIを作る際にはImGuiのようなライブラリを使います。ゲームや3Dなどを使っている人にとってはよく使い慣れたライブラリかも知れません。ではWebGLな環境ではどうなるでしょうか。WebGuiはWebGL環境でImGuiを使った実証デモになります。WebAssemblyを使っており、高速に動作します。##...

List

  • 2020/03/14

glTF Viewer - WebGLを使ったglTFビューワー

glTFは3Dモデル界隈で今最も注目されているフォーマットだそうです。3Dモデル界隈におけるJPEGを目指すと言われているので、まさにデファクトを目指すべく作られています。執筆時点での最新版は2.0で、1.0とは互換性がないとのことです。そんなglTFのファイルをWebブラウザ上で閲覧するビューワーがglTF View...

List

  • 2019/11/23

Fractal Fantasy - WebGLを使った芸術的表現

Webブラウザの表現力は年々増しています。特にCanvasやWebGLによって、表現できる幅が大きく広がりました。使いこなすのは簡単ではありませんが、これまでのWebとは一線を画す表現が可能になります。今回紹介するFractal FantasyはそんなWebGLを使った多彩な表現を集めたソフトウェアです。極めればここま...

List

  • 2019/06/16

WebGL Fluid Simulation - 流体の動きをシミュレーション

流体の動きは実に不思議です。そもそも私たちに最も身近である水ですら、とても不思議な特性を持ち合わせています。水の上に水彩絵の具を垂らして、それが広がっていく様子を楽しんだり、紙に写し取ったりして遊んだ経験は誰もがあるのではないでしょうか。そんな流体の動きをシミュレートしたのがWebGL Fluid Simulation...

List

  • 2019/06/12

Tetris - Zig製のテトリス

最近、あらゆるプログラミング言語でテトリスを作る試みが行われいるのでしょうか。かつてはWikiや掲示板が作られていましたが、テトリスもシンプルなルールですし、ゲームとしてのインタフェースの面白さもあります。今回紹介するTetrisはZigというプログラミング言語を使って作られたテトリスです。## Tetrisの使い方画...

List

  • 2019/01/03

Shree - 軽量版Three.js

Three.jsといえばWebGLを使った高度な表現を可能にするライブラリですが、機能が相当に多く、ファイルサイズも大きいのが難点です。素のWebGLを触るのは相当に難度が高いですが、Three.js経由でも難しいという印象があります。そんな中登場したのがShreeです。Three.jsの主要な機能を残して実装された軽...

List

  • 2018/11/22

Slye - WebGLを使って3D文字スライドを作成

プレゼンテーションは聴衆の目を引かなければなりません。そのため、ちょっとしたアニメーションであったり、文字サイズの変化など見た目の急激な変更が行われたりします。個人的にはあまり使いませんが、逆に多用する人もいます。今回紹介するSlyeはWebGLを使って派手な3Dテキストとアニメーションを実現するソフトウェアです。##...

List

  • 2018/10/08

MineCraftWebGL - WebGL製のMinecraft

Minecraftにハマっている人は大勢います。サバイバルで生き残るのはもちろん、クリエイターとして大きなものを作るのも楽しみ方の一つです。難点なのはアプリケーションをインストールしなければならないことでしょう。そこで使ってみたいのがMineCraftWebGLです。WebGLで作られたMinecraftです。## M...

List

  • 2018/06/27

woscope - WebGLベースのオシロスコープ

電気などの波形を見るのに使われるのがオシロスコープです。工学系の方であれば誰もが一度は使ったことがあるのではないでしょうか。ツマミを回して写し出される波形の変化を楽しんだことがあるはずです。そんなオシロスコープをWebGLで再現したのがwoscopeです。## woscopeの使い方もちろん電気は流せないので、音楽を使...

List

  • 2018/01/19

WebGL Scroll Spiral - WebGLとスクロールを組み合わせたデジタル作品

WebGLは普段使っているJavaScriptではなく、OpenGLに近いものになります。そのため、自分のやりたいことを実現するために覚えるべきことがたくさんあります。しかしゲームなどでも使える技術なので覚える価値があるでしょう。そんなWebGLとWebブラウザのスクロールを組み合わせた作品がWebGL Scroll ...

List

  • 2017/01/28

webgl editron - Electron製のWebGL/GLSLエディタ

WebGLにトライしてみたいと思いつつも、効率的な開発環境を整えたりするのが億劫に感じてしまっている人は多いのではないでしょうか。何かベースがあると、それを編集しながら学習していこうという気にもなるでしょう。今回はそんなWebGL/GLSLを編集するためのエディタ、webgl editronを紹介します。## webg...

List

  • 2016/11/17

Astray - WebGLを使った迷路ゲーム

Webの表現力が低いと言われたのはとうに昔で、HTML5によってぐっと向上しています。とは言え、簡単にできるかと言われるとそうでもないのですが、それでも多くのライブラリやフレームワークによって実現する方法も増えています。今回はWebGLを使った迷路ゲーム、Astrayを紹介します。単純な2Dに比べて高度な表現が特徴です...

List

  • 2016/10/08

WebGLDetector.js - ブラウザのWebGLバージョンを判定

iOSでもWebGLが使えるようになり、デスクトップとスマートフォンでWebGLを使った、より高度な表現が実現できるようになりました。しかしWebGLにもバージョンがあり、バージョンによって実現できる機能差があります。WebGLのバージョンを逐一調べながら表現法を変えるのは面倒ですが、WebGLDetector.jsを...

List

  • 2016/08/11

Web Blocks - Webブラウザで遊べるMinecraftクローン

Minecraftはブロックを積み重ねて世界を創っていくという、レゴ好きにはたまらないゲームです。日々多くの人たちが一生懸命建設に励んでいます。また、開発者にとっては別な見方もできます。コンセプトがシンプルなだけに同じようなものを自分で作ってみたいと思えるのです。今回はWebGLを使ったWeb Blocksを紹介します...

List

  • 2016/07/10

GPU.js - GPUを使ったアニメーションライブラリ

Webブラウザ上で3Dをぐりぐりと動かすようなアニメーションを作る場合、WebGLを使うのは基本として、処理においてもGPUを使う方が効率的になります。とはいえ、GPUを使ってどう処理を行えば良いのか分からないことでしょうそこで使ってみたいのがGPU対応のライブラリです。今回はアニメーションライブラリとしてGPU.js...

None

  • Premium_s 2016/06/10

業務で使えるオープンソース(194)「WebGL」

今回のテーマはWebGLです。HTML5が普及し、その中でWebGLも使いやすくなってきました。iOS9でもWebGLがサポートされたこともあって、スマートフォンでもWebGLコンテンツが普及しはじめています。今回はそんなWebGLの使われ方と、関連オープンソース・ソフトウェアを紹介します。### ゲームWebGLと聞...

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の使い方...