Lup*_*ple 8 glsl matrix webgl three.js
我正在尝试使用GPU进行布料模拟,我遇到了一些不同硬件的问题.我使用threejs作为框架,但我认为这与我遇到的问题无关.
基本上我做的是上传一个矩阵和该矩阵的逆矩阵,以便将点从局部坐标转换为世界,在世界坐标中进行一些数学运算(如碰撞检测),然后将它们转换回本地.当我使用浮点纹理时,这在我的笔记本电脑上工作得很好,但是我在手机上注意到有一些奇怪的文物:
正确: 
不正确的: 
在做了一些调试后,我把它缩小到两个问题.它们都与小数精度有关.由于约束(以及约束期间的精度问题)导致的顶点折叠以及使用矩阵乘法和逆时的精度损失.
我认为这个问题与精度有关的原因是因为如果我使用浮点纹理它可以在我的计算机上工作,但如果我使用半浮点数我会遇到同样的问题.我的手机支持浮点纹理,这也是我为什么会在手机上发生这种情况的原因之一.我把问题缩小了,所以所有的布料模拟都被禁用了,如果我在我的计算机上运行半浮动纹理的应用程序,没有任何重力但是转换并反转平面类型的闪烁以奇怪的方式
如果转换和反转被禁用,那么它看起来很正常.
我不知道如何处理这个问题,或者我是否正走在正确的道路上.我相信半浮点纹理具有有限的小数精度,但我不明白为什么这会导致我的问题,因为它应该只影响着色器的输出,而不是着色器中的数学运算.
着色器的代码如下所示:
' 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 );',
Run Code Online (Sandbox Code Playgroud)
为了确保您的着色器为浮点计算创建高精度变量,应将以下内容添加到顶点着色器的开头:
precision highp float;
precision highp int;
Run Code Online (Sandbox Code Playgroud)
在片段着色器中,浮点变量声明应如下声明:
precision highp float;
Run Code Online (Sandbox Code Playgroud)
如果您在计算中使用的值是之前存储为浮点数的计算结果,那么浮点误差会被放大。也称为中间值。
为了最大限度地减少这些错误,您应该限制着色器中执行的中间计算的数量。例如,您可以完全扩展 的计算newUV:
newUV = vuv + ( direction * ( 1.0 / res ) );
Run Code Online (Sandbox Code Playgroud)
您还可以逐步完全扩展 的计算totalDisplacement,首先offsetX像这样替换:
totalDisplacement.x += ( dx * percent * rigid )
Run Code Online (Sandbox Code Playgroud)
现在将每个变量dx, 和percent代入上面的内容:
totalDisplacement.x += ( ( pos.x - newPos.x ) * ( difference / distance / 2.0 ) * rigid )
Run Code Online (Sandbox Code Playgroud)
现在您可以看到方程可以进一步扩展,代入如下difference:
totalDisplacement.x += ( ( pos.x - newPos.x ) * ( ( targetDistance- distance ) / ( distance * 2.0 ) ) * rigid );
Run Code Online (Sandbox Code Playgroud)
此时,您可以做一些代数来简化和消除一些变量(除以distance)。通过简化上面的等式,我们现在得到以下结果:
totalDisplacement.x += ( ( pos.x - newPos.x ) * ( ( targetDistance / ( distance * 2.0 ) - 0.5 ) * rigid );
Run Code Online (Sandbox Code Playgroud)
最后我们可以将公式替换为targetDistance类似的公式:
totalDisplacement.x += ( ( pos.x - newPos.x ) * ( ( length(posOld - posOld2) / ( distance * 2.0 ) - 0.5 ) * rigid );
Run Code Online (Sandbox Code Playgroud)
并分别对于其他坐标:
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 );
Run Code Online (Sandbox Code Playgroud)
posOld显然,您可以继续下去,即通过替换、posOld2和 的值newPos。
现在请注意,到目前为止,为了得到上面的方程,我们已经不再需要在 float 变量中存储5个中间值。另外,通过简化方程(除以distance),该distance变量仅在计算中使用一次。将此与初始实现进行比较,distance用于计算difference和percent。将它们全部组合在一个方程中可以让您简化并减少使用相同浮点值的次数。因此也减少了总浮点误差。这里的权衡是所得方程的人类可读性较差。
如果您好奇,您还可以通过调用以下命令来检查给定着色器编译器的精度级别glGetShaderPrecisionFormat :
int range[2], precision;
glGetShaderPrecisionFormat(GL_FRAGMENT_SHADER, GL_HIGH_FLOAT, range, &precision);
Run Code Online (Sandbox Code Playgroud)
如果您检查应用程序的桌面版和移动版的结果,您将能够比较两个版本的精度差异。