Opengl 重复纹理多次

我画的线充满了我在着色器中重复的纹理。如下所示

这条线是单点——我在顶点着色器中展开的每个顶点都经过一些计算，无论我们进行何种缩放，它们的像素宽度始终相同

然后我创建我的三角形，在它们上我在X轴上反复绘制纹理。因此，线条的宽度始终是图像的高度

用户可以任意放大，并且随着缩放的变化，形状会越来越大越来越小。虽然纹理保存了它的大小，但这意味着有更多的重复

当用户放大很多时，我开始得到奇怪的结果，我猜是由于浮点溢出

缩放：1

变焦2

我的着色器：

顶点着色器

uniform float factor;
attribute vec2 texCoords;
varying vec2 vTexCoords;
attribute vec4 texAtlas;
varying vec4 vTexAtlas;
uniform vec4 uPixelWolrdScale;
attribute vec2 outlineOffset;
 
void main() {
   vTexCoords = texCoords;
   vTexAtlas = texAtlas;
   gl_Position = LIGHTGLgl_ModelViewProjectionMatrix * (LIGHTGLgl_Vertex + uWorldOffset) + vec4((outlineOffset.xy) * uPixelWolrdScale.zw, 0,0);
}

varying float vVertex;
...
float hmgSize = 1. / 32.; // Getting the size in homogeneous - For now 32px, later uniform/attribute
vec2 vexelPos = vec2(mod(vVertex, hmgSize) / hmgSize, vTexCoords.t);
vexelPos = vTexAtlas.xy + vexelPos * vTexAtlas.zw;

uPixelWolrdScale是vec4，xy=worldScale.xy/ScreenSize.xy，zw=2/ScreenSize.xy

我正在使用

zw

来抵消线条的宽度 xy用于在片段着色器中重复我的纹理

precision highp float;
uniform float factor;
uniform vec4 color;
varying vec2 vTexCoords;
uniform vec4 uPixelWolrdScale;
uniform sampler2D sampler;
varying vec4 vTexAtlas;

void main() {

   // Here is the problem i guess
   vec2 vexelPos = fract(vec2((vTexCoords.s) / (uPixelWolrdScale.x * factor), vTexCoords.t));
   vexelPos = vTexAtlas.xy + vexelPos * vTexAtlas.zw;
   gl_FragColor = texture2D(sampler, vexelPos);
   gl_FragColor *= color;

}

vTexCoords.s

是世界和屏幕单位相同时的重复次数。没有缩放

当

（vTexCoords.s）/（upixelworldscale.x*factor）

溢出时，是否有其他方法重复纹理

----编辑---

试图通过使用

mod（）

而不是

fract（）

来改变我的方法，以实现重复

几轮之后，我设法做到了这一点，作为我问题的解决方案，但它仍然在一些动物园里开始反常

基本思想是使用同质值来重复纹理，并借助纹理大小和模量进行额外的计算

在我的顶点着色器中

uniform float factor;
attribute vec2 texCoords;
varying vec2 vTexCoords;
attribute vec4 texAtlas;
varying vec4 vTexAtlas;
uniform vec4 uPixelWolrdScale;
attribute vec2 outlineOffset;
 
void main() {
   vTexCoords = texCoords;
   vTexAtlas = texAtlas;
   gl_Position = LIGHTGLgl_ModelViewProjectionMatrix * (LIGHTGLgl_Vertex + uWorldOffset) + vec4((outlineOffset.xy) * uPixelWolrdScale.zw, 0,0);
}

varying float vVertex;
...
float hmgSize = 1. / 32.; // Getting the size in homogeneous - For now 32px, later uniform/attribute
vec2 vexelPos = vec2(mod(vVertex, hmgSize) / hmgSize, vTexCoords.t);
vexelPos = vTexAtlas.xy + vexelPos * vTexAtlas.zw;

我添加了属性和变量

attribute vec4 startVertex;
varying float vVertex;
...
// Same calculation i did to the gl_Vertex I do here to the attribute
vec4 coordToRemove = LIGHTGLgl_ModelViewProjectionMatrix * (startVertex + uWorldOffset) + vec4((outlineOffset.xy) * uPixelWolrdScale.zw, 0,0);
vVertex = gl_Position.x - coordToRemove.x;

我希望我的变量从0开始，一直插值到第二个齐次位置。因此，我添加了第一个顶点值作为两个顶点的属性-

coordForVar

-因此，当第一个顶点到达这里时，

vVertex

将为0。第二个

vVertex

将是差异

在我的片段着色器中

uniform float factor;
attribute vec2 texCoords;
varying vec2 vTexCoords;
attribute vec4 texAtlas;
varying vec4 vTexAtlas;
uniform vec4 uPixelWolrdScale;
attribute vec2 outlineOffset;
 
void main() {
   vTexCoords = texCoords;
   vTexAtlas = texAtlas;
   gl_Position = LIGHTGLgl_ModelViewProjectionMatrix * (LIGHTGLgl_Vertex + uWorldOffset) + vec4((outlineOffset.xy) * uPixelWolrdScale.zw, 0,0);
}

varying float vVertex;
...
float hmgSize = 1. / 32.; // Getting the size in homogeneous - For now 32px, later uniform/attribute
vec2 vexelPos = vec2(mod(vVertex, hmgSize) / hmgSize, vTexCoords.t);
vexelPos = vTexAtlas.xy + vexelPos * vTexAtlas.zw;

---

在纹理坐标中使用fract和mod可以在mipmapping中做一些奇怪的事情，确保你的纹理使用了最近的最小和最大过滤，然后从那里开始

---

编辑：

不管纹理的内容是什么，纹理2D实际上只查找0和1之间的纹理坐标。整数部分用于重复，但使用它会降低查找精度。使用fract或mod进行重复而不是整数部分会导致mipmap查找中1px的不连续性；但如果你是祭坛，你无论如何都会有这个问题

因此，您对图集的查找纹理坐标的范围应为0..1的分数

例如，如果有16x16个图像，则范围为0.0625。e、 g.X中的第三个纹理为0.125至0.1875

您希望处理纹理坐标之外的重复，然后将该值转换为该范围

---

编辑：

放大而不是使几何体长一百万个单位，但仅显示其百万分之一；这只是导致精确战斗，使你的几何屏幕大小；那么你应该拥有你所需要的所有精确度

---

例如，在进行透视计算后，几何体x、y坐标将显示在屏幕空间中，并且仅显示在框-1、-1到1,1中的位置。此时，您可以相交和修剪（或放弃/忽略）几何体，使x，y位于该框中，然后将纹理设置为与应匹配的屏幕重复次数。这意味着它不需要百万分之一的精度。

我还没有完全理解你，但是

vec2 uv=gl_FragCoord.xy/resolution

为您提供准确的像素大小，如果它有帮助的话…（分辨率是纹理大小）@j-p

分辨率

不是WebGL本身的一部分，只是一些常见的环境

upixelworldscale

在这里做的工作几乎相同。分辨率是（Tex宽度，Tex高度）。这真的是你的片段着色器吗？它缺少一个

#版本…

指令（可选）和一个

精度。。。float

语句（在片段着色器中不是可选的）。我会选择

mediump

，尽管它很可能对典型的WebGL实现没有任何影响（大多数桌面硬件并不关心这一点）。@EntityBlack:OpenGL ES 2.0（WebGL）中的片段着色器不保证对

precision highp float

的支持。您必须进行一些处理器前测试才能合规地使用它，但ES 2.0确实保证了

mediump

支持，因此它是一个很好的通用选择。另一方面，版本是完全可选的，在ES 2.0中默认情况下自动假定为100。片段着色器中没有默认的浮点精度，这就是为什么它是必需的。它们没有最近的for过滤器，但这不是我的问题。当数字较大/较低时，这是vexel中的移动OK，更改：gl_FragColor=纹理2D（采样器，vexelPos）；至gl_FragColor=纹理2D（取样器，分形（vexelPos））；要查看post乘法中是否存在问题，请尝试。。没有修好它。。为了清楚起见，我使用的是纹理图集，所以我的子纹理周期不像

fract

那样是0-1。这就是为什么在我的代码中可以找到这一行

vexelPos=vTexAtlas.xy+vexelPos*vTexAtlas.zw（
xy
是位置，
zw
是大小）当输入的
vexelPos
为0到1的值时，此行后的新值将是纹理图集中的值。您不太明白。当我想在16x16 images atlas上重复第三幅图像时，比如说，重复1000次。我应该发送什么作为属性，以及我是如何感到烦恼的？我只是想说清楚。我的VTEXATLA在分数范围内。Ad