Web Browsers as a 3D Visualization Environment

Year 2022, , 251 - 259, 31.07.2022

Feyza Nur Koçer Özgün

https://doi.org/10.17671/gazibtd.1072993

Abstract

The challenge of modeling and rendering required for high-quality 3D visuals leads to the use of new environments. Working with web browsers and allowing real-time interaction, 3D graphic libraries have become platforms where design and software can be executed together. The aim of the study is to explore the usage ways of the web environment, and their potentials in 3D visualization. After examination of declarative and imperative classification in 3D graphics, the focus is on the WebGL standard, which is imperative and has recently come to prominence in web application and content production. In this context, discussed approaches towards the usage of interactive 3D web graphics in the representation process of designs are: 1. We examined web graphics libraries that allow real-time interaction and 3D modeling through scripting. 2.We focused on tools that are developed as plug-ins to 3D modeling programs on desktops and provide web integration. 3. We discussed the library-based editors which both offer models in a web browser and allow coding simultaneously. The general framework prepared in the study presents the use of these approaches in modeling, visualization, and presentation in the context of web graphics libraries and discusses their advantages and disadvantages. This discussion is a preliminary study of more comprehensive research that can be prepared for the development of next-generation desktop and web-based modeling approaches in the context of using web browsers as visualization media.

Keywords

3D visualization, 3D graphics, web browsers, real-time interaction

3B Görselleştirme Ortamı Olarak Web Tarayıcıları

Abstract

Yüksek kaliteli 3B imajların elde edilebildiği modelleme ve bilgisayar programlarında karşılaşılan işlem zorluğu, yeni platformların geliştirilmesini gerekli kılan önemli bir etkendir. Web tarayıcıları ile çalışan ve gerçek zamanlı etkileşime izin veren 3B grafik kitaplıkları, tasarım ve yazılımın birlikte yürütülebildiği platformlar haline gelmektedir. Bu çalışmanın amacı, web ortamının kullanım şekillerini ve 3B görselleştirmedeki potansiyellerini keşfetmektir. 3B grafiklerde bildirimsel ve zorunlu sınıflandırmanın incelenmesinden sonra, web uygulaması ve içerik üretiminde zorunlu olan ve son zamanlarda ön plana çıkan WebGL standardına odaklanılmaktadır. Bu bağlamda, tasarımların temsil sürecinde etkileşimli 3B web grafiklerinin kullanımına yönelik tartışılan yaklaşımlar şunlardır: 1. Gerçek zamanlı etkileşime ve komut dosyası aracılığıyla 3B modellemeye izin veren web grafiği kitaplıkları. 2. Web tarayıcılarından yararlanmanın ikinci yolu olarak, masaüstü bilgisayarlarda 3D modelleme programlarına eklenti olarak geliştirilen ve web entegrasyonu sağlayan araçlar. 3. Hem bir web tarayıcısında modeller sunan hem de eş zamanlı kodlamaya izin veren kütüphane tabanlı editörler incelenmiştir. Çalışmada hazırlanan genel çerçeve, bu yaklaşımların modelleme ve görselleştirme odaklı kullanımını web grafik kütüphaneleri bağlamında sunarak; avantaj ve dezavantajlarını ele almaktadır.

Keywords

3B görselleştirme, 3B grafikler, web tarayıcıları, gerçek zamanlı etkileşim

References

• A. Koutamanis, "Digital architectural visualization", Automation in construction, 9(4), 347-360, 2000.
• A. Evans, M. Romeo, A. Bahrehmand, J. Agenjo, J. Blat, "3D graphics on the web: A survey", Computers & Graphics, 41, 43-61, 2014.
• K. Curran, C. George, "The future of web and mobile game development", International Journal of Cloud Computing and Services Science, 1(1), 25, 2012.
• M. Nobel-Jørgensen, WebGL based 3D Game Engine, Master's Thesis, IT University of Copenhagen, 2012.
• N. Polys, J. Hotter, M. Lanier, L. Purcell, J. Wolf, W. C. Hession, ... , J. D. Ivory, "Finding frogs: Using game-based learning to increase environmental awareness", In Proceedings of the 22nd International Conference on 3D Web Technology, 1-8, 2017.
• R. Van der Spuy, Advanced Game Design with HTML5 and JavaScript. Apress, 2015.
• S. Neelakantam, T. Pant, Learning Web-based Virtual Reality: Build and Deploy Web-based Virtual Reality Technology, Apress, 2017.
• M. O. Mete, D. Guler, T. Yomralioglu, "Development of 3D web GIS application with open source library", Selçuk Üniversitesi Mühendislik, Bilim Ve Teknoloji Dergisi, 6, 818-824, 2018.
• R. K. Moloo, S. Pudaruth, M. Ramodhin, R. B. Rozbully, "A 3D Virtual Tour of the University of Mauritius using WebGL", In 2016 International Conference on Electrical, Electronics, and Optimization Techniques (ICEEOT), 2891-2894, 2016.
• M. Potenziani, M. Corsini, M. Callieri, M. Di Benedetto, F. Ponchio, M. Dellepiane, R. Scopigno, "An advanced solution for publishing 3D content on the web", In Museums and the Web, 2013.
• M. Callieri, C. Leoni, M. Dellepiane, R. Scopigno, "Artworks narrating a story: a modular framework for the integrated presentation of three-dimensional and textual contents", In Proceedings of the 18th International Conference on 3D Web Technology, 167-175, 2013.
• T. Alatalo, T. Koskela, M. Pouke, P. Alavesa, T. Ojala, "VirtualOulu: collaborative, immersive and extensible 3D city model on the web", In Proceedings of the 21st International Conference on Web3D Technology, 95-103, 2016.
• J. Jankowski, S. Ressler, K. Sons, Y. Jung, J. Behr, P. Slusallek, "Declarative integration of interactive 3d graphics into the world-wide web: Principles, current approaches, and research agenda", In Proceedings of the 18th International Conference on 3D Web Technology, 39-45, 2013.
• X. Wei, W. Sun, X. Wan, "Architecture and Implementation of 3D Engine Based on WebGL", Applied Mathematics, 7(07), 701, 2016.
• Internet: https://www.tutorialspoint.com/webgl/ webgl_tutorial.pdf. Retrieved Date: 20.05.2022.
• K. Sons, F. Klein, D. Rubinstein, S. Byelozyorov, P Slusallek, "XML3D: interactive 3D graphics for the web", In Proceedings of the 15th International Conference on Web 3D Technology, 175-184, 2010.
• M. Potenziani, M. Callieri, M. Dellepiane, R. Scopigno, Publishing and consuming 3D content on the web: A survey, Now Publishers, 2018.
• T. E. Kalaycı, Y. D. Uğur, "X3D ile İnternet Üzerinde Üç Boyut", Akademik Bilişim, 02-04, 2005.
• J. Behr, P. Eschler, Y. Jung, M. Zöllner, "X3DOM: a DOM-based HTML5/X3D integration model", In Proceedings of the 14th international conference on 3D web technology, 127-135, 2009.
• Internet: https://doc.x3dom.org/tutorials/index.html. Retrieved Date: 20.05.2022.
• F. Klein, K. Sons, D. Rubinstein, P. Slusallek, "XML3D and Xflow: Combining declarative 3D for the Web with generic data flows", IEEE computer graphics and applications, 33(5), 38-47, 2013.
• T. Parisi, WebGL: up and running. O'Reilly Media, Inc., 2012.
• L. Herman, T. Reznik, "3D web visualization of environmental information-integration of heterogeneous data sources when providing navigation and interaction", The International Archives of Photogrammetry, Remote Sensing and Spatial Information Sciences, 40(3), 479, 2015.
• P. Lubbers, B. Albers, F. Salim, T. Pye, Pro HTML5 Programming, New York, NY, USA. Apress, 2011.
• M. Karslı, Yapay Zekânın Tasarımcıyla İşbirliği Ve Tasarıma Olan Etkisi, Master's Thesis, Istanbul Technical University, 2019.
• Internet: https://www.middlesex.mu/about-mdx-mauritius/campus-virtual-tour. Retrieved Date: 22.05.2022.
• Internet: http://idflood.github.io/ThreeNodes.js/ index_optimized.html#example/ spreads1.json. Retrieved Date: 22.05.2022.
• Internet: https://viscircle.de/x3dom-vs-threejs-why-the-concrete-application-case-decides/?lang=en. Retrieved Date: 23.05.2022.
• L. Li, X. Qiao, Q. Lu, P. Ren, R. Lin, "Rendering Optimization for Mobile Web 3D Based on Animation Data Separation and On-Demand Loading", IEEE Access, 8, 88474-88486, 2020.
• Internet: http://editor.babylonjs.com/. Retrieved Date: 23.05.2022.
• Internet: https://github.com/ksons/xml3d-blender-exporter. Retrieved Date: 23.05.2022.
• Internet: https://www.x3dom.org/showcase-siena-cathedral-in-x3dom/. Retrieved Date: 20.05.2022.
• Internet: https://examples.x3dom.org/editor/compon ent_editor/. Retrieved Date: 20.05.2022.
• Internet: https://www.harp.gl/docs/master/example /. Retrieved Date: 20.05.2022.