With this diploma thesis, the question of how to use three-dimensional (3D) computer graphics
for the creation of a web application was explored. The goals were creating a 3D web
application with the use of standard web technologies and 3D tools, and to test the
performance of its versions. The topic of the content was chosen by the author with the intent
of ease of modelling and was chosen to be our Solar System. It was assumed that the use of
tools for creating 3D models and their implementation into the web application is easier than
their direct programming, but the latter offers better performance.
During the definition of goals and content, and the design of information architecture, page
layout and 3D content, an iPad Pro tablet computer with an Apple Pencil digital pen and the
Apple Notes note-taking application were used. The development of the 3D application began
on a Lenovo Yoga 530 laptop computer and continued on a MacBook Pro with the
simultaneous use of the iPad Pro and a Huawei P20 smartphone for viewing the application.
For development, the Git revision control system was used alongside the GitHub platform for
hosting the Git repository and the website. Development was done in the Visual Studio Code
environment, together with Node.js and its package manager, ESLint and Vite development
tools, while the testing was done in the Chrome, Firefox and Safari web browsers.
The webpage was created with standard web technologies, while the 3D part of the application
largely with the help of the three.js JavaScript library. Models of the Sun, starry background,
the planets and the Moon were created, as well as time, scroll, cursor position and device
orientation-based animations. The Sun model was created using shaders, while the rest were
created using the built-in three.js materials and the use of textures. For the purpose of testing
the performance, models of the planets and the Moon were also created using Blender,
together with two additional versions of the application that utilize physically based rendering.
For the testing of the application and its versions, the frame rendering time, the amount of
allocated memory and the final files' sizes were tested. Testing was done in the Chrome
browser on the MacBook Pro laptop and the Huawei P20 smartphone with the help of the
Chrome developer tools and a few custom scripts for easier data extraction and manipulation.
Thus, a static web application was created in three versions, with a part that implements 3D
computer graphics, on the topic of our Solar System. It turned out that the creation of 3D
models is easier in Blender, and that their direct programming offers more possibilities and
freedom. The results of the performance testing show that, comparing the physically based
rendering versions of the application, the directly programmed one was more efficient in frame
rendering time and by final files' sizes, but less efficient by amount of allocated memory than
the Blender models version. It is also worth noting that the very possibility of different
approaches in the main version of the application, offered by direct programming, can be of
great significance for performance.
|
