javascript - 无论我放入其中的数据如何，纹理都是黑色的

Question

我尝试将数据放入片段着色器以通过纹理为 2 个三 Angular 形着色，但给出的颜色是黑色(可能是默认颜色？)，而不是预期的绿色或红色。

我尝试这样做的来源是 https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html#textures-in-fragment-shaders .我把那里的所有东西都放在我的源代码中，我想如果我在我的纹理中放一个绿色像素和一个红色像素，那么它需要有不同于黑色的颜色，但它是黑色的。

那是片段着色器:

precision mediump float;

uniform sampler2D u_texture;

void main() {
   vec2 texcoord = vec2(0.5, 0.5)  // get a value from the middle of the texture
   gl_FragColor = texture2D(u_texture, texcoord);
}

在那里我创建了纹理并将数据放入其中。

var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
var level = 0;
var width = 2;
var height = 1;
var data = new Uint8Array([
   255, 0, 0, 255,   // a red pixel
   0, 255, 0, 255,   // a green pixel
]);
gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);

我尝试将不同的数据放入具有不同颜色的纹理中，但结果是一样的。

Answer 1

您必须将纹理缩小功能设置为“非 mipmap”过滤器，否则纹理不是 mipmap完全的。例如:

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

默认情况下，缩小参数为 NEAREST_MIPMAP_LINEAR。此参数值需要纹理的 mipmap 才能完整。

另一种选择是通过以下方式生成 mipmap:

gl.generateMipmap(gl.TEXTURE_2D)

但为此，纹理的宽度和高度必须是 2 的幂(对于 WebGL 1.0)。参见 WebGL specification - 5.13.8 Texture objects .

请注意，如果纹理不是完整的 mipmap，则纹理元素获取的返回值为 (0, 0, 0, 1)，这会导致“黑色”颜色。