Three.JS | PerObject-Blur,我可以使用哪些技术来使GLSL/C优化代码？

Question

更新2

我已经使用THREE.js实现了自定义属性,顶点着色器中的每次传递都会产生影响,并与position属性对齐,这是使用最少代码的最佳解决方案.

我稍后会添加这个例子

更新1

此方法将alpha设置为受边界框内速度范围影响的顶点.我需要提示处理GLSL代码重复变态,这对我来说有点奇怪吗？

我要用功能吗？怎么样？

https://jsfiddle.net/LeroyRon/uep9t1v1/#&togetherjs=MjBnNMFQFl

无论如何我有这个:

//for .x
if (position.x > 0.0) {
    if (velocityPosition.x + (velocities.x*shutterSpeed) > boundingBoxMaxView.x) {
        influence = position.x/boundingBoxMax.x;
        velocityPosition.x += (velocities.x*shutterSpeed*influence);
    }
} else if (position.x < 0.0) {
    if (velocityPosition.x + (velocities.x*shutterSpeed) < boundingBoxMinView.x) {
        influence = position.x/boundingBoxMin.x;
        velocityPosition.x += (velocities.x*shutterSpeed);
    }
}

//for .y
if (position.y > 0.0) {
    //To-Do
} else if (position.y < 0.0) {
    //To-Do
}

//for .z
if (position.z > 0.0) {
    //To-Do
} else if (position.z < 0.0) {
    //To-Do
}

现在我考虑一下,我正在做一些倒退的代码.

老邮政>

我有一个应用程序,对象移动速度快,需要在运动方面更好地描述,如带有模糊和光迹的飞碟.我怎么能达到这个特殊效果？

我已经开始实现per-object-motion-blur的实现,以及我能找到的最好的文档,请按照此链接进行Collab:

https://jsfiddle.net/LeroyRon/uep9t1v1/#&togetherjs=DIo3kqhPfC

是否可以为立方体的较轻部分设置浅色模糊？

uniforms: {
        //velocity: {type: "f", value: velocity},
        //uVelocityScale: {type: "f", value: uVelocityScale},
        //speed: {type: "f", value: uVelocityScale},
        //nSamples: {}
      },
      //attributes: {

      //}

Answer 1

模糊是一个屏幕空间操作，因此您需要在渲染所有内容后运行它。因此，您需要以某种方式将“影响”输出到渲染缓冲区目标，以便您可以在屏幕空间模糊内访问它

这是一个https://www.shadertoy.com/view/XdfGDH，您要调整的变量是 mSize，它应该来自之前输出到渲染目标的纹理。

这就是为什么您链接的教程使用“速度缓冲区”，它将速度存储在屏幕空间中，以便屏幕空间模糊可以使用它。

无论如何，有一些关于优化的技巧，但不确定顶点着色器代码是否会在这里造成任何性能问题。函数使用可能不是优化的好途径，最好的选择是数学函数优化，并且取决于 GPU 目标、矢量化。

• 您的设备目标是什么？移动设备和桌面设备具有不同的 GPU
• 更快的 BBox 变换http://dev.theomader.com/transform-b ​​ounding-boxes/
• 向量化，例如对向量的多个值进行测试https://www.opengl.org/sdk/docs/man/html/any.xhtml
• 完成后在着色器上运行 glsl-optimizer https://github.com/aras-p/glsl-optimizer

请注意，您的分支中缺少 0 ( > 0 && < 0 但没有 == 0)