2013-11-04 66 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,並從圖集紋理中拉出每個圖像。