打開(kāi)個(gè)門(mén)戶網(wǎng)站都千呼萬(wàn)喚，我們還能期待網(wǎng)頁(yè)上的3D技術(shù)會(huì)有“酣暢淋漓”、“一氣呵成”的感受嗎？也許現(xiàn)在還差點(diǎn)火候。但是HTML5、WebGL等技術(shù)一直在飛速的發(fā)展，可能很快你就會(huì)驚訝它的能力。現(xiàn)在，我們就試試TWaver的3D能顯示多少個(gè)木箱子，透明的木箱子。數(shù)據(jù)量當(dāng)然要大才行，10萬(wàn)個(gè)怎么樣？干脆試試20萬(wàn)好了，具體說(shuō)是60的立方矩陣=60x60x60=216000個(gè)。只有壓榨到極限才能了解WebGL和TWaver 3D技術(shù)適合做什么應(yīng)用。
下面就Let’s go吧！
首先new一個(gè)box和network放在網(wǎng)頁(yè)上：
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');
|
然后創(chuàng)建箱子對(duì)象。定義一個(gè)矩陣規(guī)模數(shù)量，循環(huán)new出count*count*count個(gè)箱子對(duì)象矩陣。為每個(gè)箱子設(shè)置其矩陣中的空間位置、設(shè)置透明貼圖，最后add到box中進(jìn)行顯示即可。
暫設(shè)箱子間距gap為40，矩陣層數(shù)為3，則總計(jì)數(shù)量為3x3x3=27個(gè)：
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個(gè)箱子實(shí)在太少了，就像大象拖鵝毛，實(shí)在是沒(méi)感覺(jué)。現(xiàn)在增加count到20，總計(jì)=20x20x20=8000個(gè)箱子。看看效果：
加載多費(fèi)了一兩秒。操作起來(lái)還是快如飛車(chē)，刷刷流暢，毫無(wú)壓力！看來(lái)要上大刑伺候才行了，繼續(xù)增加count到40，總計(jì)=40x40x40=64000個(gè)箱子。看效果：
加載耗時(shí)時(shí)間長(zhǎng)了許多，不過(guò)顯示和操作還是相當(dāng)流暢。看來(lái)還不是極限，有繼續(xù)壓榨的空間。出大招：增加count到60，總計(jì)=60x60x60=216000。將近21萬(wàn)個(gè)箱子，TWaver 3D在瀏覽器上會(huì)表現(xiàn)怎么樣呢？
哈，果然加載時(shí)間更加長(zhǎng)了，瀏覽器甚至2次出現(xiàn)了“不響應(yīng)”提示。為了看到結(jié)果，果斷點(diǎn)擊wait選擇繼續(xù)等待。
耗時(shí)雖久，不過(guò)最終結(jié)果還是出來(lái)了。21.6萬(wàn)個(gè)箱子，一眼望去，基本上是千軍萬(wàn)馬，茫茫一片。
操作了一下，讓人驚訝的是，雖然不算流暢，但還是可以響應(yīng)鼠標(biāo)操作的。考慮到這么大的海量數(shù)據(jù)，還算可以接受。箱海中漫游，竟然無(wú)意發(fā)現(xiàn)一只可愛(ài)的小動(dòng)物！
不必驚訝，僅僅是因?yàn)樵黾恿讼旅娴膸仔写a就行了：
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);
|
接下來(lái)你可以做一個(gè)“找狗狗”或“找小鳥(niǎo)”的游戲了。
點(diǎn)擊觀看TWaver顯示22萬(wàn)個(gè)木箱視頻。
那么問(wèn)題來(lái)了：這是TWaver 3D和WebGL的極限嗎？不一定。WebGL和TWaver 3D的發(fā)展都是日新月異、一日千里，隨著標(biāo)準(zhǔn)、產(chǎn)品、硬件、經(jīng)驗(yàn)的不斷提升，基于網(wǎng)頁(yè)的3D展示能力肯定會(huì)有更大的提升和發(fā)展。到時(shí)候，復(fù)雜的3D應(yīng)用在PC、平板、手機(jī)的網(wǎng)頁(yè)上順暢的跑，那都不是個(gè)事兒！
當(dāng)然，性能和機(jī)器的配置有巨大的關(guān)系，尤其是顯卡、CPU等關(guān)鍵硬件配置。強(qiáng)大的硬件永遠(yuǎn)是提升3D應(yīng)用流暢度的最直接的手段。平板甚至手機(jī)的硬件能力比PC會(huì)弱很多，在實(shí)際應(yīng)用中，不可能期待手持設(shè)備能顯示海量的3D數(shù)據(jù)和復(fù)雜的物理場(chǎng)景。在實(shí)際3D應(yīng)用開(kāi)發(fā)中，我們還需要有針對(duì)性的對(duì)場(chǎng)景進(jìn)行優(yōu)化、精簡(jiǎn)，盡可能的保證用戶的交互和視覺(jué)體驗(yàn)，然后再盡可能的顯示更多的信息。
當(dāng)然，使用TWaver 3D就會(huì)幫您節(jié)省更多的時(shí)間和成本：因?yàn)樗呀?jīng)封裝好了絕大部分功能，開(kāi)發(fā)者不需要深入的研究**GL甚至顯卡等細(xì)節(jié)，關(guān)注在業(yè)務(wù)和數(shù)據(jù)上就好了。如果您對(duì)TWaver的3D技術(shù)感興趣，那就馬上下載體驗(yàn)吧。
夯下面鏈接，觀看22萬(wàn)個(gè)木箱！TWaver 3D極限壓榨更多精彩！