Javascript WebGL纹理像素值修改

我正在尝试修改纹理的像素值。 我想把纹理设置得更透明。 我使用gl=canvas.getContext（“webgl”）和gl.readPixels（）来获取纹理的像素值

代码如下：

  var framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, sTexture, 0);

  if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE)
  {
      var sTextureSize = sTexture.image.width * sTexture.image.height * 4;    // r, g, b, a
      var pixels = new Uint8Array( sTextureSize );
      gl.readPixels( 0, 0, sTexture.image.width, sTexture.image.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels );

      for( var i=0 ; i<sTextureSize ; i+=4 )
      {
          if( pixels[i+3] > 0 )
          {
              pixels[i+3] = Math.min( 255, pixels[i+3]*0.5 );     // set half alpha
          }
      }

  }

  gl.deleteFramebuffer(framebuffer);

var framebuffer=gl.createFramebuffer（）；
gl.bindFramebuffer（gl.FRAMEBUFFER，FRAMEBUFFER）；
gl.framebufferTexture2D（gl.FRAMEBUFFER，gl.COLOR_ATTACHMENT0，gl.TEXTURE_2D，sTexture，0）；
如果（总账checkFramebufferStatus（总账FRAMEBUFFER）==总账FRAMEBUFFER\u COMPLETE）
{
var sTextureSize=sTexture.image.width*sTexture.image.height*4；//r，g，b，a
var像素=新的Uint8Array（StextResize）；
gl.readPixels（0,0，sTexture.image.width，sTexture.image.height，gl.RGBA，gl.UNSIGNED_字节，像素）；
对于（变量i=0；i 0）
{
像素[i+3]=Math.min（255，像素[i+3]*0.5）；//设置半阿尔法
}
}
}
gl.deleteFramebuffer（帧缓冲区）；

在完成这个过程之后，我的纹理的透明度看起来没有改变

我知道我可以通过着色器代码修改纹理alpha值，但是否可以直接编辑纹理像素值并立即显示效果

---

谢谢您的建议。

您必须使用

gl.texImage2D

  var framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, sTexture, 0);

  if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE)
  {
      var sTextureSize = sTexture.image.width * sTexture.image.height * 4;    // r, g, b, a
      var pixels = new Uint8Array( sTextureSize );
      gl.readPixels( 0, 0, sTexture.image.width, sTexture.image.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels );

      for( var i=0 ; i<sTextureSize ; i+=4 )
      {
          if( pixels[i+3] > 0 )
          {
              pixels[i+3] = Math.min( 255, pixels[i+3]*0.5 );     // set half alpha
          }
      }

      // upload changes
      gl.bindTexture(gl.TEXTURE_2D, sTexture);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 
                    sTexture.image.width, sTexture.image.height, 0,
                    gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  }

  gl.deleteFramebuffer(framebuffer);

var framebuffer=gl.createFramebuffer（）；
gl.bindFramebuffer（gl.FRAMEBUFFER，FRAMEBUFFER）；
gl.framebufferTexture2D（gl.FRAMEBUFFER，gl.COLOR_ATTACHMENT0，gl.TEXTURE_2D，sTexture，0）；
如果（总账checkFramebufferStatus（总账FRAMEBUFFER）==总账FRAMEBUFFER\u COMPLETE）
{
var sTextureSize=sTexture.image.width*sTexture.image.height*4；//r，g，b，a
var像素=新的Uint8Array（StextResize）；
gl.readPixels（0,0，sTexture.image.width，sTexture.image.height，gl.RGBA，gl.UNSIGNED_字节，像素）；
对于（变量i=0；i 0）
{
像素[i+3]=Math.min（255，像素[i+3]*0.5）；//设置半阿尔法
}
}
//上载更改
gl.bindTexture（gl.TEXTURE_2D，sTexture）；
gl.Texamage2D（gl.TEXTURE_2D，0，gl.RGBA，
sTexture.image.width，sTexture.image.height，0，
gl.RGBA，gl.UNSIGNED_字节，像素）；
}
gl.deleteFramebuffer（帧缓冲区）；

gl.readPixels

只读取纹理的副本。您可以修改副本。然后必须将该副本上载回纹理

注意：如果您正在使用mips，您需要调用

gl.generateMipmap

或手动更新mips（如果希望它们考虑您的更改）