Hugging Face's logo

Spaces:
jrrade
/
3d-geometry-flashcards
Running

App Files Community
jrrade commited on
Commit
0e943d3
·
verified ·
1 Parent(s): 3343249

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +325 -43
index.html CHANGED
@@ -49,6 +49,15 @@
49
  .floating {
50
  animation: float 3s ease-in-out infinite;
51
  }
 
 
 
 
 
 
 
 
 
52
  </style>
53
  </head>
54
  <body class="bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen text-white">
@@ -59,7 +68,7 @@
59
  3D Graphics Flashcards
60
  </h1>
61
  <p class="text-xl text-purple-200 max-w-2xl mx-auto">
62
- Interactive learning cards for computer graphics concepts
63
  </p>
64
  </header>
65
 
@@ -67,116 +76,312 @@
67
  <div class="w-full bg-gray-700 rounded-full h-4">
68
  <div id="progress" class="progress-bar h-4 rounded-full bg-gradient-to-r from-blue-400 to-purple-500" style="width: 0%"></div>
69
  </div>
70
- <span id="progress-text" class="ml-4 font-bold">0/7</span>
71
  </div>
72
 
73
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
74
- <!-- Flashcard 1 -->
75
  <div class="flashcard" onclick="flipCard(this)">
76
  <div class="flashcard-inner">
77
  <div class="flashcard-front bg-gradient-to-br from-blue-500 to-blue-700 flex flex-col items-center justify-center p-6">
 
78
  <i class="fas fa-shapes text-5xl mb-4"></i>
79
- <h2 class="text-2xl font-bold mb-2">3D Geometries</h2>
80
- <p class="text-center text-blue-100">Click to reveal definition</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
  </div>
82
  <div class="flashcard-back bg-gradient-to-br from-blue-600 to-blue-800 p-6">
83
- <h3 class="text-xl font-bold mb-3">3D Geometries</h3>
84
- <p class="text-sm mb-4">Mathematical representations of 3D shapes including vertices, edges, and faces. Common types include polygonal meshes, NURBS, and subdivision surfaces.</p>
85
  <div class="text-xs bg-blue-900 bg-opacity-50 p-2 rounded">
86
- <p><span class="font-bold">Key Elements:</span> Vertices, Edges, Faces, Normals</p>
87
- <p><span class="font-bold">Formats:</span> OBJ, FBX, STL, glTF</p>
88
  </div>
89
  </div>
90
  </div>
91
  </div>
92
 
93
- <!-- Flashcard 2 -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
  <div class="flashcard" onclick="flipCard(this)">
95
  <div class="flashcard-inner">
96
  <div class="flashcard-front bg-gradient-to-br from-purple-500 to-purple-700 flex flex-col items-center justify-center p-6">
 
97
  <i class="fas fa-desktop text-5xl mb-4"></i>
98
- <h2 class="text-2xl font-bold mb-2">Computer Graphics</h2>
99
- <p class="text-center text-purple-100">Click to reveal definition</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
100
  </div>
101
  <div class="flashcard-back bg-gradient-to-br from-purple-600 to-purple-800 p-6">
102
- <h3 class="text-xl font-bold mb-3">Computer Graphics</h3>
103
- <p class="text-sm mb-4">The field of visual computing where images and animations are generated using computers. Includes both 2D and 3D graphics, real-time rendering, and offline rendering.</p>
104
  <div class="text-xs bg-purple-900 bg-opacity-50 p-2 rounded">
105
- <p><span class="font-bold">Subfields:</span> Rendering, Animation, Modeling, Visualization</p>
106
- <p><span class="font-bold">APIs:</span> OpenGL, Vulkan, DirectX, WebGL</p>
107
  </div>
108
  </div>
109
  </div>
110
  </div>
111
 
112
- <!-- Flashcard 3 -->
113
  <div class="flashcard" onclick="flipCard(this)">
114
  <div class="flashcard-inner">
115
  <div class="flashcard-front bg-gradient-to-br from-green-500 to-green-700 flex flex-col items-center justify-center p-6">
 
116
  <i class="fas fa-brain text-5xl mb-4"></i>
117
- <h2 class="text-2xl font-bold mb-2">NeRFs</h2>
118
- <p class="text-center text-green-100">Click to reveal definition</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  </div>
120
  <div class="flashcard-back bg-gradient-to-br from-green-600 to-green-800 p-6">
121
- <h3 class="text-xl font-bold mb-3">Neural Radiance Fields (NeRFs)</h3>
122
- <p class="text-sm mb-4">A deep learning technique that represents 3D scenes as continuous volumetric functions using neural networks. Can synthesize novel views from sparse input images.</p>
123
  <div class="text-xs bg-green-900 bg-opacity-50 p-2 rounded">
124
- <p><span class="font-bold">Key Features:</span> View synthesis, Volume rendering, Neural networks</p>
125
- <p><span class="font-bold">Applications:</span> VR/AR, 3D reconstruction, Cinematography</p>
126
  </div>
127
  </div>
128
  </div>
129
  </div>
130
 
131
- <!-- Flashcard 4 -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
132
  <div class="flashcard" onclick="flipCard(this)">
133
  <div class="flashcard-inner">
134
  <div class="flashcard-front bg-gradient-to-br from-red-500 to-red-700 flex flex-col items-center justify-center p-6">
 
135
  <i class="fas fa-spray-can text-5xl mb-4"></i>
136
- <h2 class="text-2xl font-bold mb-2">Gaussian Splats</h2>
137
- <p class="text-center text-red-100">Click to reveal definition</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  </div>
139
  <div class="flashcard-back bg-gradient-to-br from-red-600 to-red-800 p-6">
140
- <h3 class="text-xl font-bold mb-3">Gaussian Splatting</h3>
141
- <p class="text-sm mb-4">A point-based rendering technique where each point is represented as a 3D Gaussian distribution. Enables high-quality rendering with efficient computation.</p>
142
  <div class="text-xs bg-red-900 bg-opacity-50 p-2 rounded">
143
- <p><span class="font-bold">Advantages:</span> Real-time rendering, High quality, Memory efficient</p>
144
- <p><span class="font-bold">Use Cases:</span> Large-scale scenes, Point cloud visualization</p>
145
  </div>
146
  </div>
147
  </div>
148
  </div>
149
 
150
- <!-- Flashcard 5 -->
151
  <div class="flashcard" onclick="flipCard(this)">
152
  <div class="flashcard-inner">
153
  <div class="flashcard-front bg-gradient-to-br from-yellow-500 to-yellow-700 flex flex-col items-center justify-center p-6">
 
154
  <i class="fas fa-bullseye text-5xl mb-4"></i>
155
  <h2 class="text-2xl font-bold mb-2">Ray Casting</h2>
156
- <p class="text-center text-yellow-100">Click to reveal definition</p>
157
  </div>
158
  <div class="flashcard-back bg-gradient-to-br from-yellow-600 to-yellow-800 p-6">
159
  <h3 class="text-xl font-bold mb-3">Ray Casting</h3>
160
- <p class="text-sm mb-4">A rendering technique that traces rays from the camera through each pixel to determine visible surfaces. The foundation for ray tracing algorithms.</p>
161
  <div class="text-xs bg-yellow-900 bg-opacity-50 p-2 rounded">
162
- <p><span class="font-bold">Characteristics:</span> Simple ray tracing, No secondary rays, Fast</p>
163
- <p><span class="font-bold">Applications:</span> Early 3D games, Medical imaging</p>
164
  </div>
165
  </div>
166
  </div>
167
  </div>
168
 
169
- <!-- Flashcard 6 -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
170
  <div class="flashcard" onclick="flipCard(this)">
171
  <div class="flashcard-inner">
172
  <div class="flashcard-front bg-gradient-to-br from-pink-500 to-pink-700 flex flex-col items-center justify-center p-6">
 
173
  <i class="fas fa-vial text-5xl mb-4"></i>
174
  <h2 class="text-2xl font-bold mb-2">Volume Rendering</h2>
175
- <p class="text-center text-pink-100">Click to reveal definition</p>
176
  </div>
177
  <div class="flashcard-back bg-gradient-to-br from-pink-600 to-pink-800 p-6">
178
  <h3 class="text-xl font-bold mb-3">Volume Rendering</h3>
179
- <p class="text-sm mb-4">Techniques for displaying 2D projections of 3D volumetric data sets, typically used for medical imaging, scientific visualization, and atmospheric data.</p>
180
  <div class="text-xs bg-pink-900 bg-opacity-50 p-2 rounded">
181
  <p><span class="font-bold">Methods:</span> Ray casting, Texture slicing, Shear-warp</p>
182
  <p><span class="font-bold">Data Types:</span> CT scans, MRI, Scientific simulations</p>
@@ -185,20 +390,97 @@
185
  </div>
186
  </div>
187
 
188
- <!-- Flashcard 7 -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
189
  <div class="flashcard" onclick="flipCard(this)">
190
  <div class="flashcard-inner">
191
  <div class="flashcard-front bg-gradient-to-br from-indigo-500 to-indigo-700 flex flex-col items-center justify-center p-6">
 
192
  <i class="fas fa-border-none text-5xl mb-4"></i>
193
  <h2 class="text-2xl font-bold mb-2">Rasterization</h2>
194
- <p class="text-center text-indigo-100">Click to reveal definition</p>
195
  </div>
196
  <div class="flashcard-back bg-gradient-to-br from-indigo-600 to-indigo-800 p-6">
197
  <h3 class="text-xl font-bold mb-3">Rasterization</h3>
198
- <p class="text-sm mb-4">The process of converting vector graphics (primitives like points, lines, triangles) into a raster image (pixels) for display on a screen.</p>
199
  <div class="text-xs bg-indigo-900 bg-opacity-50 p-2 rounded">
200
- <p><span class="font-bold">Features:</span> Real-time performance, Hardware accelerated, Common in GPUs</p>
201
  <p><span class="font-bold">Pipeline:</span> Vertex processing, Primitive assembly, Fragment processing</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
202
  </div>
203
  </div>
204
  </div>
@@ -214,7 +496,7 @@
214
 
215
  <script>
216
  let flippedCards = 0;
217
- const totalCards = 7;
218
 
219
  function flipCard(card) {
220
  if (!card.classList.contains('flipped')) {
 
49
  .floating {
50
  animation: float 3s ease-in-out infinite;
51
  }
52
+ .category-tag {
53
+ position: absolute;
54
+ top: 10px;
55
+ right: 10px;
56
+ font-size: 0.7rem;
57
+ padding: 2px 8px;
58
+ border-radius: 10px;
59
+ background-color: rgba(255,255,255,0.2);
60
+ }
61
  </style>
62
  </head>
63
  <body class="bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen text-white">
 
68
  3D Graphics Flashcards
69
  </h1>
70
  <p class="text-xl text-purple-200 max-w-2xl mx-auto">
71
+ Master computer graphics concepts through interactive learning
72
  </p>
73
  </header>
74
 
 
76
  <div class="w-full bg-gray-700 rounded-full h-4">
77
  <div id="progress" class="progress-bar h-4 rounded-full bg-gradient-to-r from-blue-400 to-purple-500" style="width: 0%"></div>
78
  </div>
79
+ <span id="progress-text" class="ml-4 font-bold">0/21</span>
80
  </div>
81
 
82
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
83
+ <!-- 3D Geometries Cards -->
84
  <div class="flashcard" onclick="flipCard(this)">
85
  <div class="flashcard-inner">
86
  <div class="flashcard-front bg-gradient-to-br from-blue-500 to-blue-700 flex flex-col items-center justify-center p-6">
87
+ <span class="category-tag">3D Geometries</span>
88
  <i class="fas fa-shapes text-5xl mb-4"></i>
89
+ <h2 class="text-2xl font-bold mb-2">Polygonal Mesh</h2>
90
+ <p class="text-center text-blue-100">Click to reveal details</p>
91
+ </div>
92
+ <div class="flashcard-back bg-gradient-to-br from-blue-600 to-blue-800 p-6">
93
+ <h3 class="text-xl font-bold mb-3">Polygonal Mesh</h3>
94
+ <p class="text-sm mb-4">A collection of vertices, edges and faces that defines the shape of a 3D object. Most common in real-time applications like games.</p>
95
+ <div class="text-xs bg-blue-900 bg-opacity-50 p-2 rounded">
96
+ <p><span class="font-bold">Elements:</span> Vertices, Edges, Polygons (usually triangles or quads)</p>
97
+ <p><span class="font-bold">Optimization:</span> Level of Detail (LOD), Normal maps</p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <div class="flashcard" onclick="flipCard(this)">
104
+ <div class="flashcard-inner">
105
+ <div class="flashcard-front bg-gradient-to-br from-blue-500 to-blue-700 flex flex-col items-center justify-center p-6">
106
+ <span class="category-tag">3D Geometries</span>
107
+ <i class="fas fa-project-diagram text-5xl mb-4"></i>
108
+ <h2 class="text-2xl font-bold mb-2">NURBS</h2>
109
+ <p class="text-center text-blue-100">Click to reveal details</p>
110
  </div>
111
  <div class="flashcard-back bg-gradient-to-br from-blue-600 to-blue-800 p-6">
112
+ <h3 class="text-xl font-bold mb-3">NURBS</h3>
113
+ <p class="text-sm mb-4">Non-Uniform Rational B-Splines are mathematical representations for modeling curves and surfaces in 3D space, offering precise control.</p>
114
  <div class="text-xs bg-blue-900 bg-opacity-50 p-2 rounded">
115
+ <p><span class="font-bold">Advantages:</span> Smooth surfaces, Precise control, Scalable</p>
116
+ <p><span class="font-bold">Uses:</span> Automotive design, Industrial modeling</p>
117
  </div>
118
  </div>
119
  </div>
120
  </div>
121
 
122
+ <div class="flashcard" onclick="flipCard(this)">
123
+ <div class="flashcard-inner">
124
+ <div class="flashcard-front bg-gradient-to-br from-blue-500 to-blue-700 flex flex-col items-center justify-center p-6">
125
+ <span class="category-tag">3D Geometries</span>
126
+ <i class="fas fa-sitemap text-5xl mb-4"></i>
127
+ <h2 class="text-2xl font-bold mb-2">Subdivision Surfaces</h2>
128
+ <p class="text-center text-blue-100">Click to reveal details</p>
129
+ </div>
130
+ <div class="flashcard-back bg-gradient-to-br from-blue-600 to-blue-800 p-6">
131
+ <h3 class="text-xl font-bold mb-3">Subdivision Surfaces</h3>
132
+ <p class="text-sm mb-4">A method of representing smooth surfaces by specifying a coarse control mesh and applying subdivision rules to create a smoother surface.</p>
133
+ <div class="text-xs bg-blue-900 bg-opacity-50 p-2 rounded">
134
+ <p><span class="font-bold">Types:</span> Catmull-Clark, Loop, Doo-Sabin</p>
135
+ <p><span class="font-bold">Used in:</span> Character modeling, Organic shapes</p>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Computer Graphics Cards -->
142
  <div class="flashcard" onclick="flipCard(this)">
143
  <div class="flashcard-inner">
144
  <div class="flashcard-front bg-gradient-to-br from-purple-500 to-purple-700 flex flex-col items-center justify-center p-6">
145
+ <span class="category-tag">Graphics</span>
146
  <i class="fas fa-desktop text-5xl mb-4"></i>
147
+ <h2 class="text-2xl font-bold mb-2">Rendering Pipeline</h2>
148
+ <p class="text-center text-purple-100">Click to reveal details</p>
149
+ </div>
150
+ <div class="flashcard-back bg-gradient-to-br from-purple-600 to-purple-800 p-6">
151
+ <h3 class="text-xl font-bold mb-3">Rendering Pipeline</h3>
152
+ <p class="text-sm mb-4">The sequence of steps that transforms 3D models into 2D images on the screen. Includes vertex processing, rasterization, and fragment processing.</p>
153
+ <div class="text-xs bg-purple-900 bg-opacity-50 p-2 rounded">
154
+ <p><span class="font-bold">Stages:</span> Vertex Shader, Primitive Assembly, Rasterization, Fragment Shader</p>
155
+ <p><span class="font-bold">Optimization:</span> Culling, Instancing, Batching</p>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="flashcard" onclick="flipCard(this)">
162
+ <div class="flashcard-inner">
163
+ <div class="flashcard-front bg-gradient-to-br from-purple-500 to-purple-700 flex flex-col items-center justify-center p-6">
164
+ <span class="category-tag">Graphics</span>
165
+ <i class="fas fa-lightbulb text-5xl mb-4"></i>
166
+ <h2 class="text-2xl font-bold mb-2">Shading Models</h2>
167
+ <p class="text-center text-purple-100">Click to reveal details</p>
168
+ </div>
169
+ <div class="flashcard-back bg-gradient-to-br from-purple-600 to-purple-800 p-6">
170
+ <h3 class="text-xl font-bold mb-3">Shading Models</h3>
171
+ <p class="text-sm mb-4">Mathematical models that determine how light interacts with surfaces. Common models include Lambertian, Phong, Blinn-Phong, and PBR.</p>
172
+ <div class="text-xs bg-purple-900 bg-opacity-50 p-2 rounded">
173
+ <p><span class="font-bold">Components:</span> Diffuse, Specular, Ambient, Emissive</p>
174
+ <p><span class="font-bold">Advanced:</span> Physically Based Rendering (PBR), Subsurface Scattering</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <div class="flashcard" onclick="flipCard(this)">
181
+ <div class="flashcard-inner">
182
+ <div class="flashcard-front bg-gradient-to-br from-purple-500 to-purple-700 flex flex-col items-center justify-center p-6">
183
+ <span class="category-tag">Graphics</span>
184
+ <i class="fas fa-layer-group text-5xl mb-4"></i>
185
+ <h2 class="text-2xl font-bold mb-2">Texturing</h2>
186
+ <p class="text-center text-purple-100">Click to reveal details</p>
187
  </div>
188
  <div class="flashcard-back bg-gradient-to-br from-purple-600 to-purple-800 p-6">
189
+ <h3 class="text-xl font-bold mb-3">Texturing</h3>
190
+ <p class="text-sm mb-4">The process of applying 2D images to 3D surfaces to add detail without increasing geometric complexity.</p>
191
  <div class="text-xs bg-purple-900 bg-opacity-50 p-2 rounded">
192
+ <p><span class="font-bold">Map Types:</span> Diffuse, Normal, Specular, Displacement</p>
193
+ <p><span class="font-bold">Techniques:</span> UV Mapping, Procedural Texturing, PBR Materials</p>
194
  </div>
195
  </div>
196
  </div>
197
  </div>
198
 
199
+ <!-- NeRFs Cards -->
200
  <div class="flashcard" onclick="flipCard(this)">
201
  <div class="flashcard-inner">
202
  <div class="flashcard-front bg-gradient-to-br from-green-500 to-green-700 flex flex-col items-center justify-center p-6">
203
+ <span class="category-tag">NeRFs</span>
204
  <i class="fas fa-brain text-5xl mb-4"></i>
205
+ <h2 class="text-2xl font-bold mb-2">NeRF Basics</h2>
206
+ <p class="text-center text-green-100">Click to reveal details</p>
207
+ </div>
208
+ <div class="flashcard-back bg-gradient-to-br from-green-600 to-green-800 p-6">
209
+ <h3 class="text-xl font-bold mb-3">NeRF Basics</h3>
210
+ <p class="text-sm mb-4">Neural Radiance Fields represent scenes as continuous 5D functions that output color and density given a 3D location and 2D viewing direction.</p>
211
+ <div class="text-xs bg-green-900 bg-opacity-50 p-2 rounded">
212
+ <p><span class="font-bold">Input:</span> 3D position + 2D viewing direction</p>
213
+ <p><span class="font-bold">Output:</span> RGB color + volume density</p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="flashcard" onclick="flipCard(this)">
220
+ <div class="flashcard-inner">
221
+ <div class="flashcard-front bg-gradient-to-br from-green-500 to-green-700 flex flex-col items-center justify-center p-6">
222
+ <span class="category-tag">NeRFs</span>
223
+ <i class="fas fa-bolt text-5xl mb-4"></i>
224
+ <h2 class="text-2xl font-bold mb-2">Instant-NGP</h2>
225
+ <p class="text-center text-green-100">Click to reveal details</p>
226
  </div>
227
  <div class="flashcard-back bg-gradient-to-br from-green-600 to-green-800 p-6">
228
+ <h3 class="text-xl font-bold mb-3">Instant-NGP</h3>
229
+ <p class="text-sm mb-4">Instant Neural Graphics Primitives use hash encoding and small MLPs to achieve real-time NeRF rendering with significantly faster training.</p>
230
  <div class="text-xs bg-green-900 bg-opacity-50 p-2 rounded">
231
+ <p><span class="font-bold">Key Features:</span> Hash grids, Multi-resolution, Real-time</p>
232
+ <p><span class="font-bold">Performance:</span> Seconds to minutes training time</p>
233
  </div>
234
  </div>
235
  </div>
236
  </div>
237
 
238
+ <div class="flashcard" onclick="flipCard(this)">
239
+ <div class="flashcard-inner">
240
+ <div class="flashcard-front bg-gradient-to-br from-green-500 to-green-700 flex flex-col items-center justify-center p-6">
241
+ <span class="category-tag">NeRFs</span>
242
+ <i class="fas fa-robot text-5xl mb-4"></i>
243
+ <h2 class="text-2xl font-bold mb-2">Dynamic NeRFs</h2>
244
+ <p class="text-center text-green-100">Click to reveal details</p>
245
+ </div>
246
+ <div class="flashcard-back bg-gradient-to-br from-green-600 to-green-800 p-6">
247
+ <h3 class="text-xl font-bold mb-3">Dynamic NeRFs</h3>
248
+ <p class="text-sm mb-4">Extensions of NeRFs that can model dynamic scenes with moving objects or changing viewpoints over time.</p>
249
+ <div class="text-xs bg-green-900 bg-opacity-50 p-2 rounded">
250
+ <p><span class="font-bold">Approaches:</span> Time-conditioned, Deformation fields, Latent codes</p>
251
+ <p><span class="font-bold">Applications:</span> Free-viewpoint video, VR/AR</p>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Gaussian Splatting Cards -->
258
  <div class="flashcard" onclick="flipCard(this)">
259
  <div class="flashcard-inner">
260
  <div class="flashcard-front bg-gradient-to-br from-red-500 to-red-700 flex flex-col items-center justify-center p-6">
261
+ <span class="category-tag">Splatting</span>
262
  <i class="fas fa-spray-can text-5xl mb-4"></i>
263
+ <h2 class="text-2xl font-bold mb-2">3D Gaussian Splats</h2>
264
+ <p class="text-center text-red-100">Click to reveal details</p>
265
+ </div>
266
+ <div class="flashcard-back bg-gradient-to-br from-red-600 to-red-800 p-6">
267
+ <h3 class="text-xl font-bold mb-3">3D Gaussian Splats</h3>
268
+ <p class="text-sm mb-4">Point-based representation where each point is an anisotropic 3D Gaussian with position, covariance, color and opacity attributes.</p>
269
+ <div class="text-xs bg-red-900 bg-opacity-50 p-2 rounded">
270
+ <p><span class="font-bold">Properties:</span> Position, Covariance, Color (SH), Opacity</p>
271
+ <p><span class="font-bold">Rendering:</span> Differentiable, Tile-based rasterization</p>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <div class="flashcard" onclick="flipCard(this)">
278
+ <div class="flashcard-inner">
279
+ <div class="flashcard-front bg-gradient-to-br from-red-500 to-red-700 flex flex-col items-center justify-center p-6">
280
+ <span class="category-tag">Splatting</span>
281
+ <i class="fas fa-sort-amount-up text-5xl mb-4"></i>
282
+ <h2 class="text-2xl font-bold mb-2">Splatting Pipeline</h2>
283
+ <p class="text-center text-red-100">Click to reveal details</p>
284
+ </div>
285
+ <div class="flashcard-back bg-gradient-to-br from-red-600 to-red-800 p-6">
286
+ <h3 class="text-xl font-bold mb-3">Splatting Pipeline</h3>
287
+ <p class="text-sm mb-4">The rendering process for Gaussian splats involves projecting 3D Gaussians to 2D, sorting them, and alpha-blending them back-to-front.</p>
288
+ <div class="text-xs bg-red-900 bg-opacity-50 p-2 rounded">
289
+ <p><span class="font-bold">Steps:</span> Projection, Tile assignment, Sorting, Blending</p>
290
+ <p><span class="font-bold">Optimization:</span> CUDA acceleration, Level of Detail</p>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <div class="flashcard" onclick="flipCard(this)">
297
+ <div class="flashcard-inner">
298
+ <div class="flashcard-front bg-gradient-to-br from-red-500 to-red-700 flex flex-col items-center justify-center p-6">
299
+ <span class="category-tag">Splatting</span>
300
+ <i class="fas fa-atom text-5xl mb-4"></i>
301
+ <h2 class="text-2xl font-bold mb-2">Splatting vs NeRF</h2>
302
+ <p class="text-center text-red-100">Click to reveal details</p>
303
  </div>
304
  <div class="flashcard-back bg-gradient-to-br from-red-600 to-red-800 p-6">
305
+ <h3 class="text-xl font-bold mb-3">Splatting vs NeRF</h3>
306
+ <p class="text-sm mb-4">Comparison between explicit (splatting) and implicit (NeRF) scene representations for novel view synthesis.</p>
307
  <div class="text-xs bg-red-900 bg-opacity-50 p-2 rounded">
308
+ <p><span class="font-bold">Splatting:</span> Explicit, Fast rendering, Large scenes</p>
309
+ <p><span class="font-bold">NeRF:</span> Implicit, High quality, View-dependent effects</p>
310
  </div>
311
  </div>
312
  </div>
313
  </div>
314
 
315
+ <!-- Ray Tracing Cards -->
316
  <div class="flashcard" onclick="flipCard(this)">
317
  <div class="flashcard-inner">
318
  <div class="flashcard-front bg-gradient-to-br from-yellow-500 to-yellow-700 flex flex-col items-center justify-center p-6">
319
+ <span class="category-tag">Ray Tracing</span>
320
  <i class="fas fa-bullseye text-5xl mb-4"></i>
321
  <h2 class="text-2xl font-bold mb-2">Ray Casting</h2>
322
+ <p class="text-center text-yellow-100">Click to reveal details</p>
323
  </div>
324
  <div class="flashcard-back bg-gradient-to-br from-yellow-600 to-yellow-800 p-6">
325
  <h3 class="text-xl font-bold mb-3">Ray Casting</h3>
326
+ <p class="text-sm mb-4">The most basic form of ray tracing that shoots rays from the camera through each pixel to find the nearest intersection with objects.</p>
327
  <div class="text-xs bg-yellow-900 bg-opacity-50 p-2 rounded">
328
+ <p><span class="font-bold">Characteristics:</span> Primary rays only, No reflections/refractions</p>
329
+ <p><span class="font-bold">Usage:</span> Early 3D games, Simple ray tracers</p>
330
  </div>
331
  </div>
332
  </div>
333
  </div>
334
 
335
+ <div class="flashcard" onclick="flipCard(this)">
336
+ <div class="flashcard-inner">
337
+ <div class="flashcard-front bg-gradient-to-br from-yellow-500 to-yellow-700 flex flex-col items-center justify-center p-6">
338
+ <span class="category-tag">Ray Tracing</span>
339
+ <i class="fas fa-mirror text-5xl mb-4"></i>
340
+ <h2 class="text-2xl font-bold mb-2">Recursive Ray Tracing</h2>
341
+ <p class="text-center text-yellow-100">Click to reveal details</p>
342
+ </div>
343
+ <div class="flashcard-back bg-gradient-to-br from-yellow-600 to-yellow-800 p-6">
344
+ <h3 class="text-xl font-bold mb-3">Recursive Ray Tracing</h3>
345
+ <p class="text-sm mb-4">Extension of ray casting that recursively traces secondary rays for reflections, refractions, and shadows to achieve more realistic images.</p>
346
+ <div class="text-xs bg-yellow-900 bg-opacity-50 p-2 rounded">
347
+ <p><span class="font-bold">Ray Types:</span> Primary, Shadow, Reflection, Refraction</p>
348
+ <p><span class="font-bold">Optimization:</span> Ray trees, Russian roulette</p>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="flashcard" onclick="flipCard(this)">
355
+ <div class="flashcard-inner">
356
+ <div class="flashcard-front bg-gradient-to-br from-yellow-500 to-yellow-700 flex flex-col items-center justify-center p-6">
357
+ <span class="category-tag">Ray Tracing</span>
358
+ <i class="fas fa-random text-5xl mb-4"></i>
359
+ <h2 class="text-2xl font-bold mb-2">Path Tracing</h2>
360
+ <p class="text-center text-yellow-100">Click to reveal details</p>
361
+ </div>
362
+ <div class="flashcard-back bg-gradient-to-br from-yellow-600 to-yellow-800 p-6">
363
+ <h3 class="text-xl font-bold mb-3">Path Tracing</h3>
364
+ <p class="text-sm mb-4">A Monte Carlo method for solving the rendering equation by randomly sampling light paths to simulate global illumination.</p>
365
+ <div class="text-xs bg-yellow-900 bg-opacity-50 p-2 rounded">
366
+ <p><span class="font-bold">Features:</span> Unbiased, Physically accurate, Slow convergence</p>
367
+ <p><span class="font-bold">Optimizations:</span> Importance sampling, Next event estimation</p>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- Volume Rendering Cards -->
374
  <div class="flashcard" onclick="flipCard(this)">
375
  <div class="flashcard-inner">
376
  <div class="flashcard-front bg-gradient-to-br from-pink-500 to-pink-700 flex flex-col items-center justify-center p-6">
377
+ <span class="category-tag">Volume</span>
378
  <i class="fas fa-vial text-5xl mb-4"></i>
379
  <h2 class="text-2xl font-bold mb-2">Volume Rendering</h2>
380
+ <p class="text-center text-pink-100">Click to reveal details</p>
381
  </div>
382
  <div class="flashcard-back bg-gradient-to-br from-pink-600 to-pink-800 p-6">
383
  <h3 class="text-xl font-bold mb-3">Volume Rendering</h3>
384
+ <p class="text-sm mb-4">Techniques for displaying 2D projections of 3D volumetric data sets, typically used for medical imaging and scientific visualization.</p>
385
  <div class="text-xs bg-pink-900 bg-opacity-50 p-2 rounded">
386
  <p><span class="font-bold">Methods:</span> Ray casting, Texture slicing, Shear-warp</p>
387
  <p><span class="font-bold">Data Types:</span> CT scans, MRI, Scientific simulations</p>
 
390
  </div>
391
  </div>
392
 
393
+ <div class="flashcard" onclick="flipCard(this)">
394
+ <div class="flashcard-inner">
395
+ <div class="flashcard-front bg-gradient-to-br from-pink-500 to-pink-700 flex flex-col items-center justify-center p-6">
396
+ <span class="category-tag">Volume</span>
397
+ <i class="fas fa-filter text-5xl mb-4"></i>
398
+ <h2 class="text-2xl font-bold mb-2">Transfer Functions</h2>
399
+ <p class="text-center text-pink-100">Click to reveal details</p>
400
+ </div>
401
+ <div class="flashcard-back bg-gradient-to-br from-pink-600 to-pink-800 p-6">
402
+ <h3 class="text-xl font-bold mb-3">Transfer Functions</h3>
403
+ <p class="text-sm mb-4">Mappings from scalar values in volume data to optical properties like color and opacity, crucial for meaningful visualization.</p>
404
+ <div class="text-xs bg-pink-900 bg-opacity-50 p-2 rounded">
405
+ <p><span class="font-bold">Types:</span> 1D, 2D, Multi-dimensional</p>
406
+ <p><span class="font-bold">Design:</span> Histogram-based, Interactive widgets</p>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="flashcard" onclick="flipCard(this)">
413
+ <div class="flashcard-inner">
414
+ <div class="flashcard-front bg-gradient-to-br from-pink-500 to-pink-700 flex flex-col items-center justify-center p-6">
415
+ <span class="category-tag">Volume</span>
416
+ <i class="fas fa-cut text-5xl mb-4"></i>
417
+ <h2 class="text-2xl font-bold mb-2">Isosurface Extraction</h2>
418
+ <p class="text-center text-pink-100">Click to reveal details</p>
419
+ </div>
420
+ <div class="flashcard-back bg-gradient-to-br from-pink-600 to-pink-800 p-6">
421
+ <h3 class="text-xl font-bold mb-3">Isosurface Extraction</h3>
422
+ <p class="text-sm mb-4">The process of extracting surfaces of constant value (isosurfaces) from volumetric data, typically using Marching Cubes algorithm.</p>
423
+ <div class="text-xs bg-pink-900 bg-opacity-50 p-2 rounded">
424
+ <p><span class="font-bold">Algorithms:</span> Marching Cubes, Marching Tetrahedra, Dual Contouring</p>
425
+ <p><span class="font-bold">Applications:</span> Medical imaging, CFD visualization</p>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <!-- Rasterization Cards -->
432
  <div class="flashcard" onclick="flipCard(this)">
433
  <div class="flashcard-inner">
434
  <div class="flashcard-front bg-gradient-to-br from-indigo-500 to-indigo-700 flex flex-col items-center justify-center p-6">
435
+ <span class="category-tag">Rasterization</span>
436
  <i class="fas fa-border-none text-5xl mb-4"></i>
437
  <h2 class="text-2xl font-bold mb-2">Rasterization</h2>
438
+ <p class="text-center text-indigo-100">Click to reveal details</p>
439
  </div>
440
  <div class="flashcard-back bg-gradient-to-br from-indigo-600 to-indigo-800 p-6">
441
  <h3 class="text-xl font-bold mb-3">Rasterization</h3>
442
+ <p class="text-sm mb-4">The process of converting vector graphics (points, lines, triangles) into a raster image (pixels) for display on a screen.</p>
443
  <div class="text-xs bg-indigo-900 bg-opacity-50 p-2 rounded">
 
444
  <p><span class="font-bold">Pipeline:</span> Vertex processing, Primitive assembly, Fragment processing</p>
445
+ <p><span class="font-bold">Optimizations:</span> Early Z, Hierarchical Z, Tile-based</p>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="flashcard" onclick="flipCard(this)">
452
+ <div class="flashcard-inner">
453
+ <div class="flashcard-front bg-gradient-to-br from-indigo-500 to-indigo-700 flex flex-col items-center justify-center p-6">
454
+ <span class="category-tag">Rasterization</span>
455
+ <i class="fas fa-cubes text-5xl mb-4"></i>
456
+ <h2 class="text-2xl font-bold mb-2">Z-Buffering</h2>
457
+ <p class="text-center text-indigo-100">Click to reveal details</p>
458
+ </div>
459
+ <div class="flashcard-back bg-gradient-to-br from-indigo-600 to-indigo-800 p-6">
460
+ <h3 class="text-xl font-bold mb-3">Z-Buffering</h3>
461
+ <p class="text-sm mb-4">A depth buffering technique that stores the depth of each pixel and only draws fragments that are closer than what's already stored.</p>
462
+ <div class="text-xs bg-indigo-900 bg-opacity-50 p-2 rounded">
463
+ <p><span class="font-bold">Advantages:</span> Simple, Handles arbitrary geometry</p>
464
+ <p><span class="font-bold">Variants:</span> W-buffer, Reverse Z, Floating-point Z</p>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <div class="flashcard" onclick="flipCard(this)">
471
+ <div class="flashcard-inner">
472
+ <div class="flashcard-front bg-gradient-to-br from-indigo-500 to-indigo-700 flex flex-col items-center justify-center p-6">
473
+ <span class="category-tag">Rasterization</span>
474
+ <i class="fas fa-sync-alt text-5xl mb-4"></i>
475
+ <h2 class="text-2xl font-bold mb-2">Deferred Shading</h2>
476
+ <p class="text-center text-indigo-100">Click to reveal details</p>
477
+ </div>
478
+ <div class="flashcard-back bg-gradient-to-br from-indigo-600 to-indigo-800 p-6">
479
+ <h3 class="text-xl font-bold mb-3">Deferred Shading</h3>
480
+ <p class="text-sm mb-4">A rendering technique that separates geometry processing from lighting calculations to handle many lights efficiently.</p>
481
+ <div class="text-xs bg-indigo-900 bg-opacity-50 p-2 rounded">
482
+ <p><span class="font-bold">Steps:</span> G-buffer creation, Light accumulation, Post-processing</p>
483
+ <p><span class="font-bold">Tradeoffs:</span> Memory intensive, No MSAA, Many lights</p>
484
  </div>
485
  </div>
486
  </div>
 
496
 
497
  <script>
498
  let flippedCards = 0;
499
+ const totalCards = 21;
500
 
501
  function flipCard(card) {
502
  if (!card.classList.contains('flipped')) {