付録 B WebGL Reference
B.1 WebGL APIリファレンス この付録は WebGL JavaScript APIのすべての関数 その引数 戻り値を簡単にし API の概要を示す WebGLとOpenGL ES 2 APIの詳細は http://www.khronos.org/registry/ webgl/specs/1.0/ のWebGL 仕様書 http://www.khronos.org/registry/gles/ のOpenGL ES 2 仕様書を直接参照していただきたい リストB.1には canvas 要素を作ってWebGLコンテキストを手に入れるための概要を示してある リスト B.1 WebGL コンテキストを作る // canvas 要素を作る var canvas = document.createelement("canvas"; // キャンバスをドキュメントに追加する document.body.appendchild(canvas; // いくつかのパラメータを設定する var parms = { alpha : true, stencil : false, antialias : true, }; // webgl コンテキストを作る // 注意 : "webgl" がサポートされるまでは "experimental-webgl" を使う var gl = canvas.getcontext("webgl", parms; 表 B-1 には 指定できるパラメータをまとめてある ブラウザは alpha premultipliedalpha preservedrawingbufferパラメータだけをサポートすればよいことに注意しよう 表 B-1 WebGL パラメータ パラメータデフォルト alpha true 描画バッファのアルファチャネルを有効にする depth true サポートされていてtrueなら深度バッファが有効にな る stencil false サポートされていてtrueならステンシルバッファが有 効になる B-2
( 表 B-1 続き antialias false サポートされていてtrueなら実装固有のテクニックを 使ったアンチエイリアスが有効になる premultipliedalpha true trueなら描画バッファの乗算済みアルファが有効にな る preservedrawingbuffer false サポートされていてtrueなら 明示的にクリアされる まで描画バッファは維持される データ型 WebGLは 複数の数値型を含め OpenGL ESで使われているデータ型を引き継いでいる これらの数値型は JavaScriptならすべてnumber 型で表現されるものだ この付録でほかのデータ型が使われているのは 関数が期待している型を示しているだけである 表 B-2には この付録で使われるデータ型をまとめてある 文字列 オブジェクト 数値のほか WebGLはさまざまな値のためにシンボル定数も使っている これらは webglコンテキストオブジェクトの大文字プロパティになっているので見分けられる この付録では enumデータ型を使ってそれらの定数を参照する 表 B-2 データ型 型名 enum int uint float WebGLの列挙値 たとえば gl.buffer_size 符号付き整数値符号なし整数値浮動小数点数値 表 B-2 のデータ型は WebGL 仕様に記述されているものを単純化したものである しかし 一般にこれらの型は JavaScript では number 型に変換されるので これらの型について気にする必要はない B-3
型付き配列 WebGLは さまざまなデータ型を処理するために新しい型付き配列オブジェクトを使っている 型付き配列の詳細は http://www.khronos.org/registry/typedarray/specs/latest/ の仕様書を参照していただきたい 表 B-3 には ここで使う配列型をまとめてある 表 B-3 型付き配列 型 Uint16Array Uint32Array Int32Array Float32Array 符号なし 16 ビット整数値符号なし 32 ビット整数値符号付き 32 ビット整数値 32ビット浮動小数点数値 バッファ関数 表 B-4には バッファオブジェクトの作成 削除 データの設定に関係のある関数をまとめてある 表 B-4 バッファ関数 関数 gl.createbuffer( gl.deletebuffer( WebGLBuffer buffer gl.bindbuffer( WebGLBuffer buffer 新しい WebGLBuffer オブジェクトを作って返す WebGLBuffer オブジェクトを削除する 引数のtargetにWebGLBufferをバインドする targetとして指定できる有効な値は gl.array_bufferと gl.element_array_bufferである B-4
( 表 B-4 続き gl.bufferdata( Object data, enum usage gl.bufferdata( uint size, enum usage gl.buffersubdata( Object data, enum usage gl.getbufferparameter( enum pname gl.isbuffer( WebGLBuffer buffer 引数のtargetにバインドされたWebGLBufferオブジェクトのデータを保存する 第 2 引数は ArrayBufferオブジェクト ArrayBufferViewオブジェクト データの初期サイズを示す ulong 値のどれかを指定できる usageとして指定できる有効な値は gl.stream_draw gl. STATIC_DRAW gl.dynamic_drawである targetにバインドされたバッファオブジェクトのデータストアのサブセクションを更新する data 引数は ArrayBuffer ArrayBufferViewオブジェクトのどちらかを指定できる usageとして指定できる有効な値は gl.stream_draw gl.static_draw gl.dynamic_drawである 引数の target にバインドされたバッファオブジェクトのパラメータの値を返す name として指定できる有効な値は gl.buffer_ SIZE gl.buffer_usage である バッファが WebGLObject で gl.bindbuffer( ですでにターゲットにバインドされているときに true を返す B-5
シェーダ る 表 B-5 には シェーダオブジェクトの作成 削除 コンパイルに関連する関数をまとめてあ 表 B-5 シェーダ関数 関数 gl.createshader( enum type gl.deleteshader( WebGLShader shader gl.shadersource( WebGLShader shader, string source gl.getshadersource( WebGLShader shader gl.compileshader( WebGLShader shader gl.getshaderinfolog( WebGLShader shader gl.isshader( WebGLShader shader gl.getshaderparameter( WebGLShader shader, enum pname 新しいWebGLShaderオブジェクトを返す typeとして指定できる有効な値は gl.fragment_shaderと gl.vertex_shaderである 引数の WebGLShader オブジェクトを削除する 削除ステータスは gl.delete_status パラメータに保存される 引数の WebGLShader オブジェクトに GLSL ソースコードを設定する 引数の WebGLShader オブジェクトの GLSL ソースコードを string として返す WebGLShader オブジェクトをコンパイルする 引数の WebGLShader オブジェクトの情報ログ ( コンパイルエラーを含む を string として返す シェーダがまだ削除されていない WebGLShader オブジェクトなら true を返す そうでなければ fale を返す 引数の WebGLShader オブジェクトのパラメータ値を返す pname として指定できる有効な値は gl.shader_type gl.delete_ STATUS gl.compile_status である B-6
プログラムオブジェクト 表 B-6 には プログラムオブジェクトの作成 削除 リンクに関連する関数をまとめてある 表 B-6 プログラムオブジェクト関数 関数 gl.createprogram( gl.deleteprogram( WebGLProgram program gl.linkprogram( WebGLProgram program gl.getprograminfolog( WebGLProgram program gl.validateprogram( WebGLProgram program gl.attachshader( WebGLProgram program, WebGLShader shader gl.detachshader( WebGLProgram program, WebGLShader shader gl.getattachedshaders( WebGLProgram program gl.getactiveattrib( WebGLProgram program, uint index 新しい WebGLProgram オブジェクトを作って返す 引数の WebGLProgram オブジェクトを削除する 削除ステータスは gl.delete_status パラメータに保存される 引数の WebGLProgram オブジェクトをリンクし プログラマブル頂点 フラグメントプロセッサの実行可能コードを作る ステータスは gl.link_status パラメータに保存される 引数の WebGLProgram オブジェクトの情報ログ ( リンカエラーを含む を文字列として返す 引数の WebGLProgram オブジェクトをバリデートし ステータスを gl.validate_status パラメータに保存する 引数の WebGLProgram オブジェクトに WebGLShader オブジェクトをアタッチする アタッチされたシェーダの数は gl.attached_ SHADERS パラメータに保存される 引数の WebGLProgram オブジェクトから WebGLShader オブジェクトをデタッチする 引数の WebGLProgram オブジェクトにアタッチされている WebGLShader オブジェクトを格納する配列を返す 引数のWebGLProgramオブジェクトのindexの位置にある頂点属性についての情報を返す 戻り値は size type nameプロパティを持つ WebGLActiveInfo オブジェクトである B-7
( 表 B-6 続き gl.getactiveuniform( WebGLProgram program, uint index gl.useprogram( WebGLProgram program gl.isprogram( WebGLProgram program gl.getprogramparameter( WebGLProgram program, enum pname 引数のWebGLProgramオブジェクトのindexの位置にある Uniform 変数についての情報を返す 戻り値は size type nameプロパティを持つ WebGLActiveInfo オブジェクトである 現在のレンダリングのために指定された WebGLProgram オブジェクトをアクティブにする program がまだ削除されていない WebGLProgram オブジェクトなら true を返す そうでなければ false を返す 引数のWebGLProgramオブジェクトのパラメータ値を返す nameとして指定できる有効な値は gl.delete_status g l. L I N K _ S T A T U S g l. V A L I D A T E _ S T A T U S gl. ATTACHED_ SHADERS gl. ACTIVE_ UNIFORMS gl.active_attributesである Uniform 変数 表 B-7 には Uniform 変数へのアクセス 値の設定に関連する関数をまとめてある 表 B-7 Uniform 変数関数 関数 gl.getuniformlocation( WebGLProgram program, string name gl.getuniform( WebGLProgram program, WebGLUniformLocation location gl.uniform[1234][fi]( WebGLUniformLocation location,... 引数の WebGLProgram オブジェクトの指定された名前の Uniform 変数の位置を指す WebGLUniformLocation オブジェクトを返す 引数の WebGLProgram オブジェクトの指定された location にある Uniform 変数の値を返す 戻り値の型は Uniform 変数の型によって決まる 引数のWebGLProgramオブジェクトの指定された locationにあるuniform 変数に値を設定する 例 : gl.uniform1i(location, 17; gl.uniform3f(location, 1.5, 2.3, 3.7; B-8
( 表 B-7 続き gl.uniform[1234][fi]v( WebGLUniformLocation location, Array value gl.uniformmatrix[234]fv( WebGLUniformLocation location, boolean transpose, Float32Array value 現在のWebGLProgramオブジェクトの指定された locationにあるuniform 変数の値を設定する 例 : gl.uniform3fv(location, new Float32Array([ 0.5, -2.0, 5.5, 6.2, 1.0, -2.5 ]; 現在の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 ]; 頂点属性 表 B-8には 頂点属性を有効にしたり 値を設定したりすることに関連する関数をまとめてある 表 B-8 頂点属性関数 関数 gl.enablevertexattribarray( uint index gl.disablevertexattribarray( uint index index の位置の頂点属性を有効にする index の位置の頂点属性を無効にする B-9
( 表 B-8 続き gl.getattriblocation( WebGLProgram program, string name gl.bindattriblocation( WebGLProgram program, uint index, string name gl.getvertexattrib( uint index, enum pname gl.getvertexattriboffset( uint index, enum pname gl.vertexattrib[1234]f( uint index,... gl.vertexattrib[1234]fv( uint index, Float32Array values gl.vertexattribpointer( uint index, int size, enum type, boolean normalized, int stride, int offset 引数のプログラムで指定された名前を持つ頂点属性の位置を返す 引数のプログラムの指定された index に name という名前の頂点属性をバインドする 指定された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である 指定された index の位置の頂点属性を指すポインタのアドレスを返す pname の値は gl.vertex_attrib_array_ POINTER でなければならない 指定されたindexの位置の頂点属性に定数値を設定する 例 : gl.vertexattrib3f(index, 2.3, 5.4, 1.5; 指定されたindexの位置の頂点属性に定数値を設定する 例 : gl.vertexattrib3fv(index, [2.3, 5.4, 1.5]; 指定された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は 先頭要素を指定する B-10
描画 表 B-9 には canvas 要素にジオメトリを描画することに関連する関数をまとめてある 表 B-9 描画関数 関数 gl.viewport( int x, int y, int width, int height gl.drawarrays( enum mode, int first, int count gl.drawelements( enum mode, int count, enum type, int offset gl.flush( gl.finish( 左上隅が (x, y でサイズがwidth heightの矩形をビューポートに設定する ビューポートは コンテンツがレンダリングされる領域である 現在バインドされているバッファの配列データからプリミティブをレンダリングする countは レンダリングする要素数を指定する firstは レンダリングする最初の要素を指定する modeとして指定できる有効な値は gl.points gl.lines gl.line_loop gl.line_strip gl.triangles gl. TRIANGLE_STRIP gl.triangle_fanである 現在バインドされているバッファからプリミティブを描画する countは レンダリングする要素数を指定する offsetは レンダリングする最初の要素を指定する modeとして指定できる有効な値については gl.drawarrays( の項を参照していただきたい バッファリングされた WebGL コマンドをただちに実行する すべての WebGL コマンドが実行され 終了するまで制御を返さない B-11
テクスチャ 表 B-10 には テクスチャの作成 削除 ロードに関連する関数をまとめてある 表 B-10 テクスチャ関数 関数 gl.createtexture( gl.deletetexture( WebGLTexture texture gl.bindtexture( WebGLTexture texture gl.activetexture( enum texture gl.generatemipmap( enum target gl.teximage2d( int level, enum internalformat, int width, int height, int border, enum format, enum type, ArrayBufferView pixels 新しい WebGLTexture オブジェクトを返す 指定された WebGLTexture オブジェクトを削除する 引数の target に指定された WebGLTexture オブジェクトをバインドする target として指定できる有効な値は gl.texture_ 2D gl.texture_cube_map である 指定されたテクスチャユニットをアクティブ化する texture として指定できる有効な値は n = gl.max_combined_texture_ IMAGE_UNITS として gl.texture0 から gl.texturen までである 引数の target に現在バインドされているテクスチャのためにミップマップを生成する target として指定できる有効な値は gl.texture_2d と gl.texture_cube_map である 引数の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 はもとのイメージを表す B-12
( 表 B-10 続き gl.teximage2d( int level, enum internalformat, enum format, enum type, Object pixels gl.texsubimage2d( int level, int xoffset, int yoffset, int width, int height, enum format, enum type, ArrayBufferView pixels gl.texsubimage2d( int level, int xoffset, int yoffset, enum format, enum type, Object pixels gl.copyteximage2d( int level, enum internalformat, int x, int y, int width, int height, int border 引数のtargetにバインドされたテクスチャにpixelsオブジェクトのピクセルデータをロードする pixelsオブジェクトは img 要素 canvas 要素 video 要素 2Dキャンバスコンテキストのctx.getImageData( メソッドなどで作ったImageDataオブジェクトにすることができる ほかの引数については gl.teximage2d( の項を参照していただきたい 引数のtargetにバインドされたテクスチャのサブリージョンにピクセルデータをロードする サブリージョンのサイズは width height である 位置 (xoffset, yoffset は サブリージョンの左上隅を指定する ほかの引数については gl.teximage2d( の項を参照していただきたい 引数のtargetにバインドされたテクスチャのサブリージョンにピクセルデータをロードする 位置 (xoffset, yoffset は サブリージョンの左上隅を指定する pixelsオブジェクトは img 要素 canvas 要素 video 要素 2Dキャンバスコンテキストのctx.getImageData( メソッドなどで作ったImageDataオブジェクトにすることができる ほかの引数については gl.teximage2d( の項を参照していただきたい 引数のtargetにバインドされたテクスチャにフレームバッファのイメージデータをコピーする ほかの引数については gl.teximage2d( の項を参照していただきたい B-13
( 表 B-10 続き gl.copytexsubimage2d( int level, int xoffset, int yoffset, int x, int y, int width, int height gl.istexture( WebGLTexture texture gl.texparameterf( enum pname, float param gl.texparameteri( enum pname, int param gl.gettexparameter( enum pname 引数のtargetにバインドされたテクスチャのサブリージョンにフレームバッファのイメージデータをコピーする ほかの引数については gl.texsubimage2d( の項を参照していただきたい テクスチャが gl.bindtexture( でターゲットにバインドされた WebGLTexture なら true を返す そうでなければ false を返す 引数のtargetにバインドされているテクスチャのためにテクスチャパラメータを設定する targetとして指定できる有効な値は gl.texture_2dとgl. TEXTURE_CUBE_MAPである 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_MIN_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のどれかでなければならない targetにバインドされているテクスチャのテクスチャパラメータを返す pname として指定できる有効な値については gl.texparameter [fi]( の項 B-14
ブレンド 表 B-11 には ブレンド式 関数に関連する関数をまとめてある 表 B-11 ブレンド関数 関数 gl.blendequation( enum mode gl.blendequationseparate( enum modergb, enum modealpha gl.blendfunc( enum sfactor, enum dfactor gl.blendfuncseparate( enum srcrgb, enum dstrgb, enum srcalpha, enum dstalpha gl.blendcolor( float red, float green, float blue, float alpha ブレンド式を設定する modeとして指定できる有効な値は gl.func_add gl.func_ SUBTRACT gl.func_reverse_subtractである RGBとアルファとで別々にブレンド式を設定する modeとして指定できる有効な値については gl.blendequation( の項 ソース デスティネーションブレンドファクタを設定する 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も使える 定数のアルファと定数の色を同時に使うことはできない RGBとアルファとで別々にブレンドファクタを設定する ソース デスティネーションファクタとして指定できる有効な値については gl.blendfunc( の項 定数のブレンド色を設定する B-15
ステンシルバッファ 表 B-12 には ステンシルバッファの関数 演算の設定に関連する関数をまとめてある 表 B-12 ステンシルバッファ関数 関数 gl.clearstencil( int s gl.stencilfunc( enum func, int ref, int mask gl.stencilfuncseparate( enum face, enum func, int ref, int mask gl.stencilmask( uint mask gl.stencilmaskseparate( enum face, uint mask gl.stencilop( enum fail, enum zfail, enum zpass ステンシルバッファをクリアするときに使われるステンシルインデックスを設定する ステンシルテストに使われる関数と参照値を設定する 関数として指定できる有効な値は gl.never gl.less gl. EQUAL gl.lequal gl.greater gl.notequal gl. GEQUAL gl.alwaysである 前面に出ているポリゴンと背後に隠れているポリゴンとで別々にステンシル関数と参照値を設定する faceとして指定できる有効な値は gl.front gl.back gl.front_and_backである ステンシルバッファへの個々のビットの出力を制御するマスクを設定する 前面に出ているポリゴンと背後に隠れているポリゴンとで別々にステンシルマスクを設定する faceとして指定できる有効な値については gl.stencilfuncseparate( の項 ステンシルテストで使われる演算を設定する failはステンシルテストが不合格になったときに使われる演算である zfailは ステンシルテストが合格になったものの深度テストが不合格になったときに使われる演算である zpassは 両テストが合格になったときに使われる演算である すべての引数について 指定できる有効な値は gl.zero gl. KEEP gl.replace gl.incr gl.decr gl.invert gl.incr_wrap gl.decr_wrapである B-16
( 表 B-12 続き gl.stencilopseparate( enum face, enum fail, enum zfail, enum zpass 前面に出ているポリゴンと背後に隠れているポリゴンとで別々にステンシルテスト演算を設定する 演算として指定できる有効な値については See gl.stencilop( の項 深度バッファ 表 B-13 には 深度バッファの値の設定に関連した関数をまとめてある 表 B-13 深度バッファ関数 関数 gl.depthfunc( enum func gl.depthmask( boolean flag gl.depthrange( float znear, float zfar gl.cleardepth( float depth gl.polygonoffset( float factor, float units 深度バッファ関数を設定する funcとして指定できる有効な値は gl.never, gl.less, gl.equal, gl.lequal, gl.greater, gl.notequal, gl.gequal, and gl.always である 深度バッファへの書き込みを有効 / 無効にする 深度バッファの範囲を設定する znearの値は zfarよりも小さくなければならない 深度バッファをクリアするために使われる深度の値を設定する 深度を計算するために使われるスケーリングファクタとオフセット単位を設定する レンダリングバッファ 表 B-14 には レンダリングバッファの作成 削除 利用に関連する関数をまとめてある B-17
表 B-14 レンダリングバッファ関数 関数 gl.createrenderbuffer( gl.deleterenderbuffer( WebGLRenderbuffer renderbuffer gl.bindrenderbuffer( WebGLRenderbuffer renderbuffer gl.renderbufferstorage( enum internalformat, int width, int height gl.framebufferrenderbuffer( enum attachment, enum renderbuffertarget, WebGLRenderbuffer renderbuffer gl.isrenderbuffer( WebGLRenderbuffer renderbuffer gl.getrenderbufferparameter( enum pname 新しい WebGLRenderBuffer オブジェクトを返す 引数の WebGLRenderBuffer オブジェクトを削除する 指定されたtargetにWebGLRenderbuffer オブジェクトをバインドする targetの値は gl.renderbufferでなければならない 現在バインドされているレンダリングバッファのためにデータストアを初期化する width height 引数は レンダリングバッファのサイズを指定する internalformat として指定できる有効な値は gl. RGBA4 gl.rgb565 gl.rgb5_a1 gl.depth_ COMPONENT16 gl.stencil_index8である targetに現在バインドされているフレームバッファに指定されたwebglrenderbufferオブジェクトをアタッチする targetの値は gl.renderbufferでなければならない renderbuffertargetの値はgl.renderbuffer でなければならない attachment として指定できる有効な値は gl.color_ ATTACHMENT0 gl. DEPTH_ ATTACHMENT gl.stencil_attachment gl.depth_stencil_ ATTACHMENTである renderbuffer が gl.bindrenderbuffer( でバインドされた WebGLRenderBuffer オブジェクトなら true を返す そうでなければ false を返す 現在バインドされているレンダリングバッファのパラメータを返す 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である B-18
フレームバッファ 表 B-15 には フレームバッファの作成 削除 利用に関連する関数をまとめてある 表 B-15 フレームバッファ関数 関数 gl.createframebuffer( gl.deleteframebuffer( WebGLFramebuffer framebuffer gl.bindframebuffer( WebGLFramebuffer framebuffer gl.checkframebufferstatus( enum target gl.isframebuffer( WebGLFramebuffer framebuffer gl.framebuffertexture2d( enum attachment, enum textarget, WebGLTexture texture, int level 新しい WebGLFramebuffer オブジェクトを返す 指定された WebGLFramebuffer オブジェクトを削除する 引数の target に指定された WebGLFramebuffer オブジェクトをバインドする target は gl.framebuffer でなければならない 現在バインドされているフレームバッファの状態を返す 戻り値は gl.framebuffer_complete gl.framebuffer_incomplete_attachment gl.framebuffer_incomplete_missing_ ATTACHMENT gl.framebuffer_incomplete_ DIMENSIONS gl.framebuffer_unsupportedのなかのどれかである framebuffer が gl.bindframebuffer( でバインドされた WebGLFramebuffer オブジェクトなら true を返す 現在バインドされているフレームバッファに指定された 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 でなければならない B-19
( 表 B-15 続き gl.getframebufferattachmentparameter( enum attachment, enum pname 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 gl.pixelstorei( enum pname, any param 現在バインドされているフレームバッファのアタッチメントパラメータを返す 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である フレームバッファの赤 緑 青 アルファコンポーネントの書き込みを有効 / 無効にする フレームバッファからピクセルデータを読み出す x y width heightは 読み出す矩形リージョンを指定する formatはgl.rgbaでなければならない typeは gl.unsigned_byteでなければならない ピクセルデータはpixels 配列にロードされる typeの gl.unsigned_byteに合わせて 配列はUInt8Array 型でなければならない ピクセルストレージモードを設定する 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でなければならない B-20
その他の関数 表 B-16 には 今までの分類に収まらない関数がまとめられている 表 B-16 その他の関数 関数 gl.enable( enum cap gl.disable( enum cap gl.isenabled( enum cap gl.cullface( enum mode gl.frontface( enum mode gl.clear( uint mask gl.clearcolor( float red, float green, float blue, float alpha 機能を有効にする 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 である 機能を無効にする cap として指定できる値については gl.enable( の項 指定された機能が有効なら true を返す そうでなければ false を返す cap として指定できる値については gl.enable( の項 フェースカリングモードを設定する modeとして指定できる有効な値は gl.front gl.back gl.front_and_backである フェースカリングで使われる回転方向を設定する modeとして指定できる有効な値は gl.cw( 右回り とgl.CCW ( 左回り である カラー 深度 ステンシルバッファをクリアする maskは どのバッファをクリアするかを指定するビットマスクである 例 : gl.clear( gl.depth_buffer_bit gl.stencil_buffer_bit gl.color_buffer_bit ; カラーバッファをクリアするために使う色を設定する B-21
( 表 B-16 続き gl.linewidth( float width gl.scissor( int x, int y, int width, int height gl.samplecoverage( float value, boolean invert gl.geterror( gl.hint( enum mode gl.getsupportedextensions( gl.getextension( string name gl.getcontextattributes( gl.iscontextlost( gl.getparameter( enum pname レンダリングされる線の太さを設定する シザーボックスを設定する x yはシザーボックスの左上隅を指定する width height はシザーボックスのサイズを指定する マルチサンプルカバレッジパラメータを設定する invertは カバレッジマスクを反転するかどうかを指定する 最後に実行したWebGLコマンドのエラーステータスを示すenum 値を返す 戻り値は gl.invalid_enum gl.invalid_value gl. INVALID_ OPERATION gl. OUT_ OF_ MEMORY gl.context_lost_webgl gl.invalid_framebuffer_ OPERATIONのどれかになる 実装のヒントを設定する targetは gl.generate_mipmap_hintでなければならない modeとして指定できる有効な値は gl.dont_care gl.fastest gl.nicestである サポートされているエクステンションを示す文字列配列を返す name というエクステンションがサポートされていればオブジェクトを返す そうでなければ null を返す webgl コンテキストを作成したときに指定された WebGLContextAttributes を返す たとえばモバイルデバイスで電源イベントが発生したなどの理由で webgl コンテキストが失われ 作り直さなければならない場合は true を返す pname という名前の WebGL パラメータの値を返す 有効な pname の値は 表 B-17 B-22
パラメータ 表 B-17 には gl.getparameter( メソッドでアクセスできるパラメータをまとめてある 表 B-17 パラメータ パラメータ名 gl.active_texture gl.aliased_line_ WIDTH_RANGE gl.aliased_point_ SIZE_RANGE gl.alpha_bits gl.array_buffer_ BINDING gl.blend gl.blend_color gl.blend_dst_alpha gl.blend_dst_rgb gl.blend_equation_ ALPHA gl.blend_equation_rgb gl.blend_src_alpha gl.blend_src_rgb gl.blue_bits gl.color_clear_value アクティブなテクスチャユニットを示す int 値 表 B-10 の gl.activetexture( エイリアス化された線の太さとしてサポートされている最小値と最大値の 2 つの要素を持つ Float32Array エイリアス化された点のサイズとしてサポートされている最小値と最大値の 2 つの要素を持つ Float32Array 現在のカラーバッファのアルファビットプレーンの数 現在 gl.array_buffer ターゲットにバインドされている WebGLBuffer オブジェクト 表 B-4 の gl.bindbuffer( ブレンディングが有効かどうかを示す論理値 表 B-16 の gl.enable( ブレンドカラーの赤 緑 青 アルファコンポーネントの 4 つの要素を持つ Float32Array 表 B-11 の gl.blendcolor( デスティネーションアルファブレンド関数の enum 値 表 B-11 の gl.blendfuncseparate( デスティネーション RGB ブレンド関数の enum 値 表 B-11 の gl.blendfuncseparate( アルファブレンド式の enum 値 表 B-11 の gl.blendfuncseparate( RGB ブレンド式の enum 値 表 B-11 の gl.blendfuncseparate( ソースアルファブレンド関数の enum 値 表 B-11 の gl.blendfuncseparate( ソース RGB ブレンド関数の enum 値 表 B-11 の gl.blendfuncseparate( 現在のカラーバッファの青ビットプレーンの数 カラーバッファをクリアするために使われる色の赤 緑 青 アルファコンポーネントの 4 つの要素を持つ Float32Array 表 B-16 の gl.clearcolor( B-23
( 表 B-17 続き gl.color_writemask gl.compressed_ TEXTURE_FORMATS カラーバッファの赤 緑 青 アルファコンポーネントへの書き込みが有効かどうかを示す 4 個の論理値の配列 表 B-15 の gl.colormask( WebGL は圧縮されたテクスチャ形式をサポートしないので 常に null gl.cull_face フェースカリングが有効になっているかどうかを示す論理値 表 B-16 の gl.enable( gl.cull_face_mode gl.current_program gl.depth_bits gl.depth_clear_value gl.depth_func 現在のフェースカリングモードを表す enum 値 表 B-16 の gl.cullface( アクティブな WebGLProgram オブジェクト 表 B-6 の gl.useprogram( 現在の深度バッファのビットプレーンの数 深度バッファをクリアするために使われる深度値を示す浮動小数点数 表 B-13 の gl.cleardepth( 深度比較関数の enum 値 B-13 の gl.depthfunc( gl.depth_range 深度バッファの深度の範囲を示す 2 つの要素を持つ Float32Array B-13 の gl.depthrange( gl.depth_test gl.depth_writemask gl.dither gl.element_array_ BUFFER_BINDING gl.framebuffer_ BINDING gl.front_face gl.generate_mipmap_ HINT gl.green_bits gl.line_width gl.max_combined_ TEXTURE_IMAGE_UNITS 深度テストが有効になっているかどうかを示す論理値 表 B-16 の gl.enable( 深度バッファへの書き込みが有効になっているかどうかを示す論理値 表 B-13 の gl.depthmask( フラグメントディザが有効になっているかどうかを示す論理値 表 B-16 の gl.enable( 現在 gl.element_array_buffer ターゲットにバインドされている WebGLBuffer オブジェクト 表 B-4 の gl.bindbuffer( 現在バインドされている WebGLFramebuffer オブジェクト 表 B-15 の gl.bindframebuffer( 三角形ワインディング方向を示す enum 値 表 B-16 の gl.frontface( ミップマップ生成ヒントモードの enum 値 表 B-16 の gl.hint( 現在のカラーバッファの緑ビットプレーンの数 現在の線の太さを示す float 値 表 B-16 の gl.linewidth( 結合された頂点シェーダとフラグメントシェーダでサポートされている最大のテクスチャユニット 少なくとも 8 以上になる B-24
( 表 B-17 続き gl.max_cube_map_ TEXTURE_SIZE gl.max_fragment_ UNIFORM_VECTORS gl.max_renderbuffer_ SIZE gl.max_texture_image_ UNITS gl.max_texture_size gl.max_varying_ VECTORS gl.max_vertex_attribs gl.max_vertex_ TEXTURE_IMAGE_UNITS gl.max_vertex_ UNIFORM_VECTORS 最大のキューブマップテクスチャサイズの概算値 少なくとも 16 以上になる フラグメントシェーダの 4 要素 Uniform 変数の最大数 少なくとも 16 以上になる レンダリングバッファでサポートされている最大の幅と高さ 少なくとも 1 以上になる フラグメントシェーダでサポートされている最大のテクスチャユニット 少なくとも 8 以上になる 最大のテクスチャサイズの概算値 少なくとも 64 以上になる 頂点 フラグメントシェーダの 4 要素 Varying 変数の最大数 少なくとも 8 以上になる 頂点シェーダの 4 要素頂点属性の最大数 少なくとも 8 以上になる 頂点シェーダでサポートされる最大のテクスチャユニット 0 になることがあり得る 頂点シェーダの 4 要素 Uniform 変数の最大数 少なくとも 128 以上になる gl.max_viewport_dims ビューポートの幅と高さの最大値という 2 つの要素を持つ Int32Array gl.num_compressed_ TEXTURE_FORMATS gl.pack_alignment gl.polygon_offset_ FACTOR gl.polygon_offset_ FILL gl.polygon_offset_ UNITS gl.red_bits gl.renderbuffer_ BINDING gl.renderer gl.sample_buffers WebGL は圧縮されたテクスチャ形式をサポートしないので 常に null メモリにピクセルデータを書き込むときに使われるバイトアラインメントを示す int 値 表 B-15 の gl.pixelstorei( ポリゴンオフセットで使われる float のスケーリングファクタ 表 B-13 の gl.polygonoffset( ポリゴンオフセットモードがフィルモードで有効になっているかどうかを示す論理値 表 B-16 の gl.enable( 定数の深度オフセットを作るために使われる float 値 表 B-13 の gl.polygonoffset( 現在のカラーバッファの赤ビットプレーンの数 現在バインドされている WebGLRenderbuffer オブジェクト 表 B-14 の gl.bindrenderbuffer( レンダラの名前の文字列 現在のフレームバッファに与えられたサンプルバッファの数を示す int 値 B-25
( 表 B-17 続き gl.sample_coverage_ INVERT gl.sample_coverage_ VALUE カバレッジ値を反転すべきかどうかを示す論理値 表 B-16 の gl.samplecoverage( 現在のカバレッジ値を示す float 値 表 B-16 の gl.samplecoverage( gl.samples 現在のフレームバッファのカバレッジマスクサイズを示す int 値 gl.scissor_box gl.scissor_test gl.shading_language_ VERSION gl.stencil_back_fail 現在のシザーボックスの x y width height の 4 つの要素を持つ Int32Array 表 B-16 の gl.scissor( シザーテストが有効になっているかどうかを示す論理値 表 B-16 の gl.enable( 実装が使っているシェーダ言語のバージョンを示す文字列 例 : WebGL GLSL ES 1.0 ステンシルテストが不合格になったときに 背後に隠れているポリゴンのために使われる演算を示す enum 値 表 B-12 の gl.stencilopseparate( gl.stencil_back_func 背後に隠れているポリゴンのために使われる比較関数を示す enum 値 表 B-12 の gl.stencilfuncseparate( gl.stencil_back_pass_ DEPTH_FAIL gl.stencil_back_pass_ DEPTH_PASS gl.stencil_back_ref gl.stencil_back_ VALUE_MASK gl.stencil_back_ WRITEMASK gl.stencil_bits gl.stencil_clear_ VALUE gl.stencil_fail gl.stencil_func ステンシルテストが合格になったものの深度テストが不合格になったときに 背後に隠れているポリゴンのために使われる演算を示す enum 値 表 B-12 の gl.stencilopseparate( ステンシルテストと深度テストの両方が合格になったときに 背後に隠れているポリゴンのために使われる演算を示す enum 値 表 B-12 の gl.stencilopseparate( 背後に隠れているポリゴンのために使われる参照値 表 B-12 の gl.stencilfuncseparate( 背後に隠れているポリゴンが比較の前に参照値とステンシルバッファをマスクするために使う int のマスク 表 B-12 の gl.stencilfuncseparate( 背後に隠れているポリゴンのための書き込みを制御する int のマスク 表 B-12 の gl.stencilmaskseparate( ステンシルバッファのビットプレーンの数 ステンシルバッファをクリアするために使われる int のインデックス値 表 B-12 の gl.clearstencil( ステンシルテストが不合格になったときに 前面に出ているポリゴンのために使われる演算を示す enum 値 表 B-12 の gl.stencilopseparate( 前面に出ているポリゴンのために使われる比較関数を示す enum 値 表 B-12 の gl.stencilfuncseparate( B-26
( 表 B-17 続き gl.stencil_pass_ DEPTH_FAIL gl.stencil_pass_ DEPTH_PASS gl.stencil_ref ステンシルテストが合格になったものの深度テストが不合格になったときに 前面に出ているポリゴンのために使われる演算を示す enum 値 表 B-12 の gl.stencilopseparate( ステンシルテストと深度テストの両方が合格になったときに 前面に出ているポリゴンのために使われる演算を示す enum 値 表 B-12 の gl.stencilopseparate( 前面に出ているポリゴンのために使われる参照値 表 B-12 の gl.stencilfuncseparate( gl.stencil_test ステンシルテストが有効になっているかどうかを示す論理値 表 B-16 の gl.enable( gl.stencil_value_mask gl.stencil_writemask gl.subpixel_bits gl.texture_binding_2d gl.texture_binding_ CUBE_MAP gl.unpack_alignment gl.unpack_colorspace_ CONVERSION_WEBGL gl.unpack_flip_y_ WEBGL gl.unpack_ PREMULTIPLY_ALPHA_ WEBGL gl.vendor 前面に出ているポリゴンが比較の前に参照値とステンシルバッファをマスクするために使う int のマスク 表 B-12 の gl.stencilfuncseparate( 前面に出ているポリゴンのための書き込みを制御する int のマスク 表 B-12 の gl.stencilmaskseparate( サブピクセルビットの数の概算値 少なくとも 4 以上になる 現在 gl.texture_2d ターゲットにバインドされている Web GLTexture オブジェクト 表 B-10 の gl.bindtexture( 現在 gl.texture_cube_map ターゲットにバインドされている WebGLTexture オブジェクト 表 B-10 の gl.bindtexture( メモリからピクセルデータを読み出すときに使われるバイトアラインメントを示す int 値 表 B-15 の gl.pixelstorei( イメージデータをロードするときに使われるカラースペース変換を示す enum 値 初期状態では gl.browser_default_webgl になっている 表 B-15 の gl.pixelstorei( テクスチャイメージデータが縦軸に沿って反転しているかどうかを示す論理値 表 B-15 の gl.pixelstorei( イメージデータをロードするときに アルファチャネルが RGB チャネルに掛け合わされるかどうかを示す論理値 表 B-15 の gl.pixelstorei( 実装に責任を負う企業名の文字列 gl.version 実装で使われている WebGL バージョンを示す文字列 例 :WebGL 1.0 gl.viewport 現在のビューポートの x y width height という 4 つの要素を持つ Int32Array 表 B-9 の gl.viewport( B-27