Question

假设我想要有两种不同的形状 - 一种带有颜色缓冲区，另一种带有纹理缓冲区，我是如何在着色器中编写代码的，因为教程使得它几乎就像你只能拥有一个或另一个，但不是两个？

因此，在下面的代码中，我有一些纹理和一些东西使另一行代码中的颜色变成蓝色 - 我将如何在这种语言中进行区分 - 我尝试使用整数来表示两者之间的选择但它没有很好地运作......

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

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));

   // gl_FragColor= vec4(0.0, 1.0, 0.0, 1.0);
}
</script>

Answer 1

有许多不同的方法可以做到这一点。

您可以在着色器中编写if语句或? :表达式，以根据某些参数选择一个或另一个。（听起来你试过这个，但不知何故错了 - 我不知道你的问题可能是什么问题。但是，我会避免使用int参数，除非特别需要一个参数，因为整数计算不是针对GPU进行优化的。）
您可以将纹理和均匀颜色相乘，并将纹理对象设置为白色，将彩色对象设置为白色纹理。（这就像经典的“固定功能管道”渲染一样。）
您可以使用两个不同的着色器，一个仅使用纹理，另一个仅使用颜色（并在对象之间使用gl.useProgram在它们之间切换）。
您只能使用纹理和颜色对象，使用包含所需颜色的1×1纹理（如果您想要一致的颜色，而不是每顶点颜色）。

所有这些以及更多都是解决问题的绝佳方法。做任何一个对你的其他程序最方便的。如果您担心性能，请尝试并选择最快的。

在WebGL中同时具有纹理和颜色着色器

1 个答案: