WebGL：将8位灰度图像加载到纹理时图像无效

Question

I am trying to render an 8-bit grayscale JPG downloaded from my server into a texture to render with WebGL.

// Pretend for the sake of example that I have passed in an argument 
// 'img' that is an Image object that I used to download the jpg.
// See the EDIT below for how this happens...

// ...also presume that I have set up my WebGL context and assigned it 
// to the variable 'gl':
// const gl = canvas.getContext('experimental-webgl');

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// Set the parameters so we can render any size image.
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);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Upload the image into the texture.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, gl.LUMINANCE, gl.UNSIGNED_BYTE, img);

At this point, WebGL slaps me in the face and takes my lunch money:

WebGL: INVALID_VALUE: texImage2D: invalid image

and I am left to ask: WHAT MOAR U WANT WebGL?? WHY NOT U JUST B HAPPY???

I'm probably missing something basic, but the internets are a mess with WebGL stuff that doesn't answer my question. Can any WebGL gurus here advise?

Here is the image:

EDIT:

Here are some more details about how the image is obtained. Note: the reason for doing it this way is that I need a download queue that I can shuffle, cancel, and restart, ad nauseam. Hence the use of fetch, blobs, and object URLs. This whole thing is part of a deep-zoom image viewer that should efficiently load only the image tiles visible in the viewport (which often changes moment to moment). Anyway, here's how I get the image:

// Take care of vendor prefixes:
window.URL = window.URL || window.webkitURL;

// This is where we'll assign our final product
const imageTag = new Image();

imageTag.onerror = (err) => {
  console.error('IMG ERROR:', err);
};
imageTag.onload = () => {
  // Once the image tag has loaded the blob data, clean up our object url:
  window.URL.revokeObjectURL(imageTag.src);

  // imageTag is now passed into the code above as 'img'
};

// Grab the image data as a blob
fetch(`<url_of_image>`)
  .then(res => res.blob())
  .then(blob => {
    // When we get the image data, wrap it in an object url and assign
    // it to src. The onload event won't fire until the next tick.
    imageTag.src = window.URL.createObjectURL(blob);
  });

I should point out that I was originally rendering using the canvas2D API, and that it was able to draw the images just fine using the drawImage() method. So I'm pretty sure the images objects are loading ok. My reason for implementing a WebGL renderer is to open the door to greater performance enhancements.

Thanks for looking!

Answer 1

From the search through Chromium codebase for the error message string and looking at revokeObjectURL reference it seems that it is the culprit. The image content represented by image URL simply gets "freed" to early. The solution would be to call revokeObjectURL after calling texImage2D .

Answer 2

Alright party people, I figured this out (one way to do it at least).

The original flow, which I could never get to work, was:

1. Fetch image data as blob
2. Use ObjectURL to be able to pass blob to image tag on src attribute
3. Pass image tag into texImage2D (old method signature)

The new flow that worked for me is:

1. Fetch image data as array buffer
2. Decode jpg data into Uint8Array using jpeg-js
3. Pass Uint8Array into texImage2D (new method signature)

It looks like this:

// I am using the decode() method from jpeg-js. Passing true as a second parameter 
// causes the data to be returned wrapped in a Uint8Array. Even though the data
// was one channel going in, it's going to come out with all four (RGBA) channels.

import { decode } from 'jpeg-js';

// Like before, please presume a global gl variable to be my WebGL context.
const gl = '<my-webgl-context-that-I-set-up-elsewhere>';

fetch(`<url_of_image>`)
  .then(res => res.arrayBuffer())
  .then(buffer => {
    // When we get the image data, it's still encoded. We need to decode it
    // before we've got pixel data. We want it as a Uint8Array which will make
    // texImage2D() happy.
    const pixels = decode(buffer, true);

    // Set up a new texture where we'll capture and keep the image data
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);

    // Set the parameters so we can render any size image.
    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);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    // Upload the image into the texture:

    // Here we are telling WebGL how many bytes each pixel will be (I think 
    // think the default is 4, but I thought that this step was important to show).
    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);

    // jpeg-js is kind enough to provide the dimensions of the image data in its
    // returned value. Since jpeg-js returns the data with all 4 channels, we use
    // gl.RGBA here.
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, pixels.width, pixels.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels.data);

    // Ready to draw!
  });

Hopefully this is of use to someone in the future. Thanks to everyone who contributed thoughts and ideas, and thanks to the collaborators on jpeg-js!