[もっと忙しい人向け] 15行から始めるWebGL

WebGL をスクラッチで書くのは、なかなか骨が折れる仕事です。
そんな忙しいあなたにお勧めしたいのが、軽量 WebGL ライブラリ「[lightgl.js](https://github.com/evanw/lightgl.js/)」です。

以下は、三角形（ポリゴン）を描くサンプルになります。

```html:index.html
<script src="lightgl.js"></script>
```

```js:index.js
var gl = GL.create();

gl.ondraw = function() {
    gl.clearColor(1.0, 1.0, 1.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.translate(0, 0, -2.5);
    gl.color(0.0, 0.0, 1.0);
    gl.begin(gl.TRIANGLES);
    gl.vertex( 0.0, 0.5, 0.0);
    gl.vertex(-0.5,-0.5, 0.0);
    gl.vertex( 0.5,-0.5, 0.0);
    gl.end();
};

gl.fullscreen();
```

いかがでしょうか。
WebGL をスクラッチで書いた場合（[30行から始めるWebGL](http://qiita.com/cx20/items/0597cdbccdd370e05956)）に比べて、かなりスマートな書き方になっているのが分かるかと思います。

他にも [lightgl.js](https://github.com/evanw/lightgl.js/) を使用したサンプルを 
jsdo.it
 [github.com](https://github.com/cx20/jsdo.it-archives/tree/master/tag/lightgl.js) に投稿してありますので、興味がある方はご覧ください。※ jsdo.it は残念ながら2019年にサービスが終了してしまった為、代わりに github に上げてあります。

### lightgl.js を使用したサンプル一覧

|タイトル|実行結果|
|:-------|:--:|
|[[WebGL] lightgl.js を試してみるテスト                        ](https://cx20.github.io/jsdo.it-archives/cx20/rm4H) |![青い正三角形が描画される](https://cx20.github.io/jsdo.it-archives/screenshot/rm4H.jpg) |
|[[WebGL] lightgl.js を試してみるテスト（その２）              ](https://cx20.github.io/jsdo.it-archives/cx20/ejpI) |![グラデーションのかかった色付きの四角形が描画される](https://cx20.github.io/jsdo.it-archives/screenshot/ejpI.jpg) |
|[[WebGL] lightgl.js を試してみるテスト（その３）              ](https://cx20.github.io/jsdo.it-archives/cx20/elUj) |![各辺に色のついた立方体が描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/elUj.jpg) |
|[[WebGL] lightgl.js を試してみるテスト（その４）              ](https://cx20.github.io/jsdo.it-archives/cx20/u16o) |![各辺にテクスチャ画像が貼り付いた立方体が描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/u16o.jpg) |
|[[WebGL] lightgl.js でローマ曲面を描いてみるテスト            ](https://cx20.github.io/jsdo.it-archives/cx20/v0rS) |![虹色の線で表現されたローマ曲面が描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/v0rS.jpg) |
|[[WebGL] lightgl.js で貝殻曲面を描いてみるテスト              ](https://cx20.github.io/jsdo.it-archives/cx20/lyR5) |![虹色の点で表現された貝殻曲面(巻き貝の内側の空洞を曲面で表現したもの)が描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/lyR5.jpg) |
|[[WebGL] lightgl.js でリンゴ曲面を描いてみるテスト            ](https://cx20.github.io/jsdo.it-archives/cx20/pejt) |![虹色の線で表現されたリンゴ曲面が描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/pejt.jpg) |
|[[WebGL] lightgl.js でトーラスを描いてみるテスト              ](https://cx20.github.io/jsdo.it-archives/cx20/sssl) |![虹色の点で表現されたトーラスが描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/sssl.jpg) |
|[[WebGL] lightgl.js で Wave Ball を描いてみるテスト           ](https://cx20.github.io/jsdo.it-archives/cx20/1YU6) |![虹色の点で表現されたWave Ball(Wellenkugel)が描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/1YU6.jpg) |
|[[WebGL] lightgl.js でスライム曲面を描いてみるテスト          ](https://cx20.github.io/jsdo.it-archives/cx20/vo3eN)|![虹色の線で表現されたスライム曲面(ドラクエのスライムに似た曲面)が描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/vo3eN.jpg)|
|[[WebGL] lightgl.js でハート曲面を描いてみるテスト            ](https://cx20.github.io/jsdo.it-archives/cx20/woba) |![虹色の点で表現されたハート曲面が描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/woba.jpg) |
|[[WebGL] lightgl.js でリサージュ図形を描いてみるテスト        ](https://cx20.github.io/jsdo.it-archives/cx20/4kX2) |![虹色の線で表現されたリサージュ図形が描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/4kX2.jpg) |
|[[WebGL] lightgl.js で３次元リサージュ図形を描いてみるテスト  ](https://cx20.github.io/jsdo.it-archives/cx20/5RXU) |![虹色の線で表現された３次元リサージュ図形が描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/5RXU.jpg) |
|[[WebGL] lightgl.js で３次元関数をプロットしてみるテスト      ](https://cx20.github.io/jsdo.it-archives/cx20/zMca) |![虹色の点で表現された３次元関数がプロットされ、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/zMca.jpg) |
|[[WebGL] lightgl.js で３次元関数をプロットしてみるテスト（改）](https://cx20.github.io/jsdo.it-archives/cx20/vHqB) |![虹色の点で表現された、動きの付いた３次元関数がプロットされ、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/vHqB.jpg) |
|[[WebGL] lightgl.js で波動方程式をプロットしてみるテスト      ](https://cx20.github.io/jsdo.it-archives/cx20/5VBl) |![虹色の点で表現された、動きの付いた波動方程式がプロットされ、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/5VBl.jpg) |
|[[WebGL] lightgl.js でハーモノグラフを描いてみるテスト        ](https://cx20.github.io/jsdo.it-archives/cx20/ry8D) |![虹色の線で表現された、動きの付いたハーモノグラフが描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/ry8D.jpg) |
|[[WebGL] lightgl.js で球体を描いてみるテスト                  ](https://cx20.github.io/jsdo.it-archives/cx20/lQVx) |![虹色の線で表現された球体が描画され、それが3D回転する](https://cx20.github.io/jsdo.it-archives/screenshot/lQVx.jpg) |