LoginSignup
21
21

More than 1 year has passed since last update.

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

Last updated at Posted at 2015-07-18

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

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

index.html
<script src="lightgl.js"></script>
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)に比べて、かなりスマートな書き方になっているのが分かるかと思います。

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

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

タイトル 実行結果
[WebGL] lightgl.js を試してみるテスト 青い正三角形が描画される
[WebGL] lightgl.js を試してみるテスト(その2) グラデーションのかかった色付きの四角形が描画される
[WebGL] lightgl.js を試してみるテスト(その3) 各辺に色のついた立方体が描画され、それが3D回転する
[WebGL] lightgl.js を試してみるテスト(その4) 各辺にテクスチャ画像が貼り付いた立方体が描画され、それが3D回転する
[WebGL] lightgl.js でローマ曲面を描いてみるテスト 虹色の線で表現されたローマ曲面が描画され、それが3D回転する
[WebGL] lightgl.js で貝殻曲面を描いてみるテスト 虹色の点で表現された貝殻曲面(巻き貝の内側の空洞を曲面で表現したもの)が描画され、それが3D回転する
[WebGL] lightgl.js でリンゴ曲面を描いてみるテスト 虹色の線で表現されたリンゴ曲面が描画され、それが3D回転する
[WebGL] lightgl.js でトーラスを描いてみるテスト 虹色の点で表現されたトーラスが描画され、それが3D回転する
[WebGL] lightgl.js で Wave Ball を描いてみるテスト 虹色の点で表現されたWave Ball(Wellenkugel)が描画され、それが3D回転する
[WebGL] lightgl.js でスライム曲面を描いてみるテスト 虹色の線で表現されたスライム曲面(ドラクエのスライムに似た曲面)が描画され、それが3D回転する
[WebGL] lightgl.js でハート曲面を描いてみるテスト 虹色の点で表現されたハート曲面が描画され、それが3D回転する
[WebGL] lightgl.js でリサージュ図形を描いてみるテスト 虹色の線で表現されたリサージュ図形が描画され、それが3D回転する
[WebGL] lightgl.js で3次元リサージュ図形を描いてみるテスト 虹色の線で表現された3次元リサージュ図形が描画され、それが3D回転する
[WebGL] lightgl.js で3次元関数をプロットしてみるテスト 虹色の点で表現された3次元関数がプロットされ、それが3D回転する
[WebGL] lightgl.js で3次元関数をプロットしてみるテスト(改) 虹色の点で表現された、動きの付いた3次元関数がプロットされ、それが3D回転する
[WebGL] lightgl.js で波動方程式をプロットしてみるテスト 虹色の点で表現された、動きの付いた波動方程式がプロットされ、それが3D回転する
[WebGL] lightgl.js でハーモノグラフを描いてみるテスト 虹色の線で表現された、動きの付いたハーモノグラフが描画され、それが3D回転する
[WebGL] lightgl.js で球体を描いてみるテスト 虹色の線で表現された球体が描画され、それが3D回転する
21
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
21