如何显示不受灯光影响的纯色纹理？

Question

我的WebGL场景中有一些类似GUI的元素，必须以纯白色显示，不受场景中的光照影响。

纹理是HTML5画布元素，具有纯白色背景。

但是当我在场景中渲染画布时，作为一个纹理，它受到光线的影响而变成浅灰色。

如何使用相同的画布颜色（纯白色）精确显示此纹理？

我怀疑答案是在片段着色器中并且已经播放了一段时间......是的，我曾经有一个简单的颜色，但没有别的，我想在背景颜色上显示一些文字。

谢谢！

Answer 1

我明白了！ ：d

在片段着色器中，我添加了一个布尔变量：

uniform bool uNoLights;

并且仅使用纹理像素信息来确定最终颜色：

if (uNoLights) {
    gl_FragColor =  texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}  else {
    gl_FragColor =  lights * texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}

Answer 2

另一种选择是为您的GUI和场景使用单独的程序。

  

你对程序，不同的片段着色器/着色器是什么意思？

程序是顶点着色器和片段着色器的组合。您的代码中必须有gl.useProgram;我正在谈论设置两个不同的程序，并在渲染循环中，在场景之前和GUI之前进行gl.useProgram。

这样做的好处是你可以完全分离程序，并避免使用任何只需要在GUI中浪费时间的场景，反之亦然。

（缺点是切换程序本身有成本，在这种情况下可能超过条件成本，但在单帧内切换程序是很正常的。）

最后，您必须进行衡量，以确定哪种方式可以为您的用例提供更好的性能。