From f639481a733ab7e23d0302fa68eb723d428bb373 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson {{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}
- WebGL をサポートするブラウザーでは、プラグインを使用することなく HTML canvas
内で 3D グラフィックスをレンダリングするための、OpenGL ES 2.0 に基づく API をウェブコンテンツで使用できます。WebGL のプログラムは JavaScript で記述する制御コードと、コンピュータの Graphics Processing Unit (GPU) で実行する特殊効果コード (シェーダーコード) で構成されます。WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。canvas
内で 3D グラフィックスをレンダリングするための、OpenGL ES 2.0 に基づく API をウェブコンテンツで使用できます。WebGL のプログラムは JavaScript で記述する制御コードと、コンピュータの Graphics Processing Unit (GPU) で実行する特殊効果コード (シェーダーコード) で構成されます。WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。
この記事では、WebGL の基礎を紹介します。ここでは、3D グラフィックスに関する数学的な知識を理解していることを前提とします。よって、OpenGL そのものの説明は行いません。
diff --git a/files/ja/web/api/webgl_api/tutorial/index.html b/files/ja/web/api/webgl_api/tutorial/index.html index e382ae0e4c..c3b2800bcb 100644 --- a/files/ja/web/api/webgl_api/tutorial/index.html +++ b/files/ja/web/api/webgl_api/tutorial/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/WebGL_API/TutorialWebGL は互換性があるブラウザで、プラグインを使用することなく HTML {{HTMLElement("canvas")}} 内で 3D グラフィックスをレンダリングするための、OpenGL ES 2.0 に基づく API を Web コンテンツで使用できるようにします。WebGL のプログラムは JavaScript で記述する制御コードと、コンピュータの Graphics Processing Unit (GPU) で実行する特殊効果コード (シェーダーコード) で構成されます。WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。
+WebGL は互換性があるブラウザで、プラグインを使用することなく HTML {{HTMLElement("canvas")}} 内で 3D グラフィックスをレンダリングするための、OpenGL ES 2.0 に基づく API を Web コンテンツで使用できるようにします。WebGL のプログラムは JavaScript で記述する制御コードと、コンピュータの Graphics Processing Unit (GPU) で実行する特殊効果コード (シェーダーコード) で構成されます。WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。
このチュートリアルでは WebGL グラフィックスを描画するために <canvas>
を使用する方法について、基礎から説明します。ここで提供するサンプルは WebGL で何ができるかの明確な見解をもたらし、また独自のコンテンツを構築し始められるようにするコード部品も提供します。
3D グラフィックにおけるシミュレートされたライティングの理論に詳しく触れるのはこの記事の範囲を大きく超えますが、その働きを知るのに役立ちます。ここでは深く触れませんので詳しくは、よく使われるライティングモデルについて解説している Wikipedia の Phong shading (日本語版) の記事をご覧ください。
+3D グラフィックにおけるシミュレートされたライティングの理論に詳しく触れるのはこの記事の範囲を大きく超えますが、その働きを知るのに役立ちます。ここでは深く触れませんので詳しくは、よく使われるライティングモデルについて解説している Wikipedia の Phong shading (日本語版) の記事をご覧ください。
ライティングには 3 種類の基本タイプがあります。
diff --git a/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html index 27d410bbe7..50f3da9982 100644 --- a/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html +++ b/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -190,7 +190,7 @@ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);WebGL のテクスチャの読み込みは、クロスドメインアクセス制御に従います。コンテンツで他のドメインからテクスチャを読み込むためには、CORS で許可を得なければなりません。CORS について詳しくは、HTTP access control をご覧ください。
-CORS で許可された画像を WebGL のテクスチャとして使用する方法の説明を こちらの hacks.mozilla.org の記事 に掲載していますので、サンプル と合わせてご覧ください。
+CORS で許可された画像を WebGL のテクスチャとして使用する方法の説明を こちらの hacks.mozilla.org の記事 に掲載していますので、サンプル と合わせてご覧ください。
注記: WebGL テクスチャ向けの CORS サポートと、画像要素の crossOrigin
属性は {{Gecko("8.0")}} で実装されました。