matrix - GLSL 矩阵/逆乘精度

Question

我正在尝试使用 GPU 进行一些布料模拟工作，但在使用不同的硬件时遇到了一些问题。我使用 Threejs 作为框架，但我相信这与我遇到的问题无关。

基本上我所做的就是上传一个矩阵和该矩阵的逆矩阵，以便将点从本地坐标转换为世界坐标，在世界坐标中进行一些数学运算(例如碰撞检测)，然后将它们转换回本地坐标。当我使用浮点纹理时，这在我的笔记本电脑上效果很好，但是我注意到在我的手机上有一些奇怪的伪像:

正确:

不正确:

经过一些调试后，我将其范围缩小到两个问题。两者都与小数精度有关。由于约束(以及约束期间的精度问题)而导致顶点崩溃以及使用矩阵乘法和逆矩阵时失去精度。

我认为问题与精度有关的原因是，如果我使用浮点纹理，它可以在我的计算机上运行，​​但如果我使用半浮点，我也会遇到同样的问题。我的手机支持浮点纹理，这是我对为什么会在我的手机上发生这种情况感到困惑的原因之一。我缩小了问题范围，因此所有布料模拟都被禁用，如果我在计算机上运行具有半 float 纹理的应用程序，没有任何重力，但通过变换和反转，平面会以奇怪的方式闪烁

如果禁用变换和逆，则看起来正常。

我不知道如何处理这个问题，或者我是否正在走正确的道路。我相信半浮点纹理的小数精度有限，但我不明白为什么这会导致我的问题，因为它只会影响着色器的输出，而不影响着色器中进行的数学。

着色器的代码如下所示:

    '   vec2 cellSize  = 1.0 / res;',
    '   vec4 pos = texture2D(vertexPositions, vuv.xy );',


    '   vec2 newUV;',
    '   if(type == 0.0){',
        '   float px = floor(vuv.x * res.x );',
        '   float spacingx = px- (2.0 * floor(px/2.0));',
        '   float py = floor(vuv.y * res.y );',
        '   float spacingy = py- (2.0 * floor(py/2.0));',
        '   float total = spacingx + spacingy;',
        '   total = total- (2.0 * floor(total/2.0));',

        '   if(total == 0.0){',
        '       newUV = vuv + (direction * cellSize);',
        '   }',
        '   else{',
        '       newUV = vuv - (direction * cellSize);',
        '   }',
    '   }',
    '   if(type == 1.0){',
        '   float px = floor(vuv.x * res.x );',
        '   float spacingx = px- (2.0 * floor(px/2.0));',

        '   float total = spacingx;',


        '   if(total == 0.0){',
        '       newUV = vuv + (direction * cellSize);',
        '   }',
        '   else{',
        '       newUV = vuv - (direction * cellSize);',
        '   }',
    '   }',






    '   vec4 totalDisplacement = vec4(0.0);',

    '           if(newUV.x > 0.0 && newUV.x < 1.0 && newUV.y > 0.0 && newUV.y < 1.0){ ',
    '               vec4 posOld = texture2D(vertexPositionsStart, vuv);' ,
    '               vec4 posOld2 = texture2D(vertexPositionsStart, newUV);' ,

    '               float targetDistance = length(posOld - posOld2);',
    '               vec4 newPos =  texture2D(vertexPositions, newUV);',
    '               float dx = pos.x - newPos.x;',
    '               float dy = pos.y - newPos.y;',
    '               float dz = pos.z - newPos.z;',
    '               float distance = sqrt(dx * dx + dy * dy + dz * dz);',
    '               float difference = targetDistance- distance;',
    '               float percent = difference / distance / 2.0;',
    '               float offsetX = dx * percent * rigid;',
    '               float offsetY = dy * percent * rigid;',
    '               float offsetZ = dz * percent * rigid;',
    '               totalDisplacement.x += offsetX;',
    '               totalDisplacement.y += offsetY;',
    '               totalDisplacement.z += offsetZ;',
    '           }',
    '       }',
    '   }',

    '   pos += totalDisplacement;',
    '   if(  vuv.x  > 1.0 - cellSize.x  && topConstrain == 1 ){',
    '       pos =transformation *  texture2D(vertexPositionsStart, vuv.xy );',
    '   }',

    '   if(  vuv.x  < cellSize.x  && bottomConstrain == 1 ){',
    '       pos =transformation *  texture2D(vertexPositionsStart, vuv.xy );',
    '   }',

    '   if(  vuv.y  < cellSize.y  && leftConstrain == 1 ){',
    '       pos =transformation *  texture2D(vertexPositionsStart, vuv.xy );',
    '   }',


    '   if(  vuv.y  > 1.0 - cellSize.y && rightConstrain == 1 ){',
    '       pos =transformation *  texture2D(vertexPositionsStart, vuv.xy );',
    '   }',




    '   gl_FragColor = vec4( pos.xyz , 1.0 );',

Answer 1

为了确保您的着色器为浮点计算创建高精度变量，应将以下内容添加到顶点着色器的开头:

precision highp float;
precision highp int;

在片段着色器中，浮点变量声明应如下声明:

precision highp float;

如果您在计算中使用的值是之前存储为 float 的计算结果，那么浮点误差会被放大。也称为中间值。

为了最大限度地减少这些错误，您应该限制着色器中执行的中间计算的数量。例如，您可以完全扩展 newUV 的计算:

newUV = vuv + ( direction * ( 1.0 / res ) );

您还可以完全扩展totalDisplacement的计算，一步一步地，首先替换offsetX，如下所示:

totalDisplacement.x += ( dx * percent * rigid )

现在将每个变量 dx 和 percent 替换为上面的内容:

totalDisplacement.x += ( ( pos.x - newPos.x ) * ( difference / distance / 2.0 ) * rigid )

您现在可以看到方程可以进一步扩展，代入difference，如下所示:

totalDisplacement.x += ( ( pos.x - newPos.x ) * ( ( targetDistance- distance ) / ( distance * 2.0 ) ) * rigid );

此时，您可以做一些代数来简化和消除一些变量(除以距离)。通过简化上面的等式，我们现在得到以下结果:

totalDisplacement.x += ( ( pos.x - newPos.x ) * ( ( targetDistance / ( distance * 2.0 ) - 0.5 ) * rigid );

最后我们可以将公式替换为 targetDistance，如下所示:

totalDisplacement.x += ( ( pos.x - newPos.x ) * ( ( length(posOld - posOld2) / ( distance * 2.0 ) - 0.5 ) * rigid );

分别为其他坐标:

totalDisplacement.y += ( ( pos.y - newPos.y ) * ( ( length(posOld - posOld2) / ( distance * 2.0 ) - 0.5 ) * rigid );
totalDisplacement.z += ( ( pos.z - newPos.z ) * ( ( length(posOld - posOld2) / ( distance * 2.0 ) - 0.5 ) * rigid );

显然您可以继续下去，即通过替换 posOld、posOld2 和 newPos 的值。

请注意，到目前为止，为了得到上面的方程，我们已经消除了在浮点变量中存储 5 个中间值的需要。另外，通过简化方程(除以距离)，距离变量仅在计算中使用一次。与初始实现相比，距离用于计算差异和百分比。将它们全部组合在一个方程中可以让您简化并减少使用相同浮点值的次数。因此也减少了总浮点误差。这里的权衡是所得方程的人类可读性较差。

如果您好奇，还可以通过调用 glGetShaderPrecisionFormat 来检查给定着色器编译器的精度级别:

int range[2], precision;
glGetShaderPrecisionFormat(GL_FRAGMENT_SHADER, GL_HIGH_FLOAT, range, &precision);

如果您检查 desktop 的结果和 mobile如果您的应用程序版本不同，您将能够比较两个版本的精度差异。