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

• WebGLRenderingContext
• WebGL2RenderingContext (en-US)
• WebGLActiveInfo (en-US)
• WebGLBuffer (en-US)
• WebGLContextEvent (en-US)
• WebGLFramebuffer (en-US)
• WebGLProgram (en-US)
• WebGLQuery (en-US)
• WebGLRenderbuffer (en-US)
• WebGLSampler (en-US)
• WebGLShader (en-US)
• WebGLShaderPrecisionFormat (en-US)
• WebGLSync (en-US)
• WebGLTexture (en-US)
• WebGLTransformFeedback (en-US)
• WebGLUniformLocation (en-US)
• WebGLVertexArrayObject (en-US)

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

• webglcontextlost (en-US)
• webglcontextrestored (en-US)
• webglcontextcreationerror (en-US)

• WebGL の定数
• WebGL の型

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

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

"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 model view projection

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

Matrix math for the web

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

• Khronos WebGL サイト: Khronos Group の WebGL についてのメインサイト
• WebGL Fundamentals: WebGL の基礎と、基本的なチュートリアルがあります。
• Raw WebGL: An introduction to WebGL Nick Desaulniers による、 WebGL の基本的な部分を紹介する講演です。
• WebGL playground: 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コードのエラーを探し、有益な情報を提供するのに役立ちます。

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

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

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

webgl.min_capability_mode

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

webgl.disable_extensions

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

• キャンバス
• WebGL 拡張の互換性情報 (en-US)