小编min*_*tea的帖子

所以,我正在编写一个2d Javascript物理模拟.性能很好,但我正在进行优化以使其更好.所以,因为程序适用于很多物理几何,我在程序中进行了几个毕达哥拉斯定理计算.总之,大约有五个计算; 它们一起运行大约每秒一百万次.所以,如果我将这个简单的毕达哥拉斯定理代码放入一个新函数并调用它,我认为它会提高性能; 毕竟,浏览器的编译方式较少.所以,我在Firefox中运行代码,得到了...... 计算执行时间增加了400%.

怎么样？它是相同的代码:Math.sqrt(x*x + y*y),那么如何将它作为一个函数加减速呢？我假设原因是函数需要时间才能被调用,而不执行代码,并且每秒增加一百万个这样的延迟会减慢它的速度？

这对我来说似乎相当惊人.这也适用于预定义的js函数吗？这似乎不太可能,如果是这样,他们如何避免呢？

代码过去是这样的:

function x()
{
    dx=nx-mx;
    dy=ny-my;
    d=Math.sqrt(dx*dx+dy*dy);
    doStuff(...
}

我试过的是这个:

function x()
{
    dx=nx-mx;
    dy=ny-my;
    d=hypo(dx,dy);
    doStuff(...
}
function hypo(x,y)
{
    return Math.sqrt(x*x+y*y);
}

谢谢!

所以我有一个动画,我用javascript和HTML5编码(没有库,没有插件,没有任何东西,我希望它保持这种方式).动画使用物理(基本上是一堆附着在质量上的不寻常弹簧)来模拟一种简单的液体.程序的这一部分的输出是对象的网格(2d阵列),每个对象具有az值.这很好用.将数据绘制到HTML5 Canvas时出现问题.

这就是它的样子.相信我,动画时更好.

对于每个数据点,程序绘制一个圆圈,其颜色由z值确定.然而,仅仅绘制这些点,网格图案非常明显,很难看到它代表的流体.为了解决这个问题,我使圆圈更大,更透明,使它们相互重叠,混合颜色,形成简单的卷积模糊.结果既快又美,但对于一个小缺陷:

当圆圈按顺序绘制时,它们的颜色值不会平均堆叠,因此后面绘制的圆圈会遮挡先前绘制的圆圈.在数学上,渲染器正在重复加权平均值的圆的颜色值.这适用于两个圆圈,每个圆圈的值为0.5*alpha_n,但对于三个圆圈,渲染器采用最新圆圈的平均值与其他两个圆圈的平均值,给最新圆圈的值为0.5*alpha_n,但较早的圆圈每个值为0.25*alpha_n.随着越来越多的圈子重叠,这个过程将继续进行,从而对较新的圈子和较旧的圈子产生偏见.相反,我想要的是三个或更多个圆圈中的每个圆圈都得到0.33*alpha_n的值,这样早期的圆圈就不会被遮挡.

这是阿尔法混合的图像.请注意,后面的蓝色圆圈模糊了之前绘制的红色和绿色圆圈:

这就是问题在行动中的样子.注意肿块左侧的不同外观.

为了解决这个问题,我尝试了各种方法:

• 使用不同的画布"混合模式"."乘法"(如上图所示)完成了这一伎俩,但却造成了不幸的色彩扭曲.
• 集体绘制电话.我没有将每个圆圈作为一个单独的画布路径,而是试图将它们拼凑成一个.不幸的是,这与单独的填充颜色不相容,而且,路径根本没有与自身融合,创造出哑光,单调的轮廓.
• 隔行扫描绘图顺序.我没有按照0到n的顺序绘制圆圈,而是尝试首先绘制平均值,然后绘制赔率.这只是部分地解决了这个问题,并且创造了一个难看的分层模式,其中赔率似乎漂浮在平均值之上.
• 使用putImageData构建我自己的混合模式.我尝试使用javascript创建一个手动像素着色器以满足我的需求,但是,正如预期的那样,它太慢了.

在这一点上,我有点卡住了.我正在寻找创造性的方法来解决或绕过这个问题,我欢迎你的想法.我不是很有兴趣被告知这是不可能的,因为我可以为自己解决这个问题.您如何从这些数据点中优雅地绘制流体？