在WebGL着色器中获取准确的整数模数

Question

我想获得的准确模x和y在WebGL的片段着色器.x并且y是整数.

图形化mod(x,y),我们得到以下内容:

用于生成红黑矩形的实际代码是:

gl_FragColor = vec4(mod(
  float(int(v_texCoord[0]*15.))/15.,
  float(int(v_texCoord[1]*15.))/15.
), 0, 0, 1);

其中v_texCoord是vec2,范围从0,0左上角到1,1右下角.精度设置为浮动和整数的mediump.

阅读图表,我们看到虽然mod(6,6)是正确的0,但mod(7,7)实际上7!我该如何解决？

我试图实现自己的mod()函数.但是,它具有相同的错误,并生成相同的图形.

int func_mod(int x, int y) {
    return int(float(x)-float(y)*floor(float(x)/float(y)));
}

在Javascript中,我可以调试它,该功能完美运行.然后我尝试了一种迭代方法,因为我担心我会疯狂,而且我不相信浮点除法.

int iter_mod(int x, int y) {
    x = int(abs(float(x))); y = int(abs(float(y)));
    for(int i=0; i>-1; i++) {
        if(x < y) break;
        x = x - y;
    }
    return x;
}

这工作,但我无法绘制它,因为当我尝试时,它在环0中的错误崩溃了.它适用于我需要它的spritesheet计算,但我真的觉得这是一个不正确的解决方案.

(更新:它在我的手机上完美运行.现在不是我的代码错误,这只是我的问题...)

Answer 1

这是一个 GLSL 函数，它使用应该是整数的（浮点）参数准确计算 MOD：

/**
 * Returns accurate MOD when arguments are approximate integers.
 */
float modI(float a,float b) {
    float m=a-floor((a+0.5)/b)*b;
    return floor(m+0.5);
}

请注意，如果 a<0 和 b>0 则返回值将 >=0，这与其他语言的 % 运算符不同。

Answer 2

你不是在修改 7 x 7 你是在修改 7/15ths by 7/15ths

尝试

gl_FragColor = vec4(mod(
  floor(v_texCoord[0] * 15.),
  floor(v_texCoord[1] * 15.)
) / 15., 0, 0, 1);

您可以在此处看到运行的 2 个版本

gl_FragColor = vec4(mod(
  floor(v_texCoord[0] * 15.),
  floor(v_texCoord[1] * 15.)
) / 15., 0, 0, 1);

function render(num) {
  var gl = document.getElementById("c" + num).getContext("webgl");
  var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

  var arrays = {
    position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
  };
  var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

  var uniforms = {
    resolution: [gl.canvas.width, gl.canvas.height],
    intMod: num == 1,
  };

  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.setUniforms(programInfo, uniforms);
  twgl.drawBufferInfo(gl, bufferInfo);
}

render(0)
render(1);

canvas { margin: 1em; height: 100px; width: 150px; }
div { display: inline-block; }
pre { text-align: center; }

您还应该注意 mod by 0 是未定义的，这意味着您将在不同的 GPU 上获得不同的结果