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

【问题标题】：Three.JS | PerObject-Blur, What techniques can I use for GLSL/C to optimize code?三.JS | PerObject-Blur，我可以为 GLSL/C 使用哪些技术来优化代码？
【发布时间】：2017-01-16 23:09:16
【问题描述】：

更新 2

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

我稍后会添加示例

更新 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 的基础，以及我能找到的最佳文档，请点击此链接以获取 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: {

      //}

【问题讨论】：

标签： javascript c three.js glsl webgl

【解决方案1】：

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
完成后在着色器上运行 glsl-optimizer https://github.com/aras-p/glsl-optimizer

请注意，您在分支中错过了 0（> 0 &&

【讨论】：

【解决方案2】：

听起来您正在寻找THREE.GPUComputationRenderer。通过将对象的位置渲染到缓冲区（纹理），然后通过传入纹理将该缓冲区传递到下一轮计算中，您应该能够准确地完成 per-object-motion-blur 教程的内容 - 这样您就可以计算基于对象过去和当前位置的模糊值。

看看this example，它不会做模糊处理，但会展示如何使用 GPUComputationRenderer 将您的位置渲染为纹理 (sampler2D)，然后在下一次传递中引用它们 - 完全一样你的教程推荐。通过这种方式，您可以提前预先计算每个顶点的各种值，并根据这些值（运动模糊、单个对象模糊等）渲染图像。

正如@Tuan Kuranes 所说，您不能在单次通过中执行单个对象模糊或运动模糊之类的操作，这也计算场景中的所有其他内容，但使用 GPUComputationRenderer 您可以渲染图像和值以提供帮助您可以尽可能少地执行此操作。祝你好运！！

【讨论】：