Away with apps?
Jelle Vermandere
Interactive web 3D driven by
relational databases
relational databases.
Away with apps? Interactive web 3D driven by
Academic year 2019-2020
Master of Science in de ingenieurswetenschappen: architectuur
Master's dissertation submitted in order to obtain the academic degree of
Counsellor: Nino Heirbaut
Supervisors: Willem Bekers, Prof. ir.-arch. Ruben Verstraeten
Student number: 01306207
The author gives permission to make this master dissertation available for consultation and to copy parts of this master dissertation for personal use.
In all cases of other use, the copyright terms have to be respected, in particular with regard to the obligation to state explicitly the source when quoting results from this master dissertation.
Foreword
This thesis aims to make the process of adding 3D models to relational databases easier while providing more functionality. Before I explain this, I would like to thank everyone who made my life easier.
First of all, my supervisors Willem Bekers and Ruben Verstraeten for their valuable guidance sessions, their inspiring ideas and their support in my journey to the completion of this thesis.
I would also express my gratitude towards my favourite spelling checkers Lotte and Tessa for their extreme focus on letters and punctuation marks and Jonathan for the more rigorous language corrections.
Special thanks goes to my sister Floor for being my lay-out support and showing me the wonderful world of web development. Thanks to the numerous people who created forum posts and online tutorials who helped me solve many problems. I have learned many new skills along the way, many of which I did not even know existed.
I also want to thank my friend Sytse for keeping me physically fit in between the long and sometimes frustrating coding sessions by being my climbing buddy. Lastly, an enormous thank you to my parents for always being there. They have given me everything I need in my journey to adulthood and allowed me to pursue my passions and dreams. Without them, I would have never been where I am today.
Table of Contents
Defining the challenge:
Introduction 15
Architectural Databases
15
Database websites 15
App based 3D model viewing
16
Mixed reality
17
Augmented reality examples 17
Providing a solution:
The website
19
Objective: no more apps
19
Workflow
20
Collecting information 20
Creating the data 20
Filling the database 20
Linking the data 20
Displaying on the website 20
Modeller vs Curator vs User
21
Organisation of the thesis
21
3D model creation 21 Database creation 21 Website creation 21
Case Study
22
Le Corbusier 22 Villa Savoye 22The Philips pavilion 23
The Chapel
Notre Dame du Haut 23
Software used
24
3D model creation and export 24
Database creation and management 24
Creating 3D models
for the web
25
Modelling: Creating 3D geometry
26
Different types of 3D modelling 26
Modelling for real time rendering 27
Modelling for the section plane 27
Texturing: Creating a material
28
UV layout 28
PBR Materials 31
Texture baking 33
Lighting: defining the lights
34
Real time lights 34
Image-based lighting 34
Rendering: calculating the final image
35
Real time rendering 35
Post-processing 36
Exporting: choosing a file type
38
Optimizations 39
3D model 39
Textures 40
Constructing a database
for the web
41
What is a (relational) database?
41
Structured query language SQL 41
Not only SQL 44
Choosing a Database Framework
44
MySQL 44 NodeGoat 44
Integration in the website 44
Database structure
45
Collecting and storing information
46
Building the website
47
Dynamic websites
48
Responsive websites
48
Choosing the coding languages
49
HTML 49 PHP 49 Bootstrap 50
Creating a working environment
51
Setting up a local server 51
Setting up an online server through Heroku 51
Database integration
52
Establishing the connection 52
Interacting with the database: CRUD 52
File renaming system 53
Alternative option: Nodegoat 54
3D model integration
55
Testing different Technologies 55
Programming the 3D viewport 57
Programming the section plane 59
The viewport 60
Augmented reality integration
61
Augmented reality 61
Testing different technologies 62
Programming The AR experience 64
Programming the QR code generator 65
The AR experience 66
Website Structure
67
Different pages 67
The navigation bar 68
The home page
68
The search page
69
The person page
69
The building page
70
The AR page
70
Conclusion
72
The finished product
72
Workflow system
73
Applications
74
Future expandability
74
Appendix 75
References
75
Websites 75 Books/ Papers 76 Frameworks 77 Images 77Source code
77
Example catalogue
78
3D form Textures Renderer
AWAY WITH APPS?
INTERACTIVE WEB 3D DRIVEN BY RELATIONAL DATABASES
Jelle Vermandere
Supervisors: Willem Bekers, Ruben Verstraeten Counsellor: Nino Heirbaut
Abstract- Architectural databases mostly consist of text and 2D plans. Adding 3D models can create a better
understanding of the buildings. This thesis documents the creation of a website, in which interactive 3D models are linked to relational databases. By providing guidelines and best practices about the creation of these 3D models, this thesis allows modellers to create 3D models that are compatible with all the provided features. By keeping in mind the fact that this website can be used with very large databases, an effort has been made to automate as much of the process as possible. The resulting website can be used for exhibitions, archiving and much more.
Keywords- Relational database, 3D model, Real time rendering, Website, Augmented reality
DEFINING THE CHALLENGE:
INTRODUCTION
The ever increasing amount of architectural data needs to be stored in online databases in order to be accessible and searchable. The data mostly consists of text and architectural plans, because storing and conserving one of the most useful documents in architectural presentations, the scale model, is very inefficient.
This is where virtual 3D models can help fill the need for a better understanding of the buildings. Furthermore, placing these virtual models in the real world with the aid of a mobile device, can provide a very similar experience to a physical scale model, with the added benefits of accurate material representation, animations and more. This technology is called Augmented reality.
PROVIDING A SOLUTION:
THE WEBSITE
This thesis aims to lower the barrier of interacting with 3D models as much as possible by providing a full web based solution. This means that there is no need to download any extra apps or programs on the user’s device. The website links a database and 3D models that are connected to specific buildings of that database.
Everything that is produced for this thesis and the website is made with open source or free software. This ensures the future expandability of the website is not limited by expensive programs.
The website is a combination of different technologies. Because of the rapid development of these kinds of technologies, most parts are interchangeable in case a better alternative becomes available.
CREATING 3D MODELS FOR
THE WEB
Creating 3D models that are fully compatible with all the features of the website will require some specific needs. Displaying a 3D model on a screen requires three main parts: a 3D form, textures and a renderer. All these parts have different parameters and functions that need to be optimised in order to provide a smooth experience on the website.
For storing the final 3D models, the popular and efficient GL Transmission Format (glTF) file format was chosen. This format is built for fast rendering and is widely adopted on most platforms.
Building ID Name Architect ID Built Date
1 Philips Pavilion 1 1958
2 Villa Savoye 1 1931
3 .. .. ..
.. .. .. ..
Architect ID Name Birthday Nationality
1 Le Corbusier 06/10/1887 French
2 Jelle 26/06/1995 Belgian
3 .. .. ..
.. .. .. ..
CONSTRUCTING A
DATABASE FOR THE WEB
The database is an integral part of the website structure, because all the content of the website is stored in it. It also holds the references to the 3D models in order to make sure the correct models are linked to the buildings. The database is built with the open standard “Serial Query Language”. This allows multiple databases to be linked together. By linking the datasets together, relations can be set up.
These relations form the basis for large scale discoveries of new connections between buildings, architects, locations, time periods, and anything that is added to the database.
BUILDING THE WEBSITE
The website allows the end users to explore all the data, present in the database, in a visual way. The 3D models will provide the extra information simple text and images can not provide.
The website uses three types of underlying technologies to create the functioning website: the database integration, the 3D model integration and the augmented reality integration.
The website has a search page that is able to search the entire database for matches and connections. This feature allows curators, researchers and others to make a selection of works for an exhibition or research.
Furthermore, every type of data has a dedicated page. That page will also show all the connected people and buildings. This way, the user can explore the data and find new relations. This includes buildings, the centre piece of the website. The connection with the 3D models is a integral part of this thesis.
The website has a page for viewing the 3D models in a exhibition context. The page is linked to the camera of the mobile device of the visitor. With the aid of special bar codes (QR codes), the user will be able to view the 3D models in augmented reality.
The website also has a submit page. Here, the 3D models and their information can be added to the database. The whole process of linking the 3D models to the database, setting up the different data pages and generating the markers for the augmented reality experience is automated. This allows the website to easily scale towards a large amount of different buildings.
CONCLUSION
The website provides a working product that can be used for exhibitions and online archiving of architectural information. It is a great tool for visualizing large amounts of data and because of its search functionality, it can help researchers in their work. Much of the process of linking the 3D models to the database has been automated, ensuring scalability to very large databases. Because the website is made with open source frameworks, it is encouraged to expand this website with more functionality and future technology improvements.
3D vorm Texturen Renderer
WEG MET APPS?
INTERACTIEVE WEB 3D GEBASEERD OP RELATIONELE
DATABANKEN.
Jelle Vermandere
Promotors: Willem Bekers, Ruben Verstraeten Begeleider: Nino Heirbaut
Abstract-Databanken met betrekking tot architectuur bevatten voornamelijk teksten en schetsen terwijl geen
ruimte voorzien wordt om maquettes op te slaan. De creatie van een website, waar interactieve 3D modellen worden gekoppeld aan relationele databanken bieden hierop een antwoord. Door richtlijnen en tips te geven in verband met de creatie van de 3D modellen, zorgt deze thesis ervoor dat makers 3D modellen kunnen maken die compatibel zijn met alle functies van de website. Doordat de website ook inzetbaar blijft voor grote hoeveelheden van gebouwen, is er moeite gedaan om zoveel mogelijk te automatiseren. Dit resulteert in een website die toepasbaar is voor tentoonstellingen, archivering en zoveel meer.
Kernwoorden- Relationele databanken, 3D model, Real time rendering, Website, Augmented reality
DE UITDAGING:
INTRODUCTIE
De steeds stijgende hoeveelheid van architecturale informatie moet opgeslagen worden in databanken om eenvoudig toegankelijk en doorzoekbaar te zijn. De data bestaat meestal uit teksten en plannen, omdat het stockeren van maquettes erg inefficiënt is.
Hier kunnen 3D modellen de nood voor een betere verstaanbaarheid van de gebouwen invullen. Verder kunnen deze 3D modellen in de echte wereld worden geplaatst aan de hand van een mobiel apparaat. Deze ervaring kan een meerwaarde creëren ten opzichte van een echte maquette aan de hand van accurate materiaal representatie, animaties en interactieve snedes. Deze technologie heet augmented reality.
EEN OPLOSSING:
DE WEBSITE
Deze thesis tracht de interactie met 3D modellen zo vlot mogelijk te laten verlopen. Dit kan aan de hand van een website. Dit betekent dat er geen externe apps moeten gedownload worden op het apparaat van de gebruiker. De website linkt een database aan 3D modellen van gebouwen in die database.
Alles dat gemaakt is voor deze thesis en de website, is gemaakt aan de hand van open source programma’s. Dit zorgt ervoor dat de potentiële toekomstige uitbreidingen niet gelimiteerd zijn door dure software.
De website is een combinatie van verschillende bestaande technologieën die elk kunnen vervangen worden indien er in de toekomst betere alternatieven zijn.
3D MODELLEN MAKEN
VOOR HET WEB
3D modellen maken die volledig compatibel zijn met alle functies van de website, moeten specifieke eigenschappen bevatten. Het weergeven van 3D modellen vereist drie dingen: een 3D vorm, texturen en een renderer. Deze onderdelen hebben verschillende parameters die elk zoveel mogelijk geoptimaliseerd zien te worden. Op die manier zullen de 3D modellen een vlotte ervaring bieden.
De 3D modellen worden geëxporteerd naar het GL Transmission Format (glTF) formaat, dit is geoptimaliseerd voor een snelle weergave op het web.
Building ID Name Architect ID Built Date
1 Philips Pavilion 1 1958
2 Villa Savoye 1 1931
3 .. .. ..
.. .. .. ..
Architect ID Name Birthday Nationality
1 Le Corbusier 06/10/1887 French
2 Jelle 26/06/1995 Belgian
3 .. .. ..
.. .. .. ..
EEN DATABASE MAKEN
VOOR HET WEB
De database is een essentieel onderdeel van de website, omdat alle data hierin is opgeslagen. De database bevat ook de referenties naar de 3D modellen en afbeelding van de gebouwen om ervoor te zorgen dat de juiste data bij de 3D modellen komt. De database is gebouwd met de open source standaard “Serial Query Language”. Deze standaard laat toe om verschillende databases met elkaar te verbinden. Hiermee kunnen relaties tussen verschillende gebouwen en architecten ontdekt worden.
Deze relaties vormen de basis voor grootschalige onderzoeken naar nieuwe relaties tussen gebouwen, architecten, tijdsperiodes, plaatsen en alle andere soort data dat in de database verwerkt is.
DE WEBSITE MAKEN
De website maakt de exploratie van de informatie mogelijk in een visuele manier aan de hand van de 3D modellen.
De website gebruikt drie onderliggende technologieën om tot een werkend geheel te komen: de database integratie, de 3D model integratie en de augmented reality integratie.
De website heeft een zoekfunctie waarbij de hele database kan doorzocht worden naar bepaalde termen. Dit laat onderzoekers en curators toe om een selectie te maken op basis van bepaalde parameters.
Ook heeft elk type data van de database een eigen webpagina. Die pagina toont ook alle geconnecteerde gebouwen en architecten. Op die manier kunnen gebruikers de verschillende relatie verkennen. Hierbij zitten ook de 3D modellen, die een essentieel onderdeel zijn van de informatie De website heeft ook een pagina om de 3D modellen te zien in augmented reality op bijvoorbeeld tentoonstellingen. De pagina is verbonden met de camera van het mobiele apparaat, waarbij de bezoeker aan de hand van speciale markers de 3D modellen in de echte wereld zullen zien verschijnen.
Daarnaast bevat de website ook een pagina waarin makers van de 3D modellen hun creaties kunnen uploaden, samen met de bijhorende informatie. Het hele proces van het toevoegen van de modellen is geautomatiseerd, net zoals het genereren van de markers voor de augmented reality pagina. Dit laat de website toe inzetbaar te blijven voor grote hoeveelheden van informatie.
CONCLUSIE
De website is een werkend eindproduct dat diverse mogelijkheden biedt rond onderzoek en visualisaties van grote hoeveelheden van informatie. Dankzij de zoekfunctie kan de website hulp bieden aan onderzoekers. Een groot deel van het toevoegen van 3D modellen is geautomatiseerd, zodat de website grote hoeveelheden van informatie kan verwerken. De website is gebouwd met open source frameworks en het wordt aangemoedigd om hier verder op te bouwen met meer functionaliteiten en toekomstige technologische vernieuwingen.
Defining the challenge:
Introduction
Architectural Databases
The amount of data about buildings and architects that is collected and stored will continue to increase over time. In the digital age, this data is stored in large collections also known as databases. Having all the data accessible means it can be read and interpreted by computers. This way, data can be linked to each other. By connecting all the buildings by the same architect or by their location, new relations can be discovered that were previously too large to be researched by hand.
Databases that mainly contain textual information can be difficult to visualize because of the lack of visual information. Simple text doesn’t provide the same experience as a visual medium. That’s why these datasets should be accompanied by pictures and models to increase the readability.
This thesis aims to build a framework of a system which allows a visual, textual and interactive exploration of architectural data with the aid of 3D models.
Database websites
Providing the information of the database to a potential viewer can be done in different ways. One of the clearest ways to navigate this is through a website. Websites can be easily found through search engines and accessed everywhere.
These websites are made up of different webpages which can serve a specific subset of the data.
Building a unique webpage for every piece of data is not only a copious amount of work, but also limits future expandability. That is where using an online database can solve both these hurdles. The database allows for large amounts of data to be stored and interpreted by the website and can be kept up to date at all times. This way, a blueprint can be made where all the info of the database can be inserted. When a piece of data from the database is altered, it will also change on the website without having to rewrite the website itself.
It also allows for relations to be discovered between the different datasets. Works can be sorted by built-date or architect, improving the searchability. The website then adapts to the contents of the database.
App based 3D model viewing
When confronted with a new building or structure, it is not always easy to grasp the full 3D form, especially when only plans or 2D images are available. That’s why scale models are used. With the help of a scale model, users can explore the full composition and get a feeling for the relative scale of the different elements. However, these models don’t allow for much flexibility after they are built. Therefore the use of digital 3D models can enhance this experience. By providing a clear view of all angles, accurate material representation and adding interaction such as animations, 3D sections or walkthroughs, this can be a good alternative to physical models. Such physical models also take up actual storage space, which can become very valuable in the future as the amount of models gets bigger as time goes on.
Unlike physical models, which are by themselves self-sufficient, 3D models do require some amount of technical infrastructure to view and interact with - at the very minimum, a screen, and some software that can interpret and render the model. The technical choices can determine how many people can access the model data, and enable or limit certain modes of interaction. This thesis is interested in building a system which will enable many people to individually explore 3D models interactively and simultaneously, with as little technical overhead as possible on the user side.
From the perspective of technical reliability, cost and maintenance, the option of a large touch table or screen seems like a good option to show these models. However, these kinds of devices are more suited to interactions involving multiple people sharing the same device. In the case of 3D models, this is not ideal; in order to explore the model, users should individually be able to control and explore it without negotiating with other users. Therefore, a system based on individual devices is preferable.
Building an app for personal devices would allow for the individual control, if the system catered only to a known collection of devices maintained by the system owner. The app can be made for specific hardware, limiting maintenance and compatibility issues. However, the necessity to acquire hardware means this is not the most cost-efficient way to distribute access to a database. Downloadable apps would allow more users to access the dataset from their own personal devices. Native apps, requiring users to install applications on their phones or tablets, have the downside that they must deal with a large variety of devices. On the user side, they may not want to download the app due to device storage concerns or slow download times, leading to an overall low adoption of the application.
To address these concerns, this thesis chooses to build a web application. By focusing on an browser-based application, the system can avoid compatibility issues with different operating systems and instead use the power provided by browsers, a standard feature on most personal devices. Being browser-based also makes it easier for users to find and explore the content, without the need to download anything: all that would be needed is a simple URL, or even a scannable QR code.
Reality Augmented Reality Virtual reality
Mixed reality
The rise of computers and the increase in their graphical capabilities enabled the creation of virtual 3D spaces. Which, at first, users could explore through pointing and clicking with a mouse, but increasingly can also be explored by smart usage of sensors. Nowadays, users can manipulate mobile devices in the physical world, and their movements and rotations can be mapped into the virtual space, making navigation in these virtual spaces increasingly intuitive. The spaces presented on a digital screen can range from the real world, where everything is real (e.g. looking at the camera of your phone) to fully virtual (e.g. tracking a camera through a video game). Everything in between can be considered as mixed reality. When we occlude our view to present a fully digital world, we call it virtual reality. When we look at the real world and add virtual objects in that world, we call it augmented reality.
Making these virtual worlds come to life requires large amounts of computing power and complex technologies. That is why mixed reality has only recently come to the consumer.
Nowadays, augmented reality is sometimes used in exhibitions as an extra layer of information, enhancing the real-life experience. But due to its low adoption rate, it is usually limited to a supplementary role, leaving essential aspects of an exhibition in the real world. Nonetheless, augmented reality brings a different perspective to the user and can cause a higher level of engagement.
This thesis aims to use augmented reality to enhance the traditional 3D model interaction on a webpage.
Augmented reality examples
Some applications and exhibitions already use augmented reality to enhance the user experience. Some use it to show 3D objects in the room, others to enhance 2D images, like paintings on a wall, that can come to life due to augmented reality.
Philips museum design tour:
The Philips museum in Eindhoven in The Netherlands gives the user a tablet to walk around the space. This is a way to ensure everything works as intended and technical problems of device incompatibility are avoided. Throughout the exhibition there are images on the ground that, when seen by the tablet’s camera, show a room in augmented reality. The user then is able to walk through and experience the room as if it were real.
Google Maps AR:
Augmented reality can be very useful in wayfinding. Not everyone feels at home navigating with a flat image on a screen. Having signs and directions that point in the right direction are much easier to read than following a point on a map. That’s why Google is starting to implement augmented reality in Google maps. Using the device’s camera, the user can look where he has to go. This makes it significantly easier to get started in the right direction.
Ikea Place:
Famous furniture seller Ikea has an app where products from their catalogue can be placed in a room in augmented reality. This enables the users to make decisions in the comfort of their own home. The fact that the furniture is always to scale and the lighting in the room is matched as close as possible to the real conditions also shows if the furniture will fit with the rest of the room.
Providing a solution:
The website
Objective: no more apps
This thesis tries to lower the barrier of viewing 3D models linked to large databases as much as possible.
Web-based applications form one approach to lowering this barrier. Present-day smart devices are equipped with a browser to view web pages, making web applications device agnostic. Imagine the user is just one tap away from interacting with the model. By scanning a QR-code with the built-in camera app, the user is directed to the correct page on a website which can access the device’s camera. By simply pointing the device, users can view the 3D model in augmented reality. In order to achieve this, a website has to be built where these 3D models can be displayed based on the data from a connected database. This thesis will go through all the steps that are necessary to complete this website.
Another part of lowering the barrier is the way this website is produced. By only using open source and free to use applications and frameworks, everyone can freely expand and improve this initial set-up. However, for the sake of completion and benchmarking purposes, other ways of achieving augmented reality experiences were also researched, not necessarily with free or open source software. These other solutions have some interesting advantages and could serve as a benchmark against the web-based solution of this thesis.
This thesis will also examine the creation of content for this website. Just like the website itself, the content can be made with free or open source programs. This thesis emphasizes the correct production of 3D models that need to comply to some rules in order to be fully compatible with all the features of the website.
To manage all the data that such a website should contain, a database is needed. Choosing the right type of database is important to ensure optimal performance and stability. There must also be a way to manage the data directly from the website. This way, there is no coding knowledge required to add or delete data from the database. The website should enable searching through the database, and allow users to visually explore connections between buildings, architects, and dates.
All these different components must work together to form a functional product which is usable today, but which can also be expanded upon in the future as technologies change or user requirements adapt. This thesis stresses the modularity of the different components, allowing developers to replace individual components without having to rebuild the entire website.
Workflow
The process of adding 3D models to a website through a database will require a specific workflow.
Linking the data
All the buildings, their architects and other contributors will be indexed in the database and the connections will be made.
Creating the data
After all the information is collected, the 3D model has to be created according to some standards. The background information needs to conform to the database structure.
Filling the database
The 3D model and information will be uploaded to the database.
Displaying on the website
After all the data is inserted in the database, the website will be able to display the buildings with their 3D models and extra information. All the connections that are set up in the database will be visible on the site. Users will be able to explore them in a visual way.
Collecting information
The first part of the process is collecting all the necessary information. The plans and drawings for the 3D model, and the background information about the building or architect.
Modeller vs Curator vs User
This thesis will make a distinction between 3 main actors of the website. All these use cases have different needs so the website needs to accommodate all these people the right way. There will be a distinction between the public website where the buildings are shown, and the private site where the modellers can manage and add the information to the database.
The modeller
The person who will create the information and the 3D model that will be displayed on the website. For the modeller, it is important that there is a clear and easy way to add the data. It is also very important that any 3D model that will be shown on the website is made appropriately so it can be displayed correctly and efficiently.
The curator
The person who will decide what data is visible at a given time or place. This could be an exhibition manager that only wants to select buildings from a certain place or year. So it is important there is a way to find and select the data that will fit the exhibition.
The end user
The person who will use the website once it is built and contains information, either at an exhibition or at home. Their main concern is the user experience and whether the website is clear and easy to navigate. The website must cater to this user by making information easily searchable and providing an overall pleasant user experience.
Organisation of the thesis
This thesis consists of three parts: 3D model creation, database construction and website building.
3D model creation
The first part looks into how 3D models can and should be created; explain basic terminology and provide best practices for optimized display on websites. This is aimed at the modellers who intend to make these models for use on the website.
Database creation
The second part will go deeper in the choice and set up of a correct database, how to connect it to a website and how to create, read, update and delete data of that database.
Website creation
The third and last part looks into how to build a dynamic and responsive website which connects the models and the database to the website, how augmented reality can be implemented and some user experience best practices will be discussed.
Case Study
Everything will be illustrated by a selection of works by Le Corbusier. The data consists of text, images and 3D models. The 3D models are created for this thesis according to the best practices that will be explained in the next chapter. All the necessary information was gathered for the database integration.
• Nationality: Swiss, French • Birth date: 1887/10/06 • Death date: 1965/08/27
Villa Savoye
An icon of the modern architecture movement, Villa Savoye was built in Poissy, France in 1931. This elegant square building is lifted from the ground by a series of columns, providing a magnificent view in all directions. The design embodies the five points of his architectural philosophy. The building is raised on pilotis, allowing the ground floor to be used as an extra external space. The roof is filled with nature and terraces, giving the area back to nature. The house has a free floor plan, meaning the internal walls can be repositioned and the space can be ordered differently. The windows are horizontal to provide a better view to the outside and giving enough surface for ventilation. Because the building was supported by columns, the facades could be freely designed without the constraints of needing to transfer the loads.
• Built date: 1931
• Architect: Le Corbusier • Client: Pierre Savoye
• Location: Poissy, Île-de-France
Le Corbusier
Charles-Édouard Jeanneret, known as Le Corbusier, was a Swiss-French architect and one of the pioneers of modern architecture. Over his long career he has designed buildings around the world, many of those buildings have become world heritage sites.
The Chapel
Notre Dame du Haut
This chapel, located on a hill in Ronchamp, was built in 1955, in Le Corbusier’s later life. The design is very organic and sculptural. The Chapel is made from large concrete walls. Embedded in these walls are large columns that support the roof. The walls have distinct openings that allows light to pass through in various ways.
• Built date: 1958
• Architect: Le Corbusier, Iannis Xenakis • Client: Philips
• Location: Heizel, Brussels, BE
• Built date: 1955
• Architect: Le Corbusier
• Client: Association Oeuvre Notre-Dame du Haut • Location: Ronchamps, Haute-Saône, FR
The Philips pavilion
The Philips Electronic Company commissioned Le Corbusier’s office to design a unique experience for the thousands of visitors of the 1958 world exhibit in Brussels,. Together with his employee Iannis Xenakis, Le Corbusier created a multimedia event with projections, lights and music. The structure itself is a three-pronged tent made from precast concrete elements, held together by tensile strength from steel cables that are connected to reinforced concrete pillars.
Software used
Every component of the designed framework is created with open source or free software. This means that anyone wanting to improve or alter this study can do so without the need to purchase expensive software.
3D model creation and export
Blender 3D
https://www.blender.org
All 3D models are made and exported to the correct format in the software “Blender 3D”. This is the biggest open source 3D authoring software package available. Other software could do the same thing but these are generally very expensive. In the chapter about 3D modelling, most of the necessary information is written program agnostic to ensure it is applicable to most 3D creation programs.
Database creation and management
phpMyAdmin
https://www.phpmyadmin.net
This software is used to manage databases locally. It can be installed on the local server of the computer, which means that it can be accessed during the offline stages of the website.
MySQL
https://www.mysql.com
This software is used to manage the database when it is hosted on the internet.
Website creation and hosting
Apache
https://httpd.apache.org
Apache is a local web server program that allows the website to be hosted on the local computer. This is very useful in the development stage as it allows for faster iteration and avoids online hosting limitations.
Heroku
https://www.heroku.com
Heroku is a free online web hosting service that allows the website to be hosted online, making it accessible anywhere and on any device. This was very important since the website is mainly designed to be used on mobile devices.
Github
https://www.github.io
Github is an online repository for code and programs. After the completion of the thesis, all the code and data can be accessed on the GitHub page set up for this thesis.
Creating 3D models
for the web
The main way of interacting with the building on the website is through a 3D model. Users can rotate the model and look around the virtual space on the screen and are able to see the inside of the model. Translating the 3D information to the screen in real time requires three things:
This is the polygonal representation of the real world object. Built out of virtual connected triangles.
This gives the 3D model colour and texture. It also determines the way the object will react to light.
This calculates the lights and shadows in the 3D scene. This can be done in a number of different ways.
3D geometry
Materials
Renderer
Difference Union Intersection Shapes
Modelling: Creating 3D geometry
Different types of 3D modelling
Making a 3D model involves manipulating surfaces and volumes in a virtual space. These models can be made in many different ways and software packages. We can divide these ways into 3 distinct modelling styles.
Solid modelling
Solid modelling makes use of basic 3D primitives such as cubes and spheres which can be combined in many different ways to create more complex shapes. Boolean operators (AND, OR, NOT, AND NOT) use logic to determine the combination of these shapes. These operators translate to difference, union and intersection to form the basis of this modelling technique.
Because of its parametric nature, meaning parameters like size and scale of these primitives can be changed at all time during the modelling process, this method is mainly used in mechanical design and construction detailing where precision and flexibility are crucial. This way of modelling is not optimized for real time rendering, because the shapes need to be calculated by the Central Processing Unit (CPU) before the Graphics Processing Unit (GPU) can render the image.
Software that uses this kind of modelling: Solidworks, AutoCad,...
Surface modelling
Surface modelling is a way to manipulate different surfaces into 3D space. By pushing and pulling surfaces along straight lines or curves, more organic shapes can be made more easily. This way of modelling also allows for a large amount of precision and flexibility. It suffers from the same drawbacks as solid modelling but at a less severe scale. Objects are generally less parametric than solid models, but the CPU still needs to calculate the geometry before it can be displayed. Software that uses this kind of modelling: SketchUp, AutoCad, Rhino,...
Mesh modelling
In Mesh modelling, the 3D model is a collection of vertices (points in 3D space), edges (connections between vertices) and faces (polygons that are created by a loop of connected vertices). Here each vertex can be manipulated individually to create complex objects very efficiently. The collection of the faces that make up the model is called the topology. Modellers should always strive to make the topology as simple as possible, while still retaining enough detail, as rendering speeds decrease with the number of polygons.
3D models can be created with vertices and polygons right from the start, however it is also possible to first make the object in a different way. At a later stage it is possible to overlay that model with polygons to replicate the shape. This process is called retopology. This gives the modeller freedom to create the model in the method they prefer. A well done retopology can make a model that was previously inefficient to render far more render-friendly.
The normal faces the camera,
so the plane is visible The normal does not face the camera, so the plane is not rendered.
Modelling for real time rendering
Real time rendering uses a process called rasterization, this will be explained in the rendering chapter. This process is optimized for polygons because it calculates pixels based on the visible polygons. With this method, the number of polygons in a given scene are directly linked to the speed at which the scene can be rendered. The fewer polygons there are, the faster the scene will render. In other words, the 3D models should be meshes.
This process uses the most basic form of polygons, triangles. This does not mean modellers can only use triangles in their 3D model. Triangulation occurs at the exporting stage of model creation. So, modellers can also model in quads (four sided polygons) and N-gons (more sided polygons). Quads are generally easier to work with , especially in buildings where most of the surfaces consist of rectangles. After the 3D model is created, the quads get divided into triangles by the model exporter.
For the purpose of the web application, all models that will be used should be mesh based. Modellers can use other methods such as solid or surface modelling because of the higher precision that can be achieved, however this method leaves less control over the final topology. So it is advised to retopologize, or at least optimize the existing topology, after it is created. This will be explained in a later part about optimizing the full 3D model.
Modelling for the section plane
One of the features the website has, is the ability to activate a 3D section plane. This plane acts like a virtual knife that will cut through the model. Everything in front of that plane will be invisible. This allows the user to view the inside of the 3D model.
This means the 3D models can have some interior decoration which will be visible once the section plane is activated.
An important side note to this, is the fact that real time rendering has an optimization feature called backface culling. Backface culling means only the front of a polygon is rendered. In order to know what side of the polygon is the front, every polygon has a property called the surface normal. The normal indicates the direction and is a vector that is perpendicular to the polygon. When creating a 3D model, the surface normals should always face outwards.
In the case of this website however, backface culling has been disabled to prevent the inside of the model being invisible when the section plane is active.
Texturing: Creating a material
Texturing is the process of adding colour and material properties to the 3D model. Multiple textures are combined to create a material. Texturing can be done in a few different ways: procedurally or UV mapped. When a model is textured procedurally, all the textures are math-based. Rather than manipulating individual pixels like a 2D image, the texture is equipped with some rules and equations to form a resolution-independent image. Using random noise patterns, grids, and gradients, rich and complex textures can be generated. This process is fully parametric, so all the parameters can be changed to suit the modeller’s need.
The 3D modelling software Blender and other more dedicated texturing software such as Substance Designer use a node-based texturing system. Nodes are individual mathematical expressions that can be linked together. This is a visual way of designing the material, similar to the popular 3D plug-in for Rhino, Grasshopper.
If the modeller wants to control every pixel, the textures can also be created by painting or drawing on a flat surface which is then projected on the model. The location of the texture on the model is determined by the so-called UV map. This map is a representation of every polygon of the model layer flat on a single image. (see example) The term UV originates in the fact that rather than a x-y coordinate system, this uses an alternate u-v coordinate system, which is functionally identical while using a different namespace to minimize confusion.
This method also allows the modeller to apply textures that are not created by himself. Using predefined textures for standard materials, such as concrete or bricks, can save a considerable amount of time in the process of creating the model.
UV layout
As stated above, the UV layout is the 2D representation of every polygon of the model. The 3D model is unfolded to a flat plane by a process called UV unwrapping. Several ways to map these polygons exist, but most 3D programs have built in tools to translate the 3D model to a 2D plane. For this thesis Blender 3D was used, which has intelligent unwrapping algorithms to automate the process.
The UV layout should be preferable square and have a resolution in a power of two. Most used texture sizes are: 256x256, 512x512, 1024x1024 and 2048x2048 pixels. Graphics cards Use binary language to calculate pixels, and have many optimization features that are specifically build around dividing the textures by a power of two for faraway objects in a virtual scene.
Seams
The most important thing to keep in mind when making a UV layout is the correct representation of the polygon on a 2D plane. For most shapes, it is impossible to flatten the geometry without obtaining deformations of the polygons. This is why UV layouts have separations between the polygons. These separations are called seams and can be chosen freely by the modeller. For simple forms like a cube, this can be done easily. However, more complex shapes require more elaborate cuts, as shown below. Seams should be chosen in a manner that minimises the deformations in the polygons as much as possible.
It is also important to maximize the area of the polygons on the UV map. Using lower texture sizes will result in faster rendering times. As a consequence, the resolution should be as low as possible, while still retaining enough visual fidelity.
For continuous textures, the UV mapping becomes crucial to allow the texture to continue over the model. Seams will break this flow and result in visible discontinuities in the texture. Locating the seams is therefore important. Some tips are:
• Make seams follow hard edges. Here discontinuities are less noticeable. • Make seams where they are obscured by other parts of the model.
Checking whether the model is UV unwrapped well can be done with a generic chequerboard texture. This will accentuate the deformations and discontinuities in the texture and help the creator to optimize the UV map.
Overlapping UVs
Overlapping UVs are two or more polygons that are overlapping each other on the UV map. Generally speaking, overlapping UVs should be avoided, to keep the texture varied and allow every part of the polygon to be unique. This is especially important when the model will be used in a real time application, when some of the lighting calculations can be done beforehand and saved on the model as a texture. Overlapping UVs will result in lighting artefacts, whereby parts of the model will look like they belong somewhere else on the model.
However, there are instances where overlapping UVs come in very helpful. Parts that are repeated throughout the model, like a brick wall, can be mapped in such a way that every polygon of the wall is mapped side by side on the UV map. This will result in a much lower resolution per brick compared to the same couple of bricks repeated over the wall. This can be achieved by overlapping the UVs on purpose.
Overlapping UVs also work in another way than of placing the different polygons over each other on the UV map. In some cases, it can be useful for a repeated element in the scene, like a railing, to share a single UV map. This way the same texture will be used for all elements. In the example below, all the columns share the same UVs, meaning there is only one unwrapped column on the UV map.
UV Channels
Having overlapping UVs can save texture space and will result in a higher final resolution per polygon. However, this means that every polygon will no longer have a unique place on the UV map. Luckily, 3D models can have multiple UV maps, so different textures can be mapped in different ways. This will be explored further in the chapter on optimization of the 3D model creation.
PBR Materials
Beyond colour, real-world objects all have different properties which add up to rendering a realistic material. A brick and a soda can may both be orange, even if made from different materials. A number of other properties define how the material will respond to light. The unique combination of these properties will determine the degree of realism of any rendered material. The standard workflow for materials is optimized for Physically Based Rendering (PBR). This means that all properties are different variations on how the incoming light gets reflected.
All these light reaction properties can be translated to textures. Most of them are expressed in a range from zero to one, which can be mapped to a grayscale image. Some properties like colour are full Red-Green-Blue (RGB) textures. This allows the creator to define these properties in a visual way and create them in image processing software like Gimp or Photoshop.
The most common properties are:
This defines whether a material is metallic or not. This map mostly exists of black (not metal) or white (metal) values, nothing in between. As a result, the texture can be saved in a very small file size. It is important to remember that only the topmost layer of the material defines this property. A painted car for example may consist of metal, but because of the layer of paint on top, the material no longer behaves like a metal. It should therefore have a metalness value of zero.
This property is also known as diffuse or albedo. This defines the colour of the diffuse light that gets reflected. The base colour corresponds with what we perceive as the colour of an object. For metallic surfaces, since they don’t have a diffuse reflection, this map is used to define the colour of the reflection.
Metalness
Roughness defines the microsurface of the material, since the amount of incoming light on an object should always be the same as the light being reflected back; the only varying parameter being the roughness of the reflection. When a surface is 100% rough, light gets reflected in all directions, resulting in a diffuse look. A perfectly smooth material (mirror) reflects the environment perfectly where the highlights are more focused. Most materials classify somewhere in between and have variations of roughness across their surface. This map is a grayscale image.
Base Colour
A bump map is used to give a surface more detail without having to model these details. Small bumps and holes can be simulated with a grayscale texture. This means the model can have fewer polygons, making it faster to render. The value for a given pixel of the bump map determines the height in which the pixel moves up or down.
This map too is used to give a surface more detail without having to model these details. This means the model can have fewer polygons, making it easier to render. Contrary to the bump map, a normal map can move the surface in three dimensions instead of just up and down. The texture is expressed in red (x) green (y) and blue (z), where every pixel moves according to the resulting colour. This allows for more possibilities, such as overhangs, as the movement of the pixels is not restricted to up and down but can also be sideways. Normal maps are preferred over bump maps, since they result in much more accurate displacements. However, the result is a larger file because it has to store three values per pixel instead of only one.
This map simulates the lack of light rays that are scattered in little cracks or corners of the model. Ambient occlusion increases the model depth as details and intersections are perceived easier. This result can also be achieved as a post-processing effect as well, which will be discussed in the next segment. When the renderer supports screen space ambient occlusion, the map does not have to be made.
Some objects or parts of objects can emit light. This can be achieved by assigning the object an emission value. The emission texture attributes colour and brightness to the light object. Since it acts as a light source, emission overrides all other material properties. Objects that are emissive therefore don’t need definitions for other properties.
Bump
Normal
Ambient Occlusion
UV map Metalness Base Colour
Roughness Normal Ambient Occlusion
Not every material needs all described properties to look realistic and appealing. The modeller can choose which property to add to the overall material. If a material has a uniform value of a certain property, for example the material has no metal parts, then the material can just have a single float value for that property. This saves on texture space and increases the performance for display.
Below are some examples of the textures that were created for the 3D model of the Philips Pavilion. In this case, five properties were defined by textures; the others were simple float values. In general, the base colour, the normal map and the roughness have the most impact on the overall look of the material.
Texture baking
An important part of texturing is the baking of a texture. Some materials can be defined procedurally or can be a combination of overlaying different materials. When such models are exported, these special materials will most likely not look like as they were intended in the original software, because of the difference in texturing workflows between programs. That is why textures can be baked: a process whereby each pixel’s final appearance is calculated and then represented in a UV map. This can be done individually for each property. For the case studies, all materials were created procedurally and baked in the end. Most 3D modelling packages are equipped with built-in baking tools to facilitate this process.
The resulting reflection from the left HDRI
Lighting: defining the lights
A vital part of the visualization of the 3D model is setting up the lights in a scene. Different real time lighting methods exist, each disposing of unique properties.
Real time lights
Real time lights are special scene objects that constitute sources of light. Some notable types are:
Point light:
This emits light in all directions from a single point in space and affects faraway objects less (also known as falloff).
Image-based lighting
Instead of placing every light manually in a scene, a spherical image can be used to simulate a real environment. These images are 360° photographs that are taken with a very high dynamic range, meaning both very bright and very dark parts of the image are exposed properly. These images are also called HDRI’s (High Dynamic Range Imaging). This method results in realistic lighting with a minimum effort and also produces realistic reflections in the objects.
Directional light:
This emits light in a single direction without falloff, acting as a sun.
Spot light:
This emits light in a cone from a single point, meaning the directions the light is emitting is limited the inside of that cone.
Area light:
This emits light from a plane in space, this gives more realistic lighting as the light does not come from a single point in space, giving the light and shadows a softer look.
Ambient light:
This emits a light equally on everything in the scene. This gives lights to parts that would otherwise be occluded from other light sources.
The polygons A pixel raster is created The pixels take the colour of the largest polygon
Rendering: calculating the final image
When creating pre-rendered images such as animations or visualizations, the lighting calculation can be done in different ways. Precisely because time-consuming rendering methods are allowed, a very precise and realistic way of rendering called Path-tracing can be used. In contrast, real time applications don’t have that luxury.
Real time rendering
Because the models have to be intractable and react to the user input, they don’t have the luxury of carefully rendering each ray and need to be rendered in real time. This means the final image has to be rendered over the duration of one frame. Typically, computers refresh the screen 60 times per second. This implies that the image must be rendered in 1/60th of a second. If, in the context of this thesis, 3D models are to be rendered in real time, they should be optimized for this way of displaying. Modern computers can use a few different application programming interfaces (API’s) to display real time graphics. Common examples are: OpenGL, Vulcan, DirectX. Modern internet browsers have built-in support for viewing 3D models on any device. For that purpose an open source API called WebGL is applied. WebGL is a binding for OpenGL, which means it is built on top of it. These methods all use the GPU (Graphical Processing Unit) for rendering. The GPU is highly optimized for calculating images at a rapid rate and can thus produce these images at the required 60 frames per second.
At the moment of writing, real time rendering uses a process called rasterization to calculate the 3D viewport. Rasterization is a very efficient way to draw the image on the screen. It does so in two steps. First it projects all the triangles in the scene onto a 2D plane that is parallel to the screen. Then, it checks what triangle each pixel is located in and then gives the pixel the base colour of the triangle.
Further rendering can be done after the base colour is determined. This is called shading. The present-day standard for shading realistic scenes is to use a PBR workflow (Physically Based Rendering). as seen in the chapter about texturing. This rendering method is based on the physical principle of energy conservation. It implies that the amount of light that hits an object can never be greater than the amount of light that is reflected. All a material does, is determine the way that light gets reflected.
Currently, a lot of development is happening around real time raytracing. Instead of projecting the triangles on the 2D plane, the camera casts a ray for every pixel into the 3D space. It then calculates when a ray hits a triangle and at what angle it reflects a light source. This creates a more realistic image since it is based on the way photons interact in the real world. However, since this method is at present underdeveloped for mobile devices, we will not dive deeper into this topic.
Post-processing
After the shading of the model is done, there are a number of effects that can be applied to the 3D image to make it look more realistic and appealing.
No post processing
This is the output before any post possessing effects are applied.
Screen space ambient occlusion
(SSAO)
This effect simulates darker areas in crevices and holes where realistic light rays would be unlikely to hit the surface. Because the rendering is done with rasterization instead of path tracing, this needs to be faked. SSAO gives the model a sense of depth and accentuates smaller details that would otherwise get lost. As the name suggest, SSAO only takes into account the parts of the object that are visible to the camera. If a large piece of geometry that would normally give some occlusion in its environment is just of screen, then it will not have any effect on the scene.
Bloom
This effect simulates a glow of very bright colours. By drawing a halo around the very bright object, the effect gives the illusion of the presence of an atmosphere that captures the light in a cloud around the object.
Depth of field (DOF)
This effect simulates real depth of field by a camera. Every camera has a certain focal length and aperture that determines the amount of blur that occurs for objects that are out of focus. Lower apertures result in a tighter range of focus and thus a more pronounced blurring off out-of-focus objects.
Screen space reflections (SSR)
This effect simulates realistic reflections from other objects in the scene. When rasterizing, reflections are based on the environment, meaning the other objects of the scene are ignored. This environment can be a spherical image or HDRI’s, which gives the objects more to reflect than a single sky colour. When screen space reflections are turned on, objects can reflect other objects that are visible to the camera. Like SSAO, this only affects objects that are visible at that moment.
Colour grading
This effect applies a certain colour filter over the rendered image. This is also called a colour grade, something which is usually used in movies to enhance the look of the image and create a distinct visual style.
Exporting: choosing a file type
When the model is ready to be exported for use on the website, a decision has to be made about what kind of file the model will be exported to. It is essential to use a universal file type that every device can read and display. Depending on what information has to be included, certain file types are more suitable than others.
Below is a table of the most viable file formats, each with their (dis-) advantages.
After comparing these file types, the GL Transmission Form (glTF) file format was chosen. It supports all the necessary features and was specifically created for real time rendering through the integration of many optimizations.
glTF files store textures in a very efficient way. The base colour, normal map and emission textures are separate files, because they require full RGB coverage. All three other grayscale textures are stored in a single RGB texture, where every colour corresponds to another property.
• Red: ambient occlusion • Green: roughness • Blue: metallic
Using this method, only four textures have to be saved instead of six. This decreases the rendering times because the renderer makes a draw call for every texture. Having fewer different textures means fewer draw calls.
There are three different types of glTF formats: .gltf, .gltf(embedded) and .glb. These are all variations on the same principles but come with some differences.
• .gltf: This is the basic form of the 3D model, which comes with separate texture files linked by a .bin file. The .gltf file is written in a JavaScript Object Notation (JSON) format, a coding language that can be easily understood and edited. This feature, in combination with the separate texture files, makes the .gltf file easy to alter after the file is created. It has a significant drawback in that it consists of several different files. That’s why, for this thesis, this format is not used.
• .gltf (embedded): This is similar to the regular .gltf format in that it is written in JSON and can be edited after creation. It has an advantage over the other as it embeds all the textures in the .gltf, meaning only one file is used to display the model. This makes sharing and storing the model much easier.
• .glb: This is also an embedded file format where the textures are stored in the same file. However, this file is written in binary, the most basic computer language. It is therefore less human-readable, so editing is very challenging. On the other hand, because of the binary language, it is much more efficient to store, so file sizes will generally be smaller. The .glb is also read faster by the computer, so it will render faster.
File Format File Extension Mesh Support Textures Animations Lights
Alembic .abc Y Y Y Y
Autodesk FBX .fbx Y Y Y N
Collada .dea Y Y Y Y
glTF .gltf .glb Y Y Y Y
Obj .obj Y Y with .mtl N N
Stl .stl Y N N N
Universal scene
descrition .usd Y Y Y Y
The choice of extension is up to the creator. The .glb format is used for all models on the website because of its efficiency. The embedded .gltf may also be used if the creator may need to alter the file after its creation.
Blender has a built-in exporter for glTF formats, which works with the standard texture set up and automatically converts all the textures to the corresponding glTF set up.
Optimizations
There are a number of small optimizations that can be applied to the 3D model in order to lower rendering times and to provide a faster and smoother experience. Especially on older devices where the computing power is not necessarily as high, every little thing can improve the performance.
3D model
Modellers should always try to use as few polygons as possible. There is no need to separate flat planes for small details like bricks or wooden planks. These details can be added with a normal map. The only part where the number of polygons is important is in the silhouette of the model. Because of the polygonal structure, curves will always be a collection of small flat planes. More polygons will result in a smoother curve. Modellers should therefore find a balance between the smoothness of the curve and the number of polygons. This is much more noticeable for large surfaces so smaller curves will need less polygons.
To optimize the topology, the model can be retopologized, by overlaying the existing complex model with new, much less, polygons. As a general rule of thumb, it can be stated that polygons should only be used to define the silhouette of the model. All surface details are then added with a normal map which simulates these small displacements by bending the normal vectors on that part of the polygon. In the example below, the windows are not modelled. They are created with a normal map to simulate the depth difference between the window and the wall.
The main focus should be the visible parts of the model. Adding small details like screws will not only be unnoticeable, they will also slow down the performance of the model.
The original generated UV map The optimized UV map where the ground cylinder is much smaller, resulting in more
space for the walls.
Textures
The UV map can increase efficiency considerably. To maximize performance as few different textures as possible should be used and these textures should have the lowest acceptable resolution. This is because computer graphics calculate the final image for each texture individually, which it later combines into one. Instead of using a different texture for the different parts of the model, modellers should combine these textures onto a single texture atlas, which is a combination of all different textures in one image. The UV map should then link all the polygons to their corresponding texture on the atlas. This can be easily done by combining all the different parts of the model on one UV map and then bake all the different textures on the atlas. Duplicate items and surfaces with the same material can use the same texture space, resulting in overlapping UV’s, which can be a problem for properties such as ambient occlusion where duplicate objects don’t necessarily have the same amount of light hitting them. However, screen space ambient occlusion (SSAO) solves this problem: instead of using a texture, the shader calculates the ambient occlusion based on what is visible on the screen.
Generally, all polygons of the model should be scaled according to their 3D counterpart on the UV map, this will result in a consistent resolution throughout the model. However, there are always parts of the model that require more detail than others. Instead of increasing the resolution of the texture as a whole. Certain polygons can be made bigger on the UV map, so they take up a larger area on the map. This can be done by altering the scale of these objects in the scene. The polygons first have to be scaled up or down by a factor in which the UV size should scale. Then the scale can be normalized in the scene, meaning it has a scale factor of one, while still being smaller or bigger than it originally was. Lastly, rescale the polygons back to their original scale without normalizing the scale afterwards. This will result in that specific polygon to have a higher workable resolution than the other parts. For polygons that are hidden or less relevant, this lowering of resolution will not be noticeable.
Texture compression can be applied as much as necessary without compromising the quality. Different image file types are optimized for different kinds of images: Portable Network Graphics (PNG) images are used for textures with large flat colours and Joint Photographic Expert Group (JPEG) for images with more realistic textures.
