Aplikace pro výuku programování 3D grafiky

Abstract

Práce se zaměřuje na implementaci webové aplikace pro podporu výuky programování počítačové grafiky, jejímž cílem je usnadnit studentům pochopení vývoje grafických aplikací ve WebGL. Základem aplikace jsou demonstrační příklady, které prezentují probíranou látku odpovídající osnovám předmětu PGR (Programování Grafiky). Příklady jsou doplněny výukovým textem, obrázky a ukázkami zdrojového kódu. Výuková aplikace je založena na principu SPA (Single-Page Application) umožňující rychlé procházení obsahu. K implementaci uživatelského rozhraní byl využit framework React.js a Bootstrap. Obsah kapitol je uložen na serveru a asynchronně stahován pomocí technologie AJAX. Výukové příklady jsou vyvíjeny v jazyce JavaScript dle standardu ES6+ v kombinaci s rozhraním WebGL2. Díky tomu je výukový materiál včetně příkladů volně dostupný bez potřeby instalace vývojového prostředí. Uživatelé tak mohou obsah číst kdykoliv a kdekoliv nezávisle na použitém zařízení. Výsledkem práce je série výukových kapitol popisujících problematiku počítačové grafiky od úplných základů. Vzhledem k náročnosti strukturování obsahu je prozatím aplikace určena pokročilejším zájemcům, především studentům předmětu PGR. Většina příkladů je interaktivních, což zjednodušuje pochopení vyučované problematiky.

The work focuses on the implementation of a web application to support the teaching of computer graphics programming, which aims to make it easier for students to understand the development of graphic applications in WebGL. The application is based on demonstration examples, which present the subject matter corresponding to the syllabus of the subject PGR (Computer graphics programming). The examples are supplemented by tutorials, pictures and source code examples. The educational application is based on the principle of SPA (Single-Page Application) enabling fast browsing of the content. The React.js and Bootstrap frameworks were used to implement the user interface (GUI). The content of the chapters is stored on the server and fetched asynchronously using AJAX technology. Tutorials are developed in JavaScript according to the ES6+ standard in combination with the WebGL2 interface. Thanks to this, the teaching material, including examples, is freely available without the need to install a development environment. Users can read the content anytime and anywhere, regardless of the device used. The result of the work is a series of teaching chapters describing the matters of computer graphics from the ground up. Due to the complexity of structuring the content, the application is currently intended for more advanced candidates, especially students of the subject PGR. Most of the examples are interactive, which simplifies the understanding of the taught matters.