initial commit

9 files changed, 1261 insertions, 0 deletions

diff --git a/files/ja/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/ja/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
new file mode 100644
index 0000000000..678560a2bf
--- /dev/null
+++ b/files/ja/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
@@ -0,0 +1,299 @@
+---
+title: WebGL コンテキストへの平面コンテンツの追加
+slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
+
+<p><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">WebGL コンテキストの作成</a>に成功したら、レンダリングを開始できます。もっとも簡単にできることは、テクスチャが貼り付けられていない単純な正方形を描画することです。そこで、正方形の平面を描画するコードを作成することから始めましょう。</p>
+
+<h2 id="Drawing_the_scene" name="Drawing_the_scene">シーンを描画する</h2>
+
+<p>レンダリングを始める前に理解しておくべきもっとも重要なことは、今回の例では正方形の平面オブジェクトのみをレンダリングしていますが、それは 3 次元の空間に描画されるということです。正方形を描いているだけで、カメラの正面に視線方向に垂直に直接配置しています。単純なシーンの色を作成し、オブジェクトを描画するシェーダーを定義する必要があります。これらは正方形の平面が画面にどのように表示されるかを確立します。</p>
+
+<h3 id="The_shaders" name="The_shaders">シェーダー</h3>
+
+<p><strong>シェーダー</strong> は、 <a href="https://www.khronos.org/files/opengles_shading_language.pdf">OpenGL ES Shading Language</a> (<strong>GLSL</strong>) を使用して記述されたプログラムであり、形状を構成する頂点に関する情報を取得し、画面上にピクセルをレンダリングするために必要なデータ、すなわち<span class="tlid-translation translation" lang="ja"><span title="">ピクセルの位置とその色</span></span>を生成します。</p>
+
+<p>WebGL コンテンツを描画するときに実行される2つのシェーダー関数があります。<strong>頂点シェーダー</strong>と<strong>フラグメントシェーダー</strong>です。これらを GLSL で記述し、コードのテキストを WebGL に渡して、GPU で実行するためにコンパイルします。 頂点シェーダーとフラグメントシェーダーのセットを合わせて、<strong>シェーダープログラム</strong>と呼びます。</p>
+
+<p>2種類のシェーダーを WebGL コンテキストに描画する例を念頭に置いて、2種類のシェーダーを簡単に見てみましょう。</p>
+
+<h4 id="頂点シェーダー">頂点シェーダー</h4>
+
+<p>シェイプがレンダリングされるたびに、頂点シェーダーがシェイプの各頂点に対して実行されます。その仕事は、入力頂点を元の座標系から WebGL が使用する <strong>clipspace</strong> 座標系に変換することです。各軸の範囲はアスペクト比、実際のサイズ、またはその他の要因に関係なく -1.0 〜 1.0 です。</p>
+
+<p>頂点シェーダーは頂点の位置で必要な変換を実行し、頂点ごとに行う必要がある他の調整または計算を行い、GLSL によって提供される <code>gl_Position</code> と呼ばれる特別な変数に保存して、変換された頂点を返す必要があります。</p>
+
+<p>シェーダーは必要に応じて {{interwiki("wikipedia", "texel_(graphics)", "texel")}} の面のテクスチャ内の座標を決定して頂点に適用したり、法線を適用して頂点に適用する照明係数を決定したりすることもできます。この情報は、フラグメントシェーダーと共有するために、必要に応じて <a href="/ja/docs/Web/API/WebGL_API/Data#Varyings">varyings</a> または <a href="/ja/docs/Web/API/WebGL_API/Data#Attributes">attributes</a> に保存できます。</p>
+
+<p>以下の頂点シェーダーは <code>aVertexPosition</code> と呼ばれる定義した属性から頂点位置の値を受け取ります。次に、その位置に <code>uProjectionMatrix</code> および <code>uModelViewMatrix</code>という 2 つの 4 x 4 行列を乗算します。<code>gl_Position</code> は結果に設定されます。投影法およびその他のマトリックスの詳細については、<a href="https://webglfundamentals.org/webgl/lessons/ja/webgl-3d-perspective.html">この記事が役立つ場合があります</a>。</p>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html">  // 頂点シェーダーのプログラム
+
+  const vsSource = `
+    attribute vec4 aVertexPosition;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    void main() {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+    }
+  `;</code></pre>
+
+<p>頂点の位置に <code>vec4</code> 属性を使用していることに注意してください。実際には 4 コンポーネントベクトルを使用していません。つまり、状況に応じて <code>vec2</code> または <code>vec3</code> として処理できます。ただし、数学を実行するときは <code>vec4</code> である必要があります。したがって、数学を実行するたびに <code>vec4</code> に変換するのではなく、最初から <code>vec4</code> を使用します。これにより、シェーダーで行うすべての計算から操作が排除されます。 パフォーマンスが重要です。</p>
+
+<p>この例ではシーンにまだ何も適用していないため、ライティングをまったく計算していません。これは、<a href="/ja/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">WebGL でのライティング</a>の例で後ほど説明します。また、ここではテクスチャを使用した作業がないことに注意してください。これは、<a href="/ja/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL でのテクスチャの使用</a>に追加されます。</p>
+
+<h4 id="フラグメントシェーダー">フラグメントシェーダー</h4>
+
+<p><strong>フラグメントシェーダー</strong>は、図形の頂点が頂点シェーダーによって処理された後、描画される各図形のすべてのピクセルに対して1回呼び出されます。その仕事は、ピクセルに適用するテクセル (つまり、シェイプのテクスチャ内のピクセル) を特定し、そのテクセルの色を取得し、その色に適切な照明を適用することによりそのピクセルの色を決定することです。色は特別な変数 <code>gl_FragColor</code> に保存することにより、WebGL レイヤーに返されます。その色は、図形の対応するピクセルの正しい位置で画面に描画されます。</p>
+
+<p>この場合、照明を使用せずに白い正方形を描画するだけなので、毎回単純に白を返します。</p>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html">  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;</code></pre>
+
+<h3 id="Initializing_the_shaders" name="Initializing_the_shaders">シェーダーの初期化</h3>
+
+<p>2つのシェーダーを定義したので、それらを WebGL に渡してコンパイルし、リンクする必要があります。以下のコードは <code>loadShader()</code> を呼び出して2つのシェーダーを作成し、シェーダーのタイプとソースを渡します。次にプログラムを作成し、シェーダーを接続してそれらをリンクします。コンパイルまたはリンクが失敗した場合、コードはアラートを表示します。</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">//</span>
+<span class="comment token">// Initialize a shader program, so WebGL knows how to draw our data</span>
+<span class="comment token">//</span>
+<span class="keyword token">function</span> <span class="function token">initShaderProgram</span><span class="punctuation token">(</span><span class="parameter token">gl<span class="punctuation token">,</span> vsSource<span class="punctuation token">,</span> fsSource</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> vertexShader <span class="operator token">=</span> <span class="function token">loadShader</span><span class="punctuation token">(</span>gl<span class="punctuation token">,</span> gl<span class="punctuation token">.</span><span class="constant token">VERTEX_SHADER</span><span class="punctuation token">,</span> vsSource<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> fragmentShader <span class="operator token">=</span> <span class="function token">loadShader</span><span class="punctuation token">(</span>gl<span class="punctuation token">,</span> gl<span class="punctuation token">.</span><span class="constant token">FRAGMENT_SHADER</span><span class="punctuation token">,</span> fsSource<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Create the shader program</span>
+
+  <span class="keyword token">const</span> shaderProgram <span class="operator token">=</span> gl<span class="punctuation token">.</span><span class="function token">createProgram</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  gl<span class="punctuation token">.</span><span class="function token">attachShader</span><span class="punctuation token">(</span>shaderProgram<span class="punctuation token">,</span> vertexShader<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  gl<span class="punctuation token">.</span><span class="function token">attachShader</span><span class="punctuation token">(</span>shaderProgram<span class="punctuation token">,</span> fragmentShader<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  gl<span class="punctuation token">.</span><span class="function token">linkProgram</span><span class="punctuation token">(</span>shaderProgram<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// If creating the shader program failed, alert</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>gl<span class="punctuation token">.</span><span class="function token">getProgramParameter</span><span class="punctuation token">(</span>shaderProgram<span class="punctuation token">,</span> gl<span class="punctuation token">.</span><span class="constant token">LINK_STATUS</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Unable to initialize the shader program: '</span> <span class="operator token">+</span> gl<span class="punctuation token">.</span><span class="function token">getProgramInfoLog</span><span class="punctuation token">(</span>shaderProgram<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">return</span> shaderProgram<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">//</span>
+<span class="comment token">// creates a shader of the given type, uploads the source and</span>
+<span class="comment token">// compiles it.</span>
+<span class="comment token">//</span>
+<span class="keyword token">function</span> <span class="function token">loadShader</span><span class="punctuation token">(</span><span class="parameter token">gl<span class="punctuation token">,</span> type<span class="punctuation token">,</span> source</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> shader <span class="operator token">=</span> gl<span class="punctuation token">.</span><span class="function token">createShader</span><span class="punctuation token">(</span>type<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Send the source to the shader object</span>
+
+  gl<span class="punctuation token">.</span><span class="function token">shaderSource</span><span class="punctuation token">(</span>shader<span class="punctuation token">,</span> source<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Compile the shader program</span>
+
+  gl<span class="punctuation token">.</span><span class="function token">compileShader</span><span class="punctuation token">(</span>shader<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// See if it compiled successfully</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>gl<span class="punctuation token">.</span><span class="function token">getShaderParameter</span><span class="punctuation token">(</span>shader<span class="punctuation token">,</span> gl<span class="punctuation token">.</span><span class="constant token">COMPILE_STATUS</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'An error occurred compiling the shaders: '</span> <span class="operator token">+</span> gl<span class="punctuation token">.</span><span class="function token">getShaderInfoLog</span><span class="punctuation token">(</span>shader<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    gl<span class="punctuation token">.</span><span class="function token">deleteShader</span><span class="punctuation token">(</span>shader<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">return</span> shader<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>The <code>loadShader()</code> function takes as input the WebGL context, the shader type, and the source code, then creates and compiles the shader as follows:</p>
+
+<ol>
+ <li>A new shader is created by calling {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}}.</li>
+ <li>The shader's source code is sent to the shader by calling {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}}.</li>
+ <li>Once the shader has the source code, it's compiled using {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}}.</li>
+ <li>To check to be sure the shader successfully compiled, the shader parameter <code>gl.COMPILE_STATUS</code> is checked. To get its value, we call {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, specifying the shader and the name of the parameter we want to check (<code>gl.COMPILE_STATUS</code>). If that's <code>false</code>, we know the shader failed to compile, so show an alert with log information obtained from the compiler using {{domxref("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, then delete the shader and return <code>null</code> to indicate a failure to load the shader.</li>
+ <li>If the shader was loaded and successfully compiled, the compiled shader is returned to the caller.</li>
+</ol>
+
+<p>To use this code we call it like this</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">  <span class="keyword token">const</span> shaderProgram <span class="operator token">=</span> <span class="function token">initShaderProgram</span><span class="punctuation token">(</span>gl<span class="punctuation token">,</span> vsSource<span class="punctuation token">,</span> fsSource<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>After we've created a shader program we need to look up the locations that WebGL assigned to our inputs. In this case we have one attribute and two uniforms. Attributes receive values from buffers. Each iteration of the vertex shader receives the next value from the buffer assigned to that attribute. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Data#Uniforms">Uniforms</a> are similar to JavaScript global variables. They stay the same value for all iterations of a shader. Since the attribute and uniform locations are specific to a single shader program we'll store them together to make them easy to pass around</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">  <span class="keyword token">const</span> programInfo <span class="operator token">=</span> <span class="punctuation token">{</span>
+    program<span class="punctuation token">:</span> shaderProgram<span class="punctuation token">,</span>
+    attribLocations<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+      vertexPosition<span class="punctuation token">:</span> gl<span class="punctuation token">.</span><span class="function token">getAttribLocation</span><span class="punctuation token">(</span>shaderProgram<span class="punctuation token">,</span> <span class="string token">'aVertexPosition'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span>
+    uniformLocations<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+      projectionMatrix<span class="punctuation token">:</span> gl<span class="punctuation token">.</span><span class="function token">getUniformLocation</span><span class="punctuation token">(</span>shaderProgram<span class="punctuation token">,</span> <span class="string token">'uProjectionMatrix'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+      modelViewMatrix<span class="punctuation token">:</span> gl<span class="punctuation token">.</span><span class="function token">getUniformLocation</span><span class="punctuation token">(</span>shaderProgram<span class="punctuation token">,</span> <span class="string token">'uModelViewMatrix'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Creating_the_square_plane">Creating the square plane</h2>
+
+<p>Before we can render our square plane, we need to create the buffer that contains its vertex positions and put the vertex positions in it. We'll do that using a function we call <code>initBuffers()</code>; as we explore more advanced WebGL concepts, this routine will be augmented to create more -- and more complex -- 3D objects.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">initBuffers</span><span class="punctuation token">(</span><span class="parameter token">gl</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+  <span class="comment token">// Create a buffer for the square's positions.</span>
+
+  <span class="keyword token">const</span> positionBuffer <span class="operator token">=</span> gl<span class="punctuation token">.</span><span class="function token">createBuffer</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Select the positionBuffer as the one to apply buffer</span>
+  <span class="comment token">// operations to from here out.</span>
+
+  gl<span class="punctuation token">.</span><span class="function token">bindBuffer</span><span class="punctuation token">(</span>gl<span class="punctuation token">.</span><span class="constant token">ARRAY_BUFFER</span><span class="punctuation token">,</span> positionBuffer<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Now create an array of positions for the square.</span>
+
+  <span class="keyword token">const</span> positions <span class="operator token">=</span> <span class="punctuation token">[</span>
+    <span class="operator token">-</span><span class="number token">1.0</span><span class="punctuation token">,</span>  <span class="number token">1.0</span><span class="punctuation token">,</span>
+     <span class="number token">1.0</span><span class="punctuation token">,</span>  <span class="number token">1.0</span><span class="punctuation token">,</span>
+    <span class="operator token">-</span><span class="number token">1.0</span><span class="punctuation token">,</span> <span class="operator token">-</span><span class="number token">1.0</span><span class="punctuation token">,</span>
+     <span class="number token">1.0</span><span class="punctuation token">,</span> <span class="operator token">-</span><span class="number token">1.0</span><span class="punctuation token">,</span>
+  <span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Now pass the list of positions into WebGL to build the</span>
+  <span class="comment token">// shape. We do this by creating a Float32Array from the</span>
+  <span class="comment token">// JavaScript array, then use it to fill the current buffer.</span>
+
+  gl<span class="punctuation token">.</span><span class="function token">bufferData</span><span class="punctuation token">(</span>gl<span class="punctuation token">.</span><span class="constant token">ARRAY_BUFFER</span><span class="punctuation token">,</span>
+                <span class="keyword token">new</span> <span class="class-name token">Float32Array</span><span class="punctuation token">(</span>positions<span class="punctuation token">)</span><span class="punctuation token">,</span>
+                gl<span class="punctuation token">.</span><span class="constant token">STATIC_DRAW</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">return</span> <span class="punctuation token">{</span>
+    position<span class="punctuation token">:</span> positionBuffer<span class="punctuation token">,</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>This routine is pretty simplistic given the basic nature of the scene in this example. It starts by calling the <code>gl</code> object's {{domxref("WebGLRenderingContext.createBuffer()", "createBuffer()")}} method to obtain a buffer into which we'll store the vertex positions. This is then bound to the context by calling the {{domxref("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}} method.</p>
+
+<p>Once that's done, we create a JavaScript array containing the position for each vertex of the square plane. This is then converted into an array of floats and passed into the <code>gl</code> object's {{domxref("WebGLRenderingContext.bufferData()", "bufferData()")}} method to establish the vertex positions for the object.</p>
+
+<h2 id="Rendering_the_scene">Rendering the scene</h2>
+
+<p>Once the shaders are established, the locations are looked up, and the square plane's vertex positions put in a buffer, we can actually render the scene. Since we're not animating anything in this example, our <code>drawScene()</code> function is very simple. It uses a few utility routines we'll cover shortly.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You might get a JavaScript error saying " mat4 is not defined". This means there is a dependency on <code>glmatrix</code>. You can include <a href="https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js">gl-matrix.js</a><a href="https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js"> </a>to resolve this issue, as suggested <a href="https://github.com/mdn/webgl-examples/issues/20">here</a>.</p>
+</div>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">drawScene</span><span class="punctuation token">(</span><span class="parameter token">gl<span class="punctuation token">,</span> programInfo<span class="punctuation token">,</span> buffers</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  gl<span class="punctuation token">.</span><span class="function token">clearColor</span><span class="punctuation token">(</span><span class="number token">0.0</span><span class="punctuation token">,</span> <span class="number token">0.0</span><span class="punctuation token">,</span> <span class="number token">0.0</span><span class="punctuation token">,</span> <span class="number token">1.0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// Clear to black, fully opaque</span>
+  gl<span class="punctuation token">.</span><span class="function token">clearDepth</span><span class="punctuation token">(</span><span class="number token">1.0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>                 <span class="comment token">// Clear everything</span>
+  gl<span class="punctuation token">.</span><span class="function token">enable</span><span class="punctuation token">(</span>gl<span class="punctuation token">.</span><span class="constant token">DEPTH_TEST</span><span class="punctuation token">)</span><span class="punctuation token">;</span>           <span class="comment token">// Enable depth testing</span>
+  gl<span class="punctuation token">.</span><span class="function token">depthFunc</span><span class="punctuation token">(</span>gl<span class="punctuation token">.</span><span class="constant token">LEQUAL</span><span class="punctuation token">)</span><span class="punctuation token">;</span>            <span class="comment token">// Near things obscure far things</span>
+
+  <span class="comment token">// Clear the canvas before we start drawing on it.</span>
+
+  gl<span class="punctuation token">.</span><span class="function token">clear</span><span class="punctuation token">(</span>gl<span class="punctuation token">.</span><span class="constant token">COLOR_BUFFER_BIT</span> <span class="operator token">|</span> gl<span class="punctuation token">.</span><span class="constant token">DEPTH_BUFFER_BIT</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Create a perspective matrix, a special matrix that is</span>
+  <span class="comment token">// used to simulate the distortion of perspective in a camera.</span>
+  <span class="comment token">// Our field of view is 45 degrees, with a width/height</span>
+  <span class="comment token">// ratio that matches the display size of the canvas</span>
+  <span class="comment token">// and we only want to see objects between 0.1 units</span>
+  <span class="comment token">// and 100 units away from the camera.</span>
+
+  <span class="keyword token">const</span> fieldOfView <span class="operator token">=</span> <span class="number token">45</span> <span class="operator token">*</span> Math<span class="punctuation token">.</span><span class="constant token">PI</span> <span class="operator token">/</span> <span class="number token">180</span><span class="punctuation token">;</span>   <span class="comment token">// in radians</span>
+  <span class="keyword token">const</span> aspect <span class="operator token">=</span> gl<span class="punctuation token">.</span>canvas<span class="punctuation token">.</span>clientWidth <span class="operator token">/</span> gl<span class="punctuation token">.</span>canvas<span class="punctuation token">.</span>clientHeight<span class="punctuation token">;</span>
+  <span class="keyword token">const</span> zNear <span class="operator token">=</span> <span class="number token">0.1</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> zFar <span class="operator token">=</span> <span class="number token">100.0</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> projectionMatrix <span class="operator token">=</span> mat4<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// note: glmatrix.js always has the first argument</span>
+  <span class="comment token">// as the destination to receive the result.</span>
+  mat4<span class="punctuation token">.</span><span class="function token">perspective</span><span class="punctuation token">(</span>projectionMatrix<span class="punctuation token">,</span>
+                   fieldOfView<span class="punctuation token">,</span>
+                   aspect<span class="punctuation token">,</span>
+                   zNear<span class="punctuation token">,</span>
+                   zFar<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Set the drawing position to the "identity" point, which is</span>
+  <span class="comment token">// the center of the scene.</span>
+  <span class="keyword token">const</span> modelViewMatrix <span class="operator token">=</span> mat4<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Now move the drawing position a bit to where we want to</span>
+  <span class="comment token">// start drawing the square.</span>
+
+  mat4<span class="punctuation token">.</span><span class="function token">translate</span><span class="punctuation token">(</span>modelViewMatrix<span class="punctuation token">,</span>     <span class="comment token">// destination matrix</span>
+                 modelViewMatrix<span class="punctuation token">,</span>     <span class="comment token">// matrix to translate</span>
+                 <span class="punctuation token">[</span><span class="operator token">-</span><span class="number token">0.0</span><span class="punctuation token">,</span> <span class="number token">0.0</span><span class="punctuation token">,</span> <span class="operator token">-</span><span class="number token">6.0</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// amount to translate</span>
+
+  <span class="comment token">// Tell WebGL how to pull out the positions from the position</span>
+  <span class="comment token">// buffer into the vertexPosition attribute.</span>
+  <span class="punctuation token">{</span>
+    <span class="keyword token">const</span> numComponents <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>  <span class="comment token">// pull out 2 values per iteration</span>
+    <span class="keyword token">const</span> type <span class="operator token">=</span> gl<span class="punctuation token">.</span><span class="constant token">FLOAT</span><span class="punctuation token">;</span>    <span class="comment token">// the data in the buffer is 32bit floats</span>
+    <span class="keyword token">const</span> normalize <span class="operator token">=</span> <span class="boolean token">false</span><span class="punctuation token">;</span>  <span class="comment token">// don't normalize</span>
+    <span class="keyword token">const</span> stride <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>         <span class="comment token">// how many bytes to get from one set of values to the next</span>
+                              <span class="comment token">// 0 = use type and numComponents above</span>
+    <span class="keyword token">const</span> offset <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>         <span class="comment token">// how many bytes inside the buffer to start from</span>
+    gl<span class="punctuation token">.</span><span class="function token">bindBuffer</span><span class="punctuation token">(</span>gl<span class="punctuation token">.</span><span class="constant token">ARRAY_BUFFER</span><span class="punctuation token">,</span> buffers<span class="punctuation token">.</span>position<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    gl<span class="punctuation token">.</span><span class="function token">vertexAttribPointer</span><span class="punctuation token">(</span>
+        programInfo<span class="punctuation token">.</span>attribLocations<span class="punctuation token">.</span>vertexPosition<span class="punctuation token">,</span>
+        numComponents<span class="punctuation token">,</span>
+        type<span class="punctuation token">,</span>
+        normalize<span class="punctuation token">,</span>
+        stride<span class="punctuation token">,</span>
+        offset<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    gl<span class="punctuation token">.</span><span class="function token">enableVertexAttribArray</span><span class="punctuation token">(</span>
+        programInfo<span class="punctuation token">.</span>attribLocations<span class="punctuation token">.</span>vertexPosition<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// Tell WebGL to use our program when drawing</span>
+
+  gl<span class="punctuation token">.</span><span class="function token">useProgram</span><span class="punctuation token">(</span>programInfo<span class="punctuation token">.</span>program<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Set the shader uniforms</span>
+
+  gl<span class="punctuation token">.</span><span class="function token">uniformMatrix4fv</span><span class="punctuation token">(</span>
+      programInfo<span class="punctuation token">.</span>uniformLocations<span class="punctuation token">.</span>projectionMatrix<span class="punctuation token">,</span>
+      <span class="boolean token">false</span><span class="punctuation token">,</span>
+      projectionMatrix<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  gl<span class="punctuation token">.</span><span class="function token">uniformMatrix4fv</span><span class="punctuation token">(</span>
+      programInfo<span class="punctuation token">.</span>uniformLocations<span class="punctuation token">.</span>modelViewMatrix<span class="punctuation token">,</span>
+      <span class="boolean token">false</span><span class="punctuation token">,</span>
+      modelViewMatrix<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="punctuation token">{</span>
+    <span class="keyword token">const</span> offset <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+    <span class="keyword token">const</span> vertexCount <span class="operator token">=</span> <span class="number token">4</span><span class="punctuation token">;</span>
+    gl<span class="punctuation token">.</span><span class="function token">drawArrays</span><span class="punctuation token">(</span>gl<span class="punctuation token">.</span><span class="constant token">TRIANGLE_STRIP</span><span class="punctuation token">,</span> offset<span class="punctuation token">,</span> vertexCount<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>The first step is to clear the canvas to our background color; then we establish the camera's perspective. We set a field of view of 45°, with a width to height ratio that match the display dimensions of our canvas. We also specify that we only want objects between 0.1 and 100 units from the camera to be rendered.</p>
+
+<p>Then we establish the position of the square plane by loading the identity position and translating away from the camera by 6 units. After that, we bind the square's vertex buffer to the attribute the shader is using for <code>aVertexPosition</code> and we tell WebGL how to pull the data out of it. Finally we draw the object by calling the {{domxref("WebGLRenderingContext.drawArrays()", "drawArrays()")}} method.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2">View the complete code</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample2/">Open this demo on a new page</a></p>
+
+<h2 id="Matrix_utility_operations">Matrix utility operations</h2>
+
+<p>Matrix operations might seem complicated but <a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">they are actually pretty simple if you take them one step at a time</a>. Generally people use a matrix library rather than writing their own. In our case we're using the popular <a href="http://glmatrix.net/">glMatrix library</a>.</p>
+
+<p>See also</p>
+
+<ul>
+ <li><a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">Matrices</a> on WebGLFundamentals</li>
+ <li><a class="external external-icon" href="http://mathworld.wolfram.com/Matrix.html">Matrices</a> on Wolfram MathWorld</li>
+ <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/Matrix_(mathematics)">Matrix</a> on Wikipedia</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
diff --git a/files/ja/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/ja/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
new file mode 100644
index 0000000000..196a0e9879
--- /dev/null
+++ b/files/ja/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
@@ -0,0 +1,126 @@
+---
+title: WebGL でのオブジェクトのアニメーティング
+slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p>前の例で作成したコードはすでに、WebGL のシーンを 15 ミリ秒ごとに再描画するよう設定されています。今までは単純に、毎回同じものをそのまま再描画していました。これから、正方形が実際に動くようにコードを変えていきます。</p>
+
+<p>今回の例では 2D の正方形を 3 次元空間で、実際に回転や移動させます。これにより、作成したのは 2D のオブジェクトですが、それは 3D 空間に存在していることが証明されます。</p>
+
+<h2 id="Making_the_square_rotate" name="Making_the_square_rotate">正方形を回転させる</h2>
+
+<p>正方形を回転させてみましょう。始めに、正方形の回転をたどる変数が必要です:</p>
+
+<pre class="brush: js">var squareRotation = 0.0;
+</pre>
+
+<p>そして、描画する際に正方形に回転を適用するよう、<code>drawScene()</code> 関数を更新することが必要です。正方形の初期描画位置に移した後、回転を以下のように適用します:</p>
+
+<pre class="brush: js">mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+</pre>
+
+<p>これを現在のモデルビュー行列に保存し、そして行列を現在の <code>squareRotation</code> の値を基に、X 軸および Z 軸で回転させます。</p>
+
+<p>描画後は、元の行列に戻さなければなりません:</p>
+
+<pre class="brush: js">  mvPopMatrix();
+</pre>
+
+<p>後に描画する別のオブジェクトを回転させてしまうことを防ぐために、元の行列を保存および復元します。今回の例では他に描画するものがありませんので、これは役目がありません。</p>
+
+<p>実際に動かすために、時間がたつにつれて <code>squareRotation</code> の値を変えていくコードを追加しなければなりません。これは最後にアニメーションを行った時刻を追跡する新たな変数 (<code>lastSquareUpdateTime</code> と呼びましょう) を作成することで実現できるので、<code>drawScene()</code> 関数の末尾に以下のコードを追加します。:</p>
+
+<pre class="brush: js">  var currentTime = Date.now();
+  if (lastSquareUpdateTime) {
+  	var delta = currentTime - lastSquareUpdateTime;
+
+  	squareRotation += (30 * delta) / 1000.0;
+  }
+
+  lastSquareUpdateTime = currentTime;
+</pre>
+
+<p>このコードは正方形をどれだけ回転させるかを決めるために、最後に <code>squareRotation</code> の値を更新してから経過した時間を使用しています。</p>
+
+<h2 id="Making_the_square_move" name="Making_the_square_move">正方形を動かす</h2>
+
+<p>同様に、描画前に位置情報を変えていくことで正方形を移動させることができます。以下の例で、いくつかの基本的なアニメーションを行ってみます (当然ながら、実際はここまで極端に動かそうとは思わないでしょう) 。</p>
+
+<p>新しい変数で、移動する際の各軸のオフセットをたどりましょう:</p>
+
+<pre class="brush: js">var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+</pre>
+
+<p>また、各軸の値をどれだけ変化させるかを以下の変数で示します:</p>
+
+<pre class="brush: js">var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+</pre>
+
+<p>そして先ほどの回転させるサンプルコードを、以下のコードを追加して更新します:</p>
+
+<pre class="brush: js">    squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+    squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+    squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+    if (Math.abs(squareYOffset) &gt; 2.5) {
+      xIncValue = -xIncValue;
+      yIncValue = -yIncValue;
+      zIncValue = -zIncValue;
+    }
+</pre>
+
+<p>最後に、以下のコードを <code>drawScene()</code> 関数に追加します:</p>
+
+<pre class="brush: js">mvTranslate([squareXOffset, squareYOffset, squareZOffset]);</pre>
+
+<p>以上で、正方形が回転するとともにズームイン・ズームアウトしながら、環境内を近づいたり遠ざかったりするようランダムに動き回ります。これはスクリーンセーバーのようです。</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510)}}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4">コードを確認する</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample4/">新しいページでデモを開く</a></p>
+
+<h2 id="More_matrix_operations" name="More_matrix_operations">さらに行列を操作する</h2>
+
+<p>この例は、行列をスタックから取り出す・スタックへ格納する 2 つのルーチンや、与えられた角度の値に基づいて行列を回転させるルーチンといった、高度な行列操作を行っています。参考として、以下にそれを掲載します:</p>
+
+<pre class="brush: js">var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("空の行列スタックからポップすることはできません。");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+</pre>
+
+<p>これらのルーチンは、以前 Vlad Vukićević 氏が記述されたサンプルより取り入れています。</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
diff --git a/files/ja/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html b/files/ja/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html
new file mode 100644
index 0000000000..b3a841fc63
--- /dev/null
+++ b/files/ja/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html
@@ -0,0 +1,107 @@
+---
+title: WebGL でのテクスチャのアニメーティング
+slug: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+tags:
+  - Media
+  - Tutorial
+  - Video
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>今回のデモンストレーションでは、前回の例で用いた静的なテクスチャを Ogg ビデオファイルのフレームに置き換えます。実はこれを行うのはとても簡単ですが、見ていて楽しいです。さっそく始めましょう。なお同様のコードを、どんな種類のデータ ({{HTMLElement("canvas")}} など) をテクスチャのソースとして用いる場合でも使用することができます。</p>
+
+<h2 id="Getting_access_to_the_video" name="Getting_access_to_the_video">ビデオにアクセスする</h2>
+
+<p>始めに、ビデオフレームを取り出すのに使う {{HTMLElement("video")}} 要素を作成する HTML を追加します:</p>
+
+<pre class="brush: html">&lt;video id="video"&gt;
+  HTML5 &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; 要素をサポートしていません。
+&lt;/video&gt;
+</pre>
+
+<p>これは単純に、ビデオファイル "Firefox.ogv" を再生する要素を作成します。この video 要素が表示されないようにするため、以下の CSS を使用します:</p>
+
+<pre class="brush: css">video {
+  display: none;
+}
+</pre>
+
+<p>続いて、JavaScript のコードに注意を向けます。まずは <code>start()</code> 関数に、<code>video</code> 要素への参照を取得するコードを追加します:</p>
+
+<pre class="brush: js">videoElement = document.getElementById("video");
+</pre>
+
+<p>次に、インターバル駆動による <code>drawScene()</code> の呼び出しを設定しているコードを以下のコードに置き換えます:</p>
+
+<pre class="brush: js">videoElement.addEventListener("canplaythrough", startVideo, true);
+videoElement.addEventListener("ended", videoDone, true);
+</pre>
+
+<p>最後に、ビデオの読み込みを始めるために <code>src</code> 属性を設定します。FIXME (bjacob): ここで <code>preload="auto"</code> も必要です。そうしなければ、Firefox で <code>canplaythrough</code> が発生しません。Chrome では、<code>preload="auto"</code> の有無に関わらずビデオを読み込みます。</p>
+
+<pre class="brush: js">video.preload = "auto";
+videoElement.src = "Firefox.ogv";</pre>
+
+<p>これには、ビデオの再生が中断されないよう充分にバッファリングされるまではアニメーションを始めたくないという考え方があります。そこで、データが充分にバッファリングされてビデオが切れ目なく再生できると期待できることを、<code>video</code> 要素が通知するまで待つためのイベントリスナを追加します。</p>
+
+<p><code>startVideo()</code> 関数は以下のようにします:</p>
+
+<pre class="brush: js">function startVideo() {
+  videoElement.play();
+  intervalID = setInterval(drawScene, 15);
+}
+</pre>
+
+<p>これは単にビデオの再生を開始して、キューブの描画を制御するために <code>drawScene()</code> のインターバル駆動による呼び出しを定義します。</p>
+
+<p>また、ビデオの再生が終わったときにアニメーションを停止できるように、video の "ended" イベントにイベントリスナを追加します。そうしなければ、正当な理由がないのに CPU 時間を浪費することになってしまうためです。</p>
+
+<pre class="brush: js">function videoDone() {
+  clearInterval(intervalID);
+}</pre>
+
+<p><code>videoDone()</code> 関数は単純に、アニメーションの更新を終わらせるために {{domxref("window.clearInterval()")}} を呼び出します。</p>
+
+<h2 id="Using_the_video_frames_as_a_texture" name="Using_the_video_frames_as_a_texture">ビデオフレームをテクスチャとして使用する</h2>
+
+<p>次に変更するのは <code>initTexture()</code> です。画像ファイルを読み込む必要がなくなったため、とても単純になります。画像を読み込む代わりに、空のテクスチャオブジェクトを作成して、後で使用するフィルタを設定します:</p>
+
+<pre class="brush: js">function initTextures() {
+  cubeTexture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+}
+</pre>
+
+<p><code>updateTexture()</code> 関数は以下のようになります。ここで実際の処理を行います:</p>
+
+<pre class="brush: js">function updateTexture() {
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
+        gl.UNSIGNED_BYTE, videoElement);
+}
+</pre>
+
+<p>このコードは、以前見たことがあります。これは以前の例にあった <code>handleTextureLoaded()</code> ルーチンとほぼ同じであり、<code>texImage2D()</code> を呼び出すときに <code>Image</code> オブジェクトに代わり {{HTMLElement("video")}} 要素を渡すところが異なります。WebGL は、現在のフレームを取り出してテクスチャとして使用する方法がわかります。</p>
+
+<p><code>updateTexture()</code> はシーンを再描画する準備が整ったときに毎回、<code>drawScene()</code> によって呼び出されます。<code>drawScene()</code> の唯一の変更点は、処理の最初に <code>updateTexture()</code> の呼び出しを追加することです。</p>
+
+<p>以上で完了です!</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">コードを確認する</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample8/">新しいページでデモを開く</a></p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">HTML5 の audio 要素と video 要素の使用</a></li>
+</ul>
+
+<p>{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/ja/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html b/files/ja/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
new file mode 100644
index 0000000000..876b04e03e
--- /dev/null
+++ b/files/ja/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
@@ -0,0 +1,131 @@
+---
+title: WebGL を用いた 3D オブジェクトの作成
+slug: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
+
+<p>正方形に 5 つの面を追加して立体化し、キューブを作成しましょう。これを効率的に行うために、<code>gl.drawArrays()</code> メソッドを呼び出して頂点情報を直接使用する描画方法から、頂点の配列をテーブルとして扱い、<code>gl.drawElements()</code> を呼び出して、そのテーブルの各頂点情報を参照して各面の頂点を定義する方法に切り替えます。</p>
+
+<p>留意点: それぞれの面について 4 個の頂点を定義しなければなりませんが、各頂点は 3 つの面で共有されます。24 個の頂点すべてのリスト構築することで、やり取りするデータを少なくできます。そして座標を指示するには、座標の完全なセットを渡すのではなく、リストのインデックスを用いて座標を指し示します。なぜ頂点が 8 個ではなく 24 個必要かと考えるかもしれません。これは、それぞれの角に色が異なる 3 つの面が接しており、ひとつの頂点は特定の 1 色しか持たないためです。従って各頂点について、面ごとに色が異なる 3 つのコピーを作成します。</p>
+
+<h2 id="Define_the_positions_of_the_cube's_vertices" name="Define_the_positions_of_the_cube's_vertices">キューブの頂点の位置を定義する</h2>
+
+<p>始めに <code>initBuffers()</code> のコードを更新して、キューブの頂点の位置のバッファを作成します。この方法は正方形を作る場合と同じですが、24 個の座標 (1 面につき 4 個) がありますのでコードはとても長くなります:</p>
+
+<pre class="brush: js">var vertices = [
+  // 前面
+  -1.0, -1.0,  1.0,
+   1.0, -1.0,  1.0,
+   1.0,  1.0,  1.0,
+  -1.0,  1.0,  1.0,
+
+  // 背面
+  -1.0, -1.0, -1.0,
+  -1.0,  1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0, -1.0, -1.0,
+
+  // 上面
+  -1.0,  1.0, -1.0,
+  -1.0,  1.0,  1.0,
+   1.0,  1.0,  1.0,
+   1.0,  1.0, -1.0,
+
+  // 底面
+  -1.0, -1.0, -1.0,
+   1.0, -1.0, -1.0,
+   1.0, -1.0,  1.0,
+  -1.0, -1.0,  1.0,
+
+  // 右側面
+   1.0, -1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0,  1.0,  1.0,
+   1.0, -1.0,  1.0,
+
+  // 左側面
+  -1.0, -1.0, -1.0,
+  -1.0, -1.0,  1.0,
+  -1.0,  1.0,  1.0,
+  -1.0,  1.0, -1.0
+];
+</pre>
+
+<h2 id="Define_the_vertices'_colors" name="Define_the_vertices'_colors">頂点の色を定義する</h2>
+
+<p>24 個の座標それぞれについて、色の配列を作成しなければなりません。このコードでは始めに各面の色を定義します。次にループを用いてこれらの配列を各頂点の色情報に変換しています。</p>
+
+<pre class="brush: js">var colors = [
+  [1.0,  1.0,  1.0,  1.0],    // 前面: 白
+  [1.0,  0.0,  0.0,  1.0],    // 背面: 赤
+  [0.0,  1.0,  0.0,  1.0],    // 上面: 緑
+  [0.0,  0.0,  1.0,  1.0],    // 底面: 青
+  [1.0,  1.0,  0.0,  1.0],    // 右側面: 黄
+  [1.0,  0.0,  1.0,  1.0]     // 左側面: 紫
+];
+
+var generatedColors = [];
+
+for (j=0; j&lt;6; j++) {
+  var c = colors[j];
+
+  for (var i=0; i&lt;4; i++) {
+    generatedColors = generatedColors.concat(c);
+  }
+}
+
+var cubeVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
+</pre>
+
+<h2 id="Define_the_element_array" name="Define_the_element_array">エレメント配列を定義する</h2>
+
+<p>頂点の配列を生成したら、次にエレメントの配列を作成します。</p>
+
+<pre class="brush: js">var cubeVerticesIndexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+// この配列はそれぞれの面を 2 つの三角形として定義しており、
+// 各三角形の位置を指定するために、頂点の配列を指し示す
+// インデックスを使用します。
+
+var cubeVertexIndices = [
+  0,  1,  2,      0,  2,  3,    // 前面
+  4,  5,  6,      4,  6,  7,    // 背面
+  8,  9,  10,     8,  10, 11,   // 上面
+  12, 13, 14,     12, 14, 15,   // 底面
+  16, 17, 18,     16, 18, 19,   // 右側面
+  20, 21, 22,     20, 22, 23    // 左側面
+];
+
+// エレメントの配列を GL に渡す
+
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+</pre>
+
+<p><code>cubeVertexIndices</code> 配列はそれぞれの面を 2 つの三角形として定義し、それら三角形の頂点はキューブの頂点の配列に対するインデックスで指定しています。よって、キューブは 12 個の三角形の集合体として表されます。</p>
+
+<h2 id="Drawing_the_cube" name="Drawing_the_cube">キューブを描画する</h2>
+
+<p>次に <code>drawScene()</code> 関数に、キューブのインデックスバッファを用いて描画するためのコードを追加する必要がありますので、新たな <code>bindBuffer()</code> および <code>drawElements()</code> の呼び出しを追加します:</p>
+
+<pre class="brush: js">gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+setMatrixUniforms();
+gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+</pre>
+
+<p>キューブの各面は 2 個の三角形で構成されますので、1 面あたり 6 個・キューブ全体では 36個の頂点が存在することになります。ただし、それらの多くは重複しています。しかし、インデックスの配列は単なる数値のみで構成されていますので、アニメーションのフレームごとに渡すデータの量が過度に多くなることはありません。</p>
+
+<p>以上で、6 つの面が鮮やかな色で塗られたキューブが回転しながら跳ね回るアニメーションが完成しました。</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510)}}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5">コードを確認する</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample5/">新しいページでデモを開く</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
diff --git a/files/ja/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/ja/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
new file mode 100644
index 0000000000..62d91b8b63
--- /dev/null
+++ b/files/ja/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
@@ -0,0 +1,75 @@
+---
+title: WebGL 入門
+slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}<br>
+ <a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> をサポートするブラウザーでは、プラグインを使用することなく HTML <a href="/ja/docs/Web/API/Canvas_API"><code>canvas</code></a> 内で 3D グラフィックスをレンダリングするための、<a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 に基づく API をウェブコンテンツで使用できます。WebGL のプログラムは JavaScript で記述する制御コードと、コンピュータの Graphics Processing Unit (GPU) で実行する特殊効果コード (シェーダーコード) で構成されます。WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。</p>
+
+<p>この記事では、WebGL の基礎を紹介します。ここでは、3D グラフィックスに関する数学的な知識を理解していることを前提とします。よって、OpenGL そのものの説明は行いません。</p>
+
+<p>このチュートリアルで使用するコード例は、<a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">GitHub の webgl-examples リポジトリー</a>で確認できます。</p>
+
+<p>この一連の記事が WebGL 自体を紹介していることに注意してください。ただし <a href="https://threejs.org/">THREE.js</a> など、WebGL の機能をカプセル化する多くのフレームワークが利用でき、3D アプリケーションとゲームを簡単に構築することが可能です。</p>
+
+<h2 id="Preparing_to_render_in_3D" name="Preparing_to_render_in_3D">3D 描画の準備</h2>
+
+<p>レンダリングに WebGL を使用するために最初に必要なのは canvas です。以下の HTML フラグメントは、サンプルが描画される canvas を宣言します。</p>
+
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;canvas id="glCanvas" width="640" height="480"&gt;&lt;/canvas&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Preparing_the_WebGL_context" name="Preparing_the_WebGL_context">WebGL コンテキストの準備</h3>
+
+<p>JavaScript コードの <code>main()</code> 関数は、スクリプトがロードされるときに呼び出されます。その目的は、WebGL コンテキストをセットアップし、コンテンツのレンダリングを開始することです。</p>
+
+<pre class="brush: js notranslate">//
+// ここからスタート
+//
+function main() {
+  const canvas = document.querySelector("#glCanvas");
+  // GL コンテキストを初期化する
+  const gl = canvas.getContext("webgl");
+
+  // WebGL が使用可能で動作している場合にのみ続行します
+  if (gl === null) {
+    alert("WebGL を初期化できません。ブラウザーまたはマシンがサポートしていない可能性があります。");
+    return;
+  }
+
+  // クリアカラーを黒に設定し、完全に不透明にします
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // 指定されたクリアカラーでカラーバッファをクリアします
+  gl.clear(gl.COLOR_BUFFER_BIT);
+}
+
+window.onload = main;
+
+</pre>
+
+<p>ここで最初に行うことはキャンバスへの参照を取得し、それを <code>canvas</code> という名前の変数に割り当てることです。</p>
+
+<p>キャンバスを取得したら、<a href="/ja/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> を呼び出して文字列 <code>"webgl"</code> を渡すことにより、キャンバスの <a href="/ja/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a> を取得しようとします。ブラウザーが webgl をサポートしていない場合、<code>getContext</code> は <code>null</code> を返します。その場合はユーザーにメッセージを表示して終了します。</p>
+
+<p>コンテキストが正常に初期化された場合、変数 <code>gl</code> はそれへの参照です。この場合、クリアカラーを黒に設定し、そのカラーのコンテキストをクリア (背景色でキャンバスを再描画) します。</p>
+
+<p>この時点で、WebGL コンテキストが正常に初期化されるのに十分なコードがあり、コンテンツを受信する準備ができて待機している大きな黒い空のボックスになります。</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1">コードを確認する</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample1/">新しいページでデモを開く</a></p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">An introduction to WebGL</a>: Luz Caballero が著し、dev.opera.com で公開しています。この記事では WebGL とは何かやどのように WebGL が動作するか (レンダリングパイプラインの概念を含む) を説明して、WebGL ライブラリーをいくつか紹介しています。</li>
+ <li><a href="http://webglfundamentals.org/">WebGL Fundamentals</a></li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">An intro to modern OpenGL:</a> Joe Groff が OpenGL に関するすばらしい記事シリーズを著しており、OpenGL の歴史から重要なグラフィックスパイプラインの概念までの説明、およびどのように OpenGL が動作するかを示すデモを紹介しています。OpenGL の知識を持っていない場合は、ここから始めるとよいでしょう。</li>
+</ul>
+
+<div>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</div>
diff --git a/files/ja/web/api/webgl_api/tutorial/index.html b/files/ja/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..b4e362538e
--- /dev/null
+++ b/files/ja/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,42 @@
+---
+title: WebGL チュートリアル
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - Overview
+  - Tutorial
+  - WebGL
+  - WebGL API
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> は互換性があるブラウザで、プラグインを使用することなく HTML {{HTMLElement("canvas")}} 内で 3D グラフィックスをレンダリングするための、<a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 に基づく API を Web コンテンツで使用できるようにします。WebGL のプログラムは JavaScript で記述する制御コードと、コンピュータの Graphics Processing Unit (GPU) で実行する特殊効果コード (シェーダーコード) で構成されます。WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。</p>
+</div>
+
+<p><span class="seoSummary">このチュートリアルでは WebGL グラフィックスを描画するために <code>&lt;canvas&gt;</code> を使用する方法について、基礎から説明します。ここで提供するサンプルは WebGL で何ができるかの明確な見解をもたらし、また独自のコンテンツを構築し始められるようにするコード部品も提供します。</span></p>
+
+<h2 id="Before_you_start" name="Before_you_start">始める前に</h2>
+
+<p><code>&lt;canvas&gt;</code> 要素を使用することはそれほど難しくありませんが、<a href="/ja/docs/Web/HTML" title="HTML">HTML</a> や <a href="/ja/docs/Web/JavaScript" title="JavaScript">JavaScript</a> の基礎を理解していなければなりません。<code>&lt;canvas&gt;</code> 要素や WebGL は古いブラウザでサポートされていませんが、最近のバージョンではすべての主要なブラウザがサポートしています。canvas にグラフィックスを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをオンザフライで生成します。</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">チュートリアル</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">WebGL 入門</a></dt>
+ <dd>WebGL コンテキストのセットアップ方法</dd>
+ <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">WebGL コンテキストへの平面コンテンツの追加</a></dt>
+ <dd>WebGL を使用して単純なフラット図形を描画する方法</dd>
+ <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">シェーダーを用いた WebGL での色の指定</a></dt>
+ <dd>シェーダーを用いた図形への色の設定方法についてのデモンストレーション</dd>
+ <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">WebGL でのオブジェクトのアニメーティング</a></dt>
+ <dd>単純なアニメーションの作成の為のオブジェクトの回転と移動の方法について</dd>
+ <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">WebGL を用いた 3D オブジェクトの作成</a></dt>
+ <dd>3D オブジェクトの作成とアニメーションの方法について (立方体を用いた例)</dd>
+ <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL でのテクスチャの使用</a></dt>
+ <dd>オブジェクトの表面にテクスチャをマッピングする方法についてのデモンストレーション</dd>
+ <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">WebGL でのライティング</a></dt>
+ <dd>WebGL コンテキストにおいて光のエフェクトをシミュレートする方法について。</dd>
+ <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">WebGL でのテクスチャのアニメーティング</a></dt>
+ <dd>テクスチャをアニメーションさせる方法について。ここでは、回転する立方体の表面に Ogg ビデオをマッピングする手法を紹介します。</dd>
+</dl>
diff --git a/files/ja/web/api/webgl_api/tutorial/lighting_in_webgl/index.html b/files/ja/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
new file mode 100644
index 0000000000..20de0d4012
--- /dev/null
+++ b/files/ja/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
@@ -0,0 +1,176 @@
+---
+title: WebGL でのライティング
+slug: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
+
+<p>始めに WebGL について理解すべきことは、より広い OpenGL 標準とは異なり、WebGL はライティングをサポートしていないということです。これは自分自身で行う必要があります。幸いそれは難しいことではありませんので、この記事では基礎的な内容を扱います。</p>
+
+<h2 id="Simulating_lighting_and_shading_in_3D" name="Simulating_lighting_and_shading_in_3D">3D のライティングとシェーディングをシミュレートする</h2>
+
+<p>3D グラフィックにおけるシミュレートされたライティングの理論に詳しく触れるのはこの記事の範囲を大きく超えますが、その働きを知るのに役立ちます。ここでは深く触れませんので詳しくは、よく使われるライティングモデルについて解説している Wikipedia の <a href="http://en.wikipedia.org/wiki/Phong_shading" title="http://en.wikipedia.org/wiki/Phong_shading">Phong shading</a> (<a class="external" href="http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A9%E3%83%B3%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0" title="http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A9%E3%83%B3%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0">日本語版</a>) の記事をご覧ください。</p>
+
+<p>ライティングには 3 種類の基本タイプがあります。</p>
+
+<p><strong>環境光</strong> は環境全体に当たる光です。これは指向性がなく、環境内の表面に対して、その向きに関係なく均等に効果を与えます。</p>
+
+<p><strong>指向性光源</strong> は特定の方向から投射される光源です。これは遠方から照らされる光源であり、すべての光線はお互い平行に届きます。例えば太陽光が指向性光源になります。</p>
+
+<p><strong>点光源</strong> はある一点から全方向に向かって投射される光源です。これは現実にある多くの光源の通常動作です。例えば、電球は全方向に光を投射します。</p>
+
+<p>今回は、単純な指向性光源と環境光のみを考慮することでライティングモデルを単純化します。反射光や点光源は扱いません。そして、環境光と1つの指向性光源を<a href="/ja/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">前のデモ</a>の回転するキューブに当てます。</p>
+
+<p>点光源と反射光の概念を外したことにより、指向性光源を実装するために必要な情報は以下の 2 点になります:</p>
+
+<ol>
+ <li>各々の頂点と <strong>面法線</strong> を関連づける必要があります。これは頂点の表面に垂直なベクトルです。</li>
+ <li>光線が向かう方向を知る必要があります。これは <strong>方向ベクトル</strong> として定義されます。</li>
+</ol>
+
+<p>そしてバーテックスシェーダーを、環境光および表面に当たった角度による指向性光源の効果を考慮して各頂点の色を調整するように更新します。シェーダーのコードを見て、ライティングを行う方法を見ていきましょう。</p>
+
+<h2 id="Building_the_normals_for_the_vertices" name="Building_the_normals_for_the_vertices">頂点の法線を構築する</h2>
+
+<p>始めに行うべきことは、キューブを構成する全頂点の法線の配列を作成することです。キューブは単純なオブジェクトですので、これは簡単にできます。より複雑なオブジェクトの場合は、明らかに法線の計算が難しくなります。</p>
+
+<pre class="brush: js">cubeVerticesNormalBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+
+var vertexNormals = [
+  // 前面
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+
+  // 背面
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+
+  // 上面
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+
+  // 底面
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+
+  // 右側面
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+
+  // 左側面
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
+</pre>
+
+<p>これは、今ではもう見慣れたものでしょう。新しいバッファを作成し、これを作業用の配列にバインドします。そして、<code>bufferData()</code> を呼び出して頂点の法線の配列をバッファに送り込みます。</p>
+
+<p>次に、法線の配列をシェーダーの属性にバインドして、シェーダーのコードがその配列にアクセスできるようにするためのコードを <code>drawScene()</code> に追加します:</p>
+
+<pre class="brush: js">gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>最後に、シェーダーに対して <strong>正規行列</strong> を生成して渡すための、一様な行列を構築するコードを更新する必要があります。これは、光源に関するキューブの現在の向きを処理する際に法線を変換するのに使用されます:</p>
+
+<pre class="brush: js">var normalMatrix = mvMatrix.inverse();
+normalMatrix = normalMatrix.transpose();
+var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
+gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
+</pre>
+
+<h2 id="Update_the_shaders" name="Update_the_shaders">シェーダーを更新する</h2>
+
+<p>シェーダーが必要とするデータがすべて用意できましたので、次はシェーダーのコードを更新する必要があります。</p>
+
+<h3 id="The_vertex_shader" name="The_vertex_shader">バーテックスシェーダー</h3>
+
+<p>まずはバーテックスシェーダーを、環境光および指向性光源に基づいて各頂点のシェーディング値を生成するように更新します。以下のコードをご覧ください:</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute highp vec3 aVertexNormal;
+  attribute highp vec3 aVertexPosition;
+  attribute highp vec2 aTextureCoord;
+
+  uniform highp mat4 uNormalMatrix;
+  uniform highp mat4 uMVMatrix;
+  uniform highp mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+
+    // ライティング効果を適用する
+
+    highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
+    highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
+    highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
+
+    highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+    highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+    vLighting = ambientLight + (directionalLightColor * directional);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>頂点の位置が算出されると、頂点に対応するテクセルの座標が算出され、頂点のシェーディングの計算ができるようになります。</p>
+
+<p>始めに行うのは、頂点の法線に正規行列を乗じることで、法線を現在のキューブの向きと位置に基づくものに変換することです。次に、変換された法線と方向ベクトル (光線が来る方向) の点乗積を計算することにより、頂点に適用されるべき指向性光源の光量を算出することができます。光量を 0 より小さくすることはできませんので、算出結果が 0 より小さくなった場合は、その値を 0 に固定します。</p>
+
+<p>指向性光源の光量が算出されたら、環境光を取り込みさらに指向性光源の色と光量を足し込むことでライティングの値を決めることができます。この結果、フラグメントシェーダーが描画する各ピクセルの色を調整するために用いる RGB 値を得ることができます。</p>
+
+<h3 id="The_fragment_shader" name="The_fragment_shader">フラグメントシェーダー</h3>
+
+<p>フラグメントシェーダーは、バーテックスシェーダーが算出した光量の値を考慮するように更新する必要があります:</p>
+
+<pre class="brush: js">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    mediump vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+
+    gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>ここでは以前の例で行ったようにテクセルの色を取り出しますが、フラグメントの色を設定する前に、光源の影響を考慮してテクセルの色を調整するため、テクセルの色に光量の値を掛け合わせます。</p>
+
+<p>以上で完成です!</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510)}}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7">コードを確認する</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample7/">新しいページでデモを開く</a></p>
+
+<h2 id="Exercises_for_the_reader" name="Exercises_for_the_reader">読者への課題</h2>
+
+<p>基本的な頂点ごとのライティングを実装した今回の例は、単純なものであることは明らかです。より高度なグラフィックとしてピクセルごとのライティングを実装したいと考えるのは、正しい方向性です。</p>
+
+<p>同様に、光源の方向、光源の色などについても実験してみるとよいでしょう。</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
diff --git a/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
new file mode 100644
index 0000000000..cb0c035f3c
--- /dev/null
+++ b/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
@@ -0,0 +1,96 @@
+---
+title: シェーダーを用いた WebGL での色の指定
+slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
+
+<p><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">前のデモンストレーション</a>で正方形を作り出すことができたら、次に明らかなステップは、それに色をつけることです。これは、シェーダーを変更することで実現できます。</p>
+
+<h2 id="Applying_color_to_the_vertices" name="Applying_color_to_the_vertices">頂点に色を適用する</h2>
+
+<p>GL ではオブジェクトは頂点のセットを用いて構築され、各頂点は位置と色の情報を持っています。デフォルトでは、他のピクセルの色 (および位置など、その他の属性すべて) は線形補完法を用いて計算され、自動的になめらかなグラデーションを生成します。前に使用したバーテックスシェーダーでは頂点に色の情報を適用していませんでした。バーテックスシェーダーとフラグメントシェーダーで各ピクセルに白色を固定で割り当てており、正方形全体が白一色で描画されました。</p>
+
+<p>例えば、四隅が異なる色 (赤、青、緑、白) である正方形にグラデーションを作成したいとします。始めに行うことは、4 つの頂点にこれらの色を設定することです。これを行うには、まず頂点の色の配列を作成し、次にその配列を WebGL のバッファに格納します。これらは、以下に挙げるコードを <code>initBuffers()</code> 関数に追加することで実行します:</p>
+
+<pre class="brush: js">  var colors = [
+    1.0,  1.0,  1.0,  1.0,    // 白
+    1.0,  0.0,  0.0,  1.0,    // 赤
+    0.0,  1.0,  0.0,  1.0,    // 緑
+    0.0,  0.0,  1.0,  1.0     // 青
+  ];
+
+  squareVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+</pre>
+
+<p>このコードは 4 つの値が 4 組含まれている JavaScript の配列を作成することから始まります。各組は、それぞれの頂点の色を示します。続いてこれらの色情報を格納する WebGL バッファを新たに割り当てます。そして、配列を WebGL 浮動小数点数に変換してバッファに格納します。</p>
+
+<p>これらの色情報を実際に使うためには、カラーバッファから適切な色情報を取り出すようにバーテックスシェーダーを変更しなければなりません:</p>
+
+<pre class="brush: html">    &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+      attribute vec3 aVertexPosition;
+      attribute vec4 aVertexColor;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vColor = aVertexColor;
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>ここでの各頂点に関する重要な違いは、色の配列内で対応する値を、頂点の色情報として設定していることです。</p>
+
+<h2 id="Coloring_the_fragments" name="Coloring_the_fragments">フラグメントに色をつける</h2>
+
+<p>復習として、以前はフラグメントシェーダーを以下のようにしていました:</p>
+
+<pre class="brush: html">    &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+      void main(void) {
+        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>各ピクセルが補完された色を取り込むようにするため、<code>vColor</code> 変数から値を取り出すようにシェーダーを変更しなければなりません:</p>
+
+<pre class="brush: html">    &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+    	varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_FragColor = vColor;
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>これは単純な変更です。これにより各フラグメントは固定値ではなく、頂点からの相対的な位置に基づいて補完された色情報を受け取ります。</p>
+
+<h2 id="Drawing_using_the_colors" name="Drawing_using_the_colors">色情報を用いて描画する</h2>
+
+<p>次に、シェーダープログラムの色属性を初期化するコードを <code>initShaders()</code> ルーチンに追加しなければなりません:</p>
+
+<pre class="brush: js">  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+  gl.enableVertexAttribArray(vertexColorAttribute);
+</pre>
+
+<p>そして、実際に色情報を用いて正方形を描画するように drawScene() を変更することが可能になります:</p>
+
+<pre class="brush: js">  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510)}}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3">コードを確認する</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample3/">新しいページでデモを開く</a></p>
+
+<div>{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</div>
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
new file mode 100644
index 0000000000..76a80a87e9
--- /dev/null
+++ b/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
@@ -0,0 +1,209 @@
+---
+title: WebGL でのテクスチャの使用
+slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>現在、サンプルプログラムは回転する 3D キューブを描画します。今回はキューブの表面を単色で塗りつぶすのではなく、テクスチャをマッピングしてみましょう。</p>
+
+<h2 id="Loading_textures" name="Loading_textures">テクスチャを読み込む</h2>
+
+<p>始めに、テクスチャを読み込むコードを追加します。今回は 1 個のテクスチャを用いて、そのテクスチャをキューブの 6 面に貼り付けますが、テクスチャがいくつある場合でも同じ方法を適用できます。</p>
+
+<div class="note"><strong>注記:</strong> テクスチャの読み込みは<a href="/ja/docs/Web/HTTP/Access_control_CORS">クロスドメインの規則</a>に従うことへの注意が重要です。従ってコンテンツが CORS で認可されているサイトからのみ、テクスチャを読み込むことができます。クロスドメインのテクスチャについては、後ほど説明します。</div>
+
+<p>テクスチャを読み込むコードは以下のようになります:</p>
+
+<pre class="brush: js">function initTextures() {
+  cubeTexture = gl.createTexture();
+  cubeImage = new Image();
+  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.src = "cubetexture.png";
+}
+
+function handleTextureLoaded(image, texture) {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+</pre>
+
+<p><code>initTextures()</code> ルーチンは GL の <code>createTexture()</code> 関数を呼び出して、GL のテクスチャオブジェクト <code>cubeTexture</code> を作成することから始まります。そして、テクスチャを画像ファイルから読み込むために <code>Image</code> オブジェクトを作成して、そのオブジェクトにテクスチャとして使用したい画像ファイルをロードします。<code>handleTextureLoaded()</code> コールバックルーチンは、画像の読み込みが完了したときに実行されます。</p>
+
+<p>実際にテクスチャを作成するために、新しいテクスチャが操作したいカレントのテクスチャであることを、<code>gl.TEXTURE_2D</code> にバインドすることで指定します。その後読み込んだ画像は、テクスチャとして書き込むために <code>texImage2D()</code> へ渡されます。</p>
+
+<div class="note"><strong>注記:</strong> テクスチャの幅と高さのピクセル数は<strong>ほとんどの場合</strong>において、それぞれ 2 のべき乗 (1、2、4、8、16……) にしなければなりません。例外については、"<a href="/ja/docs/Web/WebGL/Using_textures_in_WebGL#Non_power-of-two_textures" title="Web/WebGL/Using_textures_in_WebGL#Using_non_Power-Of-Two_textures">2 のべき乗ではないテクスチャ</a>" のセクションをご覧ください。</div>
+
+<p>その次の 2 行はテクスチャのフィルタリングを設定しています。これは画像が拡大縮小される際に適用するフィルタの設定です。今回は、画像を拡大する場合はリニアフィルタ、縮小する場合はミップマップを使用します。ミップマップは <code>generateMipMap()</code> を呼び出すことで生成され、最後は null を <code>gl.TEXTURE_2D</code> にバインドしてテクスチャの操作を終了することで完了します。</p>
+
+<h3 id="Non_power-of-two_textures" name="Non_power-of-two_textures">2 のべき乗ではないテクスチャ</h3>
+
+<p>一般的に、辺の長さが 2 のべき乗であるテクスチャを使うことが理想的です。これはビデオメモリへ効率よく保存され、また使用方法が制限されません。制作されたテクスチャを近い 2 のべき乗のサイズにスケーリングするか、2 のべき乗のサイズで制作を始めます。それぞれの辺の長さを 1、2、4、8、16、32、64、128、256、512、1024、あるいは 2048 ピクセルにすべきです。また、多くのデバイス (すべてではありません) が 4096 ピクセルをサポートします。さらに、8192 ピクセル以上をサポートするものもあります。</p>
+
+<p>ときおり、特殊な事情で 2 のべき乗のテクスチャを使用することが困難な場合があります。サードパーティーの素材を使用する場合はたいてい、WebGL へ渡す前に HTML5 canvas を使用して 2 のべき乗のサイズに変換すると最良の結果を得られます。引き伸ばしが明白である場合は、UV 座標も必要でしょう。</p>
+
+<p>一方、2 のべき乗ではない (NPOT) テクスチャが<strong>不可欠である</strong>場合でも、WebGL は限定的にネイティブサポートしています。NPOT テクスチャは主に、テクスチャの寸法をモニターなど他の解像度に揃えなければならない場合や、前出の提案に従うだけの価値がない場合に有用です。しかし、このようなテクスチャはミップマッピングで使用することが<strong>できません</strong>。また、"繰り返し" (タイルまたはラップ) を<strong>行ってはいけません</strong>。</p>
+
+<p>テクスチャの繰り返しは、例えば小さなレンガの画像をタイリングしてレンガの壁を作ることです。</p>
+
+<p>ミップマッピングや UV リピートは、<code>bindTexture()</code> を使用してテクスチャを作成する際に <code>texParameteri()</code> で無効化できます。これによりミップマッピング、UV ラッピング、UV タイリングを犠牲にして NPOT テクスチャを使用できます。また、デバイスがテクスチャをどのように扱うかを制御できます。</p>
+
+<pre class="brush: js">// gl.LINEAR の代わりに gl.NEAREST も可能。ミップマップは不可
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// S 座標のラッピング (繰り返し) を禁止
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// T 座標のラッピング (繰り返し) を禁止
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</pre>
+
+<p>繰り返しますがこれらのパラメータを付加すると、WebGL デバイスは自動的に (サポートする最大サイズまでの) 任意の解像度のテクスチャを受け入れます。しかしこれらの設定を行わないと、WebGL は黒色 (<code>rgba(0,0,0,1)</code>) を返すことになり、NPOT テクスチャの全サンプルを受け入れてはなりません。</p>
+
+<h2 id="Mapping_the_texture_onto_the_faces" name="Mapping_the_texture_onto_the_faces">テクスチャを表面にマッピングする</h2>
+
+<p>以上で、テクスチャの読み込みと使用する準備ができました。しかしテクスチャが使用できるようになるには、まずキューブの面の頂点にテクスチャの座標をマッピングする必要があります。これは <code>initBuffers()</code> にある、キューブの各面に色を設定する既存のコードの置き換えになります。</p>
+
+<pre class="brush: js">  cubeVerticesTextureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+  var textureCoordinates = [
+    // 前面
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // 背面
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // 上面
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // 底面
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // 右側面
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // 左側面
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates),
+                gl.STATIC_DRAW);
+</pre>
+
+<p>このコードは始めに各面のテクスチャの座標を収める GL のバッファを作成して、そのバッファを書き込みを行う配列としてバインドします。</p>
+
+<p><code>textureCoordinates</code> 配列は、各面の各座標に対応するテクスチャの座標を定義します。テクスチャの座標の範囲は 0.0 から 1.0 であることに注意してください。テクスチャマッピングのために、テクスチャの寸法は実際の大きさに関わらず 0.0 から 1.0 の範囲に正規化されます。</p>
+
+<p>テクスチャマッピングの配列を設定したら、配列をバッファに渡すことで GL がそのデータを使用する準備が完了します。</p>
+
+<div class="note">注記: WebKit ベースのブラウザでは、<code>WebGLFloatArray</code> の代わりに <code>Float32Array</code> を使用しなければならないでしょう。</div>
+
+<h2 id="Updating_the_shaders" name="Updating_the_shaders">シェーダーを更新する</h2>
+
+<p>シェーダープログラム (およびシェーダーを初期化するコード) も、単色に代わりテクスチャを使用するように更新する必要があります。</p>
+
+<p>始めに <code>initShaders()</code> で必要になる、シンプルな変更点を見てみましょう:</p>
+
+<pre class="brush: js">  textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+  gl.enableVertexAttribArray(textureCoordAttribute);
+</pre>
+
+<p>これは頂点の色属性を設定するコードを、各頂点のテクスチャ座標を包含するコードに置き換えます。</p>
+
+<h3 id="The_vertex_shader" name="The_vertex_shader">バーテックスシェーダー</h3>
+
+<p>次にバーテックスシェーダーを、色のデータを取り出すものからテクスチャ座標のデータを取り出すものに置き換える必要があります。</p>
+
+<pre class="brush: html">    &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+      attribute vec3 aVertexPosition;
+      attribute vec2 aTextureCoord;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying highp vec2 vTextureCoord;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vTextureCoord = aTextureCoord;
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>重要な変更点は、頂点の色を取り出すのに代わりテクスチャ座標を設定していることです。これは頂点に対応する、テクスチャ内の位置を指し示します。</p>
+
+<h3 id="The_fragment_shader" name="The_fragment_shader">フラグメントシェーダー</h3>
+
+<p>フラグメントシェーダーも同様に更新する必要があります:</p>
+
+<pre class="brush: html">    &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+      varying highp vec2 vTextureCoord;
+
+      uniform sampler2D uSampler;
+
+      void main(void) {
+        gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>色の値をフラグメントの色に割り当てるのに代わり、フラグメントの色は、サンプラーが最適とするフラグメントの位置のテクセル (テクスチャ内のピクセル) を取り出すことで算出されます。</p>
+
+<h2 id="Drawing_the_textured_cube" name="Drawing_the_textured_cube">テクスチャを貼り付けたキューブを描画する</h2>
+
+<p><code>drawScene()</code> 関数の変更点は簡単です (コードを明瞭にするために、キューブを空間中で動かすアニメーションのコードを取り除いて単に回転するようにした点は除きます)。</p>
+
+<p>色を割り当てるコードをテクスチャを割り当てるようにするためには、以下のように置き換えます:</p>
+
+<pre class="brush: js">  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+</pre>
+
+<p>GL は 32 個のテクスチャレジスタを提供し、その 1 つ目が <code>gl.TEXTURE0</code> です。前に読み込んだテクスチャをそのレジスタに結びつけて、そのテクスチャを使用するためにシェーダーサンプラー <code>uSampler</code> (シェーダープログラムにより明示されます) を設定します。</p>
+
+<p>以上でテクスチャが貼り付けられた、回転するキューブが完成します。</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510)}}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6">コードを確認する</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample6/">新しいページでデモを開く</a></p>
+
+<h2 id="Cross-domain_textures" name="Cross-domain_textures">クロスドメインのテクスチャ</h2>
+
+<p>WebGL のテクスチャの読み込みは、クロスドメインアクセス制御に従います。コンテンツで他のドメインからテクスチャを読み込むためには、CORS で許可を得なければなりません。CORS について詳しくは、<a href="/ja/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a> をご覧ください。</p>
+
+<p>CORS で許可された画像を WebGL のテクスチャとして使用する方法の説明を <a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/" title="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">こちらの hacks.mozilla.org の記事</a> に掲載していますので、<a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html" title="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">サンプル</a> と合わせてご覧ください。</p>
+
+<div class="note">
+<p><strong>注記:</strong> WebGL テクスチャ向けの CORS サポートと、画像要素の <code>crossOrigin</code> 属性は {{Gecko("8.0")}} で実装されました。</p>
+</div>
+
+<p>汚染された (書き込みのみ) 2D canvas を WebGL のテクスチャとして使用することはできません。2D {{HTMLElement("canvas")}} が汚染されたとは例えば、クロスドメインの画像が canvas 上に描画された状態を指します。</p>
+
+<div class="note">
+<p><strong>注記:</strong> Canvas 2D <code>drawImage</code> 向けの CORS サポートを {{Gecko("9.0")}} で実装しました。これは、CORS で許可されたクロスドメインの画像が 2D canvas を汚染しないので、2D canvas を WebGL のテクスチャ素材として引き続き使用できることを意味します。</p>
+</div>
+
+<div class="note">
+<p><strong>注記:</strong> クロスドメインの動画に対する CORS サポートと、{{HTMLElement("video")}} 要素の<code>crossorigin</code> 属性は {{Gecko("12.0")}} で実装されました。</p>
+</div>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>