A pipeline for the creation of progressively rendered web 3D scenes



We present an end-to-end pipeline for the export of 3D scenes from content creation tools to a real-time rendering engine in an embeddable web-page, including a novel system for compression/decompression of textured polygonal meshes. We show that the compression/decompression outperforms the best state-of-the-art non-progressive alternative, especially as bandwidth increases, showing that web-specific techniques should consider the whole user pipeline. Our pipeline also includes progressivity, which is paramount for a good interactive user experience, and permits full user interaction with lower resolution versions of the 3D scenes, while progressively higher resolution data is downloaded. Finally, we discuss how our method may be used in the future to facilitate the transfer of animated meshes.


3D Web Graphics Pipeline Compression Mesh 



This work has been partially funded by the European Commision Horizon2020 project KRISTINA (grant number: H2020-645012).


  1. 1.
    Agenjo J, Evans A, Blat J (2013) WebGLStudio – a pipeline for WebGL scene creation. In: Proc 18th Int Conf 3D Web Technol, pp 79–82Google Scholar
  2. 2.
    Akenine-Möller T, Haines E, Hoffman N (2008) Real-time rendering. CRC Press, Boca RatonGoogle Scholar
  3. 3.
    Alliez P, Desbrun M (2001) Progressive compression for lossless transmission of triangle meshes. In: Proc 28th Annu Conf Comput Graph Interact Tech ACM, pp 195–202Google Scholar
  4. 4.
    Autodesk (2017) Autodesk. https://www.autodesk.com/. Accessed 14 Sept 2017
  5. 5.
    Behr J, Eschler P, Jung Y, Zöllner M (2009) X3DOM: a DOM-based HTML5/X3D integration model. Proc 14th Int Conf 3D Web Technol pp 127–136Google Scholar
  6. 6.
    Behr J, Jung Y, Franke T, Sturm T (2012) Using images and explicit binary container for efficient and incremental delivery of declarative 3D scenes on the web. In: Proc 17th Int Int Conf 3D Web Technol, pp 17–25Google Scholar
  7. 7.
    Blat J, Evans A, Kim H et al (2016) Big data analysis for media production. Proc IEEE 104:2085–2113.  https://doi.org/10.1109/JPROC.2015.2496111 CrossRefGoogle Scholar
  8. 8.
    Blume A, Chun W, Kogan D et al (2011) Google body: 3D human anatomy in the browser. In: ACM SIGGRAPH 2011 Talks, ACM, p 19Google Scholar
  9. 9.
    Brauchart JS, Dick J (2012) Quasi--Monte Carlo rules for numerical integration over the unit sphere. Numer Math 121:473–502MathSciNetCrossRefMATHGoogle Scholar
  10. 10.
    Cabello R, Ulicny B, Koo J (2010) Three.JS. http://threejs.org/. Accessed 12 Sept 2017
  11. 11.
    Cavalcanti MGP, Rocha SS, Vannier MW (2004) Craniofacial measurements based on 3D-CT volume rendering: implications for clinical applications. Dentomaxillofacial Radiol 33:170–176.  https://doi.org/10.1259/dmfr/13603271 CrossRefGoogle Scholar
  12. 12.
    Chim J, Lau RWH, Leong HV, Si A (2003) CyberWalk: a web-based distributed virtual walkthrough environment. IEEE Trans Multimed 5:503–515.  https://doi.org/10.1109/TMM.2003.819094 Google Scholar
  13. 13.
    Chun W (2012) WebGL models: end-to-end. In: Cozzi P, Riccio C (eds) OpenGL insights. CRC Press, Boca Raton, p 431CrossRefGoogle Scholar
  14. 14.
    Cigolle ZH, Donow S, Evangelakos D (2014) A survey of efficient representations for independent unit vectors. J Comput Graph Tech 3:1–30Google Scholar
  15. 15.
    Evans A, Romeo M, Bahrehmand A et al (2014) 3D graphics on the web: a survey. Comput Graph 41:43–61.  https://doi.org/10.1016/j.cag.2014.02.002 CrossRefGoogle Scholar
  16. 16.
    Evans A, Agenjo J, Blat J (2014) Web-based visualisation of on-set point cloud data. In: Proc 11th Eur Conf Vis Media Prod, ACM, p 10Google Scholar
  17. 17.
    Forsyth T (2006) Linear-speed vertex cache optimisation. https://tomforsyth1000.github.io/papers/fast_vert_cache_opt.html. Accessed 12 Sept 2017
  18. 18.
    Geelnard M (2010) OpenCTM, the open compressed triangle mesh file format. http://openctm.sourceforge.net/. Accessed 12 Sept 2017
  19. 19.
    González Á (2010) Measurement of areas on a sphere using Fibonacci and latitude--longitude lattices. Math Geosci 42:49–64.  https://doi.org/10.1007/s11004-009-9257-x MathSciNetCrossRefMATHGoogle Scholar
  20. 20.
    Google (2017) Google open source blog: introducing Draco: compression for 3D graphics. https://opensource.googleblog.com/2017/01/introducing-draco-compression-for-3d.html. Accessed 1 Feb 2017
  21. 21.
    Gregory J (2009) Game engine architecture. CRC Press, Boca RatonGoogle Scholar
  22. 22.
    Hannay JH, Nye JF (2004) Fibonacci numerical integration on a sphere. J Phys A Math Gen 37:11591MathSciNetCrossRefMATHGoogle Scholar
  23. 23.
    Hoppe H (1996) Progressive meshes. In: Proc 23rd Annu Conf Comput Graph Interact Tech SIGGRAPH, pp 99–108Google Scholar
  24. 24.
    Ioannidou A, Apostolidis E, Collyda C, Mezaris V (2015) A web-based tool for fast instance-level labeling of videos and the creation of spatiotemporal media fragments. Multimed Tools Appl 76:1735–1774.  https://doi.org/10.1007/s11042-015-3125-0 CrossRefGoogle Scholar
  25. 25.
    Keinert B, Innmann M, Sänger M, Stamminger M (2015) Spherical fibonacci mapping. ACM Trans Graph 34:193.  https://doi.org/10.1145/2816795.2818131 CrossRefGoogle Scholar
  26. 26.
    Kim H, Evans A, Blat J, Hilton A (2017) Multi-modal visual data registration for web-based visualisation in media production. IEEE Trans Circuits Syst Video Technol PP(99).  https://doi.org/10.1109/TCSVT.2016.2642825
  27. 27.
    Lavoué G, Chevalier L, Dupont F (2013) Streaming compressed 3D data on the web using JavaScript and WebGL. In: Proc 18th Int Conf 3D Web Technol, pp 19–27Google Scholar
  28. 28.
    Limper M, Jung Y, Behr J, Alexa M (2013) The POP buffer: rapid progressive clustering by geometry quantization. Comput Graph Forum 32:197–206.  https://doi.org/10.1111/cgf.12227 CrossRefGoogle Scholar
  29. 29.
    Limper M, Wagner S, Stein C et al (2013) Fast delivery of 3D web content: a case study. In: Proc 18th Int Conf 3D Web Technol. ACM, pp 11–17Google Scholar
  30. 30.
    Liu Y, Nie L, Han L, Zhang L, Rosenblum D (2015) Action2Activity: recognizing complex activities from sensor data. In: Proc 24th International Joint Conference on Artificial Intelligence, pp 1617–1623Google Scholar
  31. 31.
    Liu Y, Nie L, Liu L, Rosenblum DS (2016) From action to activity: sensor-based activity recognition. Neurocomputing 181:108–115.  https://doi.org/10.1016/j.neucom.2015.08.096 CrossRefGoogle Scholar
  32. 32.
    Liu Y, Zhang L, Nie L, Yan Y, Rosenblum D (2016) Fortune teller: predicting your career path. In: Proc 30th AAAI Conference on Artificial Intelligence, pp 201–207Google Scholar
  33. 33.
    Liu L, Cheng L, Liu Y, Jia Y, Rosenblum D (2016) Recognizing complex activities by a probabilistic interval-based model. In: Proc of the 30th AAAI Conference on Artificial Intelligence, pp 1266–1272Google Scholar
  34. 34.
    Maglo A, Lavoué G, Dupont F, Hudelot C (2015) 3D mesh compression: survey, comparisons, and emerging trends. ACM Comput Surv 47:44.  https://doi.org/10.1145/2693443 CrossRefGoogle Scholar
  35. 35.
    Marques R, Bouville C, Ribardière M et al (2013) Spherical Fibonacci point sets for illumination integrals. Comput Graph Forum 32:134–143.  https://doi.org/10.1111/cgf.12190 CrossRefGoogle Scholar
  36. 36.
    McGuire M (2017) Computer graphics archive. http://casual-effects.com/data/index.html. Accessed 12 Sept 2017
  37. 37.
    McIntyre L (2010) Building a DAM, one brick at a time. J Digit Asset Manag 6:344–348.  https://doi.org/10.1057/dam.2010.41 CrossRefGoogle Scholar
  38. 38.
    Mellado J (2014) js-openctm. https://github.com/jcmellado/js-openctm. Accessed 15 Mar 2017
  39. 39.
    Nielsen J (1994) Usability engineering. Elsevier, AmsterdamMATHGoogle Scholar
  40. 40.
    Nielsen J (1999) Designing web usability: the practice of simplicity. New Riders Publishing, Thousand OaksGoogle Scholar
  41. 41.
    de Paiva GM, Dias DRC, Mota JH et al (2016) Immersive and interactive virtual reality applications based on 3D web browsers. Multimed Tools Appl:1–15.  https://doi.org/10.1007/s11042-016-4256-7
  42. 42.
    Ponchio F, Dellepiane M (2015) Fast decompression for web-based view-dependent 3D rendering. In: Proc 20th Int Conf 3D Web Technol, pp 199–207Google Scholar
  43. 43.
    Potenziani M, Callieri M, Dellepiane M et al (2015) 3DHOP: 3D heritage online presenter. Comput Graph 52:129–141.  https://doi.org/10.1016/j.cag.2015.07.001 CrossRefGoogle Scholar
  44. 44.
    Praun E, Hoppe H (2003) Spherical parametrization and remeshing. ACM Trans Graph 22:340–349.  https://doi.org/10.1145/882262.882274 CrossRefGoogle Scholar
  45. 45.
    Quax P, Liesenborgs J, Barzan A et al (2016) Remote rendering solutions using web technologies. Multimed Tools Appl 75:4383–4410.  https://doi.org/10.1007/s11042-015-2481-0 CrossRefGoogle Scholar
  46. 46.
    Sander PV, Nehab D, Barczak J (2007) Fast triangle reordering for vertex locality and reduced overdraw. ACM Trans Graph 26:89.  https://doi.org/10.1145/1276377.1276489 CrossRefGoogle Scholar
  47. 47.
    Sons K, Klein F, Rubinstein D et al (2010) XML3D. In: Proc 15th Int Conf Web 3D Technol - Web3D ‘10. ACM Press, New York, p 175Google Scholar
  48. 48.
    Swinbank R, James Purser R (2006) Fibonacci grids: a novel approach to global modelling. Q J R Meteorol Soc 132:1769–1793CrossRefGoogle Scholar
  49. 49.
    Zampoglou M, Kapetanakis K, Stamoulias A et al (2016) Adaptive streaming of complex web 3D scenes based on the MPEG-DASH standard. Multimed Tools Appl:1–24.  https://doi.org/10.1007/s11042-016-4255-8

Copyright information

© Springer Science+Business Media, LLC, part of Springer Nature 2017

Authors and Affiliations

  1. 1.GTM - Grup de recerca en Tecnologies MèdiaLa Salle - Universitat Ramon LlullBarcelonaSpain
  2. 2.Grup de Tecnologies InteractivesUniversitat Pompeu FabraBarcelonaSpain

Personalised recommendations