shader - 着色器的问题
问题描述
[在此处输入图片描述][1]
对齐错误 [1]:https ://i.stack.imgur.com/LvzS1.png
我对着色器有点问题。我正在制作一个带有大型六角平铺地图的游戏。我正在使用着色器来确定每个十六进制的 UV 坐标。
基本上,我创建了一个与我的地图尺寸相同的“计算图像”。如果它是 50 x 50 hexes,则计算图像将是 50 x 50 像素。然后我将每个像素的颜色设置为 (x, y, 0, 0),其中 x 和 y 是图集中相应十六进制的中心坐标。
我将网格中的每个顶点颜色设置为 (r, g, b, a),其中 r 和 g 是该顶点所属的十六进制的坐标,(因此第一个十六进制为 (0,0) 等)和(b, a) 是该顶点相对于十六进制中心的偏移量。
然后我使用以下着色器从计算图像中读取每一帧并相应地设置片段颜色:
shader_type canvas_item;
uniform sampler2D computeTexture;
uniform float atlasHeight;
void vertex()
{
vec2 computeTextureCoords = vec2(COLOR.r,COLOR.g);
vec4 samplePoint4 = texture(computeTexture, computeTextureCoords);
vec2 samplePoint = vec2(samplePoint4.r, samplePoint4.g);
vec2 offset = vec2(COLOR.b, COLOR.a);
UV = vec2(samplePoint.x / atlasHeight, samplePoint.y / atlasHeight) + offset;
}
void fragment()
{
COLOR = texture(TEXTURE, UV);
}
然后可以实时更改计算图像以更新纹理,而无需重建整个网格。
除了一个关键方面外,我的整个系统运行良好。只要所有的十六进制都设置为相同的纹理,它就会顺利进行,但是当计算图像中有两种不同的颜色彼此相邻时,采样基本上被破坏了。上面着色器中返回的“samplePoint4”是两种不同颜色的插值,而不是我尝试访问的像素的实际颜色。这意味着当不同的地形彼此相邻时,图形叠加层就不合适了。我附上了一张图片,希望能更好地说明这意味着什么。
尽管我努力通过向 (r,g) 添加适当的偏移量来对像素的“中心”而不是边缘进行采样,但还是会发生这种情况。我尝试使计算纹理在每个十六进制的正方形中使用 9 个像素,然后对中心像素进行采样,但问题并没有因此得到解决。
这是着色器中浮点精度的不可避免的限制,还是有办法在从计算纹理采样时避免这种混合?对此的任何帮助都非常感谢
解决方案
推荐阅读
- php - 如何在 php 中循环遍历此 json 响应并在每次循环后执行操作
- c# - 了解由以下代码段生成的 IL
- sql-server - 任何人都知道如何使用 SQL 来执行此操作并替换连字符和掩码
- sql - 查找特定值并转译
- mysql - SQL Query Prestashop:如何过滤组合?
- iterator - 从选项到迭代器
- python - 如何使用无头硒从 div 类中提取文本
- java - 向 AWS ElasticSearch 添加 5000 万条记录的最快方法
- android - 如何使用 Flutter 在 iOS 和 Android 中获取正在运行的应用程序信息?
- javascript - 获取javascript中href和src属性的原始值