日常问题记录


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 = &amp;#039;texture.png&amp;#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, &amp;#039;u_texture&amp;#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 = &amp;#039;texture.png&amp;#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, &amp;#039;u_texture&amp;#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>

页面列表

ITEM_HTML