Sem vložte zadání Vaší práce.
České vysoké učení technické v Praze Fakulta informačních technologií Katedra Softwarového Inženýrství
Bakalářská práce
Experimentální webová CAD aplikace Antonín Smrček
Vedoucí práce: Ing. Josef Gattermayer
13. května 2013
Poděkování Chtěl bych poděkovat vedoucímu své práce, Ing. Josefu Gattermayerovi, za jeho skvělý přístup během vedení celé práce. Mé díky za příjemnou spolupráci také patří kolegům Karlovi Soukupovi a zejména Janě Moudré, kteří pracovali na dalších částech projektu WebCAD. Na závěr bych chtěl ještě poděkovat své matce, která mi byla velkou oporou během studia.
Prohlášení Prohlašuji, že jsem předloženou práci vypracoval samostatně a že jsem uvedl veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů, zejména skutečnost, že České vysoké učení technické v Praze má právo na uzavření licenční smlouvy o užití této práce jako školního díla podle § 60 odst. 1 autorského zákona.
V Praze dne 13. května 2013
.....................
České vysoké učení technické v Praze Fakulta informačních technologií c 2013 Antonín Smrček. Všechna práva vyhrazena.
Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora.
Odkaz na tuto práci Smrček, Antonín. Experimentální webová CAD aplikace. Bakalářská práce. Praha: České vysoké učení technické v Praze, Fakulta informačních technologií, 2013.
Abstract This thesis is concerned with the creation of CAD application, which is capable of running in web browser and is based on HTML5. The aim of the application is to provide basis CAD functions and shapes. Application shall be implemented in Google Web Toolkit framework and undergo performance tests. Keywords CAD, WebGL, Canvas, HTML5, GWT
Abstrakt Tato práce se zabývá vytvořením CAD aplikace, která je schopná běhu ve webovém prohlížeči za využití technologie HTML5. Aplikace má za úkol poskytnout základní CAD funkce a tvary a být implementována ve frameworku Google Web Toolkit. Hotová aplikace je podrobena výkonnostním testům. Klíčová slova CAD, WebGL, Canvas, HTML5, GWT ix
Obsah Úvod
1
1 Analýza 1.1 Co je to CAD . . . . . . . . 1.2 Současný stav problematiky 1.3 Volba technologie . . . . . . 1.4 Způsob implementace . . . . 1.5 Zobrazení grafiky v HTML5 1.6 Canvas 2D vs WebGL . . . 1.7 Použití Canvas 2D a WebGL 1.8 Integrace do GWT . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
3 3 4 6 9 10 11 12 15
2 Návrh 2.1 Požadavky na systém . 2.2 Architektura aplikace . 2.3 Módy aplikace . . . . . 2.4 CAD objekty . . . . . 2.5 Uživatelské prostředí . 2.6 Konzole . . . . . . . . 2.7 Možnosti detekce kolizí
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
17 17 20 21 27 29 30 31
3 Vybrané kapitoly z implementace 3.1 Implementace mřížky . . . . . . . . . . . . . . . 3.2 Kolize výběrového obdélníku s objekty ve scéně 3.3 Výběr kliknutím a obalová tělesa . . . . . . . . 3.4 Optimalizace vykreslování – technika vrstvení . 3.5 Aproximace objektů . . . . . . . . . . . . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
37 37 43 46 48 49
. . . . . . .
. . . . . . .
. . . . . . .
xi
3.6
Vykreslování přerušovaných úseček . . . . . . . . . . . . . .
4 Testy 4.1 Testovací konfigurace . . . . 4.2 Test 1: Malý počet objektů . 4.3 Test 2: Velký počet objektů 4.4 Test 3: Zátěžový test . . . . 4.5 Zhodnocení . . . . . . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
51 53 53 54 55 57 57
Závěr 59 Výhled do budoucna . . . . . . . . . . . . . . . . . . . . . . . . . 59 Literatura
61
A Seznam použitých zkratek
67
B Instalační příručka B.1 Zprovoznění vývojového prostředí . B.2 Zprovoznění prostředí pro spuštění B.3 Běh aplikace ve vývojovém režimu . B.4 Běh aplikace v produkčním režimu
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
69 69 71 72 73
C Uživatelská příručka C.1 Spuštění aplikace . . . . C.2 Ovládání aplikace . . . . C.3 Změna grafického režimu C.4 Změna jazyka . . . . . . C.5 Výběr objektů . . . . . . C.6 Vytvoření objektu . . . . C.7 Smazání objektu . . . . C.8 Transformace objektu . . C.9 Práces s výkresem . . . . C.10 Seznam příkazů . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
75 75 75 75 76 76 76 77 77 78 79
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
D Obsah přiloženého CD
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
81
xii
Seznam obrázků 1.1 1.2 1.3 1.4 1.5 1.6
Rozdělení CAx technologií[39] . . . . . . . EcCAD . . . . . . . . . . . . . . . . . . . WebCAD (framework) . . . . . . . . . . . JS-CAD . . . . . . . . . . . . . . . . . . . AutoCAD 2000 . . . . . . . . . . . . . . . Canvas 2D API vs WebGL (12 000 úseček)
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
3 4 5 6 7 12
2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11 2.12 2.13
Spolupráce mezi komponentami MVC . . . . Výběrový obdélník (částečný a celkový mód) Rozhraní ObjectCreation . . . . . . . . . . . Translace o vektor (7, 6) . . . . . . . . . . . Rotace o 60 ◦ (ve směru hodinových ručiček) Změna měřítka (zvětšení 3×) . . . . . . . . Podporované CAD objekty . . . . . . . . . . Screenshot aplikace . . . . . . . . . . . . . . Základní typy obalových těles . . . . . . . . Hierarchie obalových těles (vizualizace) . . . Mřížka . . . . . . . . . . . . . . . . . . . . . Kvadrantový strom (vizualizace)[21] . . . . . kD strom (vizualizace)[2] . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
20 22 22 24 25 26 28 29 32 33 34 35 35
3.1 3.2 3.3 3.4 3.5 3.6 3.7
Dva nekolidující objekty v jedné buňce mřížky . . . Průchod mřížkou pro úsečku . . . . . . . . . . . . . Zjednodušený průchod mřížkou . . . . . . . . . . . Obal úsečky . . . . . . . . . . . . . . . . . . . . . . Obal oblouku . . . . . . . . . . . . . . . . . . . . . Diskrétní křivka[43] . . . . . . . . . . . . . . . . . . Vliv počtu bodů diskrétní elipsy na vizuální dojem
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
38 40 43 47 47 49 50
xiii
3.8
Přerušovaná čára v aplikaci a v Mozille Firefox . . . . . . . . .
52
4.1 4.2 4.3 4.4 4.5
Canvas 2D API (102 objektů) . WebGL (102 objektů) . . . . . Canvas 2D API (2400 objektů) WebGL (2400 objektů) . . . . . WebGL (5000 elips) . . . . . .
54 55 56 56 57
. . . . .
xiv
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
Úvod Motivací pro vytvoření projektu WebCAD je odstranění problémů a omezení, které vyplývají z podstaty desktopových CAD aplikací. Díky běhu aplikace v okně webového prohlížeče a využití standardizovaných webových technologií, souhrnně označovaných jako HTML5, lze dosáhnout přenositelnosti napříč spektrem platforem. S příchodem elementu
