2013-08-16 139 views
4

我需要構建一個html5/javascript 3d應用程序,並且每個場景都必須渲染大量對象(大約200-300個複雜對象或更多),所以請告訴我應該選擇的技術,HTML5 Canvas,SVG或WebGL。在SVG或WebGL中使用畫布進行3D應用

聽說使用Canvas combine with SVG會處理更好的性能,但將其轉換爲3d環境有多複雜,有沒有任何javascript引擎支持SVG中的Canvas?或者我應該爲Canvas和WebGL選擇three.js。

回答

9

HTML5/Canvas/SVG適用於靜態圖像,但不適用於允許移動的3D應用程序。

HTML5和SVG沒有實現3D機制,因此創建這樣的場景可能變得非常複雜。帆布只是某種表面,這需要更多的邏輯或技術來繪製它。

另一個考慮因素是,不同的瀏覽器可能會有非常不同的性能,例如(在我寫這個答案的那一刻),比較Chromium和Firefox,一個更好地移動一個巨大的圖像,而另一個更好地移動數千小的。

WebGL是OpenGL for Web的一種簡化,它使用圖形卡來呈現複雜的場景,就像在遊戲中一樣。這將允許真實的3D和逼真的渲染。價格很複雜:需要一些時間才能正確學習和應用。

對於簡單的3D效果和樣式,WebGL是矯枉過正的,而SVG將是一個更簡單的選擇。對於真實的3D,WebGL提供了全部的功能。