Content uploaded by Lauri Lyytikäinen
Author content
All content in this area was uploaded by Lauri Lyytikäinen on Oct 07, 2024
Content may be subject to copyright.
Aalto University
School of Science
Bachelor’s Programme in Science and Technology
Survey of the current state of 3D production
pipelines for the web
Bachelor’s Thesis
6 September 2024
Lauri Lyytik¨
ainen
Aalto-yliopisto KANDIDAATINTY ¨
ON
Perustieteiden korkeakoulu TIIVISTELM ¨
A
Teknistieteellinen kandidaattiohjelma
Tekij¨
a: Lauri Lyytik¨
ainen
Ty¨
on nimi: Katsaus 3D-tuotannon nykytilaan web-kehityksess¨
a
P¨
aiv¨
ays: 6. syyskuuta 2024
Sivum¨
a¨
ar¨
a: 29
P¨
a¨
aaine: Computer Science
Koodi: SCI3027
Vastuuopettaja: Professori Lauri Savioja
Ty¨
on ohjaaja(t): Tohtorikoulutettava Juho Veps¨
al¨
ainen (Tietotekniikan laitos)
3D-sis¨
alt¨
o web-sovelluksissa on kasvavassa suosiossa, ja sille l¨
oydet¨
a¨
an jatkuvasti uusia
k¨
aytt¨
otarkoituksia. Se on kuitenkin suhteellisen uutta, ja sit¨
a v¨
altell¨
a¨
an sen monimut-
kaisuuden, teknisten rajoitteiden sek¨
a puutteellisten k¨
ayt¨
ant¨
ojen vuoksi. T¨
ass¨
a kirjal-
lisuustutkimuksessa tarkastellaan, mit¨
a 3D-sis¨
all¨
on tuottaminen ja integroiminen mo-
derneihin web-sovelluksiin pit¨
a¨
a sis¨
all¨
a¨
an.
Tutkimus sis¨
alt¨
a¨
a yleiskatsauksen 3D-sis¨
all¨
ontuottamisen laajasta prosessikaaresta
web-pohjaisiin sovelluksiin. Tutkimus tehtiin, koska aiheesta kokonaisuutena ei l¨
oy-
tynyt paljon tietoa tai saatavilla oleva tieto on vuosien takaista. L¨
ahtein¨
a k¨
aytettiin
tieteellisi¨
a resursseja sek¨
a yleistajuisempia 3D-sis¨
alt¨
o¨
a k¨
asittelevi¨
a l¨
ahteit¨
a.
Ty¨
oss¨
a selvitet¨
a¨
an kirjallisuustutkimuksen avulla, mit¨
a asioita t¨
aytyy ottaa huomioon
3D-sis¨
alt¨
o¨
a tuottaessa web-sovelluksiin ja millaisia ty¨
okaluja siihen voidaan k¨
aytt¨
a¨
a.
Ty¨
oss¨
a m¨
a¨
ariteltiin, miten 3D-dataa luodaan, muokataan ja tallennetaan erilaisilla ty¨
o-
kaluilla ja miten sit¨
a hy¨
odynnet¨
a¨
an erilaisissa k¨
aytt¨
otarkoituksissa, kuten mainonnas-
sa, opetuksessa tai viihteess¨
a web-pohjaisissa alustoissa. My¨
os se, millaisia ty¨
okaluja ja
ohjelmointikirjastoja kannattaa k¨
aytt¨
a¨
a, riippuu pitk¨
alti sis¨
all¨
on k¨
aytt¨
otarkoituksesta,
projektin budjetista ja kohdeyleis¨
ost¨
a. Ty¨
oss¨
a selvitettiin, millaisilla kriteereill¨
a, ke-
hitt¨
aj¨
at voivat valita k¨
aytt¨
am¨
ans¨
a grafiikkakirjaston vai onko kannattavampaa luoda
r¨
a¨
at¨
al¨
oity ratkaisu.
Tutkimus muodosti yleismallisen ty¨
oprosessin 3D-sis¨
all¨
on luomiselle web-pohjaisiin
alustoihin. Kirjastot ja ohjelmointikielet ovat kehittyneet paljon viimeisten vuosikym-
menien aikana, ja pysyv¨
at k¨
ayt¨
ann¨
ot alalla ovat vasta muodostumassa. Verkkostandar-
dien t¨
aytyy p¨
aivitty¨
a, jotta 3D-sis¨
alt¨
o yleistyy ja sen kehitt¨
aminen helpottuu.
Avainsanat: Web, 3D production, 3D workflow, Three.js, WebGL
Kieli: Englanti
2
Aalto University ABSTRACT OF
School of Science BACHELOR’S THESIS
Bachelor’s Programme in Science and Technology
Author: Lauri Lyytik¨
ainen
Title of thesis: Survey of the current state of 3D production pipelines for the web
Date: 6 September 2024
Pages: 29
Major: Computer Science
Code: SCI3027
Supervisor: Professor Lauri Savioja
Instructor: Doctoral Researcher Juho Veps¨
al¨
ainen (Department of Computer
Science)
This paper aims to find out what is the current state of 3D production for the web. The
research focuses on examining the process of creating 3D content, optimising it, and
integrating it into a final product. It contains an overview of the long and complicated
process of creating content for web-based platforms. The review was conducted as the
current research on the topic is limited or the available information is several years
old. The sources used were scientific articles and books about the topic, programming
library documentation and programming articles.
The research presents the different steps and tools available for creating good quality
and functional 3D content for web applications. The paper outlines how 3D data is
created, edited, and exported and the different applications for it. How the different
libraries, frameworks and tools can be used heavily depends on the final content’s
specific purpose and use case, budget and target audience. The survey also explores the
different criteria that the developers can use to select their libraries and pipelines, and
when it might be better to create a custom implementation. The different applications
of 3D content and their unique differences are also investigated.
My main findings were that 3D content in web applications is growing in popularity,
and new uses for it are discovered continuously. While 3D technology has been around
for multiple decades, it still is relatively new on the web platform. It is being avoided
because of a complicated development process, technical limitations and the lack of
standardisation. Different libraries and programming languages have greatly evolved
in recent years and the standards in the industry are still forming.
Keywords: Web, 3D production, 3D workflow, Three.js, WebGL
Language: English
3
Contents
1 Introduction 6
2 Typical 3D pipeline 7
2.1 3D modeling and acquiring data . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 3Dsoftware .................................. 8
2.3 Animatingandrigging ............................ 9
2.4 Texturing and rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.5 Optimisingmodels .............................. 10
2.5.1 Levelsofdetail ............................ 10
2.5.2 Backfaceculling............................ 10
2.5.3 Using texture maps . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.5.4 Modeldecimation........................... 11
2.6 Fileformats .................................. 11
2.7 Conclusion................................... 13
3 3D content on the web 14
3.1 Overview and history of 3D content on the web . . . . . . . . . . . . . . 14
3.2 The challenges of 3D content . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3 Applications of 3D content on the web . . . . . . . . . . . . . . . . . . . 15
3.4 Conclusion................................... 16
4 Integrating 3D content into the web 17
4.1 WebGL .................................... 17
4.2 Libraries and frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.3 CSSAnimations................................ 19
4.4 Othersolutions ................................ 19
4.5 Conclusion................................... 20
5 Web specific 3D pipeline 21
5.1 Planning.................................... 21
5.2 Contentcreation ............................... 21
4
5.3 Implementation................................ 22
5.4 Maintenance.................................. 22
5.5 Conclusion................................... 23
6 Discussion 24
6.1 Opportunities of 3D on the web . . . . . . . . . . . . . . . . . . . . . . . 24
6.2 Challenges with 3D content on the web . . . . . . . . . . . . . . . . . . . 24
6.3 WebXR .................................... 25
6.4 The limitations of the survey . . . . . . . . . . . . . . . . . . . . . . . . . 25
7 Conclusion 26
5
1 Introduction
The demand for 3D production on web platforms is increasing across a wide range of
industries like gaming, retail and virtual reality [37]. As web technologies continue
to evolve, more and more companies are leveraging the capabilities of 3D content to
create interactive experiences. Unlike traditional 3D production workflows, which are
typically aimed at high-performance desktop environments, web-based 3D production
presents unique challenges and opportunities. Web 3D production requires a technical
understanding of 3D modelling, texturing, and animation, as well as different performance
constraints, browser compatibility, and resource management. Creating visually appealing,
functional, and optimised content involves using the best optimisation techniques,
compression methods, and tools available [32].
Despite the growing popularity of 3D content on the web, academic work on web-based
3D production workflows remains limited. The available research tends to focus on
different 3D production techniques like modelling, optimising or rendering [32; 26; 31].
However, there is a noticeable gap in the studies that examine the process of developing
3D content for web deployment. The gap is significant because web-based 3D production
involves a unique set of considerations like cross-platform support, user input and resource
efficiency [16]. With multiple different libraries and industries, many tailored workflows
are emerging. It is important to have a good understanding of the resources and how to
integrate them into a complete process as the number of different libraries, frameworks,
and tools keeps growing.
This literature review aims to fill the current gap by providing an overview of the entire
process and answering to the question ”What does the workflow for 3D production for
the web look like?”.
The review is structured into several sections. Section 2 discusses what the typical process
of creating 3D content is, what the steps are, and the techniques used, Section 3 focuses
on the 3D content on the web, and Section 4 and Section 5 lay out the web-specific things
of the process. While this review focuses on the general processes involved in creating
three-dimensional content for the web, it also recognises that there is some variability
across teams, companies and industries.
2 Typical 3D pipeline
A 3D pipeline is the process and the steps needed in creating 3D content. In this section,
I define the typical steps and their purposes in the process of creating production-ready
3D models for the web. The 3D pipeline is a general concept and is not specific to only
web development. The same generalized steps can also be taken in other industries.
2.1 3D modeling and acquiring data
The first step of 3D modelling is building the actual geometric shapes that make up the
model. A 3D model is a collection of information about the geometry, materials, and
sometimes other properties of the 3D representation of a certain object. The models can
be defined in two main ways, mathematically using formulas or discretely using vertices.
The geometry can be created directly by hand (discrete modelling), or by using external
data. M¨
unster et al. [32] gives us a detailed description of normal 3D workflow and
modelling that is also a great resource for web development.
External or raw data can be, for example, elevation data, a 3D graph, or a point cloud,
which is usually a 3D scan. If the context requires using raw data, it is usually processed
and represented as curves or vertices instead of point clouds. Mathematical formulas
define curves and surfaces mathematically, and they ”describe the form accurately and
continuously” [32; 20]. Discrete methods define sets of points, edges, and faces, and
how they are connected in space. There also exists procedural and parametric modelling
methods that allow the automatic creation of 3D models from initial parameters. These
methods are used in creating highly complex and dynamic results with a relatively low
amount of work [32]. This workflow is visualized in Figure 1.
The main method of modelling in the industry is direct mesh editing [21] and usually
different techniques are combined known as hybrid modelling [32]. While most of the
models on the web are discrete, libraries like Three.js support rendering NURBS curves
[20] and surfaces using built-in functions [13]. It is not important how the 3D data is
created as long as it is in a commonly supported format and is sufficient for the given
use case. These complicated and numerous editing techniques are usually done with a
dedicated piece of software that is designed to handle three-dimensional data. These
programs are called 3D software, and they excel at modelling, animating, texturing and
rendering 3D models.
7
Starting of modeling process
Acquire
model data
Direct modeling Raw data
Mesh NURBS
Complete model ready for
texturing and animating
Other modeling
techniques
References & imagination External source
Hybrid modeling
Figure 1: How typical 3D modeling process might look like in terms of creating the
geometry.
2.2 3D software
There are many popular 3D modelling software, both free and paid1. The software choices
are not too important, as almost all tools and formats are compatible and can be used for
web content creation. Any technology and software can be used, as long as the workflow
is optimal. The software used should be able to create, process and optimize the 3D
data, whether it is artist-created or externally acquired raw data. Usually 3D modelling
software also has built-in support for texturing and or rendering. If not, one may prefer
to use a different program for this task.
Some web graphics libraries include built-in editors in which the user can edit the scene
right in the browser or in a completely separate software [14; 2]. The built-in editors allow
for managing the objects, materials, lights, and cameras, and even allow implementing
functionality to some extent. The editors combine many external programs into one.
While the included tools might not have all of the features that a highly specified editor
might have, they can accelerate the development and make it more approachable for
developers getting into 3D production. Software choices are made depending on the
personal preferences of people or by specific requirements in the project.
1For example Blender, 3ds Max, Rhino, and Maya
8
2.3 Animating and rigging
If animations are needed, the model might need to be rigged. Petty [36] defines rigging
as creating a skeleton inside the model that defines in what ways different parts of the
model can move in relation to each other. Once all of the required definitions are done
the animations themselves can be created. Animating consists of defining keyframes of
different transformational properties in relation to time in a timeline. Utilizing skeletons
in combination with keyframes allows the model to be moved like a puppet. These
keyframes include things like position, rotation and scale [36]. The animation can then
be included in the same file the model is saved, or it can be exported separately into
another file.
2.4 Texturing and rendering
After creating the model, it might need to be UV2unwrapped. If the model is to be
textured and its materials are defined using images, then UV mapping is required. In
this process, the artist defines how the textures should be positioned and flow around
the different edges of the model. UV unwrapping can be thought of as if the model were
made of paper, how would the paper need to be folded to form the geometry. UV maps
tell, where each point of the model maps to a 2D plane, in this case, an image.
The point of texturing is to assign different materials for different parts of the model.
Materials contain information about the different properties of the surface. The properties
include the colour or image and in physically based rendering (PBR) physical properties
like subsurface scattering, roughness and how metallic the surface is [19]. The PBR
model by Burley and Walt Disney Animation Studios [19] is widely used in many 3D
software including the popular open-source program Blender [4]. Materials can be created
procedurally, from images or completed materials included in libraries or online can be
used.
The model can also be shaded with procedural materials. Procedural materials define
the colour and the properties of each point of the object using some kind of algorithm
[23]. Procedural materials can also use image textures as a part of their algorithms. A
few simple procedural materials are for example a solid colour, a checkerboard pattern or
a pattern based on noise. Procedural materials can be used to create complex and easily
editable materials quickly.
By using procedural textures and materials or by using images, the model receives its
visual look. There can be many kinds of textures that define different physical aspects of
the material. Texture mapping is the process of taking multiple images each containing
2UV is one of many texture spaces, and while there are others, UV is the industry standard
9
different properties of the wanted material, and then combining them to the surface of
the model [24]. By using texture maps physically accurate materials can be created easily
and quickly.
2.5 Optimising models
When developing any 3D content, it is important to be able to balance quality and
performance. The article by Hoppe et al. [26] defines and proposes a solution to optimising
a collection of data points in the form of a 3D model. Optimising a 3D model can be
thought of as finding a smaller than the initial amount of points that fit the original data
well. The points are then used to create a new, more optimised mesh that is smaller in
size but still retains the same overall topology [26]. There are many ways to optimise 3D
models, both automated and manual.
2.5.1 Levels of detail
If the model is known to be viewed from varying distances, one might consider adding
Levels of Detail (LOD) [25]. LODs are different versions of the same model, each with
simpler geometry. When viewing the model from far away, a lower resolution mesh can
be used as the viewing distance limits the perceived detail. When moving closer, more
detailed models can be used instead. LODs are especially useful in cases where there
are many objects in large areas, like in forests, cities, and worlds of video games [25].
LODs are smart to use in these scenarios because the objects further away are not as
visible, partly obscured and require less perceived detail. LODs can be created manually
or automatically [25] in the modelling or rendering process. When for example rendering
a forest, in most cases only the closest trees need to be rendered in full detail to create
an immersive and realistic experience.
2.5.2 Backface culling
If it is known that certain angles of the model or scene are never shown, the faces forming
those areas can be removed. This can usually be applied to the back and undersides of
models. Usually, something like this is performed by the renderer itself. The rendering
engine checks for each face in a mesh if they are facing the camera or not. If the face points
away from the observed it is not visible and can be ignored in a technique called backface
culling [42]. However, while this improves performance, checking the face orientations
still takes up processing time. If it is known for certain that some parts of the model will
never be shown, can some more performance be gained by removing the faces completely.
By removing the useless geometry the renderer does not have to check the removed faces.
10
2.5.3 Using texture maps
Optimising does not stop at the geometry. There are many ways to improve performance
and save space and time in other parts of the model. Some lighting information can be
pre-calculated in the modelling phase and saved into a texture. The same can also be
done for complicated, big, and procedural textures. By pre-saving them certain parts of
the lighting and materials do not need to be calculated in production as the pre-computed
textures can be used. This is called texture baking or render mapping.
One can reduce the mesh and texture quality to a point where the lines between having
good-quality models and good performance metrics meet. Furthermore one can use
preprocessing and texture baking to further improve performance.
2.5.4 Model decimation
The research conducted by Bhawar et al. [18] outlines a great workflow for optimizing
existing 3D models for low-performance hardware. The paper focuses on optimising high-
poly models for Low Cost Access Devices and turning them into low-poly versions [18].
This is called mesh optimisation or decimation. The higher polycount models are reduced
to lower polycount versions ensuring faster load times and a smoother experience for the
end user. Li et al. [31] states that in JavaScript libraries like Three.js and Babylon.js, the
entire model file is loaded at the time. So, the smaller the files and scenes, the better and
more responsible the user experience will be. The paper describes how this is used for
low-performance devices, but many of the same concepts apply to web content as ideally
all resources and models are minimal and heavily optimised [31].
2.6 File formats
The 3D models and scenes must be able to be saved into a file. There are many different
file formats for saving 3D data. Kelly and Chakravorty [29] defines what kind of data is
stored in 3D files. The structure can be thought of as in Figure 2. There are proprietary
and neutral formats. Some software or companies use proprietary formats that are
specifically designed to be used by a specific software. Neutral formats are cross-platform,
and they work with many different software.
The most important piece of information is the shape geometry. This contains the shapes
that the model or models are made out of. They can be stored in three main ways, as a
mesh (approximate mesh encoding), as mathematical definitions (precise mesh encoding)
or defined as a series of boolean operations between shapes (constructive solid geometry)
[29].
11
3D file
Shape Geometry Textures Scene Animation
Approximate
Mesh
Encoding
Precise Mesh
Encoding
Constructive
Solid
Geometry
UV Maps
Face
attributes
Normals
Object
transforms
Origins
Lights
Cameras
Bones
Joints
Keyframes
Figure 2: What a 3D file consists of [29]
The second thing 3D files have are texture maps. As discussed in Subsection 2.4, texture
maps map each point on the surface of the shape to a point in a two-dimensional texture.
The UV maps and in certain cases the materials themselves can be stored inside the
3D file. Usually, however, the textures of the materials are stored in separate files.
Information about face attributes like normals, material index or colour is also stored
here [29]. Normals tell which direction the surface normal at each point in the model
is pointing at, which is an important part of the shading process for the models. The
material index simply tells which material should be used in each part of the model. If
the model contains animations they can also be stored in the same file however, it is also
common to save the animations as separate files.
Some file formats allow you to save the information of the whole 3D scene. This includes
multiple objects, their transforms, cameras, lights and materials. Saving a whole scene is
usually used for source control and in certain fields. Saving multiple things into the same
file is vital in fields like game development [29].
While all file formats aim to fulfil the same basic function as a container for 3D
information, not all are suitable for web development. Web 3D libraries only support
certain kinds of files out of the box. According to the study by Nam et al. [33] some
popular ones are OBJ, FBX, STL and glTF files. 3D file formats need to be converted
into glTF format (Collada-file) for graphics APIs to properly process them through the
12
rendering pipeline [10]. Exporting the scenes and models already in the format used by the
underlying technology removes extra steps. Collada-files have the best performance across
different browsers and scene sizes making them the ideal format for web 3D applications
[33].
2.7 Conclusion
3D modelling is the process of creating digital assets to represent an object or objects in
a stylised and easily manageable format. The complete models might contain textures,
animations, LODs, materials, or other useful information that can be used later.
There are many ways to create 3D data and there are no strict limits to the pipeline. The
typical pipeline consists of model creation, rigging, animating, texturing and optimizing,
as seen in Figure 3. The workflow is tailored for the specific project or use case and does
not always follow this format. It is also possible that the different processes inside this
workflow change depending on the software and users.
The process of creating complete 3D models with all their aspects is a complicated task.
The concepts are simple, but combining them into one functional result can be difficult.
3D content in web development might not see as many steps, but the same concepts,
problems and approaches still exist regardless of the context.
Starting of
modeling
process
Creating and
editing 3D data
and models
Rigging
and adding
animation
Optimizing
and baking
information
Creating
materials and
texturing
Complete model
Editing
Figure 3: What the modeling process might look like in full.
13
3 3D content on the web
There are many different types of 3D content online. Many services, applications and
entertainment sites rely on various techniques to display three-dimensional data. Such
content has existed for decades, yet it still is not completely standardised. This technology
has its benefits, but it also has problems that need to be solved.
3.1 Overview and history of 3D content on the web
Potenziani et al. [37] found that the early 3D content on the web had many different
approaches. The different approaches existed due to the lack of universally accepted
standards, although a few were available [37]. As the internet grew in popularity,
developers started to explore the possibilities of implementing and standardising 3D
libraries and APIs. There were many attempts at creating standardized web 3D
conventions and libraries, notably Java applets, Java3D, Flash Player, JOGL, Google
03D [37]. After Kronos Group Inc. released the WebGL standard in 2009, it has been
the standard for displaying three-dimensional content on the web [41]. The WebGL API
alone is hard to work with, so most projects use 3rd party libraries that utilise WebGL.
Websites were not originally designed to contain 3D content. The solution to integrate
such elements was done with the Canvas element. Canvas is an HTML element, that
can be used to show graphics inside the element’s bounds on the screen [22]. This is the
industry standard way to render 3D content inside a web context and most libraries rely
on it. HTML is only used to structure the website and the region of pixels wanted to be
affected by the library’s API calls. The actual draw calls are invoked with JavaScript.
[22].
There have been plans to introduce a model element that would allow displaying models
directly with HTML [9]. Models could be natively rendered, animated, and interacted
with HTML, CSS and simple JavaScript. Having a dedicated web element for 3D would
eliminate the need for third-party libraries for simple cases. Accepting the model element
into the web standard could be a great step towards standardisation.
3.2 The challenges of 3D content
Using 3D content inside web browsers can introduce many challenges with UI design,
responsiveness, performance and project workload.
The website might be used with a multitude of different devices with varying hardware.
There are both powerful desktop machines and old legacy mobile devices that may need to
be able to run the same website. The developer must also consider the website load times if
14
big or detailed models are used [31]. All of this adds to the already complicated process of
planning and designing a website. Different-sized screens may also need different layouts
of the website so the experience stays responsive.
By adding 3D content the amount of work outside the website itself grows. 3D models
also take time to make and might require additional work with texturing, animating, and
refining the product. The final result also needs to be optimised for its specific purpose.
Maintaining, updating and adding more content might now require going through the
whole 3D workflow again. While this might not be true in all cases, for example when
using only small elements, it needs to be considered when more major design choices are
made.
The design choices are important in the front end of the application, but even more
important is the back end. 3D content can easily take up a lot of data in textures,
models and scenes. Handling extra data also needs to move through the server that is
hosting the service or in certain cases saved. This can create problems when thinking
about the scalability of the application and having a considerate amount of users.
Websites also require internet access which might not be always available. If the website
is a tool, it might not be able to be used when needed if it depends on an external server
or connection. However, it is possible to create downloadable web apps which do not
require an internet connection. This does require having the models on the client side
and removes any online features when using it without an internet connection.
3.3 Applications of 3D content on the web
Bringing another dimension into traditionally two-dimensional media unlocks many
possibilities. With 3D, websites and web applications are not limited to showing just
images, text and videos. There are increasing amounts of websites utilising 3D content
and new ways to benefit from it are made all the time. The applications of 3D content
can be categorised into a few main categories as seen in Table 1.
Having three-dimensional elements inside a website can benefit, learning, sales, medical
operations and industrial processes. Certain things relating to biology, maths or physical
objects are by nature easier to grasp when viewed in their true three-dimensional form.
Many pieces of software allow their users to do such things, but bringing the features to
the web opens a few key possibilities. Web applications are generally highly accessible,
they are also easily scalable. Updating content inside them can be done instantly and
sharing is effortless. With many cloud and web-based pieces of software, cloud saving is
15
Application Description
E-commerce Ads, product visualisations and customisation
Training and education Understanding of concepts of 3D space, learning
from 3D models and views, 3-dimensional data
Gaming and entertainment 3D games, interactive stories, AV and AR
Virtual tours Real estate and museum tours, VR and AR
Industrial, medical and
engineering applications
Visualising and understading different structures,
designing parts and buildings, chemical models
Table 1: Different applications of web based 3D content
also integrated into the app. This means that every change and every file is accessible
from all devices.
A few examples of where 3D content is used inside a web context are Google Earth and
IKEA’s kitchen planner [7; 6]. IKEA’s kitchen planner allows consumers to design and
plan their kitchen in 3D right in their browser. All of the elements can then be purchased
from IKEA. The tool makes the whole process approachable and easy for anyone to do.
The user also gets accurate and tailored renders of the final product, which could be hard
and expensive to acquire without an implementation like this.
On the Google Earth website, the user can explore satellite data from all around the
earth. The website creates an explorable 3D model of the whole globe and visualises
terrain, buildings and roads in 3D. Google Earth is also a great example of streaming
the data to the user. The whole satellite image and terrain data dataset requires a lot of
storage space and sending all of the data over the network would not work.
3.4 Conclusion
Three-dimensional content is still rare in website design. There are many problems and
challenges it brings into the whole website design process. The wide range of different
devices that might need to use the website need to be supported and the performance
also needs to be desirable. The whole implementation of the back end might need to be
done considering the implications of the 3D content. 3D content has massive potential
and has many use cases inside a web-based application. 3D content has been used for
decades, but it still lacks certain universal standards. HTML, which the whole web uses
as building blocks, still has no dedicated element for 3D content. However, there have
been plans to add a model element to the web standard. The Canvas element exists
but is originally used for 2D graphics. Developers need to rely on external libraries to
implement features.
16
4 Integrating 3D content into the web
When the 3D models are done and all of the planning is complete, it is time to put
the content on the website. This requires a website with a HyperText Markup Language
(HTML) Canvas element. It is also possible to use different methods to render a 3D model
on a website, but in this paper, I will focus on the most popular methods and libraries,
which all rely on the Canvas element. The Canvas will be the graphics context where the
scene and objects are rendered. This section discusses the technologies available to show
the created 3D content on the web and their differences.
4.1 WebGL
WebGL is a JavaScript library developed by the nonprofit organisation Kronos Group
Inc. [41] that defines web context-specific calls to OpenGL ES 2.0 graphics library [40].
WebGL allows developers to use the processing power of the graphics processing unit to
draw graphics inside a traditional HTML canvas element [41]. The API makes it possible
to create high-performance graphics and use shaders to modify the geometry or apply
graphical effects to the pixels.
WebGL is a low-level application programming interface [16], so the developer must set
up and control everything from objects and lights to the camera. Creating even simple
scenes and functionalities takes a lot of code and effort. The developer must manually
handle vertex buffers, transformation and rotation matrices, depth checks, shaders and
more. Coding a simple rotating cube can take hundreds of lines of code and the code is
hard to read and maintain [11]. While this can ensure maximum performance and bring
out more creative possibilities, the developer might want to use a higher-level API to
accelerate the development and design process. Most graphical libraries like Three.js use
WebGL for the actual implementation but provide easier-to-use functions and processes,
reducing development time and maintenance [13].
4.2 Libraries and frameworks
For many modern developers, the use of a higher-level API might be more beneficial
for ease of use and faster development. The idea of a higher-level graphics library is to
provide graphical functions and workflows that are easy to use, learn and understand
while maintaining the potential of the underlying API. While creating a spinning cube
with bare WebGL might take hundreds of lines of code, using a library like Three.js it
can be done quickly and with easy-to-read code, as seen in Listing 1.
17
1impor t * as T H R E E fr o m "three";
2
3const scene = new T HR E E . S c en e ( ) ;
4const camer a = new T HR E E . Pe rs p ec t iv e Ca m er a (
575 ,
6w in do w . i nn e rW i dt h / w in d ow . i n ne rH e ig h t ,
70. 1 ,
81000
9);
10
11 const renderer = new T HR E E . W e b GL R e n de r e r ( ) ;
12 r en d er e r . se t Si ze ( w i nd o w . in ne r Wi dt h , w in do w . i n ne r He i gh t ) ;
13 r en de r er . s e tA n im at i on L oo p ( a ni ma t e );
14 d oc u me n t . bo d y . ap p e nd C hi l d ( r en d er e r . d om E le m en t ) ;
15
16 const geometry = new T HR E E . B o x Ge o m et r y ( 1 , 1 , 1 ) ;
17 const material = new T HR E E . M e s hB a s i cM a t e r ia l ( { c o lo r : 0 x0 0 f f0 0 }) ;
18 const cube = new T HR E E . Me sh ( g e om et r y , m at e ri a l );
19 s ce n e . ad d ( c ub e ) ;
20
21 c am er a . p os i ti o n .z = 5;
22
23 function a ni ma te ( ) {
24 c ub e . r ot a ti o n .x += 0 .0 1 ;
25 c ub e . r ot a ti o n .y += 0 .0 1 ;
26
27 r en d er e r . re nd e r ( sc en e , ca m er a ) ;
28 }
Listing 1: Creating a scene with Three.js is fast and the code is easy to read [13]
In a web context, the libraries use JavaScript so they can be executed inside the browser
or web server. There are many libraries to choose from and generally, they offer the
same base functionality, providing an easy way to render 3D content inside of a web
application. The differences are in the way each library provides the capabilities and
additional features. Each library is also made for different core purposes. It depends on
the library if it supports sound, physics, WebXR or if it is cloud-independent. It also
varies what data and model formats they support. While most formats can be converted
between file types, it might also interest the developer to know what is natively supported
by the library. Some of the options and some of their features can be seen on the Table 2.
A library should be chosen to fit the specific task. Each library is made for a specific
purpose and has its features and workflows crafted for that.
18
Library Integrated
audio
Integrated
physics Language Uses
Three.js [13] Yes No JavaScript Used to create animated 3D
graphics
Babylon.js [3] Yes Yes
JavaScript
&
TypeScript
Used to build 3D scenes and
games
A-Frame [1] Yes No JavaScript
& HTML
Used for building 3D and
XR experiences
d3-3d [34] No No JavaScript Used for visualising data in
3D space
CesiumJS [5] No No JavaScript Used for geospatial
visualisation and rendering
PlayCanvas [12] Yes Yes JavaScript Web based game and
graphics engine
Table 2: Examples of web 3D libraries and their features
4.3 CSS Animations
Cascading Style Sheets (CSS) is a styling language used in web development [28]. CSS
allows the separation of styling while structure and functionality are being handled by
HTML and JavaScript respectively. CSS is mostly used for general styling and transitions
in 2D elements, but it allows for some simple transforms in 3D space [28]. CSS is
still mainly intended for 2D elements, but in certain cases, it can be used to create
convincing 3D effects without using any external libraries. The modern CSS styling
language allows for many different transformations and animations that can be used to
add effects and movement to any HTML element [17]. CSS offers simple functions like,
rotations, translations (position displacements) and scales [15]. These different properties
can be key-framed and then animated or controlled using JavaScript. The 3D transforms
are supported by most browsers and are easy to implement and maintain making an
appealing option. CSS transitions have better performance in most cases [28], and are
widely supported and easier to maintain than any custom solution. This is why simpler
CSS effects and solutions are usually preferred whenever possible over 3D.
4.4 Other solutions
Before implementing a feature with actual 3D, it is smart to consider alternative ways to
achieve the desired effect. However, having 3D elements brings many difficulties to the
19
development and maintenance processes. Sometimes allowing the user to explore data or
visuals in a free-form format and from different directions is optimal. It might be possible
to achieve a similar effect using visual elements like photos and video. Or maybe the data
that one might want to visualise could be displayed in a way where it is readable in two
dimensions.
3D content can be integrated into a website by using static images, videos, image
sequences, vector graphics and actual 3D files [27]. Images and videos use pre-rendered
footage. While they provide high quality and fast load times, they are not responsive nor
contain depth. Image sequences consist of multiple prerendered images, like an animation.
Image sequences are fast, compatible, convincing and more responsive than videos, but at
the same time lack the responsiveness and customisation real 3D gives. Vector graphics
allow the creation of easy-to-animate and interactive diagrams and interfaces which can
fake 3D effects. Vector graphics are still two-dimensional under the surface.
If the product has many variables such as custom text, images, colours, or dimensions, it
would be troublesome to have a picture of every possible combination. However, doing
this digitally would be easily possible with a 3D model. If the effect desired is a transition,
transformation or other animation, it could be done using animation libraries without the
use of models. Exploring other alternatives and solutions before implementing something
with 3D libraries or frameworks is important because there might be a more efficient
solution.
4.5 Conclusion
Integration into the application is the process of implementing the 3D features into the
code and the project itself. There are many libraries to choose from, and they offer many
different feature sets. There is one major graphics API for the web, WebGL, on which
almost all the libraries are built. WebGL defines a low-level API which requires a lot
of work to achieve even small results but it allows for great freedom on how things are
implemented. Higher-level libraries exist to create an abstraction layer and to handle
essential things allowing the user to write code more easily. The resulting programs are
easier to maintain and develop.
The integration step is the most vital in the whole process of creating 3D web content.
Even if the models are good quality and optimised, a bad implementation on the website’s
side can ruin the whole project. And vice versa, bad quality models can lead to good
results if the implementation is good. The solution that the developer chooses depends
on many factors, for example, what industry the product is designed for, how many users
it will have, and what kind of devices it will be used on.
20
5 Web specific 3D pipeline
The pipeline for 3D content for the web follows a general structure of the 3D modelling
pipeline, as described earlier in Figure 1, but also includes the web designing workflow.
The creation of 3D content for a web project requires a lot of planning. When designing
the project, it is important to decide how the models are presented, how detailed they
should be, and what they will be used for.
In web design small assets are preferred as they are easy to send over the network. This
is also true for models of 3D web applications and they are usually sent as whole models.
However, if the models are large enough it is more efficient to stream the data [30]. If
the site needs to wait and download lots of data, it hinders the user experience. It is also
possible to render the needed footage remotely and then stream it to the end user [38].
A few examples of this would be terrains, high poly models or big environments. If the
models are small enough to be loaded fully, they can be used directly. After creating the
3D resources, they need to be integrated into the project. The models might also need
to be maintained and or edited after the initial release of the website.
5.1 Planning
The purpose of the 3D content should be defined at the start of the project. Answers to
questions like why this approach is chosen over others, how the content is presented on
the website and how will the users interact with it should be known before starting. The
target audience and devices should also be known as the content and interaction models
are highly dependent on them. The web app or website should be able to run in all of
the planned devices and the presentation should be appropriate for the target audience.
The tech stack should be chosen based on the purpose, features and the target audience.
The 3D framework is an important part of the process, as all of the other decisions around
the implementation are tied to it.
5.2 Content creation
Content creation refers to all of the different steps of creating three-dimensional data
to display on the finished site. This includes modelling, texturing and optimising. The
whole process should be done with optimisation in mind. Keeping only necessary details
and using all the available techniques to simulate detail helps to keep the file sizes and
performance hits small. Simulating detail can be done with different texture maps like
normal maps, bump maps and roughness maps [19]. These textures do not add more
geometry but the end result is more detailed and contains more information. Lighting
21
and shadow information can also be baked to reduce lighting calculations. All of the
textures and models used should be exported in a compressed and web-friendly format.
For textures, compressed formats like JPEG, PNG and WebP are good and for the 3D
models, glTF/GLB files are preferred [33]. GlTF models are efficient and are highly
compatible with WebGL [33]. If the scene is large, having LODs might be beneficial.
These different versions of the meshes should also be created during this step.
5.3 Implementation
The scene needs to be now implemented in the chosen framework. The different models
need to come together in one or multiple coherent scenes that can be displayed to the
user. All of the different geometries can be combined and texture atlases can be used to
improve performance and minimise drawing calls.
The 3D content should be responsive along with the rest of the website as it is good
practice in web design. The canvas can be scaled with CSS or JavaScript to adapt to
different screen sizes. If the 3D element is not required, smaller screens or low-performance
devices can have fallback content or choose to not include the 3D scene in a case where
WebGL is not supported. The user interface and navigation controls need to be intuitive
and adapt to the device and the display size.
The load times of the website should not be too long and the user experience should be
smooth. In addition, the network impact needs to be considered. This means how much
network data the application uses over the internet. Streaming too much data over the
network is inefficient and puts unnecessary load on the network. The hosting environment
must support the additional resources created by the 3D content. If server-side rendering
is used, the server should be able to handle the additional load caused by the users.
Some fields like game development might have additional ways of implementing the
content. It might not rely on a separate library as some tools like game engines may
be able to export the game for the web. This means that the game engine creates all the
necessary files ready to just put up on the web. The popular game engine Unity allows
developers to export their projects straight to WebGL [39]. This makes cross-platform
development easier, but the performance, scalability and technical possibilities can be
limited.
5.4 Maintenance
The content might need updating or changes after the initial release. Creating an
architecture, in which the content is easily editable is vital for crafting a good web
application. Sometimes even updating the underlying technology might be required.
22
Keeping the libraries and assets updated, supporting new devices and browsers, and
fixing bugs are required to maintain the site after the release. If the website is neglected
it might stop working and hinder the user experience.
Considering these factors, creating a maintenance loop needs to be considered. It might
require going back to the earlier steps of the process. Updating or creating models requires
going back to the modelling and optimising step. If the implementation is good, updating
only the assets should be sufficient and the website should function the same.
5.5 Conclusion
Creating 3D content for the web requires a lot of planning of performance, user experience
and scalability. Different devices, browsers, target audiences and the purpose of the 3D
content itself define what kind of frameworks and technologies make the most sense to
use. The content needs to be optimised for web usage and using the correct file formats
guarantees maximum performance. The website and the 3D scenes should be created
along with the best practices of their respective industries. Combining them is done in
a way that makes the most sense for the specific purpose. In general good hardware
and network performance is desired. Performance, ease of use and responsiveness are
important for a good user experience. The whole process can be visualised as in Figure 4.
Project
planning
and picking
a framework
Creating 3D
scenes, models
and textures
Optimising,
LODs and
texture baking
Implementation
and integrating
scene into
the web
Maintenance Complete website
Maintenance process
Figure 4: What the simplified process for web specific 3D content creation might look
like.
23
6 Discussion
The current state of the 3D web industry is still evolving. The technologies and workflows
developers use change as time goes on and better alternatives are found. There are a lot
of different opportunities and problems in the industry. In this section, I will share
some thoughts on the different opportunities, challenges, future trends and also about
the survey as a whole.
6.1 Opportunities of 3D on the web
3D content has potential as an additional element in websites and web apps. It brings
another dimension into the content that can be consumed and things that can be
explained. Fields like education, medical and industrial fields and e-commerce can hugely
benefit from integrating three-dimensional elements into their websites and apps. Certain
types of learning, both in regular schools and specialised fields revolve around three-
dimensional concepts that are easier to visualise with these technologies. Having things
illustrated in a way that actually represents them and possibly being able to interact
with the models and data, can lead to a better and faster understanding of those things.
Traditionally the software used by medical and engineering fields rely on standalone
applications, but they are slowly moving to the web. This includes the 3D content and
this trend continues as the technology and support for it develops. Similarly increasing
amount of companies are using 3D elements and models to better market and sell their
products. Good examples of this are the Nike by You line and IKEA kitchen planner
[35; 7]. Both allow the consumer to visualise their products and their different variants
by using accurate 3D models.
6.2 Challenges with 3D content on the web
While it is not entirely new, it still feels like it is being actively avoided because of its
complexity, technical limitations and lack of technical standardisation. The web standard
does not yet include any standardised way to display 3D models. However, there have
been plans to add a Model element into the web standard [9]. It would allow adding
inline 3D elements right into the HTML structure of the site.
Delivering any content on the web requires an internet connection. Furthermore, a service
relying on a server might need a constant network connection. This can limit when and
where these web applications can be used. It can limit the users based on their network
limits. With games and web software, the loss of network connection can lead to loss of
data or progress. This problem with the web as a platform is not caused by having 3D
24
content but needs to be considered when designing any web-based software.
Websites can be viewed and visited with a wide range of devices and screens. The
same website may look different on different devices depending on the screen size and
aspect ratio. It also needs to work with different browsers and hardware that does not
guarantee stable performance. It is possible to limit the functionality of the website
to certain hardware configurations but doing so directly affects the user experience
negatively. The performance of a web-based application usually does not compete with
native implementation and there can be other technical or data-related limitations that
differentiate desktop and web applications.
6.3 WebXR
WebXR is an API, like WebGL, allowing easy access to input and output data on tracking
and display devices [8]. With WebXR it is possible to build web-based virtual and
augmented reality solutions that utilise commonly used headsets and controllers. Virtual
and augmented reality content by nature requires the data to be in 3D and implementing
it on the web relies heavily on things discussed in this research. VR and AR are also
fast-growing industries that can greatly help in many fields. Gaming, entertainment,
engineering and medical industries all rely on realistic 3D data that can be made further
immersive with VR and AR technologies. Doing so on the web has great potential for
real-time collaboration, cloud connectivity and portability.
6.4 The limitations of the survey
The research was conducted to find out what the whole process of creating 3D content
for the web looks like. While the general workflow of creating 3D data, optimising it and
finally implementing it is similar, there are large differences between different technology
fields. The results were severely affected by the differences in the fields. Each technology
field utilising such technology has unique purposes, resources and problems that shape
the whole process. For example, game development differs from e-commerce applications,
even though both of them revolve around making interactable and performant 3D content.
Some super-specific uses in industrial and archaeological fields might have completely
different approaches to the more publicly standardised pipeline. The whole field of web-
based 3D implementations might be too vast to cover completely in one look. It would
be interesting to see further research on different implementations that differ from the
proposed pipeline.
25
7 Conclusion
The survey aimed to investigate the current state of 3D production pipelines for the web.
The research used up-to-date papers, books and different programming library resources
as sources. Also, some articles and blogs from relevant topics were used and referenced.
The research presents the different steps and tools available for creating good quality and
functional 3D content for web applications. The different steps are 3D data creation via
modelling or acquiring it externally, editing such data, texturing and exporting it and
finally implementing it in the chosen library. The general workflow of the 3D production
is the same across the fields as seen in Figure 4. The usage of the different libraries,
frameworks and tools depends on the specific field and project-specific variables like
purpose, budget, and target audience. There are many different libraries each made for a
different purpose and with different feature sets as seen in Table 2. The optimising steps
utilise both industry-wide 3D optimisation techniques and web-specific ones like using
the correct file formats and prioritizing file sizes and responsiveness. The different fields
that utilize 3D content also have their workflows that differ from the general skeleton of
the pipeline.
3D technology is not new and has been around for a while. It has had its uses on the web,
but the implementations have been different, problematic or had bad performance. The
lack of widely accepted standards, complicated development process involving expertise
across multiple fields, and technical limitations make 3D technologies uninviting and hard
to develop. The different standards and pipelines are still forming for web 3D production.
There are still many interesting things that can be researched around this topic. Now
that the current processes and pipeline are investigated it might be interesting to look at
what the whole process of creating 3D content could look like in the future. Would there
still be libraries or would be there a dedicated way to implement 3D with web elements?
Different applications of VR and AR using the WebXR API have huge potential and
could offer interesting research topics around different fields. This survey does not cover
the back end and its requirements regarding 3D web applications. One research topic
could be finding out how the back ends of 3D applications differ and how could they be
improved upon.
26
References
[1] Introduction – A-Frame. https://aframe.io/docs/1.6.0/introduction/.
[Accessed 28-07-2024].
[2] Babylon.JS Editor. https://editor.babylonjs.com/, . [Accessed 10-08-2024].
[3] Babylon.js docs. https://doc.babylonjs.com/, . [Accessed 28-07-2024].
[4] Principled BSDF. https://docs.blender.org/manual/en/3.2/render/shader_n
odes/shader/principled.html. [Accessed 25-07-2024].
[5] CesiumJS. https://cesium.com/platform/cesiumjs/. [Accessed 28-07-2024].
[6] Google Earth. https://earth.google.com/web. [Accessed 21-08-2024].
[7] Kitchen Planner - Kitchen Design Tool. https://www.ikea.com/gb/en/planner
s/kitchen-planner/. [Accessed 21-08-2024].
[8] Immersive Web Developer. https://immersiveweb.dev/, . [Accessed 24-08-2024].
[9] The model element. https://immersive-web.github.io/model-element/, .
[Accessed 21-08-2024].
[10] Webinar: Khronos glTF. https://www.khronos.org/events/webinar-khronos
-gltf. [Accessed 21-08-2024].
[11] Creating 3D objects using WebGL - Web APIs |MDN. https://developer.mozi
lla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_us
ing_WebGL. [Accessed 21-08-2024].
[12] PlayCanvas - The Web Graphics Creation Platform. https://playcanvas.com.
[Accessed 28-07-2024].
[13] three.js docs. https://threejs.org/docs/, . [Accessed 24-07-2024].
[14] three.js editor. https://threejs.org/editor/, . [Accessed 10-08-2024].
[15] CSS Transforms Module Level 1. https://www.w3.org/TR/css-transforms-1/.
[Accessed 11-08-2024].
[16] Andreas Anyuru. Professional WebGL programming: developing 3D graphics for the
Web, page 317. John Wiley & Sons, 2012.
[17] Chris Apers and Daniel Paterson. Handling Transformations, Animations, and
Special Effects with CSS, pages 257–298. Apress, Berkeley, CA, 2010. ISBN 978-1-
4302-3046-5. doi: 10.1007/978-1-4302-3046-5 9. URL https://doi.org/10.1007/
978-1-4302-3046-5_9.
27
[18] Pooja Bhawar, Nitin Ayer and Sameer Sahasrabudhe. Methodology to create
optimized 3d models using blender for android devices. 2013 IEEE Fifth
International Conference on Technology for Education (t4e 2013), pages 139–142.
IEEE, 2013. doi: 10.1109/T4E.2013.41.
[19] Brent Burley and Walt Disney Animation Studios. Physically-based shading at
disney. Acm Siggraph, volume 2012, pages 1–7. vol. 2012, 2012.
[20] (N)eil (D)odgson. Rational B-splines. https://www.cl.cam.ac.uk/teaching/20
00/AGraphHCI/SMEG/node5.html, 2000. [Accessed 02-09-2024].
[21] Lance Flavell. Beginning blender: open source 3d modeling, animation, and game
design, page 37. Apress, 2011.
[22] Steve Fulton and Jeff Fulton. HTML5 canvas: native interactivity and animation
for the web. ” O’Reilly Media, Inc.”, second edition, 2013. ISBN 978-1-449-33498-7.
[23] Paul Guerrero et al. Matformer: A generative model for procedural materials. arXiv
preprint arXiv:2207.01044, 2022.
[24] Paul S Heckbert. Survey of texture mapping. IEEE computer graphics and
applications, 6(11):56–67, 1986.
[25] Tan Kim Heok and Daut Daman. A review on level of detail. Proceedings.
International Conference on Computer Graphics, Imaging and Visualization, 2004.
CGIV 2004., pages 70–75. IEEE, 2004.
[26] Hoppe et al. Mesh optimization. Proceedings of the 20th Annual Conference on
Computer Graphics and Interactive Techniques, SIGGRAPH ’93, page 19–26, New
York, NY, USA, 1993. Association for Computing Machinery. ISBN 0897916018.
doi: 10.1145/166117.166119. URL https://doi.org/10.1145/166117.166119.
[27] Mariana Hurtado. Integrating 3D Content in Web. https://mariana-h.medium.
com/integrating-3d-content-in-web-26fd0f266aa3. [Accessed 12-08-2024].
[28] Umapathi Janne. Web Design and CSS Animation, pages 105–181. Blue Rose
Publishers, first edition, 2024. ISBN 9789359899589.
[29] Rachel Kelly and Dibya Chakravorty. The 10 Most Popular 3D File Formats. https:
//all3dp.com/2/most-common-3d-file-formats-model/, 2017. [Accessed 11-08-
2024].
[30] Guillaume Lavou´e, Laurent Chevalier and Florent Dupont. Streaming compressed
3d data on the web using javascript and webgl. Proceedings of the 18th international
conference on 3D web technology, pages 19–27, 2013.
28
[31] Liang Li, Xiuquan Qiao, Qiong Lu, Pei Ren and Ruibin Lin. Rendering optimization
for mobile web 3d based on animation data separation and on-demand loading. IEEE
Access, 8:88474–88486, 2020. doi: 10.1109/ACCESS.2020.2993613.
[32] Sander M¨
unster et al. 3D Modeling, pages 107–128. Springer, 04 2024. ISBN 978-3-
031-43362-7. doi: 10.1007/978-3-031-43363-4 6.
[33] Duckkyoun Nam, Daehyeon Lee, Seunghyun Lee and Soonchul Kwon. Performance
comparison of 3d file formats on a mobile web browser. International Journal of
Internet, Broadcasting and Communication, 11(2):31–42, 2019.
[34] Stefan Nieke. GitHub - D3-3d. https://github.com/Niekes/d3-3d. [Accessed
28-07-2024].
[35] Nike. Nike By You Custom Shoes. https://www.nike.com/nike-by-you. [Accessed
24-08-2024].
[36] Josh Petty. What is 3D Rigging For Animation & Character Design? https:
//conceptartempire.com/what-is-rigging/. [Accessed 27-07-2024].
[37] Marco Potenziani et al. Publishing and consuming 3d content on the web: A survey.
Foundations and Trends®in Computer Graphics and Vision, 10(4):244–333, 2018.
ISSN 1572-2740. doi: 10.1561/0600000083. URL http://dx.doi.org/10.1561/0
600000083.
[38] Peter Quax et al. Remote rendering solutions using web technologies. Multimedia
Tools and Applications, 75:4383–4410, 2016.
[39] Unity Technologies. Unity - Manual: Build your WebGL application. h ttps:
//docs.unity3d.com/Manual/webgl-building.html. [Accessed 24-08-2024].
[40] The Khronos Group Inc. Khronos releases final webgl 1.0 specification. https:
//www.khronos.org/news/press/khronos-releases-final-webgl-1.0-specifi
cation, March 2011. (Accessed on 12.06.2024).
[41] The Khronos Group Inc. and Dean Jackson. Webgl specification. https://regist
ry.khronos.org/webgl/specs/1.0.3, October 2014. (Accessed on 12.06.2024).
[42] Hansong Zhang and Kenneth E Hoff III. Fast backface culling using normal masks.
Proceedings of the 1997 symposium on Interactive 3D graphics, pages 103–ff, 1997.
29