Trabalho2-CG/index.html at main · vinicOio222/Trabalho2-CG · 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
<!doctype html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8" />
  <title>WebGL 3D Project</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./style.css" />
</head>

<body onload="init()">
  <canvas id="glcanvas" width="1000" height="600"></canvas>

  <!-- Vertex Shader -->
  <script id="vertex-shader" type="x-shader/x-vertex">
      attribute vec3 aPosition;  // Posição do vértice
      attribute vec2 aTexCoord;  // Coordenadas de textura
      attribute vec3 aNormal;    // Normal do vértice (essencial para Phong)

      uniform mat4 uModelViewMatrix;   // Matriz Model-View
      uniform mat4 uProjectionMatrix;  // Matriz de Projeção
      uniform mat4 uModelMatrix;       // Matriz Model (para transformar normais)

      varying vec2 vTexCoord;   // Passa coordenadas de textura para o fragment shader
      varying vec3 vNormal;     // Passa normal transformada (necessária para calcular iluminação)
      varying vec3 vFragPos;    // Passa posição do fragmento no espaço world (necessária para Phong)

      void main() {
          vTexCoord = aTexCoord;

          // Transforma a normal para o espaço world (necessário para iluminação de Phong)
          // Usa apenas a parte rotacional/escala da matriz model
          vNormal = mat3(uModelMatrix) * aNormal;

          // Posição do fragmento no espaço world (necessária para calcular direções de luz)
          vFragPos = vec3(uModelMatrix * vec4(aPosition, 1.0));

          // Posição final do vértice na tela
          gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
      }
    </script>

  <!-- Fragment Shader -->
  <script id="fragment-shader" type="x-shader/x-fragment">
      precision mediump float;

      varying vec2 vTexCoord;
      varying vec3 vNormal;
      varying vec3 vFragPos;

      uniform sampler2D uSampler;
      uniform bool uUseSolidColor;
      uniform vec4 uSolidColor;

      uniform vec3 uLightPos;
      uniform vec3 uViewPos;
      uniform vec3 uLightColor;

      // =====================================================
      // PARÂMETROS DO MODELO DE PHONG (Ajustáveis)
      // =====================================================
      const float AMBIENT_STRENGTH = 0.3;   // Intensidade da luz ambiental (0.0 a 1.0)
      const float SPECULAR_STRENGTH = 0.5;  // Intensidade do brilho especular (0.0 a 1.0)
      const float SHININESS = 32.0;         // Expoente de Phong - controla tamanho do brilho (1 a 256)
                                            // Valores: 1-10=fosco, 32=plástico, 128=metal, 256=espelho

      void main() {
          // Obtém a cor base do objeto (textura ou cor sólida)
          vec4 baseColor;
          if (uUseSolidColor) {
              baseColor = uSolidColor;
          } else {
              baseColor = texture2D(uSampler, vTexCoord);
          }

          // Normaliza a normal interpolada do vértice
          vec3 norm = normalize(vNormal);

          // =====================================================
          // MODELO DE ILUMINAÇÃO DE PHONG
          // =====================================================

          // -----------------------------------------------------
          // 1. REFLEXÃO AMBIENTAL (AMBIENT)
          // Simula luz ambiente que ilumina uniformemente todos
          // os objetos, independente de sua orientação.
          // Previne que áreas não iluminadas fiquem completamente pretas.
          //
          // Fórmula: I_ambient = k_a × I_light
          // onde k_a = AMBIENT_STRENGTH
          // -----------------------------------------------------
          vec3 ambient = AMBIENT_STRENGTH * uLightColor;

          // -----------------------------------------------------
          // 2. REFLEXÃO DIFUSA (DIFFUSE)
          // Simula reflexão difusa (Lambertiana) onde a luz é
          // espalhada igualmente em todas as direções.
          // Depende do ângulo entre a normal da superfície e a
          // direção da luz (Lei de Lambert: cos θ).
          //
          // Fórmula: I_diffuse = I_light × max(N · L, 0)
          // onde N = normal, L = direção da luz
          // -----------------------------------------------------
          vec3 lightDir = normalize(uLightPos - vFragPos);  // L: Direção da luz
          float diff = max(dot(norm, lightDir), 0.0);       // N · L = cos(θ)
          vec3 diffuse = diff * uLightColor;                // Componente difusa

          // -----------------------------------------------------
          // 3. REFLEXÃO ESPECULAR (SPECULAR)
          // Simula reflexos brilhantes em superfícies.
          // Depende do ângulo entre a direção de visualização e
          // a direção da luz refletida pela superfície.
          // Usa o expoente de Phong (SHININESS) para controlar
          // o tamanho do ponto brilhante.
          //
          // Fórmula: I_specular = k_s × I_light × [max(R · V, 0)]^n
          // onde R = reflexão da luz, V = direção da câmera, n = SHININESS
          // -----------------------------------------------------
          vec3 viewDir = normalize(uViewPos - vFragPos);          // V: Direção da câmera
          vec3 reflectDir = reflect(-lightDir, norm);             // R: Luz refletida pela normal
          float spec = pow(max(dot(viewDir, reflectDir), 0.0), SHININESS);  // (R · V)^n
          vec3 specular = SPECULAR_STRENGTH * spec * uLightColor;           // Componente especular

          // =====================================================
          // COMBINAÇÃO FINAL DOS TRÊS COMPONENTES DE PHONG
          // Cor final = (Ambiente + Difusa + Especular) × Cor do objeto
          // =====================================================
          vec3 result = (ambient + diffuse + specular) * baseColor.rgb;
          gl_FragColor = vec4(result, baseColor.a);
      }
    </script>

  <!-- Módulos do projeto (ordem importa!) -->
  <script src="./math/Matrix.js"></script> <!-- Operações de matriz 3D -->
  <script src="./geometry/Geometry.js"></script> <!-- Criação de geometrias primitivas -->
  <script src="./geometry/MinecraftCharacter.js"></script> <!-- Personagem Mario -->
  <script src="./geometry/OBJLoader.js"></script> <!-- Parser de arquivos OBJ/MTL -->
  <script src="./texture/Texture.js"></script> <!-- Carregamento de texturas -->
  <script src="./audio/AudioManager.js"></script> <!-- Sistema de gerenciamento de áudio -->
  <script src="./main.js"></script> <!-- Lógica principal e renderização -->
</body>

</html>