Posted on 2014-12-29 11:11
TWaver 閱讀(4507)
評論(0) 編輯 收藏
打開個門戶網站都千呼萬喚，我們還能期待網頁上的3D技術會有“酣暢淋漓”、“一氣呵成”的感受嗎？也許現在還差點火候。但是HTML5、WebGL等技術一直在飛速的發展，可能很快你就會驚訝它的能力。現在，我們就試試TWaver的3D能顯示多少個木箱子，透明的木箱子。數據量當然要大才行，10萬個怎么樣？干脆試試20萬好了，具體說是60的立方矩陣=60x60x60=216000個。只有壓榨到極限才能了解WebGL和TWaver 3D技術適合做什么應用。
下面就Let’s go吧！
首先new一個box和network放在網頁上：
1 2 3 | var box = new mono.DataBox();
var camera = new mono.PerspectiveCamera(60, 10 / 7, 0.1, 10000);
var network = new mono.Network3D(box, camera, 'canvas');
|
然后創建箱子對象。定義一個矩陣規模數量，循環new出count*count*count個箱子對象矩陣。為每個箱子設置其矩陣中的空間位置、設置透明貼圖，最后add到box中進行顯示即可。
暫設箱子間距gap為40，矩陣層數為3，則總計數量為3x3x3=27個：
1 2 3 4 5 6 7 8 9 10 11 12 | var gap = 40, count = 3;
for (var k = 0; k < count; k++) {
for (var i = 0; i < count; i++) {
for (var j = 0; j < count; j++) {
var node = new mono.Cube(20, 20, 20, 1, 1, 1);
node.setStyle('m.texture.image', 'box.png');
node.setPosition((i - count * 0.5) * gap, k * gap, (j - count / 2) * gap);
box.add(node);
}
}
}
|
27個箱子實在太少了，就像大象拖鵝毛，實在是沒感覺。現在增加count到20，總計=20x20x20=8000個箱子。看看效果：
加載多費了一兩秒。操作起來還是快如飛車，刷刷流暢，毫無壓力！看來要上大刑伺候才行了，繼續增加count到40，總計=40x40x40=64000個箱子。看效果：
加載耗時時間長了許多，不過顯示和操作還是相當流暢。看來還不是極限，有繼續壓榨的空間。出大招：增加count到60，總計=60x60x60=216000。將近21萬個箱子，TWaver 3D在瀏覽器上會表現怎么樣呢？
哈，果然加載時間更加長了，瀏覽器甚至2次出現了“不響應”提示。為了看到結果，果斷點擊wait選擇繼續等待。
耗時雖久，不過最終結果還是出來了。21.6萬個箱子，一眼望去，基本上是千軍萬馬，茫茫一片。
操作了一下，讓人驚訝的是，雖然不算流暢，但還是可以響應鼠標操作的。考慮到這么大的海量數據，還算可以接受。箱海中漫游，竟然無意發現一只可愛的小動物！
不必驚訝，僅僅是因為增加了下面的幾行代碼就行了：
1 2 3 4 5 6 7 8 9 | var billboard = new mono.Billboard();
billboard.s({
'm.texture.image' : 'dog.png',
'm.vertical' : true,
'm.alignment' : mono.BillboardAlignment.bottomCenter,
});
var position = node.getPosition();
billboard.setPosition(position);
box.add(billboard);
|
接下來你可以做一個“找狗狗”或“找小鳥”的游戲了。
點擊觀看TWaver顯示22萬個木箱視頻。
那么問題來了：這是TWaver 3D和WebGL的極限嗎？不一定。WebGL和TWaver 3D的發展都是日新月異、一日千里，隨著標準、產品、硬件、經驗的不斷提升，基于網頁的3D展示能力肯定會有更大的提升和發展。到時候，復雜的3D應用在PC、平板、手機的網頁上順暢的跑，那都不是個事兒！
當然，性能和機器的配置有巨大的關系，尤其是顯卡、CPU等關鍵硬件配置。強大的硬件永遠是提升3D應用流暢度的最直接的手段。平板甚至手機的硬件能力比PC會弱很多，在實際應用中，不可能期待手持設備能顯示海量的3D數據和復雜的物理場景。在實際3D應用開發中，我們還需要有針對性的對場景進行優化、精簡，盡可能的保證用戶的交互和視覺體驗，然后再盡可能的顯示更多的信息。
當然，使用TWaver 3D就會幫您節省更多的時間和成本：因為它已經封裝好了絕大部分功能，開發者不需要深入的研究**GL甚至顯卡等細節，關注在業務和數據上就好了。如果您對TWaver的3D技術感興趣，那就馬上下載體驗吧。
夯下面鏈接，觀看22萬個木箱！TWaver 3D極限壓榨更多精彩！