Material modification of 3D objects on the web

Václav Dušek

Bachelor's thesis

Modifiakce materiálů 3D objektů na webu

Abstract:

Hlavním cílem této práce bylo vyřešit viditelné opakování textury ve 3D grafice na webu. Jako hlavní technologie pro vykreslování 3D scény na webu je použito WebGL. Práce s WebGL probíhá za pomoci Three.js frameworku. Opakování textury je vyřešeno implementováním několika technik. Konkrétně jsou to vzdálenostní škálování and micro a macro variace. Technika texture bombing nebyla použita, protože pro některé textury není vhodná. Materiál, který nebude mít viditelné opakování textury, byl vytvořen tak, že zdědil vlastnosti MeshStandardMaterialu, který je součástí Three.js. Zmíněné techniky byly implementovány jako části vertex a fragment shaderů za pomocí GLSL. Tyto části kodu byly poté vloženy kódu, který byl zděděn od MeshStandardMaterialu. Posledním krokem bylo přidání nových vlastností materiálu, skrz které lze ovlivňovat proměné v GLSL kodu. Tím vzniknul materiál, který schovává opakování textury přidáním vizuální variace.

Abstract:

The main goal of this thesis was to solve the visible texture repetition in 3D graphics on the web. For the rendering of the 3D scene is used WebGL as the main technology for 3D graphics on the web. The WebGL is handled with the help of the Three.js framework. The texture repetition is solved by the implementation of several techniques. These techniques are distance tiling and micro and macro variation. The texture bombing was not implemented because it is not suitable for some types of textures. The material, that will not have noticeable texture repetition, was created by inheriting properties from MeshStandardMaterial, which comes with Three.js. The mentioned techniques were implemented with the use of GLSL as a part of vertex shader and fragment shader. These parts of GLSL codes were injected into the original GLSL code that was inherited from MeshStandardMaterial. The last step was to add new properties to the material to be able to control variables in the GLSL code. This results in material, that hides the texture repetition by adding more visual variation to the final look.

Keywords

3D grafika, JavaScript, GLSL, shader, WebGL, Three.js

Keywords

JavaScript, 3D graphic, GLSL, shader, WebGL, Three.js

Language used: English

Date on which the thesis was submitted / produced: 27. 6. 2024

Thesis defence

• Date of defence: 2024
• Supervisor: Jaroslav Svoboda
• Reader: Václav Dušek

Vysoká škola ekonomická v Praze

Bachelor programme:
Multimédia v ekonomické praxi