WebGL: ウェブの 2D および 3D グラフィック

リファレンス

標準インターフェイス

• WebGLRenderingContext
• WebGL2RenderingContext
• WebGLActiveInfo
• WebGLBuffer
• WebGLContextEvent
• WebGLFramebuffer
• WebGLProgram
• WebGLQuery
• WebGLRenderbuffer
• WebGLSampler
• WebGLShader
• WebGLShaderPrecisionFormat
• WebGLSync
• WebGLTexture
• WebGLTransformFeedback
• WebGLUniformLocation
• WebGLVertexArrayObject

拡張機能

• ANGLE_instanced_arrays
• EXT_blend_minmax
• EXT_color_buffer_float
• EXT_color_buffer_half_float
• EXT_disjoint_timer_query
• EXT_float_blend Experimental
• EXT_frag_depth
• EXT_shader_texture_lod
• EXT_sRGB
• EXT_texture_compression_bptc
• EXT_texture_compression_rgtc
• EXT_texture_filter_anisotropic
• EXT_texture_norm16
• KHR_parallel_shader_compile
• OES_draw_buffers_indexed
• OES_element_index_uint
• OES_fbo_render_mipmap
• OES_standard_derivatives
• OES_texture_float
• OES_texture_float_linear
• OES_texture_half_float
• OES_texture_half_float_linear
• OES_vertex_array_object
• OVR_multiview2
• WEBGL_color_buffer_float
• WEBGL_compressed_texture_astc
• WEBGL_compressed_texture_etc
• WEBGL_compressed_texture_etc1
• WEBGL_compressed_texture_pvrtc
• WEBGL_compressed_texture_s3tc
• WEBGL_compressed_texture_s3tc_srgb
• WEBGL_debug_renderer_info
• WEBGL_debug_shaders
• WEBGL_depth_texture
• WEBGL_draw_buffers
• WEBGL_lose_context
• WEBGL_multi_draw

イベント

• webglcontextlost
• webglcontextrestored
• webglcontextcreationerror

定数と型

• WebGL の定数
• WebGL の型

WebGL 2

WebGL 2 は WebGL2RenderingContext インターフェイスによって提供される、WebGL の大規模なアップデートです。これは OpenGL ES 3.0 に基づいており、以下の新機能を含みます。

• 3D テクスチャ、
• Sampler オブジェクト、
• Uniform Buffer オブジェクト、
• Sync オブジェクト、
• Query オブジェクト、
• Transform Feedback オブジェクト、
• WebGL 2 のコア機能に昇格した拡張: Vertex Array オブジェクト、インスタンス化、複数のレンダリングターゲット、fragment depth。

"WebGL 2 lands in Firefox" のブログ記事や、webglsamples.org/WebGL2Samples のデモもご覧ください。

ガイドとチュートリアル

下記に、WebGL の概念を学習するのに役立つガイド一式とステップ毎のレッスンや例のあるチュートリアルがあります。

ガイド

WebGL でのデータ

変数、バッファ、その他の WebGL コードを書く時に使うデータタイプのガイド

WebGL のベストプラクティス

WebGL のコンテンツの品質、パフォーマンス、信頼性を改善するためのヒントと提案です

拡張機能

WebGL で利用可能な拡張機能の使用方法です

チュートリアル

WebGL チュートリアル

WebGL のコアコンセプトに関する、ビギナー向けのガイドです。WebGL の経験がない場合におすすめするガイドです

例

基本的な 2D WebGL アニメーションの例

この例では、単一色の形状のシンプルなアニメーションをデモします。検査するトピックはアスペクト比の違いや、複数のシェーダーの集合からシェーダープログラムを生成する機能や、WebGL での描画の基本を扱います

WebGL by example

WebGL のコンセプトと機能を紹介する短い解説付きのライブサンプルのシリーズです。サンプルはトピックと難易度に応じて分類されており、WebGL レンダリングコンテキスト、シェーダープログラミング、テクスチャ、ジオメトリー、ユーザー操作などをカバーしています。

高度なチュートリアル

圧縮テクスチャ形式

メモリー性能向上のための圧縮テクスチャ形式の有効化と使用方法です。

WebGL のモデル、ビュー、投影

3D オブジェクトビューを表現するためによく使用する 3 つの主要な行列 (モデル行列、ビュー行列、プロジェクション行列) について、詳しく説明します

ウェブの行列計算

3D 変換行列がどのように働くか、およびウェブ (WebGL の演算や、CSS 座標変換) でどのように使用できるかのガイドです

リソース

• Khronos WebGL サイト: Khronos Group の WebGL についてのメインサイト
• WebGL Fundamentals: WebGL の基礎と、基本的なチュートリアルがあります。
• Raw WebGL: An introduction to WebGL Nick Desaulniers による、 WebGL の基本的な部分を紹介する講演です。
• WebGL Academy: WebGL プログラミングの基礎を学ぶチュートリアルがある、 HTML/JavaScript エディターです。
• WebGL Stats: さまざまなプラットフォームのブラウザーについて、WebGL の機能性の状況を示すサイトです。

ライブラリー

• three.js はオープンソースでフル機能の 3D WebGL ライブラリーです。
• Babylon.js は、パワフルで単純、かつオープンなゲームおよび 3D レンダリングエンジンで、分かりやすい JavaScript フレームワークにまとめられています。
• Pixi.js は、高速でオープンソースの 2D WebGL レンダラーです。
• Phaser は、キャンバスや WebGL を使ったブラウザーゲームのための、高速で、無料で、楽しいオープンソースのフレームワークです。
• PlayCanvas は、オープンソースのゲームエンジンです。
• glMatrix は、高性能な WebGL アプリケーションのための JavaScript の行列およびベクトルライブラリーです。
• twgl は、webgl の冗長性を減らすためのライブラリーです。
• RedGL は、オープンソースの 3D WebGL ライブラリです。
• vtk.js は、ブラウザー上で科学的な可視化を行うための JavaScript ライブラリーです。
• webgl-lint は、 WebGL コードのエラーを探し、有益な情報を提供するのに役立ちます。

仕様書

ブラウザーの互換性

api.WebGLRenderingContext

api.WebGL2RenderingContext

互換性に関する注記

ブラウザーだけでなく、GPU も機能をサポートしていなければなりません。よって、例えば S3 Texture Compression (S3TC) は Tegra ベースのタブレットでしか使用できません。ほとんどのブラウザーでは WebGL コンテキストを、コンテキスト名 webgl で作成しますが、古いブラウザーでは experimental-webgl も必要です。さらに将来の WebGL 2 では完全な下位互換性があり、コンテキスト名 webgl2 を持ちます。

Gecko に関するメモ

WebGL のデバッグおよびテスト

Firefox では、テストなどの目的で WebGL の機能を制限する 2 つの設定項目があります。

webgl.min_capability_mode

この論理属性に true を指定すると、最小互換性モードが有効となります。このモードでは、必要最低限の機能セットと WebGL の仕様で指定された機能のみが使用可能です。このモードで動作確認を行うことにより、より多くの閲覧環境での動作を保証することができます。初期値は false です。

webgl.disable_extensions

この論理属性に true を指定すると、すべての WebGL 拡張が無効になります。初期値は false です。

関連情報

• キャンバス
• WebGL 拡張の互換性情報