webgl - 如何展现不受灯光影响的素色质感？

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

Another option is to use a separate program for your GUI and your scene.

What do you mean with program, different fragment shader / shaders?

A program is the combination of a vertex shader and a fragment shader. You must have a gl.useProgram somewhere in your code; I'm talking about setting up two different programs and doing gl.useProgram inside your rendering loop, before the scene and before the GUI.

The advantage of this is that you can completely separate the programs, and avoid having any logic that is only needed for the scene wasting time in the GUI, and vice versa.

(The disadvantage is that switching programs itself has a cost, which might be more than the cost of the conditional in this case, but it is quite normal to switch programs within a single frame.)

In the end you have to measure to see which gives better performance for your use case.