js 图片 转 texture

要将图片转换为 WebGL 可用的纹理（texture），需要使用 JavaScript 和 WebGL API。以下是一个简单的示例代码，可以将图片加载为纹理：

// 创建一个 WebGL 上下文
const gl = canvas.getContext('webgl');

// 创建一个纹理对象
const texture = gl.createTexture();

// 创建一个 Image 对象
const image = new Image();

// 指定图片加载完成后的回调函数
image.onload = function() {
  // 将图片绑定到纹理对象上
  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_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);
};

// 加载图片
image.src = 'path/to/image.png';

以上代码创建了一个 WebGL 上下文，然后创建了一个纹理对象和一个 Image 对象。在 Image 对象的 onload 回调函数中，将图片绑定到纹理对象上，并将图片数据上传到纹理对象中。最后，设置纹理对象的参数，完成了图片转换为纹理的操作。