この文章は、日経BP社から出版されている「HTML5ゲーム開発の極意」の付録PDFを元に、参照しやすいようmarkdown形式に書き起こした、個人的メモです。
##目次
- コンテキストの作成およびデータ型
- バッファ関数
- シェーダ関数
- Program関数
- Uniform変数
- Attribute関数
- draw関数
- テクスチャ関数
- ブレンド関数
- ステンシルバッファ関数
- 深度バッファ関数
- レンダーバッファ関数
- フレームバッファ関数
- その他の関数
- パラメータ
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
// いくつかのパラメータを設定する
var params = {
alpha : true,
stencil : false,
antialias : true,
};
var gl = canvas.getContext("webgl", params);
パラメータ | デフォルト値 | 説明 |
---|---|---|
alpha | true | 描画バッファのアルファチャネルを有効にする。 |
depth | true | サポートされていてtrueなら深度バッファが有効になる。 |
stencil | false | サポートされていてtrueならステンシルバッファが有効になる。 |
antialias | false | サポートされていてtrueなら実装固有のテクニックを使ったアンチエイリアスが有効になる。 |
premultipliedAlpha | true | trueなら描画バッファの乗算済みアルファが有効になる。 |
preserveDrawingBuffer | false | サポートされていてtrueなら、明示的にクリアされるまで描画バッファは維持される。 |
※実際には、JavaScriptでは基本的にnumber型の扱いになる。
型 | 説明 |
---|---|
enum | WebGLの列挙値。たとえば、gl.BUFFER_SIZE |
int | 符号付き整数値 |
uint | 符号なし整数値 |
float | 浮動小数点数値 |
https://developer.mozilla.org/ja/docs/Web/JavaScript/Typed_arrays
型 | 説明 |
---|---|
Uint16Array | 符号なし16ビット整数値 |
Uint32Array | 符号なし32ビット整数値 |
Int32Array | 符号付き32ビット整数値 |
Float32Array | 32ビット浮動小数点数値付き |
主に頂点バッファ、インデックスバッファを操作する関数。
関数 | 説明 |
---|---|
gl.createBuffer() | 新しいWebGLBufferオブジェクトを作って返す。 |
gl.deleteBuffer(WebGLBuffer buffer ) |
WebGLBufferオブジェクトを削除する。 |
gl.bindBuffer(enum target ,WebGLBuffer buffer ) |
引数のtargetにWebGLBufferをバインドする。 targetと し て 指 定 で き る 有 効 な 値 は、 gl.ARRAY_BUFFER (頂点バッファ用)とgl.ELEMENT_ARRAY_BUFFER (インデックスバッファ用)である。 |
gl.bufferData(enum target ,Object data ,enum usage ) gl.bufferData( enum target ,uint size ,enum usage ) |
引数のtargetにバインドされたWebGLBufferオブジェクトのデータを保存する。 第2引数は、 ArrayBuffer オブジェクト、ArrayBufferView オブジェクト、データの初期サイズを示すulong値のどれかを指定できる。usageとして指定できる有効な値は、 gl.STREAM_DRAW 、gl.STATIC_DRAW 、gl.DYNAMIC_DRAW である。 |
gl.bufferSubData(enum target ,uint offset ,Object data ); |
バッファオブジェクトに部分的に値を設定する。 target: ARRAY_BUFFER または ELEMENT_ARRAY_BUFFER を指定する。offset: バッファオブジェクトのデータの置き換えを開始するオフセット値を指定する。 data: ArrayBuffer オブジェクトを指定する。 |
gl.getBufferParameter(enum target ,enum pname ) |
引数のtargetにバインドされたバッファオブジェクトのパラメータの値を返す。 targetと指定できるのは gl.ARRAY_BUFFER とgl.ELEMENT_ARRAY_BUFFER 。nameとして指定できる有効な値は、 gl.BUFFER_SIZE 、 gl.BUFFER_USAGE である。 |
gl.isBuffer(WebGLBuffer buffer ) |
バッファがWebGLObjectで、gl.bindBuffer()ですでにターゲットにバインドされているときにtrueを返す。 |
頂点シェーダ、フラグメントシェーダを扱うための関数。
関数 | 説明 |
---|---|
gl.createShader(enum type ) |
新しいWebGLShaderオブジェクトを返す。 typeとして指定できる有効な値は、 gl.FRAGMENT_SHADER と gl.VERTEX_SHADER である。 |
gl.deleteShader(WebGLShader shader ) |
引数のWebGLShaderオブジェクトを削除する。削除ステータスは、gl.DELETE_STATUS パラメータに保存される。 |
gl.shaderSource(WebGLShader shader ,string source ) |
引数のWebGLShaderオブジェクトにGLSLソースコードを設定する。 |
gl.getShaderSource(WebGLShader shader ) |
引数のWebGLShaderオブジェクトのGLSLソースコードをstringとして返す。 |
gl.compileShader(WebGLShader shader ) |
WebGLShaderオブジェクトをコンパイルする。 |
gl.getShaderInfoLog(WebGLShader shader ) |
引数のWebGLShaderオブジェクトの情報ログ(コンパイルエラーを含む)をstringとして返す。 |
gl.isShader(WebGLShader shader ) |
シェーダがまだ削除されていないWebGLShaderオブジェクトならtrueを返す。そうでなければfalseを返す。 |
gl.getShaderParameter(WebGLShader shader ,enum pname ) |
引数のWebGLShaderオブジェクトのパラメータ値を返す。pnameとして指定できる有効な値は、gl.SHADER_TYPE 、gl.DELETE_STATUS 、gl.COMPILE_STATUS である。 |
頂点シェーダ、フラグメントシェーダのコンパイル結果を格納したマネージャとして機能する、 プログラムオブジェクトを操作する関数。
関数 | 説明 |
---|---|
gl.createProgram() | 新しいWebGLProgramオブジェクトを作って返す。 |
gl.deleteProgram(WebGLProgram program ) |
引数のWebGLProgramオブジェクトを削除する。削除ステータスは、gl.DELETE_STATUS パラメータに保存される。 |
gl.linkProgram(WebGLProgram program ) |
引数のWebGLProgramオブジェクトをリンクし、プログラマブル頂点、フラグメントプロセッサの実行可能コードを作る。ステータスは、gl.LINK_STATUS パラメータに保存される。 |
gl.getProgramInfoLog(WebGLProgram program ) |
引数のWebGLProgramオブジェクトの情報ログ(リンカエラーを含む)を文字列として返す。 |
gl.validateProgram(WebGLProgram program ) |
引数のWebGLProgramオブジェクトをバリデートし、ステータスをgl.VALIDATE_STATUS パラメータに保存する。 |
gl.attachShader(WebGLProgram program ,WebGLShader shader ) |
引数のWebGLProgramオブジェクトにWebGLShaderオブジェクトをアタッチする。アタッチされたシェーダの数は、gl.ATTACHED_SHADERS パラメータに保存される。 |
gl.detachShader(WebGLProgram program ,WebGLShader shader ) |
引数のWebGLProgramオブジェクトからWebGLShaderオブジェクトをデタッチする。 |
gl.getAttachedShaders(WebGLProgram program ) |
引数のWebGLProgramオブジェクトにアタッチされているWebGLShaderオブジェクトを格納する配列を返す。 |
gl.getActiveAttrib(WebGLProgram program ,uint index ) |
引数のWebGLProgramオブジェクトのindexの位置にある頂点属性についての情報を返す。戻り値は、size、type、nameプロパティを持つWebGLActiveInfoオブジェクトである。 |
gl.getActiveUniform(WebGLProgram program ,uint index ) |
引数のWebGLProgramオブジェクトのindexの位置にあるUniform変数についての情報を返す。戻り値は、size、type、nameプロパティを持つWebGLActiveInfoオブジェクトである。 |
gl.useProgram(WebGLProgram program ) |
現在のレンダリングのために指定されたWebGLProgramオブジェクトをアクティブにする。 |
gl.isProgram(WebGLProgram program ) |
programがまだ削除されていないWebGLProgramオブジェクトならtrueを返す。そうでなければfalseを返す。 |
gl.getProgramParameter(WebGLProgram program ,enum pname ) |
引数のWebGLProgramオブジェクトのパラメータ値を返す。nameとして指定できる有効な値は、gl.DELETE_STATUS 、gl.LINK_STATUS 、gl.VALIDATE_STATUS 、gl.ATTACHED_SHADERS 、gl.ACTIVE_UNIFORMS 、gl.ACTIVE_ATTRIBUTES である。 |
シェーダのuniform変数(頂点ごとに変化しない変数)を扱うための関数。
関数 | 説明 |
---|---|
gl.getUniformLocation(WebGLProgram program ,string name ) |
引数のWebGLProgramオブジェクトの指定された名前のUniform変数の位置を指すWebGLUniformLocationオブジェクトを返す。 |
gl.getUniform(WebGLProgram program ,WebGLUniformLocation location ) |
引数のWebGLProgramオブジェクトの指定されたlocationにあるUniform変数の値を返す。戻り値の型は、Uniform変数の型によって決まる。 |
gl.uniform[1234][fi](WebGLUniformLocation location ,... ) |
引数のWebGLProgramオブジェクトの指定されたlocationにあるUniform変数に値を設定する。 例: gl.uniform1i(location, 17); gl.uniform3f(location, 1.5, 2.3, 3.7); |
gl.uniform[1234][fi]v(WebGLUniformLocation location ,Array value ) |
現在のWebGLProgramオブジェクトの指定されたlocationにあるUniform変数の値を設定する。 例: gl.uniform3fv(location, new Float32Array([ 0.5, -2.0, 5.5, 6.2, 1.0, -2.5 ]); |
gl.uniformMatrix[234]fv(WebGLUniformLocation location ,boolean transpose ,Float32Array value ) |
現在のWebGLProgramオブジェクトの指定されたlocationにあるUniform行列値を設定する。 transpose引数には、falseを指定しなければならない。 必要なら、ロードする前に行列を手作業で転置する必要がある。 例: gl.uniformMatrix3fv(location, new Float32Array([ 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0 ]); |
シェーダのattribute変数(頂点毎に変化する、頂点に属する変数)を扱うための関数。
関数 | 説明 |
---|---|
gl.enableVertexAttribArray(uint index ) |
indexの位置の頂点属性を有効にする |
gl.disableVertexAttribArray(uint index ) |
indexの位置の頂点属性を無効にする。 |
gl.getAttribLocation(WebGLProgram program ,string name ) |
引数のプログラムで指定された名前を持つ頂点属性の位置を返す。 |
gl.bindAttribLocation(WebGLProgram program ,uint index ,string name ) |
引数のプログラムの指定されたindexに、nameという名前の頂点属性をバインドする。 |
gl.getVertexAttrib(uint index ,enum pname ) |
指定されたindexの位置の頂点属性についての情報を返す。pnameが指定するパラメータによって戻り値の型は変わる。pnameとして指定できる有効な値は、gl.VERTEX_ATTRIB_ARRAY_ENABLED 、gl.VERTEX_ATTRIB_ARRAY_SIZE 、gl.VERTEX_ATTRIB_ARRAY_STRIDE 、gl.VERTEX_ATTRIB_ARRAY_TYPE 、gl.VERTEX_ATTRIB_ARRAY_NORMALIZED 、gl.CURRENT_VERTEX_ATTRIB 、gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING である。 |
gl.getVertexAttribOffset(uint index ,enum pname ) |
指定されたindexの位置の頂点属性を指すポインタのアドレスを返す。pnameの値はgl.VERTEX_ATTRIB_ARRAY_POINTER でなければならない。 |
gl.vertexAttrib[1234]f(uint index ,... ) |
指定されたindexの位置の頂点属性に定数値を設定する。 例: gl.vertexAttrib3f(index, 2.3, 5.4, 1.5); |
gl.vertexAttrib[1234]fv(uint index ,Float32Array values ) |
指定されたindexの位置の頂点属性に定数値を設定する。 例: gl.vertexAttrib3fv(index, [2.3, 5.4, 1.5]); |
gl.vertexAttribPointer(uint index ,int size ,enum type ,boolean normalized ,int stride ,int offset ) |
指定されたindexの頂点属性に、現在バインドされているWebGLBufferを割り当てる。 size引数は、データの要素数を指定する。たとえば、vec3なら3になる。1、2、3、4のどれかでなければならない。 type引数は、データの型を指定し、 BYTE 、UNSIGNED_BYTE 、SHORT 、UNSIGNED_SHORT 、INT 、UNSIGNED_INT 、FLOAT のどれかでなければならない。 normalized引数は、値を[-1,1]の範囲に正規化すべきかどうかを指定する。 stride引数は、1つの頂点の先頭から次の頂点の先頭までのバイト数を指定する。データがタイトにパッキングされている場合は、0を指定してストライドを自動計算させることができる。 offsetは、先頭要素を指定する。 |
描画を扱う関数。
関数 | 説明 |
---|---|
gl.viewport(int x ,int y ,int width ,int height ) |
左上隅が(x, y)でサイズがwidth×heightの矩形をビューポートに設定する。ビューポートは、コンテンツがレンダリングされる領域である。 |
gl.drawArrays(enum mode ,int first ,int count ) |
現在バインドされているバッファの配列データからプリミティブをレンダリングする。countは、レンダリングする要素数を指定する。firstは、レンダリングする最初の要素を指定する。modeとして指定できる有効な値は、gl.POINTS 、gl.LINES 、gl.LINE_LOOP 、gl.LINE_STRIP 、gl.TRIANGLES 、gl.TRIANGLE_STRIP 、gl.TRIANGLE_FAN である。 |
gl.drawElements(enum mode ,int count ,enum type ,int offset ) |
現在バインドされているバッファからプリミティブを描画する。countは、レンダリングする要素数を指定する。offsetは、レンダリングする最初の要素を指定する。modeとして指定できる有効な値については、gl.drawArrays()の項を参照していただきたい。 |
gl.flush() | バッファリングされたWebGLコマンドをただちに実行する。 |
gl.finish() | すべてのWebGLコマンドが実行され、終了するまで制御を返さない。 |
テクスチャバッファ(二次元のピクセル情報)を操作する関数。
関数 | 説明 |
---|---|
gl.createTexture() | 新しいWebGLTextureオブジェクトを返す。 |
gl.deleteTexture(WebGLTexture texture ) |
指定されたWebGLTextureオブジェクトを削除する。 |
gl.bindTexture(enum target ,WebGLTexture texture ) |
引数のtargetに指定されたWebGLTextureオブジェクトをバインドする。targetとして指定できる有効な値は、gl.TEXTURE_2D 、gl.TEXTURE_CUBE_MAP である。 |
gl.activeTexture(enum texture ) |
指定されたテクスチャユニットをアクティブ化する。textureとして指定できる有効な値は、n = gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS として、gl.TEXTURE0 からgl.TEXTUREn までである。 |
gl.generateMipmap(enum target ) |
引数のtargetに現在バインドされているテクスチャのためにミップマップを生成する。targetとして指定できる有効な値は、gl.TEXTURE_2D とgl.TEXTURE_CUBE_MAP である。 |
gl.texImage2D(enum target ,int level ,enum internalformat ,int width ,int height ,int border ,enum format ,enum type ,ArrayBufferView pixels ) |
引数のtargetにバインドされたテクスチャにpixels配列のピクセルデータをロードする。targetとして指定できる有効な値は、gl.TEXTURE_2D 、gl.TEXTURE_CUBE_MAP_POSITIVE_X 、gl.TEXTURE_CUBE_MAP_NEGATIVE_X 、gl.TEXTURE_CUBE_MAP_POSITIVE_Y 、gl.TEXTURE_CUBE_MAP_NEGATIVE_Y 、gl.TEXTURE_CUBE_MAP_POSITIVE_Z 、gl.TEXTURE_CUBE_MAP_NEGATIVE_Z である。 format、internalformatとして指定できる有効な値は、 gl.ALPHA 、gl.RGB 、gl.RGBA 、gl.LUMINANCE 、gl.LUMINANCE_ALPHA である。 type引数は、pixelsにあるデータの型を示す。typeとして指定できる有効な値とtypeに対応する ArrayBufferView の型は、gl.UNSIGNED_BYTE(UInt8Array) 、gl.UNSIGNED_SHORT_4_4_4_4(UInt16Array) 、gl.UNSIGNED_SHORT_5_5_5_1(UInt16Array) 、gl.UNSIGNED_SHORT_5_6_5(UInt16Array) である。borderの値は0でなければならない。 levelの値は、ミップマップレベルを示す。0はもとのイメージを表す。 |
gl.texImage2D(enum target ,int level ,enum internalformat ,enum format ,enum type ,Object pixels ) |
引数のtargetにバインドされたテクスチャにpixelsオブジェクトのピクセルデータをロードする。 pixelsオブジェクトは、img要素、canvas要素、video要素、2Dキャンバスコンテキストのctx.getImageData()メソッドなどで作ったImageDataオブジェクトにすることができる。 ほかの引数については、gl.texImage2D()の項を参照していただきたい。 |
gl.texSubImage2D(enum target ,int level ,int xoffset ,int yoffset ,int width ,int height ,enum format ,enum type ,ArrayBufferView pixels ) |
引数のtargetにバインドされたテクスチャのサブリージョンにピクセルデータをロードする。 サブリージョンのサイズはwidth × heightである。 位置(xoffset,yoffset)は、サブリージョンの左上隅を指定する。 ほかの引数については、gl.texImage2D()の項を参照していただきたい。 |
gl.texSubImage2D(enum target ,int level ,int xoffset ,int yoffset ,enum format ,enum type ,Object pixels ) |
引数のtargetにバインドされたテクスチャのサブリージョンにピクセルデータをロードする。 位置(xoffset, yoffset)は、サブリージョンの左上隅を指定する。 pixelsオブジェクトは、img要素、canvas要素、video要素、2Dキャンバスコンテキストのctx.getImageData()メソッドなどで作ったImageDataオブジェクトにすることができる。 ほかの引数については、gl.texImage2D()の項を参照していただきたい。 |
gl.copyTexImage2D(enum target ,int level ,enum internalformat ,int x ,int y ,int width ,int height ,int border ) |
引数のtargetにバインドされたテクスチャにフレームバッファのイメージデータをコピーする。 ほかの引数については、gl.texImage2D()の項を参照していただきたい。 |
gl.copyTexSubImage2D(enum target ,int level ,int xoffset ,int yoffset ,int x ,int y ,int width ,int height ) |
引数のtargetにバインドされたテクスチャのサブリージョンにフレームバッファのイメージデータをコピーする。 ほかの引数については、gl.texSubImage2D()の項を参照していただきたい。 |
gl.isTexture(WebGLTexture texture ) |
テクスチャがgl.bindTexture()でターゲットにバインドされたWebGLTextureならtrueを返す。そうでなければfalseを返す。 |
gl.texParameterf(enum target ,enum pname ,float param ) gl.texParameteri( enum target ,enum pname ,int param ) |
引数のtargetにバインドされているテクスチャのためにテクスチャパラメータを設定する。 targetとして指定できる有効な値は、 gl.TEXTURE_2D とgl.TEXTURE_CUBE_MAP である。pnameとして指定できる値は、 gl.TEXTURE_MIN_FILTER (テクスチャが縮小される際の補完方法)、gl.TEXTURE_MAG_FILTER (テクスチャが拡大される際の補完方法)、gl.TEXTURE_WRAP_S (テクスチャx座標の範囲外の値に対する扱い方)、gl.TEXTURE_WRAP_T (テクスチャy座標の範囲外の値に対する扱い方)のいずれか。 pnameが gl.TEXTURE_MIN_FILTER なら、paramはgl.NEAREST 、gl.LINEAR 、gl.NEAREST_MIPMAP_NEAREST 、gl.LINEAR_MIPMAP_NEAREST 、gl.NEAREST_MIPMAP_LINEAR 、gl.LINEAR_MIPMAP_LINEAR のどれかでなければならない。 pnameが gl.TEXTURE_MAG_FILTER なら、paramはgl.NEAREST かgl.LINEAR でなければならない。 pnameが gl.TEXTURE_WRAP_S かgl.TEXTURE_WRAP_T なら、paramはgl.REPEAT 、gl.CLAMP_TO_EDGE 、gl.MIRRORED_REPEAT のどれかでなければならない。 |
gl.getTexParameter(enum target ,enum pname ) |
targetにバインドされているテクスチャのテクスチャパラメータを返す。pnameとして指定できる有効な値については、gl.texParameterf()、 gl.texParamereri() の項を参照。 |
ブレンディング(半透明の重ね合わせ)を操作する関数。
関数 | 説明 |
---|---|
gl.blendEquation(enum mode ) |
ブレンド式を設定する。modeとして指定できる有効な値は、gl.FUNC_ADD 、gl.FUNC_SUBTRACT 、gl.FUNC_REVERSE_SUBTRACT である。 |
gl.blendEquationSeparate(enum modeRGB ,enum modeAlpha ) |
RGBとアルファとで別々にブレンド式を設定する。modeとして指定できる有効な値については、gl.blendEquation()の項を参照。 |
gl.blendFunc(enum sfactor ,enum dfactor ) |
ソース、デスティネーションブレンドファクタを設定する。sfactor、dfactorとして指定できる有効な値は、gl.ZERO 、gl.ONE 、gl.SRC_COLOR 、gl.ONE_MINUS_SRC_COLOR 、gl.DST_COLOR 、gl.ONE_MINUS_DST_COLOR 、gl.SRC_ALPHA 、gl.ONE_MINUS_SRC_ALPHA 、gl.DST_ALPHA 、gl.ONE_MINUS_DST_ALPHA 、gl.CONSTANT_COLOR 、gl.ONE_MINUS_CONSTANT_COLOR 、gl.CONSTANT_ALPHA 、gl.ONE_MINUS_CONSTANT_ALPHA である。sfactorについては、 gl.SRC_ALPHA_SATURATE も使える。定数のアルファと定数の色を同時に使うことはできない。 |
gl.blendFuncSeparate(enum srcRGB ,enum dstRGB ,enum srcAlpha ,enum dstAlpha ) |
RGBとアルファとで別々にブレンドファクタを設定する。ソース、デスティネーションファクタとして指定できる有効な値については、gl.blendFunc()の項を参照。 |
gl.blendColor(float red ,float green ,float blue ,float alpha ) |
定数のブレンド色を設定する。 |
マスクの機能を持つステンシルバッファ(2次元のピクセル情報)を扱うための関数。
関数 | 説明 |
---|---|
gl.clearStencil(int s ) |
ステンシルバッファをクリアするときに使われるステンシルインデックスを設定する。 |
gl.stencilFunc(enum func ,int ref ,int mask ) |
ステンシルテストに使われる関数と参照値を設定する。関数として指定できる有効な値は、gl.NEVER 、gl.LESS 、gl.EQUAL 、gl.LEQUAL 、gl.GREATER 、gl.NOTEQUAL 、gl.GEQUAL 、gl.ALWAYS である。 |
gl.stencilFuncSeparate(enum face ,enum func ,int ref ,int mask ) |
前面に出ているポリゴンと背後に隠れているポリゴンとで別々にステンシル関数と参照値を設定する。faceとして指定できる有効な値は、gl.FRONT 、gl.BACK 、gl.FRONT_AND_BACK である。 |
gl.stencilMask(uint mask ) |
ステンシルバッファへの個々のビットの出力を制御するマスクを設定する。 |
gl.stencilMaskSeparate(enum face ,uint mask ) |
前面に出ているポリゴンと背後に隠れているポリゴンとで別々にステンシルマスクを設定する。faceとして指定できる有効な値については、gl.stencilFuncSeparate()の項を参照。 |
gl.stencilOp(enum fail ,enum zfail ,enum zpass ) |
ステンシルテストで使われる演算を設定する。failはステンシルテストが不合格になったときに使われる演算である。zfailは、ステンシルテストが合格になったものの深度テストが不合格になったときに使われる演算である。zpassは、両テストが合格になったときに使われる演算である。すべての引数について、指定できる有効な値は、gl.ZERO 、gl.KEEP 、gl.REPLACE 、gl.INCR 、gl.DECR 、gl.INVERT 、gl.INCR_WRAP 、gl.DECR_WRAP である。 |
gl.stencilOpSeparate(enum face ,enum fail ,enum zfail ,enum zpass ) |
前面に出ているポリゴンと背後に隠れているポリゴンとで別々にステンシルテスト演算を設定する。演算として指定できる有効な値については、See gl.stencilOp()の項を参照。 |
深度(頂点の奥行き)として機能する深度バッファ(2次元のピクセル情報)を扱うための関数。
関数 | 説明 |
---|---|
gl.depthFunc(enum func ) |
深度バッファ関数を設定する。funcとして指定できる有効な値は、gl.NEVER ,gl.LESS ,gl.EQUAL ,gl.LEQUAL ,gl.GREATER ,gl.NOTEQUAL ,gl.GEQUAL ,gl.ALWAYS である。 |
gl.depthMask(boolean flag ) |
深度バッファへの書き込みを有効/無効にする。 |
gl.depthRange(float zNear ,float zFar ) |
深度バッファの範囲を設定する。zNearの値は、zFarよりも小さくなければならない。 |
gl.clearDepth(float depth ) |
深度バッファをクリアするために使われる深度の値を設定する。 |
gl.polygonOffset(float factor ,float units ) |
深度を計算するために使われるスケーリングファクタとオフセット単位を設定する。 |
レンダリング結果(二次元のピクセル情報)を保持するレンダーバッファを扱う関数。 参考
関数 | 説明 |
---|---|
gl.createRenderbuffer() | 新しいWebGLRenderBufferオブジェクトを返す。 |
gl.deleteRenderbuffer(WebGLRenderbuffer renderbuffer ) |
引数のWebGLRenderBufferオブジェクトを削除する。 |
gl.bindRenderbuffer(enum target ,WebGLRenderbuffer renderbuffer ) |
指定されたtargetにWebGLRenderbufferオブジェクトをバインドする。 targetの値は、 gl.RENDERBUFFER でなければならない。 |
gl.renderbufferStorage(enum target ,enum internalformat ,int width ,int height ) |
現在バインドされているレンダリングバッファのためにデータストアを初期化する。 width、height引数は、レンダリングバッファのサイズを指定する。 internalformatとして指定できる有効な値は、 gl.RGBA4 、gl.RGB565 、gl.RGB5_A1 、gl.DEPTH_COMPONENT16 、gl.STENCIL_INDEX8 である。 |
gl.framebufferRenderbuffer(enum target ,enum attachment ,enum renderbuffertarget ,WebGLRenderbuffer renderbuffer ) |
targetに現在バインドされているフレームバッファに指定されたWebGLRenderbufferオブジェクトをアタッチする。 targetの値は、 gl.RENDERBUFFER でなければならない。renderbuffertargetの値は gl.RENDERBUFFER でなければならない。attachmentとして指定できる有効な値は、 gl.COLOR_ATTACHMENT0 、gl.DEPTH_ATTACHMENT 、gl.STENCIL_ATTACHMENT 、gl.DEPTH_STENCIL_ATTACHMENT である。 |
gl.isRenderbuffer(WebGLRenderbuffer renderbuffer ) |
renderbufferがgl.bindRenderBuffer()でバインドされたWebGLRenderBufferオブジェクトならtrueを返す。 そうでなければfalseを返す。 |
gl.getRenderbufferParameter(enum target ,enum pname ) |
現在バインドされているレンダリングバッファのパラメータを返す。 pnameとして指定できる有効な値は、 gl.RENDERBUFFER_WIDTH 、gl.RENDERBUFFER_HEIGHT 、gl.RENDERBUFFER_INTERNAL_FORMAT 、gl.RENDERBUFFER_RED_SIZE 、gl.RENDERBUFFER_GREEN_SIZE 、gl.RENDERBUFFER_BLUE_SIZE 、gl.RENDERBUFFER_ALPHA_SIZE 、gl.RENDERBUFFER_DEPTH_SIZE 、gl.RENDERBUFFER_STENCIL_SIZE である。 |
カラーバッファ、深度バッファ、ステンシルバッファをまとめたマネージャとして機能する、フレームバッファを扱う関数。 参考
関数 | 説明 |
---|---|
gl.createFramebuffer() | 新しいWebGLFramebufferオブジェクトを返す。 |
gl.deleteFramebuffer(WebGLFramebuffer framebuffer ) |
指定されたWebGLFramebufferオブジェクトを削除する。 |
gl.bindFramebuffer(enum target ,WebGLFramebuffer framebuffer ) |
引数のtargetに指定されたWebGLFramebufferオブジェクトをバインドする。targetは、gl.FRAMEBUFFERでなければならない。 |
gl.checkFramebufferStatus(enum target ) |
現在バインドされているフレームバッファの状態を返す。戻り値は、gl.FRAMEBUFFER_COMPLETE 、gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT 、gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT 、gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS 、gl.FRAMEBUFFER_UNSUPPORTED のなかのどれかである。 |
gl.isFramebuffer(WebGLFramebuffer framebuffer ) |
framebufferがgl.bindFrameBuffer()でバインドされたWebGLFramebufferオブジェクトならtrueを返す。 |
gl.framebufferTexture2D(enum target ,enum attachment ,enum textarget ,WebGLTexture texture ,int level ) |
現在バインドされているフレームバッファに指定されたWebGLTextureオブジェクトをアタッチする。attachmentとして指定できる有効な値については、gl.framebufferRenderbuffer()の項を参照。textargetとして指定できる有効な値はgl.TEXTURE_2D 、gl.TEXTURE_CUBE_MAP_POSITIVE_X 、gl.TEXTURE_CUBE_MAP_NEGATIVE_X 、gl.TEXTURE_CUBE_MAP_POSITIVE_Y 、gl.TEXTURE_CUBE_MAP_NEGATIVE_Y 、gl.TEXTURE_CUBE_MAP_POSITIVE_Z 、gl.TEXTURE_CUBE_MAP_NEGATIVE_Z である。levelは0でなければならない。 |
gl.getFramebufferAttachmentParameter(enum target ,enum attachment ,enum pname ) |
現在バインドされているフレームバッファのアタッチメントパラメータを返す。attachmentとして指定できる有効な値は、gl.COLOR_ATTACHMENT0 、gl.DEPTH_ATTACHMENT 、gl.STENCIL_ATTACHMENT である。 pnameとして指定できる有効な値は、 gl.FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE 、gl.FRAMEBUFFER_ATTACHMENT_OBJECT_NAME 、gl.FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL 、gl.FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE である。 |
gl.colorMask(boolean red ,boolean green ,boolean blue ,boolean alpha ) |
フレームバッファの赤、緑、青、アルファコンポーネントの書き込みを有効/無効にする。 |
gl.readPixels(int x ,int y ,int width ,int height ,enum format ,enum type ,ArrayBufferView pixels ) |
フレームバッファからピクセルデータを読み出す。x、y、width、heightは、読み出す矩形リージョンを指定する。formatはgl.RGBA でなければならない。typeはgl.UNSIGNED_BYTE でなければならない。ピクセルデータはpixels配列にロードされる。typeのgl.UNSIGNED_BYTE に合わせて、配列はUInt8Array型でなければならない。 |
gl.pixelStorei(enum pname ,any param ) |
ピクセルストレージモードを設定する。 paramのデータ型は、パラメータによって変わる。 pname が gl.PACK_ALIGNMENT かgl.UNPACK_ALIGNMENT なら、paramはintでなければならない。 pnameが gl.UNPACK_FLIP_Y_WEBGL かgl.UNPACK_PREMULTIPLY_ALPHA_WEBGL なら、paramはbooleanでなければならない。 pnameが gl.UNPACK_COLORSPACE_CONVERSION_WEBGL なら、paramは gl.BROWSER_DEFAULT_WEBGL かgl.NONE でなければならない。 |
関数 | 説明 |
---|---|
gl.enable(enum cap ) |
機能を有効にする。capとして指定できる有効な値は、gl.CULL_FACE 、 gl.BLEND 、 gl.DITHER 、 gl.STENCIL_TEST 、 gl.DEPTH_TEST 、 gl.SCISSOR_TEST 、 gl.POLYGON_OFFSET_FILL 、 gl.SAMPLE_ALPHA_TO_COVERAGE 、 gl.SAMPLE_COVERAGE である。 |
gl.disable(enum cap ) |
機能を無効にする。capとして指定できる値については、gl.enable()の項を参照。 |
gl.isEnabled(enum cap ) |
指定された機能が有効ならtrueを返す。そうでなければfalseを返す。capとして指定できる値については、gl.enable()の項を参照。 |
gl.cullFace(enum mode ) |
フェースカリングモードを設定する。modeとして指定できる有効な値は、gl.FRONT 、gl.BACK 、gl.FRONT_AND_BACK である。 |
gl.frontFace(enum mode ) |
フェースカリングで使われる回転方向を設定する。 modeとして指定できる有効な値は、gl.CW(右回り)とgl.CCW(左回り)である。 |
gl.clear(uint mask ) |
カラー、深度、ステンシルバッファをクリアする。maskは、どのバッファをクリアするかを指定するビットマスクである。 例: gl.clear( gl.DEPTH_BUFFER_BIT || gl.STENCIL_BUFFER_BIT || gl.COLOR_BUFFER_BIT ); |
gl.clearColor(float red ,float green ,float blue ,float alpha ) |
カラーバッファをクリアするために使う色を設定する。 |
gl.lineWidth(float width ) |
レンダリングされる線の太さを設定する。 |
gl.scissor(int x ,int y ,int width ,int height ) |
シザーボックスを設定する。x、yはシザーボックスの左上隅を指定する。width、heightはシザーボックスのサイズを指定する。 |
gl.sampleCoverage(float value ,boolean invert ) |
マルチサンプルカバレッジパラメータを設定する。invertは、カバレッジマスクを反転するかどうかを指定する。 |
gl.getError() | 最後に実行したWebGLコマンドのエラーステータスを示すenum値を返す。戻り値は、gl.INVALID_ENUM 、 gl.INVALID_VALUE 、gl.INVALID_OPERATION 、 gl.OUT_OF_MEMORY 、 gl.CONTEXT_LOST_WEBGL 、 gl.INVALID_FRAMEBUFFER_OPERATION のどれかになる。 |
gl.hint(enum target ,enum mode ) |
実装のヒントを設定する。targetは、 gl.GENERATE_MIPMAP_HINT でなければならない。modeとして指定できる有効な値は、gl.DONT_CARE 、 gl.FASTEST 、 gl.NICEST である。 |
gl.getSupportedExtensions() | サポートされているエクステンションを示す文字列配列を返す。 |
gl.getExtension(string name ) |
nameというエクステンションがサポートされていればオブジェクトを返す。そうでなければ、nullを返す。 |
gl.getContextAttributes() | webglコンテキストを作成したときに指定されたWebGLContextAttributesを返す。 |
gl.isContextLost() | たとえばモバイルデバイスで電源イベントが発生したなどの理由でwebglコンテキストが失われ、作り直さなければならない場合は、trueを返す。 |
gl.getParameter(enum pname ) |
pnameという名前のWebGLパラメータの値を返す。 |
gl.getParameter()メソッドでアクセスできるパラメータ。
パラメータ名 | 説明 |
---|---|
gl.ACTIVE_TEXTURE | アクティブなテクスチャユニットを示すint値。gl.activeTexture()を参照。 |
gl.ALIASED_LINE_WIDTH_RANGE | エイリアス化された線の太さとしてサポートされている最小値と最大値の2つの要素を持つFloat32Array。 |
gl.ALIASED_POINT_SIZE_RANGE | エイリアス化された点のサイズとしてサポートされている最小値と最大値の2つの要素を持つFloat32Array。 |
gl.ALPHA_BITS | 現在のカラーバッファのアルファビットプレーンの数。 |
gl.ARRAY_BUFFER_BINDING | 現在gl.ARRAY_BUFFERターゲットにバインドされているWebGLBufferオブジェクト。gl.bindBuffer()を参照。 |
gl.BLEND | ブレンディングが有効かどうかを示す論理値。gl.enable()を参照。 |
gl.BLEND_COLOR | ブレンドカラーの赤、緑、青、アルファコンポーネントの4つの要素を持つFloat32Array。gl.blendColor()を参照。 |
gl.BLEND_DST_ALPHA | デスティネーションアルファブレンド関数のenum値。gl.blendFuncSeparate()を参照。 |
gl.BLEND_DST_RGB | デスティネーションRGBブレンド関数のenum値。 gl.blendFuncSeparate()を参照。 |
gl.BLEND_EQUATION_ALPHA | アルファブレンド式のenum値。gl.blendFuncSeparate()を参照。 |
gl.BLEND_EQUATION_RGB | RGBブレンド式のenum値。gl.blendFuncSeparate()を参照。 |
gl.BLEND_SRC_ALPHA | ソースアルファブレンド関数のenum値。gl.blendFuncSeparate()を参照。 |
gl.BLEND_SRC_RGB | ソースRGBブレンド関数のenum値。gl.blendFuncSeparate()を参照。 |
gl.BLUE_BITS | 現在のカラーバッファの青ビットプレーンの数。 |
gl.COLOR_CLEAR_VALUE | カラーバッファをクリアするために使われる色の赤、緑、青、アルファコンポーネントの4つの要素を持つFloat32Array。 gl.clearColor()を参照。 |
gl.COLOR_WRITEMASK | カラーバッファの赤、緑、青、アルファコンポーネントへの書き込みが有効かどうかを示す4個の論理値の配列。gl.ColorMask()を参照。 |
gl.COMPRESSED_TEXTURE_FORMATS | WebGLは圧縮されたテクスチャ形式をサポートしないので、常にnull。 |
gl.CULL_FACE | フェースカリングが有効になっているかどうかを示す論理値。gl.enable()を参照。 |
gl.CULL_FACE_MODE | 現在のフェースカリングモードを表すenum値。gl.cullFace()を参照。 |
gl.CURRENT_PROGRAM | アクティブなWebGLProgramオブジェクト。gl.useProgram() |
を参照。 | |
gl.DEPTH_BITS | 現在の深度バッファのビットプレーンの数。 |
gl.DEPTH_CLEAR_VALUE | 深度バッファをクリアするために使われる深度値を示す浮動小数点数。gl.clearDepth()を参照。 |
gl.DEPTH_FUNC | 深度比較関数のenum値。gl.depthFunc()を参照。 |
gl.DEPTH_RANGE | 深度バッファの深度の範囲を示す2つの要素を持つFloat32Array。gl.depthRange()を参照。 |
gl.DEPTH_TEST | 深度テストが有効になっているかどうかを示す論理値。gl.enable()を参照。 |
gl.DEPTH_WRITEMASK | 深度バッファへの書き込みが有効になっているかどうかを示す論理値。gl.depthMask()を参照。 |
gl.DITHER | フラグメントディザが有効になっているかどうかを示す論理値。gl.enable()を参照。 |
gl.ELEMENT_ARRAY_BUFFER_BINDING | 現在gl.ELEMENT_ARRAY_BUFFERターゲットにバインドされているWebGLBufferオブジェクト。gl.bindBuffer()を参照。 |
gl.FRAMEBUFFER_BINDING | 現在バインドされているWebGLFramebufferオブジェクト。gl.bindFramebuffer()を参照。 |
gl.FRONT_FACE | 三角形ワインディング方向を示すenum値。gl.frontFace()を参照。 |
gl.GENERATE_MIPMAP_HINT | ミップマップ生成ヒントモードのenum値。gl.hint()を参照。 |
gl.GREEN_BITS | 現在のカラーバッファの緑ビットプレーンの数。 |
gl.LINE_WIDTH | 現在の線の太さを示すfloat値。gl.lineWidth()を参照。 |
gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS | 結合された頂点シェーダとフラグメントシェーダでサポートされている最大のテクスチャユニット。少なくとも8以上になる。 |
gl.MAX_CUBE_MAP_TEXTURE_SIZE | 最大のキューブマップテクスチャサイズの概算値。少なくとも16以上になる。 |
gl.MAX_FRAGMENT_UNIFORM_VECTORS | フラグメントシェーダの4要素Uniform変数の最大数。少なくとも16以上になる。 |
gl.MAX_RENDERBUFFER_SIZE | レンダリングバッファでサポートされている最大の幅と高さ。少なくとも1以上になる。 |
gl.MAX_TEXTURE_IMAGE_UNITS | フラグメントシェーダでサポートされている最大のテクスチャユニット。少なくとも8以上になる。 |
gl.MAX_TEXTURE_SIZE | 最大のテクスチャサイズの概算値。少なくとも64以上になる。 |
gl.MAX_VARYING_VECTORS | 頂点、フラグメントシェーダの4要素Varying変数の最大数。少なくとも8以上になる。 |
gl.MAX_VERTEX_ATTRIBS | 頂点シェーダの4要素頂点属性の最大数。少なくとも8以上になる。 |
gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS | 頂点シェーダでサポートされる最大のテクスチャユニット。0になることがあり得る。 |
gl.MAX_VERTEX_UNIFORM_VECTORS | 頂点シェーダの4要素Uniform変数の最大数。少なくとも128以上になる。 |
gl.MAX_VIEWPORT_DIMS | ビューポートの幅と高さの最大値という2つの要素を持つInt32Array。 |
gl.NUM_COMPRESSED_TEXTURE_FORMATS | WebGLは圧縮されたテクスチャ形式をサポートしないので、常にnull。 |
gl.PACK_ALIGNMENT | メモリにピクセルデータを書き込むときに使われるバイトアラインメントを示すint値。gl.pixelStorei()を参照。 |
gl.POLYGON_OFFSET_FACTOR | ポリゴンオフセットで使われるfloatのスケーリングファクタ。gl.polygonOffset()を参照。 |
gl.POLYGON_OFFSET_FILL | ポリゴンオフセットモードがフィルモードで有効になっているかどうかを示す論理値。gl.enable()を参照。 |
gl.POLYGON_OFFSET_UNITS | 定数の深度オフセットを作るために使われるfloat値。gl.polygonOffset()を参照。 |
gl.RED_BITS | 現在のカラーバッファの赤ビットプレーンの数。 |
gl.RENDERBUFFER_BINDING | 現在バインドされているWebGLRenderbufferオブジェクト。gl.bindRenderbuffer()を参照。 |
gl.RENDERER | レンダラの名前の文字列。 |
gl.SAMPLE_BUFFERS | 現在のフレームバッファに与えられたサンプルバッファの数を示すint値。 |
gl.SAMPLE_COVERAGE_INVERT | カバレッジ値を反転すべきかどうかを示す論理値。 gl.sampleCoverage()を参照。 |
gl.SAMPLE_COVERAGE_VALUE | 現在のカバレッジ値を示すfloat値。gl.sampleCoverage()を参照。 |
gl.SAMPLES | 現在のフレームバッファのカバレッジマスクサイズを示すint値。 |
gl.SCISSOR_BOX | 現在のシザーボックスのx、y、width、heightの4つの要素を持つInt32Array。gl.scissor()を参照。 |
gl.SCISSOR_TEST | シザーテストが有効になっているかどうかを示す論理値。gl.enable()を参照。 |
gl.SHADING_LANGUAGE_VERSION | 実装が使っているシェーダ言語のバージョンを示す文字列。例: WebGL GLSL ES 1.0 |
gl.STENCIL_BACK_FAIL | ステンシルテストが不合格になったときに、背後に隠れているポリゴンのために使われる演算を示すenum値。gl.stencilOpSeparate()を参照。 |
gl.STENCIL_BACK_FUNC | 背後に隠れているポリゴンのために使われる比較関数を示すenum値。gl.stencilFuncSeparate()を参照。 |
gl.STENCIL_BACK_PASS_DEPTH_FAIL | ステンシルテストが合格になったものの深度テストが不合格になったときに、背後に隠れているポリゴンのために使われる演算を示すenum値。gl.stencilOpSeparate()を参照。 |
gl.STENCIL_BACK_PASS_DEPTH_PASS | ステンシルテストと深度テストの両方が合格になったときに、背後に隠れているポリゴンのために使われる演算を示すenum値。gl.stencilOpSeparate()を参照。 |
gl.STENCIL_BACK_REF | 背後に隠れているポリゴンのために使われる参照値。gl.stencilFuncSeparate()を参照。 |
gl.STENCIL_BACK_VALUE_MASK | 背後に隠れているポリゴンが比較の前に参照値とステンシルバッファをマスクするために使うintのマスク。gl.stencilFuncSeparate()を参照。 |
gl.STENCIL_BACK_WRITEMASK | 背後に隠れているポリゴンのための書き込みを制御するintのマスク。gl.stencilMaskSeparate()を参照。 |
gl.STENCIL_BITS | ステンシルバッファのビットプレーンの数。 |
gl.STENCIL_CLEAR_VALUE | ステンシルバッファをクリアするために使われるintのインデックス値。gl.clearStencil()を参照。 |
gl.STENCIL_FAIL | ステンシルテストが不合格になったときに、前面に出ているポリゴンのために使われる演算を示すenum値。gl.stencilOpSeparate()を参照。 |
gl.STENCIL_FUNC | 前面に出ているポリゴンのために使われる比較関数を示すenum値。gl.stencilFuncSeparate()を参照。 |
gl.STENCIL_PASS_DEPTH_FAIL | ステンシルテストが合格になったものの深度テストが不合格になったときに、前面に出ているポリゴンのために使われる演算を示すenum値。gl.stencilOpSeparate()を参照。 |
gl.STENCIL_PASS_DEPTH_PASS | ステンシルテストと深度テストの両方が合格になったときに、前面に出ているポリゴンのために使われる演算を示すenum値。gl.stencilOpSeparate()を参照。 |
gl.STENCIL_REF | 前面に出ているポリゴンのために使われる参照値。gl.stencilFuncSeparate()を参照。 |
gl.STENCIL_TEST | ステンシルテストが有効になっているかどうかを示す論理値。gl.enable()を参照。 |
gl.STENCIL_VALUE_MASK | 前面に出ているポリゴンが比較の前に参照値とステンシルバッファをマスクするために使うintのマスク。gl.stencilFuncSeparate()を参照。 |
gl.STENCIL_WRITEMASK | 前面に出ているポリゴンのための書き込みを制御するintのマスク。gl.stencilMaskSeparate()を参照。 |
gl.SUBPIXEL_BITS | サブピクセルビットの数の概算値。少なくとも4以上になる。 |
gl.TEXTURE_BINDING_2D | 現在gl.TEXTURE_2DターゲットにバインドされているWebGLTextureオブジェクト。gl.bindTexture()を参照。 |
gl.TEXTURE_BINDING_CUBE_MAP | 現在gl.TEXTURE_CUBE_MAPターゲットにバインドされているWebGLTextureオブジェクト。gl.bindTexture()を参照。 |
gl.UNPACK_ALIGNMENT | メモリからピクセルデータを読み出すときに使われるバイトアラインメントを示すint値。gl.pixelStorei()を参照。 |
gl.UNPACK_COLORSPACE_CONVERSION_WEBGL | イメージデータをロードするときに使われるカラースペース変換を示すenum値。初期状態では、gl.BROWSER_DEFAULT_WEBGLになっている。gl.pixelStorei()を参照。 |
gl.UNPACK_FLIP_Y_WEBGL | テクスチャイメージデータが縦軸に沿って反転しているかどうかを示す論理値。gl.pixelStorei()を参照。 |
gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL | イメージデータをロードするときに、アルファチャネルがRGBチャネルに掛け合わされるかどうかを示す論理値。gl.pixelStorei()を参照。 |
gl.VENDOR | 実装に責任を負う企業名の文字列。 |
gl.VERSION | 実装で使われているWebGLバージョンを示す文字列。例:WebGL 1.0 |
gl.VIEWPORT | 現在のビューポートのx、y、width、heightという4つの要素を持つInt32Array。gl.viewport()を参照。 |