WebGL texImage2D API 使用场景 texture

• 2D缓存贴图使用的方式

const image = new Image();
image.onload = function () {
    gl.bindTexture(gl.TEXTURE_2D, texture); // gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); //设置参数
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);//数据指向缓冲区    
    gl.generateMipmap(gl.TEXTURE_2D);
};

• 3D缓存贴图的使用

const image = new Image();
image.onload = function () {
    gl.bindTexture(gl.TEXTURE_CUBE, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
    gl.generateMipmap(gl.TEXTURE_CUBE);
}

• 生成数据贴图的方式
  • 需要多写入width height 0三个参数

const width = 1;
const height = 1;
const pixel = new Uint8Array([0, 0, 255]);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, width, height, 0, gl.RGB, gl.UNSIGNED_BYTE, pixel);

• FBO的方式

 var texture = gl.createTexture(); // 纹理创建 
 gl.bindTexture(gl.TEXTURE_2D, texture); // Bind the object to target
 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);//最后是null
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

 var depthBuffer = gl.createRenderbuffer(); // 创建渲染缓冲区
 gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer); // Bind the object to target
 gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT);

 var framebuffer = gl.createFramebuffer(); //帧缓冲区
 framebuffer.texture = texture; // Store the texture object
 gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); //帧缓冲区 贴图 必须要这个
 gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer); //帧缓冲区 渲染缓冲区