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.

This is a preview of subscription content, log in to check access.

Fig. 1
Fig. 2
Fig. 3
Fig. 4
Fig. 5
Fig. 6
Fig. 7
Fig. 8


  1. 1.


  2. 2.



  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–82

  2. 2.

    Akenine-Möller T, Haines E, Hoffman N (2008) Real-time rendering. CRC Press, Boca Raton

    Google 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–202

  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–136

  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–25

  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

    Article  Google 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 19

  9. 9.

    Brauchart JS, Dick J (2012) Quasi--Monte Carlo rules for numerical integration over the unit sphere. Numer Math 121:473–502

    MathSciNet  Article  MATH  Google 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

    Article  Google 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 431

    Google 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–30

    Google 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

    Article  Google 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 10

  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

    MathSciNet  Article  MATH  Google 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 Raton

    Google Scholar 

  22. 22.

    Hannay JH, Nye JF (2004) Fibonacci numerical integration on a sphere. J Phys A Math Gen 37:11591

    MathSciNet  Article  MATH  Google Scholar 

  23. 23.

    Hoppe H (1996) Progressive meshes. In: Proc 23rd Annu Conf Comput Graph Interact Tech SIGGRAPH, pp 99–108

  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

    Article  Google 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

    Article  Google 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–27

  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

    Article  Google 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–17

  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–1623

  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

    Article  Google 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–207

  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–1272

  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

    Article  Google 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

    Article  Google 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

    Article  Google 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, Amsterdam

    Google Scholar 

  40. 40.

    Nielsen J (1999) Designing web usability: the practice of simplicity. New Riders Publishing, Thousand Oaks

  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–207

  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

    Article  Google 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

    Article  Google 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

    Article  Google 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

    Article  Google 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 175

  48. 48.

    Swinbank R, James Purser R (2006) Fibonacci grids: a novel approach to global modelling. Q J R Meteorol Soc 132:1769–1793

    Article  Google 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

Download references


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

Author information



Corresponding author

Correspondence to Alun Evans.



Table 9 Single rate compression using McGuire 3D dataset

Rights and permissions

Reprints and Permissions

About this article

Verify currency and authenticity via CrossMark

Cite this article

Evans, A., Agenjo, J. & Blat, J. A pipeline for the creation of progressively rendered web 3D scenes. Multimed Tools Appl 77, 20355–20383 (2018). https://doi.org/10.1007/s11042-017-5463-6

Download citation


  • 3D
  • Web
  • Graphics
  • Pipeline
  • Compression
  • Mesh