2013-11-04 101 views
2

我在一个场景中有多达200,000个单独图像(到目前为止,已完成小精灵)。我想看看这些精灵,当我四处飞翔时,他们总是应该面对相机(就像精灵一样)。 我的问题是:我如何才能实现最佳性能的WebGL?使用useScreenCoordinates的精灵是否与GL_POINT一样呈现为false? 目前fps已经下降,图像数量非常低。到目前为止,我正在使用mipmapping和精灵。由于他们需要转身面对我,我不想使用BufferGeometry ..在three.js中显示许多图像

我非常感谢一些想法和投入:)谢谢!

PS:这一切的一点是,你可以“飞”过200,000的图像和停止/选择你的数字是有趣

+1

它是200,000不同的图像?或者都是一样的吗? – mrdoob

+0

哦,嘿。我现在写了一些东西。不同的图像。我到目前为止所做的是:带有BufferGeometry的ParticleSystem(GL_POINT)用于更远处的图像,在最近邻居搜索(kd-tree,在我的情况下)之后异步加载图像+查看视锥体剔除。我用粒子的精灵,像一个假的图像排序:) 但现在我遇到了kd-tree的麻烦。 THREE.Vector3()的200'000点数组大小高达〜10MB,而200'000 * 3长度的Float32Array大约为1.5 MB。但我找不到最近的邻居搜索这样一个属性的数据结构^^也许必须自己编码:( – Doidel

+0

如果你有任何进一步的优化想法,请告诉我!我也在IRC btw:Doidel ^^ – Doidel

回答

0

二手吨的技术和材料,我会写的那些它在http://blogs.fhnw.ch/threejs/一旦我得到它所有的工作

+0

你有链接到你的完成网站?或者你曾经在GitHub上创建过合并请求?它看起来像你分叉three.js,但从来没有提交到您的叉子提交,并且博客笔记从未完成。如果您有一个到该网站的实时链接或旧代码的副本,我很乐意看到它! – duhaime

1

我的团队也需要做到这一点,可悲的是,多尔德的笔记在项目完成之前就已经结束了。我们开发PixPlot,对图像的可视化three.js所一层:

enter image description here

我组建了一个博客张贴在这里概述的细节:http://douglasduhaime.com/posts/visualizing-tsne-maps-with-three-js.html

总之,如果其他人面对这个问题,你会想要用一个大的图像地图集(理想情况下)创建一个几何体的纹理(一个大小为2048px,2048px的大小的单个jpg包含大量较小的图像)。为每个要显示的小图像添加顶点,面和vertexUV,并从图集纹理中拉出每个图像。