Webové 3D aplikace s využitím open-source frameworku Babylon.js

Filip CHYTRA

Bachelor's thesis

The use of open-source framework Babylon.js for creating 3D web application.

Abstract:

Cílem této bakalářské práce bude představení tvorby 3D modelů/scén a jejich vkládání do webových aplikací za pomocí open-source frameworku Babylon.js. V dnešní době se stále častěji setkáváme s využíváním trojrozměrných technologii, virtuálních a rozšířených realit (VR a AR) napříč mnoha medii a odvětvími jako jsou například kinematografie, herní průmysl, výcvikové trenažéry aj. Podobný trend implementace těchto technologií je předpokládán v následujících pár letech i u webových technologií a je podmíněn vývojem nových webových standardů a JavaScriptových API, jako jsou OpenGL, WebGl a v neposlední řadě nejnovější WebGPU, které umožňují využití fyziky a zpracování obrazu a efektů zrychlených na GPU jako součást plátna webové stránky. Autor se ve své práci zaměří na popis funkce samotného 3D enginu Babylon.js a porovnání s dalšími softwary pro tvorbu 3D počítačové grafiky a na její implementování do kódu webu. Základem práce bude na jednoduchých ukázkách důkladně demonstrovat možnosti základních nástrojů a funkcí pro založení scény, vytvoření základních objektů (světlo, kamera, polygonové sítě) a práci s materiály, ale také ukázání pokročilejších technik jako jsou průnik a sloučení objektů, animace, práci s uživatelskými vstupy, fyzikální engine, kostry, partikly a shadery. Cílem praktické části pak bude vytvoření vlastní 3D webové prezentace, na které bude demonstrováno vkládání jednotlivých praktických ukázek do kódu stránek v rámci HTML5 a popsáním možných uplatnění frameworku Babylon.js na webu.

Abstract:

The goal of the thesis is to introduce the creation of 3D models/scenes and their implementation into applications using the open-source framework Babylon.js. In recent years, we are increasingly encountering the use of three-dimensional technologies, and virtual and augmented realities (VR and AR) across many media and industries such as cinema, gaming, training simulators, etc. A similar trend in the implementation of these technologies is expected in the next few years web technologies and is conditioned by the development of new web standards and JavaScript APIs, such as OpenGL, WebGL and last but not least the latest WebGPU, which allows the use of physics and image processing and GPU-accelerated effects as part of a web page canvas. The author will focus on the description of the function of the 3D engine Babylon.js itself and comparison with other software for creating 3D computer graphics and its implementation in the web code. The work will be based on simple demonstrations to thoroughly demonstrate the possibilities of basic tools and functions for creating a scene, creating basic objects (light, camera, meshes), and working with materials, but also demonstrating more advanced techniques such as collisions and intersections of objects, animation, working with user inputs, physics engine, skeletons, particles, and shaders. The aim of the practical part will be to create your own 3D web presentation, which will demonstrate the implementation of individual practical examples into the code of pages within HTML5 and a description of possible utilization of the Babylon.js framework on the web.

Keywords

BABYLON.JS, 3D render, JavaScript, framework, HTML5, kanvas, API, WebGL

Language used: Czech

Date on which the thesis was submitted / produced: 4. 7. 2023

Thesis defence

• Supervisor: PaedDr. Petr Pexa, Ph.D.

UNIVERSITY OF SOUTH BOHEMIA IN ČESKÉ BUDĚJOVICE

Faculty of Education

Bachelor programme / field:
Specialization in pedagogy / information technology and e-learning