gl.createTexture
<p><code>gl.createTexture</code> 是 WebGL API 中的一个方法，用于创建一个新的纹理对象。纹理对象通常用于将图像或数据应用到 3D 模型的表面上。以下是 <code>gl.createTexture</code> 的基本用法和步骤：</p>
<h3>1. 创建纹理对象</h3>
<p>首先，你需要调用 <code>gl.createTexture</code> 来创建一个纹理对象。</p>
<pre><code class="language-javascript">const texture = gl.createTexture();</code></pre>
<h3>2. 绑定纹理</h3>
<p>接下来，你需要将纹理绑定到 WebGL 的纹理单元上。WebGL 有多个纹理单元（<code>TEXTURE0</code>, <code>TEXTURE1</code>, 等等），你可以通过 <code>gl.activeTexture</code> 来激活特定的纹理单元，然后使用 <code>gl.bindTexture</code> 将纹理绑定到该单元。</p>
<pre><code class="language-javascript">gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);</code></pre>
<h3>3. 设置纹理参数</h3>
<p>你可以使用 <code>gl.texParameteri</code> 来设置纹理的参数，例如纹理的过滤方式和纹理坐标的环绕方式。</p>
<pre><code class="language-javascript">gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_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);</code></pre>
<h3>4. 上传纹理数据</h3>
<p>你可以使用 <code>gl.texImage2D</code> 将图像数据上传到纹理中。图像数据可以是 <code>Image</code> 对象、<code>ImageData</code> 对象、<code>HTMLCanvasElement</code> 或 <code>HTMLVideoElement</code>。</p>
<pre><code class="language-javascript">const image = new Image();
image.src = &#039;texture.png&#039;;
image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
};</code></pre>
<h3>5. 使用纹理</h3>
<p>在着色器中，你可以通过采样器（<code>sampler2D</code>）来访问纹理。在 JavaScript 中，你需要将纹理单元传递给着色器。</p>
<pre><code class="language-javascript">const textureLocation = gl.getUniformLocation(shaderProgram, &#039;u_texture&#039;);
gl.uniform1i(textureLocation, 0); // 0 对应 TEXTURE0</code></pre>
<h3>6. 清理</h3>
<p>如果你不再需要纹理对象，可以调用 <code>gl.deleteTexture</code> 来删除它。</p>
<pre><code class="language-javascript">gl.deleteTexture(texture);</code></pre>
<h3>完整示例</h3>
<p>以下是一个完整的示例，展示了如何创建、绑定、设置参数、上传数据并使用纹理：</p>
<pre><code class="language-javascript">// 创建纹理对象
const texture = gl.createTexture();
// 绑定纹理
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_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);
// 上传纹理数据
const image = new Image();
image.src = &#039;texture.png&#039;;
image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
};
// 使用纹理
const textureLocation = gl.getUniformLocation(shaderProgram, &#039;u_texture&#039;);
gl.uniform1i(textureLocation, 0); // 0 对应 TEXTURE0</code></pre>
<h3>注意事项</h3>
<ul>
<li>纹理的尺寸通常需要是 2 的幂（如 256x256, 512x512 等），除非你设置了 <code>gl.texParameteri</code> 的 <code>TEXTURE_WRAP_S</code> 和 <code>TEXTURE_WRAP_T</code> 为 <code>CLAMP_TO_EDGE</code>。</li>
<li>纹理的加载是异步的，因此你需要确保在图像加载完成后再进行纹理操作。</li>
</ul>
<p>通过以上步骤，你可以在 WebGL 中成功创建并使用纹理。</p>