computer-graphics/pyramids.html at main · felipersteles/computer-graphics · 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Computer Graphics - Pyramids</title>

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Computer Graphics - Pyramids" />
  <meta property="og:description"
    content="This site delves into the captivating world of computer graphics, specifically designed for a university course at the Federal University of Maranhão (UFMA)." />
  <meta property="og:image"
    content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcXFSjAYBUubJ-oq_i30FNAXJdu9Q5iw9BFNoSlFxkY0icbspLi3b9Re-gwMxlh7bhlurLvxt81AjbKsCTDV_J9y4z4Lc_Lr_XdGTemj7BC5jAseLZk7hqDrxaaUgP_FHi_hGk8DeQto/s768/%25E2%2580%2598Escola+de+Atenas%25E2%2580%2599%252C+de+Rafael+Sanzio+-+Musei+Vaticani+-+Destaque%252C++Out20.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="628" />

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:title" content="Computer Graphics - Pyramids" />
  <meta property="twitter:description"
    content="This site delves into the captivating world of computer graphics, specifically designed for a university course at the Federal University of Maranhão (UFMA)." />
  <meta property="twitter:image"
    content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcXFSjAYBUubJ-oq_i30FNAXJdu9Q5iw9BFNoSlFxkY0icbspLi3b9Re-gwMxlh7bhlurLvxt81AjbKsCTDV_J9y4z4Lc_Lr_XdGTemj7BC5jAseLZk7hqDrxaaUgP_FHi_hGk8DeQto/s768/%25E2%2580%2598Escola+de+Atenas%25E2%2580%2599%252C+de+Rafael+Sanzio+-+Musei+Vaticani+-+Destaque%252C++Out20.jpg" />
  <meta property="twitter:image:width" content="1200" />
  <meta property="twitter:image:height" content="628" />

  <link rel="icon" type="image/x-icon"
    href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoiAWpT1lgisOqQNDtKuYgmIRKlAqZjQgW8g&s" />

  <meta name="description"
    content="This site delves into the captivating world of computer graphics,
    specifically designed for a university course at the Federal University of Maranhão (UFMA).
     Here, you'll embark on an exciting exploration of the techniques used to create the stunning visuals and
     animations that captivate us in movies, games, and beyond.
     Prepare to unlock the secrets behind these digital marvels and develop the skills to bring your own creative vision to life!" />

  <link rel="stylesheet" type="text/css" href="style.css" />

  <script id="vertex-shader" type="x-shader/x-vertex">

      attribute  vec4 vPosition;
      attribute  vec4 vColor;
      attribute  vec3 vNormal;

      uniform mat4 modelViewMatrix;
      uniform mat4 projectionMatrix;

      varying vec4 fColor;
      varying vec3 fPosition;
      varying vec3 fNormal;

      void main()
      {
          vec4 worldPosition = projectionMatrix * modelViewMatrix * vPosition;

          fPosition = worldPosition.xyz;
          fColor = vColor;
          fNormal = vNormal;

          gl_Position = worldPosition;
      }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">

    precision mediump float;

    varying vec4 fColor;
    varying vec3 fPosition;
    varying vec3 fNormal;

    uniform vec3 uLightPosition;
    uniform vec4 uLightColor;
    uniform vec4 uAmbientLightColor;

    uniform bool uAmbientLight;
    uniform bool uDiffuseLight;
    uniform bool uSpecularLight;

    // FIXME: esta notacion para los nombres de las variables es fea
    uniform float uKa;
    uniform float uKd;
    uniform float uKs;

    void main()
    {
        float glossyness = 1.0;

        vec3 cameraDirection = normalize(-fPosition.xyz);
        vec3 normalDirection = normalize(fNormal);
        vec3 lightDirection = normalize(uLightPosition - fPosition.xyz);
        vec3 reflectedDirection = reflect(-lightDirection, normalDirection);

        vec4 fragmentColor = vec4(0, 0, 0, 0);

        if (uAmbientLight) {
          vec4 ambientColor = fColor * uAmbientLightColor * uKa; //* kambient;
          fragmentColor = fragmentColor + ambientColor;
        }

        if (uDiffuseLight) {
          vec4 diffuseColor = fColor * uLightColor * max(dot(normalDirection, lightDirection), 0.0) * uKd; //* kdiffuse;
          fragmentColor = fragmentColor + diffuseColor;
        }

        if (uSpecularLight) {
          vec4 specularColor = uLightColor * pow(max(dot(reflectedDirection, cameraDirection), 0.0), glossyness) * uKs; //* fatt;
          fragmentColor = fragmentColor + specularColor;
        }

        gl_FragColor = vec4(fragmentColor.rgb, 1.0);
    }
  </script>

  <script type="text/javascript" src="./Common/webgl-utils.js"></script>
  <script type="text/javascript" src="./Common/initShaders.js"></script>
  <script type="text/javascript" src="./Common/MV.js"></script>
  <script type="text/javascript" src="./pyramids/sphere.js"></script>
  <script type="text/javascript" src="./pyramids/objects.js"></script>
  <script type="text/javascript" src="./pyramids/utils.js"></script>
  <script type="text/javascript" src="./pyramids/scenario.js"></script>
  <script type="text/javascript" src="./pyramids/camera.js"></script>
  <script type="text/javascript" src="./pyramids/lights.js"></script>
  <script type="text/javascript" src="./pyramids/script.js"></script>
</head>

<body style="margin: 0px">
  <header>
    <div class="container">
      <a href="#" class="logo">Computer Graphics</a>
      <nav>
        <ul>
          <li><a href="./index.html">Home</a></li>
          <li><a href="./stars.html">Stars</a></li>
          <li><a href="./draw.html">Draw mode</a></li>
          <li><a target="_blank" href="https://github.com/felipersteles/computer-graphics">Source code</a></li>
          <li><a target="_blank" href="https://felipersteles.netlify.app">About me</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section id="home" class="home border-bottom">

    <h1>WebGL Pyramids</h1>
    <p>
      Journey through the vast deserts of ancient Egypt and explore the iconic pyramids rendered in WebGL. These
      monumental structures, built thousands of years ago, continue to captivate us with their architectural ingenuity
      and serve as a testament to the rich history and advancements of early civilizations. Witness these wonders come
      alive in 3D, allowing you to rotate and view them from any angle.
    </p>
  </section>

  <section id="pyramid" class="padding pyramid">
    <div>
      <canvas id="canvas" width="500" height="500" class="pyramids"></canvas>
    </div>
    <div class="column center">
      <h3>Light Position</h3>
      <div class="column">
        <div class="cam center">
          <label for="cam-z">Light X:</label>
          <input id="cam-z" type="range" value="0">
        </div>
        <div class="cam center">
          <label for="cam-y">Light Y:</label>
          <input id="cam-y" type="range" value="0">
        </div>
        <div class="cam center">
          <label for="cam-x">Light Z:</label>
          <input id="cam-x" type="range" value="0" />
        </div>
      </div>
      <h3>Control the camera</h3>
      <div>
        <div class="cam center">
          <label for="cam-theta">Cam Y:</label>
          <input id="cam-theta" type="range">
        </div>
        <div class="cam center">
          <label for="cam-phi">Cam X:</label>
          <input id="cam-phi" type="range">
        </div>
        <div class="cam center">
          <label for="cam-fov">FOV</label>
          <input id="cam-fov" type="number" value="90">
        </div>
      </div>
    </div>
    <div class="column center">
      <h2>Control the lighting</h2>
      <h3>Power</h3>
      <div class="column">
        <div class="cam center">
          <label for="aLight">Ambient Light</label>
          <input id="aLight" type="checkbox" checked="true">
        </div>
        <div class="cam center">
          <label for="dLight">Diffuse Light</label>
          <input id="dLight" type="checkbox" checked="true">
        </div>
        <div class="cam center">
          <label for="sLight">Specular Light</label>
          <input id="sLight" type="checkbox" checked="true" />
        </div>
      </div>
      <h3>Intensity</h3>
      <div>
        <div class="cam center column">
          <label for="aLightCoefficient">Ambient Light Coefficient</label>
          <input id="aLightCoefficient" type="number" value="30">
        </div>
        <div class="cam center column">
          <label for="dLightCoefficient">Diffuse Light Coefficient</label>
          <input id="dLightCoefficient" type="number" value="70">
        </div>
        <div class="cam center column">
          <label for="sLightCoefficient">Specular Light Coefficient</label>
          <input id="sLightCoefficient" type="number" value="100">
        </div>
      </div>
    </div>
  </section>

  <section id="applications" class="more-applications">
    <div class="center">
      <h1>Lighting</h1>
    </div>

    <h3>Normal</h3>
    <p>
      Normals are called that from the Latin word norma, a carpenter's square. Just as a carpenter's square has a right
      angle, normals are at a right angle to a line or surface. In 3D graphics a normal is the word for a unit vector
      that describes the direction a surface is facing. In the world of WebGL, normals play a crucial role in bringing
      your 3D scenes to life. Imagine a perfectly smooth beach ball; every point on its surface faces directly outwards.
      That outward direction is what a normal defines – a tiny arrow perpendicular to the surface at each point. By
      understanding these normals, WebGL calculates how light interacts with your objects. Surfaces facing the light
      source will be brighter, while those facing away will be in shadow. This allows for realistic shading effects,
      creating smooth curves and depth in your models. Without normals, your 3D objects would appear flat and lifeless –
      normals are the secret sauce that injects realism and visual appeal into your WebGL creations!
    </p>

    <h3>Phong Model Illumination</h3>
    <p>Witness realistic lighting effects in your WebGL creations with the Phong illumination model! This powerful
      shading technique simulates how light interacts with 3D objects, creating highlights, shadows, and reflections. By
      factoring in ambient light, diffuse reflection, and specular highlights, Phong shading brings depth and realism to
      your models. Imagine sunlight glinting off a chrome object, or a warm glow emanating from a lamp – WebGL and Phong
      illumination make these effects a reality within your web browser.</p>
  </section>

  <section class="references padding">
    <h2>References</h2>
    <ul>
      <li>
        <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL"
          id="ref1-link">Lighting</a>. mdn,
        2024
      </li>
      <li>
        <a href="https://en.wikipedia.org/wiki/Phong_shading" id="ref1-link">Phong shading</a>. Wikipedia,
        2024
      </li>
      <li>
        <a href="https://webglfundamentals.org/webgl/lessons/webgl-3d-lighting-directional.html"
          id="ref1-link">Normals</a>. Wegbl,
        2024
      </li>
    </ul>
  </section>


  <footer>
    <p class="copyright">© 2024 <a href="https://github.com/felipersteles">Felipe Teles</a>. All rights reserved.</p>
  </footer>
</body>

</html>