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

您必须将纹理缩小功能设置为“非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），这将导致“黑色”颜色。

无论我输入的数据如何，纹理的颜色都是黑色的

1 个答案: