---
title: 'WebGLRenderingContext.compressedTexImage[23]D()'
slug: Web/API/WebGLRenderingContext/compressedTexImage2D
translation_of: Web/API/WebGLRenderingContext/compressedTexImage2D
---
<div>{{APIRef("WebGL")}}</div>

<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">下面这两个function：</span></font></code></p>

<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> </span></font><strong>WebGLRenderingContext.compressedTexImage2D()</strong></code>  and <strong><code>WebGL2RenderingContext.compressedTexImage3D()</code></strong> 在<a href="/en-US/docs/Web/API/WebGL_API">WebGL API </a>中特指压缩二维或三维纹理图像的格式。</p>

<p>在使用这些方法之前，必须通过 <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">WebGL extensions</a>， 也就是 WebGL扩展启用压缩图像格式。</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">// WebGL 1:
void <var>gl</var>.compressedTexImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>width</var>, <var>height</var>, <var>border</var>, ArrayBufferView? <var>pixels</var>);

// Additionally available in WebGL 2:
// read from buffer bound to gl.PIXEL_UNPACK_BUFFER
void <var>gl</var>.compressedTexImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>width</var>, <var>height</var>, <var>border</var>, GLsizei <var>imageSize</var>, GLintptr <var>offset</var>);
void <var>gl</var>.compressedTexImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>width</var>, <var>height</var>, <var>border</var>,
                             ArrayBufferView <var>srcData</var>, optional <var>srcOffset</var>, optional <var>srcLengthOverride</var>);

 // read from buffer bound to gl.PIXEL_UNPACK_BUFFER
void <var>gl</var>.compressedTexImage3D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>width</var>, <var>height</var>, <var>depth</var>, <var>border</var>, GLsizei <var>imageSize</var>, GLintptr <var>offset</var>);
void <var>gl</var>.compressedTexImage3D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>width</var>, <var>height</var>, <var>depth</var>, <var>border</var>,
                             ArrayBufferView <var>srcData</var>, optional <var>srcOffset</var>, optional <var>srcLengthOverride</var>);</pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code>target</code></dt>
 <dd>A {{domxref("GLenum")}} specifying the binding point (target) of the active texture. Possible values for <code>compressedTexImage2D</code>:
 <ul>
  <li><code>gl.TEXTURE_2D</code>: A two-dimensional texture.</li>
  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_X</code>: Positive X face for a cube-mapped texture.</li>
  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_X</code>: Negative X face for a cube-mapped texture.</li>
  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Y</code>: Positive Y face for a cube-mapped texture.</li>
  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Y</code>: Negative Y face for a cube-mapped texture.</li>
  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Z</code>: Positive Z face for a cube-mapped texture.</li>
  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Z</code>: Negative Z face for a cube-mapped texture.</li>
 </ul>
 Possible values for <code>compressedTexImage3D</code>:

 <ul>
  <li><code>gl.TEXTURE_2D_ARRAY</code></li>
  <li><code>gl.TEXTURE_3D</code></li>
 </ul>
 </dd>
 <dt><code>level</code></dt>
 <dd>A {{domxref("GLint")}} specifying the level of detail. Level 0 is the base image level and level <em>n</em> is the <em>n</em>th mipmap reduction level.</dd>
 <dt><code>internalformat</code></dt>
 <dd>A {{domxref("GLenum")}} specifying the compressed image format. Compressed image formats must be enabled by <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">WebGL extensions</a> before using this method. All values are possible for <code>compressedTexImage2D</code>. See <a href="/en-US/docs/Web/API/WebGL_API/Compressed_texture_formats">compressed texture formats</a> for which are valid for <code>compressedTexImage3D</code>. Possible values:
 <ul>
  <li>When using the {{domxref("WEBGL_compressed_texture_s3tc")}} extension:
   <ul>
    <li><code>ext.COMPRESSED_RGB_S3TC_DXT1_EXT</code></li>
    <li><code>ext.COMPRESSED_RGBA_S3TC_DXT1_EXT</code></li>
    <li><code>ext.COMPRESSED_RGBA_S3TC_DXT3_EXT</code></li>
    <li><code>ext.COMPRESSED_RGBA_S3TC_DXT5_EXT</code></li>
   </ul>
  </li>
  <li>When using the {{domxref("WEBGL_compressed_texture_s3tc_srgb")}} extension:
   <ul>
    <li><code>ext.COMPRESSED_SRGB_S3TC_DXT1_EXT</code></li>
    <li><code>ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT</code></li>
    <li><code>ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT</code></li>
    <li><code>ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT</code></li>
   </ul>
  </li>
  <li>When using the {{domxref("WEBGL_compressed_texture_etc")}} extension:
   <ul>
    <li><code>ext.COMPRESSED_R11_EAC</code></li>
    <li><code>ext.COMPRESSED_SIGNED_R11_EAC</code></li>
    <li><code>ext.COMPRESSED_RG11_EAC</code></li>
    <li><code>ext.COMPRESSED_SIGNED_RG11_EAC</code></li>
    <li><code>ext.COMPRESSED_RGB8_ETC2</code></li>
    <li><code>ext.COMPRESSED_RGBA8_ETC2_EAC</code></li>
    <li><code>ext.COMPRESSED_SRGB8_ETC2</code></li>
    <li><code>ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC</code></li>
    <li><code>ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2</code></li>
    <li><code>ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2</code></li>
   </ul>
  </li>
  <li>When using the {{domxref("WEBGL_compressed_texture_pvrtc")}} extension:
   <ul>
    <li><code>ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG</code></li>
    <li><code>ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG</code></li>
    <li><code>ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG</code></li>
    <li><code>ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG</code></li>
   </ul>
  </li>
  <li>When using the {{domxref("WEBGL_compressed_texture_etc1")}} extension:
   <ul>
    <li><code>ext.COMPRESSED_RGB_ETC1_WEBGL</code></li>
   </ul>
  </li>
  <li>When using the {{domxref("WEBGL_compressed_texture_atc")}} extension:
   <ul>
    <li><code>ext.COMPRESSED_RGB_ATC_WEBGL</code></li>
    <li><code>ext.COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL</code></li>
    <li><code>ext.COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL</code></li>
   </ul>
  </li>
  <li>When using the {{domxref("WEBGL_compressed_texture_astc")}} extension:
   <ul>
    <li><code>ext.COMPRESSED_RGBA_ASTC_4x4_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_5x4_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_5x5_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_6x5_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_6x6_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_8x5_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_8x6_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_8x8_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_10x5_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_10x6_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_10x10_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_12x10_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR</code></li>
    <li><code>ext.COMPRESSED_RGBA_ASTC_12x12_KHR<br>
     ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR</code></li>
   </ul>
  </li>
  <li>When using the {{domxref("EXT_texture_compression_bptc")}} extension:
   <ul>
    <li><code>ext.COMPRESSED_RGBA_BPTC_UNORM_EXT</code></li>
    <li><code>ext.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT</code></li>
    <li><code>ext.COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT</code></li>
    <li><code>ext.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT</code></li>
   </ul>
  </li>
  <li>When using the {{domxref("EXT_texture_compression_rgtc")}} extension:
   <ul>
    <li><code>ext.COMPRESSED_RED_RGTC1_EXT</code></li>
    <li><code>ext.COMPRESSED_SIGNED_RED_RGTC1_EXT</code></li>
    <li><code>ext.COMPRESSED_RED_GREEN_RGTC2_EXT</code></li>
    <li><code>ext.COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT</code></li>
   </ul>
  </li>
 </ul>
 </dd>
 <dt><code>width</code></dt>
 <dd>A {{domxref("GLsizei")}} specifying the width of the texture.</dd>
 <dt><code>height</code></dt>
 <dd>A {{domxref("GLsizei")}} specifying the height of the texture.</dd>
 <dt><code>depth</code></dt>
 <dd>A {{domxref("GLsizei")}} specifying the depth of the texture/the number of textures in a <code>TEXTURE_2D_ARRAY</code>.</dd>
 <dt><code>border</code></dt>
 <dd>A {{domxref("GLint")}} specifying the width of the border. Must be 0.</dd>
 <dt><code>imageSize</code></dt>
 <dd>A {{domxref("GLsizei")}} specifying the number of bytes to read from the buffer bound to <code>gl.PIXEL_UNPACK_BUFFER</code>.</dd>
 <dt><code>offset</code></dt>
 <dd>A {{domxref("GLintptr")}} specifying the offset in bytes from which to read from the buffer bound to <code>gl.PIXEL_UNPACK_BUFFER</code>.</dd>
 <dt><code>pixels</code></dt>
 <dd>An {{domxref("ArrayBufferView")}} that be used as a data store for the compressed image data in memory.</dd>
</dl>

<h3 id="Return_value">Return value</h3>

<p>None.</p>

<h2 id="Examples">Examples</h2>

<pre class="brush: js">var ext = (
  gl.getExtension('WEBGL_compressed_texture_s3tc') ||
  gl.getExtension('MOZ_WEBGL_compressed_texture_s3tc') ||
  gl.getExtension('WEBKIT_WEBGL_compressed_texture_s3tc')
);

var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.compressedTexImage2D(gl.TEXTURE_2D, 0, ext.COMPRESSED_RGBA_S3TC_DXT5_EXT, 512, 512, 0, textureData);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('WebGL', "#COMPRESSEDTEXIMAGE2D", "compressedTexImage2D")}}</td>
   <td>{{Spec2('WebGL')}}</td>
   <td>Initial definition for WebGL.</td>
  </tr>
  <tr>
   <td>{{SpecName('OpenGL ES 2.0', "glCompressedTexImage2D.xml", "glCompressedTexImage2D")}}</td>
   <td>{{Spec2('OpenGL ES 2.0')}}</td>
   <td>Man page of the (similar) OpenGL ES 2.0 API.</td>
  </tr>
  <tr>
   <td>{{SpecName('OpenGL ES 3.0', "glCompressedTexImage2D.xhtml", "glCompressedTexImage2D")}}</td>
   <td>{{Spec2('OpenGL ES 3.0')}}</td>
   <td>Man page of the (similar) OpenGL ES 3.0 API.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<h3 id="compressedTexImage2D">compressedTexImage2D</h3>

<p>{{Compat("api.WebGLRenderingContext.compressedTexImage2D")}}</p>

<h3 id="compressedTexImage3D">compressedTexImage3D</h3>

<p>{{Compat("api.WebGL2RenderingContext.compressedTexImage3D")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Using WebGL extensions</a></li>
 <li>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_astc")}}</li>
 <li>{{domxref("EXT_texture_compression_bptc")}}</li>
 <li>{{domxref("EXT_texture_compression_rgtc")}}</li>
</ul>