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.
Klíčová slova:
JavaScript; 3D graphic; GLSL; shader; WebGL; Three.js
Název práce:
Modifiakce materiálů 3D objektů na webu
Autor(ka) práce:
Dušek, Václav
Typ práce:
Bakalářská práce
Vedoucí práce:
Svoboda, Jaroslav
Oponenti práce:
Dušek, Václav
Jazyk práce:
English
Abstrakt:
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.
Klíčová slova:
3D grafika; JavaScript; GLSL; shader; WebGL; Three.js