Jämförelse av 3D-möjligheter för HTML5

Rasmus Saxén

Syfte och målInsikt i nativ 3D-grafik på webbenStudera möjligheten till

hårdvaruaccelerationJämföra existerande 3D-tjänster

◦Observationer◦Tester

Metoder och begränsningarLitteraturstudier

◦Böcker och tekniska specifikationer◦Tjänsters informationssidor och

nätartiklarTester

◦Jämförelse av funktioner◦Prestandatest

Begränsningar◦Inga lösningar baserade på plug-ins◦Tjänster för uppvisande av 3D-

modeller

HTML52004-2012, WHATWG och W3CFrihet från plug-insCanvas-elementet

◦Tom bitmapp Javascript

◦Kontext: 2D/3D

WebGLAPI för webbaserad 3D-grafikKhronos GroupBaserat på OpenGLHårdvaruacceleration~67 % har stöd

Renderingsmotorer3D-data till 2DRenderingspipeline

◦Olika steg: shaders◦WebGL: fyra huvudsteg

Bild delad i fragment

Three.js3D-bibliotekBaserat på JavascriptLånga kodsträngar till funktioner~35000 rader

P3d.inThree.jsUtvecklingsskedeEndast stöd för obj-formatTvå kontoplaner

◦Betalkonto i beta-test100 MB gratis utrymmeMax 50 MB per modell

SketchfabOSG.JSMångsidig tjänstStöd för 27 3D-formatFem olika kontoplanerSpecialtjänst för portfolioOändligt gratis utrymmeMax 50 MB per modell

Verold StudioThree.jsPlatform som tillåter användare

att editera material medan andra observerar

Tillåter flera objekt i samma scenAvancerade materialinställningarTre kontoplanerGeometriska begränsningar

◦50 objekt/200000 polygoner

TestGoogle Chrome och Process

ExplorerExterna visare på blank webbsida

ResultatWebGL effektivt utnyttjat

Grafikkortsbelastning 25-90 % (40 %)Processorn obelastad

Varierande resultat trots identiskt test◦Verold Studio testades med två modeller

Simplare modell för kravet på 200000 polygoner

◦P3d.in minsta grafikbelastningen, mest minne

◦Förhållande mellan minne och grafikminne 2:1 för Three.js-lösningar

SlutsatserFramtidspotential både för

industrin och hobbyisterKombinera med 3D-printingÖppen standard viktig för

utvecklingenMicrosoft håller tillbaka