The WebGL texImage2D API uses the scenario texture

• Store the way the map is used

  gl.bindTexture(gl.TEXTURE_2D, texture); // gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // Set parameters
  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);// The data points to the buffer
Copy the code

• How to generate data maps

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);
Copy the code

• FBO way

 var texture = gl.createTexture(); // Create a texture
 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);// The last is null
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

 var depthBuffer = gl.createRenderbuffer(); // Create the render buffer
 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(); // Frame buffer
 framebuffer.texture = texture; // Store the texture object
 gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); // Frame buffer map must have this
 gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer); // Frame buffer Render buffer
Copy the code