分割纹理的R、G和B通道– ；在Three.js/WebGL/Shaders中将线性过滤应用于其中的一个子集

我正在使用从服务器检索的高度纹理。它对

RGB

通道内每像素的总高度值进行编码。要获得每个像素的高度值，将

R

通道乘以65536.0，

G

乘以256.0，然后

height=R+G+B

由于这种分裂，

R

和

G

具有不连续性（请参见下面的

G

通道图像，其中100%白色区域与100%黑色区域），这是由于其他部分（R或B）接管而需要的。这就是为什么我不能线性过滤纹理。但是，我想对

B

通道进行线性过滤，因为它包含最高频率/最小高度偏差–以便获得平滑的表面

---

是否可以在内部分割纹理（例如，在着色器内，但我不介意在何处发生这种情况），以便仅对其

B

通道进行线性过滤，而

R，B

通道保留在最近的相邻位置？在所有组件再次添加到一起之前？如果是这样，如何以有效的方式进行此操作？

WebGL纹理过滤适用于整个纹理，而不是每个单独的通道。但您可以做的是，在着色器中分别对它们进行采样

var texture2=texture1.clone（）；
纹理1.magFilter=3.NearestFilter；
texture2.magFilter=THREE.LinearFilter；//这是默认设置

然后在着色器中：

vec2 sampleRG=texture2D（texture1，vUv）.rg；
float sampleB=texture2D（texture2，vUv）.b；

这是一点额外的开销，但没有什么是你的GPU不能处理的

---

注意，我一直看到每个通道的值范围是从0到255，而不是256。您确定不想乘以255吗？

克隆纹理并设置不同的

磁过滤器

非常有意义，谢谢！在本例中，与256相乘是正确的，因为高度值分布在R、G和B通道中-但是，您关于值范围的评论也是正确的，并帮助我在代码中找到了另一个错误。非常感谢。