检查是否在片段着色器中加载了 webgl 纹理答案

【问题标题】：check if webgl texture is loaded in fragment shader检查是否在片段着色器中加载了 webgl 纹理
【发布时间】：2016-02-02 10:53:03
【问题描述】：

我正在编写一个带有纹理的 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>

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

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

【问题讨论】：

在加载纹理之前，您不能也不应该绘制或绑定占位符纹理（如 1x1 白色）。

标签： javascript textures webgl

【解决方案1】：

您无法在 WebGL 中真正检查。

解决方案：

在纹理加载之前不要渲染
使用1x1像素纹理开始，用图片填充一旦加载。 See this answer
将更多信息传递给着色器，例如 uniform bool textureLoaded。我，我总是选择 #2，因为这意味着应用程序会立即运行，并且在下载时会填充纹理。

【讨论】：

【解决方案2】：

我会提供新的制服，无论纹理是否加载，它都会存储数据。

或者您可以编写 2 个带/不带纹理的着色器，然后在渲染之前选择合适的一个。

【讨论】：