WebGLのヘルパー、taiyaki(たいやき)を作りました #JavaScript

素のWebGLだと、どうしても実装が大変だったので自前のヘルパーを作りました。

使い方

簡単に使い方を列挙していきます。

初期化

var taiyaki = require( 'taiyaki' );
var Context = taiyaki.RenderingContext;

var ctx = new Context( 'canvas' );

シェーダの登録

var program = ctx.createProgram( [ 'vs', 'fs' ] );
ctx.useProgram( program );

VBOやIBOの登録

ctx.bindVbos([
  { name: 'positions', value: positions, stride: 3 },
  { name: 'colors',    value: colors,    stride: 4 },
  { name: 'normals',   value: normals,   stride: 3 },
]);

ctx.bindIbo( index );

ユニフォームの登録

ctx.bindUniforms( [
  { name: 'mvpMatrix',      type: 'matrix4fv', value: mvpMatrix },
  { name: 'invMatrix',      type: 'matrix4fv', value: invMatrix },
  { name: 'lightDirection', type: '3fv',       value: lightDirection },
  { name: 'eyePosition',    type: '3fv',       value: eyePosition },
  { name: 'centerPoint',    type: '3fv',       value: centerPosition },
  { name: 'ambientColor',   type: '4fv',       value: ambientColor },
]);

その他細かいところ

ctx.clear( { r: 0.3, g: 0.3, b:0.3, a: 1 }, 1.0 );
ctx.viewport( { x: 0, y: 0, width: 512, height: 512 } );

工夫したところ

なるべく、情報をひとまとまりにできるようにしました。

また、WebGL特有の定数が表に出てこないよう工夫しました。

課題

いまのところ、画像テクスチャを作成する機能が未実装です。

※複数画像をテクスチャとして読み込む場合の処理が中々しっくりこず、てこずっています。

こういう実装にするといいよーなど、良いアイデアあればフィードバック頂けると嬉しいです。