From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/webgl_api/index.html | 261 ++++++++++++++++++++++++++++++++++ 1 file changed, 261 insertions(+) create mode 100644 files/ja/web/api/webgl_api/index.html (limited to 'files/ja/web/api/webgl_api/index.html') diff --git a/files/ja/web/api/webgl_api/index.html b/files/ja/web/api/webgl_api/index.html new file mode 100644 index 0000000000..0429e257aa --- /dev/null +++ b/files/ja/web/api/webgl_api/index.html @@ -0,0 +1,261 @@ +--- +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 +--- +
{{WebGLSidebar}}
+ +
+

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

+
+ +

WebGL は Firefox 4 以降、Google Chrome 9 以降、Opera 12 以降、Safari 5.1 以降、Internet Explorer 11 以降、Microsoft Edge build 10240 以降でサポートしていますが、ユーザーの端末がこの機能をサポートするハードウェアであることも必要です。

+ +

{{HTMLElement("canvas")}} 要素は、ウェブページで 2D グラフィックスを表示する Canvas 2D でも使用します。

+ +

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

+ +

リファレンス

+ +

標準インターフェイス

+ +
+ +
+ +

拡張機能

+ +
+ +
+ +

イベント

+ + + +

定数と型

+ + + +

WebGL 2

+ +

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

+ + + +

"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 変換行列がどのように働くか、および Web (WebGL の演算や、CSS3 Transform) でどのように使用できるかのガイドです
+
+ +

リソース

+ + + +

ライブラリー

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}}
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}}
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}WebGL 1 の上に構築。OpenGL ES 3.0 に基づく。
{{SpecName('WebGL')}}{{Spec2('WebGL')}}初回定義。OpenGL ES 2.0 に基づく。
+ +

ブラウザーの互換性

+ +

WebGL 1

+ + + +

{{Compat("api.WebGLRenderingContext", 0)}}

+ +

WebGL 2

+ + + +

{{Compat("api.WebGL2RenderingContext", 0)}}

+ + +

互換性に関する注記

+ +

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

+ +

Gecko に関する注記

+ +

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

+ +

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

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

関連情報

+ + -- cgit v1.2.3-54-g00ecf