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

Question

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

我尝试这样做的来源是 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

您必须将纹理缩小功能设置为 "non mipmap" 过滤器，否则纹理不 mipmap 完整。例如：

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

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

另一个选项是通过以下方式生成 mipmap：

gl.generateMipmap(gl.TEXTURE_2D)

但是为此，纹理的宽度和高度必须是二的幂（对于 WebGL 1.0）。参见 WebGL specification - 5.13.8 Texture objects。

注意，如果纹理不是完整的 mipmap，则纹理元素获取的 return 值为 (0, 0, 0, 1)，这会导致 "black" 颜色。

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

Textures have a black color regardless of the data I put in them

javascript

webgl