TerrainModeling/index.html at main · glckdev/TerrainModeling · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- META -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="uisual" content="Made with Uisual (uisual.com)">
    <meta name="author" content="#">
    <meta name="description" content="#">
    <meta name="referrer" content="unsafe-url">
    <meta name="robots" content="index, follow">
    <!-- SPEED -->
    <link rel="preconnect" href="https://res.cloudinary.com">
    <link rel="dns-prefetch" href="https://res.cloudinary.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <!-- LINK -->

    <link rel="me" href="#">
    <link rel="canonical" href="#">
    <link rel="icon" type="image/png" href="#" sizes="48x48">
    <!-- PERFORMANCE -->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="coloris.min.css" />
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
    <link rel="preload" as="style" href="style.css">
    <link rel="stylesheet" href="style.css">
    <!-- TITLE -->
    <title>Terrain Modeling with Perlin Noise and Fractals</title>
  </head>
<body>
  <script src="navbar.js"></script>
  <nav id="navbar" class="">
    <div class="nav-wrapper">
      <!-- Navbar Links -->
      <ul id="menu">
        <li><a href="/index.html">Home</a></li>
        <li><a href="/demo.html">Demo</a></li>
        <li><a href="/about.html">About</a></li>
        <li><a href="/video.html">Video</a></li>
      </ul>
    </div>
  </nav>

  <!-- Menu Icon -->
  <div class="menuIcon">
    <span class="icon icon-bars"></span>
    <span class="icon icon-bars overlay"></span>
  </div>

  <div class="overlay-menu">
    <ul id="menu">
      <li><a href="/index.html">Home</a></li>
      <li><a href="/demo.html">Demo</a></li>
      <li><a href="/about.html">About</a></li>
      <li><a href="/video.html">Video</a></li>
    </ul>
  </div>

  <main role="main">
    <section class="ui-section-hero">
      <div class="ui-layout-container">
        <!-- COPYWRITING -->
        <div class="ui-layout-column-6 ui-layout-column-center">
          <h1>Terrain Modeling with Perlin Noise and Fractals</h1>
          <p class="ui-text-intro"></p>
          <!-- CTA -->
          <br>
          <div class="ui-component-cta ui-layout-flex">
            <a href="/demo.html" role="link" aria-label="#" class="ui-component-button ui-component-button-normal ui-component-button-primary">Live Demo</a>
            <p class="ui-text-note"><small>Use Chrome for best results</small></p>
          </div>
        </div>
      </div>
    </section>
    <section class="ui-section-feature">
      <div class="ui-layout-container">
        <div class="ui-section-feature__layout ui-layout-grid ui-layout-grid-2">
          <!-- IMAGE -->
          <img src="/images/perlin.png" loading="lazy" alt="blueimage" class="ui-image-half-left">
          <!-- FEATURE -->
          <div>
            <h2>Perlin Noise</h2>
            <p class="ui-text-intro">Height map generation technique</p>
            <ul class="ui-component-list ui-component-list-feature ui-layout-grid">
              <li class="ui-component-list--item ui-component-list--item-check">Seed Function</li>
              <li class="ui-component-list--item ui-component-list--item-check">2D & 3D Simplex Noise </li>
              <li class="ui-component-list--item ui-component-list--item-check">2D & 3D Perlin Noise</li>
              <li class="ui-component-list--item ui-component-list--item-check">Fade and Lerp Functions</li>
            </ul>
          </div>
        </div>
        <div class="ui-section-feature__layout ui-layout-grid ui-layout-grid-2">
          <!-- FEATURE -->
          <div>
            <h2>Dynamic LOD</h2>
            <p class="ui-text-intro">Realtime update and rendering of terrain</p>
            <ul class="ui-component-list ui-component-list-feature ui-layout-grid">
              <li class="ui-component-list--item ui-component-list--item-check">Gradient Coloring</li>
              <li class="ui-component-list--item ui-component-list--item-check">Chunk Generation</li>
              <li class="ui-component-list--item ui-component-list--item-check">Terrain Class</li>
              <li class="ui-component-list--item ui-component-list--item-check">LOD Management</li>
            </ul>
          </div>
          <!-- IMAGE -->
          <img src="/images/mountainTerrain.png" loading="lazy" alt="#" class="ui-image-half-right">
        </div>
        <div class="ui-section-feature__layout ui-layout-grid ui-layout-grid-2">
          <!-- IMAGE -->
          <img src="/images/gradient.png" loading="lazy" alt="#" class="ui-image-half-left">
          <!-- FEATURE -->
          <div>
            <h2>Color Gradient Mapping</h2>
            <p class="ui-text-intro">Completely customizable terrain coloring</p>
            <ul class="ui-component-list ui-component-list-feature ui-layout-grid">
              <li class="ui-component-list--item ui-component-list--item-check">Gradient Class</li>
              <li class="ui-component-list--item ui-component-list--item-check">Color based on resolution</li>
              <li class="ui-component-list--item ui-component-list--item-check">Realtime color changes</li>
              <li class="ui-component-list--item ui-component-list--item-check">Interpolate colors between gradient stops</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </main>
  <footer role="contentinfo" class="ui-section-footer">
    <div class="ui-layout-container">
      <div class="ui-section-footer__layout ui-layout-flex">
        <!-- COPYRIGHT -->
        <p class="ui-section-footer--copyright ui-text-note"><small>CSCI-716: Computational Geometry</small></p>
        <!-- LINKS -->
        <nav role="navigation" class="ui-section-footer--nav ui-section-footer--social ui-layout-flex">
          <a href="/index.html" role="link" aria-label="#" class="ui-text-note"><small>Home</small></a>
          <a href="/demo.html" role="link" aria-label="#" class="ui-text-note"><small>Demo</small></a>
          <a href="/about.html" role="link" aria-label="#" class="ui-text-note"><small>About</small></a>
          <a href="/code.html" role="link" aria-label="#" class="ui-text-note"><small>Code</small></a>
          </a>
        </nav>
      </div>
    </div>
  </footer>
</body>
</html>