网络工作者中的进程 THREE.Texture
Process THREE.Texture in webworkers
我想在 web workers 中处理 THREE.Texture 以帮助 post 处理诸如绽放之类的效果。例如,对于绽放效果,我会首先在 THREE.Texture 对象上绘制场景,然后我想在 web worker 中处理模糊过程。将 THREE.Texture 数据传递给工作人员并根据从工作人员获得的数据创建新的 THREE.Texture 的最有效 方法是什么。由于我理想情况下每秒执行 60 次,因此我需要一种快速且内存友好的方式来执行此操作(内存友好:不是在循环中创建新对象而是重复使用现有对象)。
我知道 canvas2DContext.getImageData 可能会有帮助,但这可能不是最好的方法,因为我每秒绘制 canvas 60 次,这会减慢速度。
谢谢!
PS:我应该说明在这种方法中,我不打算等待工作人员完成处理纹理来渲染最终结果。由于大多数对象都是静态的,所以我认为这没什么大不了的。不过,我想对其进行测试,看看它对动态对象的影响如何。
将基于 GPU 的纹理传递给 Web Worker 不会加快任何速度,实际上它会慢得多。
相对于在 GPU 上执行所有操作,将内存从 GPU 传输到 CPU(以及 CPU 到 GPU)非常慢。将纹理的内容传递给工作人员的唯一方法是要求 WebGL 从 GPU 复制到 CPU(无论 gl.readPixels
的包装器是什么,在三个中使用 gl.readPixels
)然后将结果传递给worker。然后在 worker 中,你所能做的就是一个基于 CPU 的缓慢模糊(比在 GPU 上慢),然后你必须将它传回主线程,然后通过 gl.texImage2D
或告诉 three.js 为您完成这也是将数据从 CPU 复制回 GPU 的缓慢操作。
应用模糊的快速方法是在 GPU 上进行。
此外,无法在主线程和 worker 之间共享 WebGL 资源,也不太可能很快实现。即使您可以共享资源,然后从工作人员那里要求 GPU 进行模糊处理,这不会节省时间,而且在大多数情况下,GPU 不会 运行 并行执行不同的操作(通常不是多进程就像 CPUs) 所以你最终要做的就是要求 GPU 做同样数量的工作。
我想在 web workers 中处理 THREE.Texture 以帮助 post 处理诸如绽放之类的效果。例如,对于绽放效果,我会首先在 THREE.Texture 对象上绘制场景,然后我想在 web worker 中处理模糊过程。将 THREE.Texture 数据传递给工作人员并根据从工作人员获得的数据创建新的 THREE.Texture 的最有效 方法是什么。由于我理想情况下每秒执行 60 次,因此我需要一种快速且内存友好的方式来执行此操作(内存友好:不是在循环中创建新对象而是重复使用现有对象)。
我知道 canvas2DContext.getImageData 可能会有帮助,但这可能不是最好的方法,因为我每秒绘制 canvas 60 次,这会减慢速度。
谢谢!
PS:我应该说明在这种方法中,我不打算等待工作人员完成处理纹理来渲染最终结果。由于大多数对象都是静态的,所以我认为这没什么大不了的。不过,我想对其进行测试,看看它对动态对象的影响如何。
将基于 GPU 的纹理传递给 Web Worker 不会加快任何速度,实际上它会慢得多。
相对于在 GPU 上执行所有操作,将内存从 GPU 传输到 CPU(以及 CPU 到 GPU)非常慢。将纹理的内容传递给工作人员的唯一方法是要求 WebGL 从 GPU 复制到 CPU(无论 gl.readPixels
的包装器是什么,在三个中使用 gl.readPixels
)然后将结果传递给worker。然后在 worker 中,你所能做的就是一个基于 CPU 的缓慢模糊(比在 GPU 上慢),然后你必须将它传回主线程,然后通过 gl.texImage2D
或告诉 three.js 为您完成这也是将数据从 CPU 复制回 GPU 的缓慢操作。
应用模糊的快速方法是在 GPU 上进行。
此外,无法在主线程和 worker 之间共享 WebGL 资源,也不太可能很快实现。即使您可以共享资源,然后从工作人员那里要求 GPU 进行模糊处理,这不会节省时间,而且在大多数情况下,GPU 不会 运行 并行执行不同的操作(通常不是多进程就像 CPUs) 所以你最终要做的就是要求 GPU 做同样数量的工作。