3 . js | PerObject-Blur，我可以使用什么技术来优化GLSL/C代码?

Question

UPDATE 2

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

我将在后面添加示例

更新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
}

现在我想一下，我把代码写反了一点。

旧文>

我有一个应用程序，物体移动得很快，需要用它的运动来更好地描述，比如带有模糊和光迹的飞碟。我怎样才能达到这种特效呢?

我已经开始了实现每个对象运动模糊的基础，以及我能找到的最好的文档，点击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

模糊是一个屏幕空间操作，所以你需要在渲染完所有内容后运行它。因此，你需要以某种方式将"influence"输出到渲染缓冲目标中这样你就可以在屏幕空间blur

中访问它

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

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

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

• 你的设备目标是什么?手机和桌面有不同的GPU
• 更快的BBox变换http://dev.theomader.com/transform-bounding-boxes/
• 向量化例如对一个矢量的多个值进行测试https://www.opengl.org/sdk/docs/man/html/any.xhtml
• 在你的着色器上运行glass -optimizer一旦完成https://github.com/aras-p/glsl-optimizer

注意你的分支漏掉了0 (> 0 &&& lt;0 but no == 0)

Answer 2

听起来你正在寻找THREE.GPUComputationRenderer。你应该能够通过渲染对象的位置到一个缓冲区(一个纹理)，然后通过传递纹理将缓冲区传递到下一轮的计算中，从而精确地完成每个对象的运动模糊教程的内容——这样你就可以根据对象的过去和当前位置计算模糊值。

看看这个例子，它不做模糊，但确实展示了如何使用GPUComputationRenderer来渲染你的位置作为纹理(sampler2D)，然后在下一个通道中引用它们-正如你的教程推荐的那样。通过这种方式，你可以提前计算每个顶点的各种值，并基于这些值渲染图像(运动模糊，单个对象模糊等)。

正如@Tuan Kuranes所说，你不能在一个通道中做像单个对象模糊或运动模糊这样的事情，也要计算场景中的其他一切，但是使用GPUComputationRenderer，你可以渲染出图像和值，以帮助你在尽可能少的通道中做到这一点。祝你好运! !