javascript - 检查片段着色器中是否加载了 webgl 纹理

Question

我正在编写一个带有纹理的 webgl 程序。

只要图像未加载，texture2D 函数就会返回 vec4(0.0, 0.0, 0.0, 1.0)。所以所有物体都是黑色的。

所以我想检查我的sampler2D是否可用。

我已经尝试过:

<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void) {
    vec4 color = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
    if(color.r == 0.0 && color.g == 0.0 && color.b == 0.0)
       color = vec4(1.0, 1.0, 1.0, 1.0);

    gl_FragColor = color;
}
</script>

但这当然没有意义，因为纹理可能是黑色的。

有人可以帮我吗？如何检查我的纹理图像是否已加载到片段着色器中？

Answer 1

你无法在 WebGL 中真正检查这一点。

解决方案:

1. 在纹理加载之前不要渲染

2. 使用1x1像素纹理开始，用图像填充它 一旦加载完成。 See this answer

3. 向着色器传递更多信息，例如 uniform booltextureLoaded。 我总是选择#2，因为这意味着应用程序会立即运行，并且纹理在下载时会被填充。