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

Question

更新 2

我已经使用 THREE.js 实现了自定义属性，影响来自顶点着色器中与位置属性对齐的每次传递，这是代码最少的最佳解决方案。

I will add the example later

更新 1

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

我应该使用函数吗？怎么办？

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 ，连同我能找到的最好的文档，请点击此链接进行协作:

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

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

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

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

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

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

请注意，您在分支中错过了 0(> 0 && < 0 但没有 == 0)