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
}

现在我想到了，我有点倒退了。

旧帖子＆gt;

我有一个应用程序，其中物体移动速度快，需要在运动方面进行更好的描述，例如带有模糊和光迹的飞碟。我怎么能达到这种特殊效果呢？

我已经开始实施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

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

内访问它

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

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

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

您的设备目标是什么？移动和桌面有不同的GPU
更快的BBox转换http://dev.theomader.com/transform-bounding-boxes/
矢量化，例如测试载体https://www.opengl.org/sdk/docs/man/html/any.xhtml
完成https://github.com/aras-p/glsl-optimizer

请注意，您的分支机构错过了0（＆gt; 0＆amp;＆amp;＆lt; 0但没有== 0）

Answer 2

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

看看this example没有模糊，但确实展示了如何使用GPUComputationRenderer将您的位置渲染为纹理（sampler2D），然后在下一个中引用它们传递 - 完全按照教程的建议。通过这种方式，您可以提前预先计算每个顶点的各种值，并根据这些值渲染图像（运动模糊，单个对象模糊等）。

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

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

2 个答案: