path: root/files/ja/web/api/webgl_api/index.html

---
title: 'WebGL: ウェブの 2D および 3D グラフィック'
slug: Web/API/WebGL_API
tags:
  - 3D
  - 3D Graphics
  - Advanced
  - Graphics
  - Media
  - Overview
  - WebGL
  - WebGL API
translation_of: Web/API/WebGL_API
---
<div>{{WebGLSidebar}}</div>

<div class="summary">
<p><span class="seoSummary">WebGL (Web Graphics Library) は、互換性があるウェブブラウザーでプラグインを使用せずにインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API です。HTML5 {{HTMLElement("canvas")}} 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより、WebGL を実現します。</span>これにより、ユーザーの端末が提供するハードウェアのグラフィックアクセラレーションを API で利用することが可能になります。</p>
</div>

<p>WebGL は <a href="/ja/Firefox" title="Firefox 4 for developers">Firefox</a> 4 以降、<a href="https://www.google.com/chrome/">Google Chrome</a> 9 以降、<a href="https://www.opera.com/">Opera</a> 12 以降、<a href="https://www.apple.com/jp/safari/">Safari</a> 5.1 以降、<a href="http://windows.microsoft.com/ja-jp/internet-explorer/browser-ie">Internet Explorer</a> 11 以降、<a href="https://www.microsoft.com/ja-jp/edge">Microsoft Edge</a> build 10240 以降でサポートしていますが、ユーザーの端末がこの機能をサポートするハードウェアであることも必要です。</p>

<p>{{HTMLElement("canvas")}} 要素は、ウェブページで 2D グラフィックスを表示する <a href="/ja/docs/Web/API/Canvas_API">Canvas 2D</a> でも使用します。</p>

<p>ウェブページ上の 2D グラフィックを実現するには、 {{HTMLElement("canvas")}} 要素で <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> を使用する方法もあります。</p>

<h2 id="Reference" name="Reference">リファレンス</h2>

<h3 id="Standard_interfaces" name="Standard_interfaces">標準インターフェイス</h3>

<div class="index">
<ul>
 <li>{{domxref("WebGLRenderingContext")}}</li>
 <li>{{domxref("WebGL2RenderingContext")}}</li>
 <li>{{domxref("WebGLActiveInfo")}}</li>
 <li>{{domxref("WebGLBuffer")}}</li>
 <li>{{domxref("WebGLContextEvent")}}</li>
 <li>{{domxref("WebGLFramebuffer")}}</li>
 <li>{{domxref("WebGLProgram")}}</li>
 <li>{{domxref("WebGLQuery")}}</li>
 <li>{{domxref("WebGLRenderbuffer")}}</li>
 <li>{{domxref("WebGLSampler")}}</li>
 <li>{{domxref("WebGLShader")}}</li>
 <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
 <li>{{domxref("WebGLSync")}}</li>
 <li>{{domxref("WebGLTexture")}}</li>
 <li>{{domxref("WebGLTransformFeedback")}}</li>
 <li>{{domxref("WebGLUniformLocation")}}</li>
 <li>{{domxref("WebGLVertexArrayObject")}}</li>
</ul>
</div>

<h3 id="Extension_interfaces" name="Extension_interfaces">拡張機能</h3>

<div class="index">
<ul>
 <li>{{domxref("ANGLE_instanced_arrays")}}</li>
 <li>{{domxref("EXT_blend_minmax")}}</li>
 <li>{{domxref("EXT_color_buffer_float")}}</li>
 <li>{{domxref("EXT_color_buffer_half_float")}}</li>
 <li>{{domxref("EXT_disjoint_timer_query")}}</li>
 <li>{{domxref("EXT_float_blend")}} {{experimental_inline}}</li>
 <li>{{domxref("EXT_frag_depth")}}</li>
 <li>{{domxref("EXT_sRGB")}}</li>
 <li>{{domxref("EXT_shader_texture_lod")}}</li>
 <li>{{domxref("EXT_texture_compression_bptc")}}</li>
 <li>{{domxref("EXT_texture_compression_rgtc")}}</li>
 <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
 <li>{{domxref("OES_element_index_uint")}}</li>
 <li>{{domxref("OES_fbo_render_mipmap")}}</li>
 <li>{{domxref("OES_standard_derivatives")}}</li>
 <li>{{domxref("OES_texture_float")}}</li>
 <li>{{domxref("OES_texture_float_linear")}}</li>
 <li>{{domxref("OES_texture_half_float")}}</li>
 <li>{{domxref("OES_texture_half_float_linear")}}</li>
 <li>{{domxref("OES_vertex_array_object")}}</li>
 <li>{{domxref("OVR_multiview2")}}</li>
 <li>{{domxref("WEBGL_color_buffer_float")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_astc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li>
 <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
 <li>{{domxref("WEBGL_debug_shaders")}}</li>
 <li>{{domxref("WEBGL_depth_texture")}}</li>
 <li>{{domxref("WEBGL_draw_buffers")}}</li>
 <li>{{domxref("WEBGL_lose_context")}}</li>
</ul>
</div>

<h3 id="Events" name="Events">イベント</h3>

<ul>
 <li>{{domxref("HTMLCanvasElement/webglcontextlost_event", "webglcontextlost")}}</li>
 <li>{{domxref("HTMLCanvasElement/webglcontextrestored_event", "webglcontextrestored")}}</li>
 <li>{{domxref("HTMLCanvasElement/webglcontextcreationerror_event", "webglcontextcreationerror")}}</li>
</ul>

<h3 id="Constants_and_types" name="Constants_and_types">定数と型</h3>

<ul>
 <li><a href="/ja/docs/Web/API/WebGL_API/Constants">WebGL の定数</a></li>
 <li><a href="/ja/docs/Web/API/WebGL_API/Types">WebGL の型</a></li>
</ul>

<h3 id="WebGL_2" name="WebGL_2">WebGL 2</h3>

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

<ul>
 <li><a href="/ja/docs/Web/API/WebGL2RenderingContext/texImage3D">3D テクスチャ</a>、</li>
 <li><a href="/ja/docs/Web/API/WebGLSampler">Sampler object</a>、</li>
 <li><a href="/ja/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Uniform Buffer object</a>、</li>
 <li><a href="/ja/docs/Web/API/WebGLSync">Sync object</a>、</li>
 <li><a href="/ja/docs/Web/API/WebGLQuery">Query object</a>、</li>
 <li><a href="/ja/docs/Web/API/WebGLTransformFeedback">Transform Feedback object</a>、</li>
 <li>WebGL 2 のコア機能に昇格した拡張: <a href="/ja/docs/Web/API/WebGLVertexArrayObject">Vertex Array object</a>、<a href="/ja/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instancing</a>、<a href="/ja/docs/Web/API/WebGL2RenderingContext/drawBuffers">Multiple Render Targets</a>、<a href="/ja/docs/Web/API/EXT_frag_depth">fragment depth</a>。</li>
</ul>

<p><a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> のブログ記事や、<a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> のデモもご覧ください。</p>

<h2 id="Guides_and_tutorials" name="Guides_and_tutorials">ガイドとチュートリアル</h2>

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

<h3 id="Guides" name="Guides">ガイド</h3>

<dl>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Data">WebGL でのデータ</a></dt>
 <dd>変数、バッファ、その他の WebGL コードを書く時に使うデータタイプのガイド</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API/WebGL_best_practices">WebGL ベストプラクティス</a></dt>
 <dd>WebGL のコンテンツの品質、パフォーマンス、信頼性を改善するためのヒントと提案です</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Using_Extensions">拡張機能</a></dt>
 <dd>WebGL で利用可能な拡張機能の使用方法です</dd>
</dl>

<h3 id="Advanced_tutorials" name="Advanced_tutorials">チュートリアル</h3>

<dl>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial">WebGL チュートリアル</a></dt>
 <dd>WebGL のコアコンセプトに関する、ビギナー向けのガイドです。WebGL の経験がない場合におすすめするガイドです</dd>
</dl>

<h3 id="Examples" name="Examples">例</h3>

<dl>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Basic_2D_animation_example">基本的な 2D WebGL アニメーションの例</a></dt>
 <dd>この例では、単一色の形状のシンプルなアニメーションをデモします。検査するトピックはアスペクト比の違いや、複数のシェーダーの集合からシェーダープログラムを生成する機能や、WebGL での描画の基本を扱います</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API/By_example">WebGL by example</a></dt>
 <dd>WebGL のコンセプトと機能を紹介する短い解説付きのライブサンプルのシリーズです。サンプルはトピックと難易度に応じて分類されており、WebGL レンダリングコンテキスト、シェーダプログラミング、テクスチャ、ジオメトリ、ユーザー操作などをカバーしています。</dd>
</dl>

<h3 id="Advanced_tutorials" name="Advanced_tutorials">高度なチュートリアル</h3>

<dl>
 <dt><a href="/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a></dt>
 <dd>3D オブジェクトビューを表現するためによく使用する 3 つの主要な行列 (モデル行列、ビュー行列、プロジェクション行列) について、詳しく説明します</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt>
 <dd>3D 変換行列がどのように働くか、および Web (WebGL の演算や、CSS3 Transform) でどのように使用できるかのガイドです</dd>
</dl>

<h2 id="Resources" name="Resources">リソース</h2>

<ul>
 <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a>: WebGL の基礎を Nick Desaulniers が紹介します。低レベルのグラフィックスプログラミングを行ったことがない方におすすめします。</li>
 <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL サイト</a>: Khronos Group の WebGL についてのメインサイト</li>
 <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a>: WebGL の基礎と、基本的なチュートリアルがあります。</li>
 <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a>: WebGL プロジェクトの作成と共有ができるオンラインツール。迅速なプロトタイピングや実験に最適です。</li>
 <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a>: WebGL プログラミングの基礎を学ぶチュートリアルがある、 HTML/JavaScript エディターです。</li>
 <li><a href="http://webglstats.com/">WebGL Stats</a>: さまざまなプラットフォームのブラウザーについて、WebGL の機能性の状況を示すサイトです。</li>
</ul>

<h3 id="Libraries" name="Libraries">ライブラリー</h3>

<ul>
 <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a>: 高性能 WebGL アプリ製作のための、行列とベクトルの JavaScript ライブラリー</li>
 <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding, and game development.</li>
 <li><a href="http://www.pixijs.com/">Pixi.js</a> is a fast, open-source 2D WebGL renderer.</li>
 <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open-source game engine.</li>
 <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a>: ベクトルや行列を操作するためのオープンソースライブラリー。WebGL 用として最適化されたものではありませんが、非常に堅牢です。</li>
 <li><a href="https://threejs.org/">three.js</a> is an open-source, fully featured 3D WebGL library.</li>
 <li><a href="https://phaser.io/">Phaser</a> is a fast, free and fun open source framework for Canvas and WebGL powered browser games.</li>
 <li><a href="https://github.com/redcamel/RedGL2">RedGL</a> is an open-source 3D WebGL library.</li>
 <li><a href="https://kitware.github.io/vtk-js/">vtk.js</a> is a JavaScript library for scientific visualization in your browser.</li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('OpenGL ES 3.0')}}</td>
   <td>{{Spec2('OpenGL ES 3.0')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('OpenGL ES 2.0')}}</td>
   <td>{{Spec2('OpenGL ES 2.0')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('WebGL2')}}</td>
   <td>{{Spec2('WebGL2')}}</td>
   <td>WebGL 1 の上に構築。OpenGL ES 3.0 に基づく。</td>
  </tr>
  <tr>
   <td>{{SpecName('WebGL')}}</td>
   <td>{{Spec2('WebGL')}}</td>
   <td>初回定義。OpenGL ES 2.0 に基づく。</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<h3 id="WebGL_1">WebGL 1</h3>

<p>{{Compat("api.WebGLRenderingContext", 0)}}</p>

<h3 id="WebGL_2_2">WebGL 2</h3>

<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p>


<h3 id="Compatibility_notes" name="Compatibility_notes">互換性に関する注記</h3>

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

<h3 id="Gecko_notes" name="Gecko_notes">Gecko に関する注記</h3>

<h4 id="WebGL_debugging_and_testing" name="WebGL_debugging_and_testing">WebGL のデバッグおよびテスト</h4>

<p>Gecko 10.0 {{geckoRelease("10.0")}} 以降には、テストなどの目的で WebGL の機能を制限する 2 つの設定項目があります。</p>

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

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/API/Canvas_API">Canvas</a></li>
 <li><a href="/ja/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">WebGL 拡張の互換性情報</a></li>
</ul>