Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Graphics Flashcards</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .flashcard { | |
| perspective: 1000px; | |
| width: 100%; | |
| height: 300px; | |
| } | |
| .flashcard-inner { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .flashcard.flipped .flashcard-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .flashcard-front, .flashcard-back { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| backface-visibility: hidden; | |
| border-radius: 15px; | |
| padding: 20px; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .flashcard-back { | |
| transform: rotateY(180deg); | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .category-tag { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| font-size: 0.7rem; | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| background-color: rgba(255,255,255,0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen text-white"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4"> | |
| <i class="fas fa-cube mr-3 text-purple-300 floating"></i> | |
| 3D Graphics Flashcards | |
| </h1> | |
| <p class="text-xl text-purple-200 max-w-2xl mx-auto"> | |
| Master computer graphics concepts through interactive learning | |
| </p> | |
| </header> | |
| <div class="flex justify-between items-center mb-8 max-w-2xl mx-auto"> | |
| <div class="w-full bg-gray-700 rounded-full h-4"> | |
| <div id="progress" class="progress-bar h-4 rounded-full bg-gradient-to-r from-blue-400 to-purple-500" style="width: 0%"></div> | |
| </div> | |
| <span id="progress-text" class="ml-4 font-bold">0/21</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"> | |
| <!-- 3D Geometries Cards --> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-blue-500 to-blue-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">3D Geometries</span> | |
| <i class="fas fa-shapes text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Polygonal Mesh</h2> | |
| <p class="text-center text-blue-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-blue-600 to-blue-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Polygonal Mesh</h3> | |
| <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> | |
| <div class="text-xs bg-blue-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Elements:</span> Vertices, Edges, Polygons (usually triangles or quads)</p> | |
| <p><span class="font-bold">Optimization:</span> Level of Detail (LOD), Normal maps</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-blue-500 to-blue-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">3D Geometries</span> | |
| <i class="fas fa-project-diagram text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">NURBS</h2> | |
| <p class="text-center text-blue-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-blue-600 to-blue-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">NURBS</h3> | |
| <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> | |
| <div class="text-xs bg-blue-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Advantages:</span> Smooth surfaces, Precise control, Scalable</p> | |
| <p><span class="font-bold">Uses:</span> Automotive design, Industrial modeling</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-blue-500 to-blue-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">3D Geometries</span> | |
| <i class="fas fa-sitemap text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Subdivision Surfaces</h2> | |
| <p class="text-center text-blue-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-blue-600 to-blue-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Subdivision Surfaces</h3> | |
| <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> | |
| <div class="text-xs bg-blue-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Types:</span> Catmull-Clark, Loop, Doo-Sabin</p> | |
| <p><span class="font-bold">Used in:</span> Character modeling, Organic shapes</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Computer Graphics Cards --> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-purple-500 to-purple-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Graphics</span> | |
| <i class="fas fa-desktop text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Rendering Pipeline</h2> | |
| <p class="text-center text-purple-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-purple-600 to-purple-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Rendering Pipeline</h3> | |
| <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> | |
| <div class="text-xs bg-purple-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Stages:</span> Vertex Shader, Primitive Assembly, Rasterization, Fragment Shader</p> | |
| <p><span class="font-bold">Optimization:</span> Culling, Instancing, Batching</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-purple-500 to-purple-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Graphics</span> | |
| <i class="fas fa-lightbulb text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Shading Models</h2> | |
| <p class="text-center text-purple-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-purple-600 to-purple-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Shading Models</h3> | |
| <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> | |
| <div class="text-xs bg-purple-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Components:</span> Diffuse, Specular, Ambient, Emissive</p> | |
| <p><span class="font-bold">Advanced:</span> Physically Based Rendering (PBR), Subsurface Scattering</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-purple-500 to-purple-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Graphics</span> | |
| <i class="fas fa-layer-group text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Texturing</h2> | |
| <p class="text-center text-purple-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-purple-600 to-purple-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Texturing</h3> | |
| <p class="text-sm mb-4">The process of applying 2D images to 3D surfaces to add detail without increasing geometric complexity.</p> | |
| <div class="text-xs bg-purple-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Map Types:</span> Diffuse, Normal, Specular, Displacement</p> | |
| <p><span class="font-bold">Techniques:</span> UV Mapping, Procedural Texturing, PBR Materials</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- NeRFs Cards --> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-green-500 to-green-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">NeRFs</span> | |
| <i class="fas fa-brain text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">NeRF Basics</h2> | |
| <p class="text-center text-green-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-green-600 to-green-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">NeRF Basics</h3> | |
| <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> | |
| <div class="text-xs bg-green-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Input:</span> 3D position + 2D viewing direction</p> | |
| <p><span class="font-bold">Output:</span> RGB color + volume density</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-green-500 to-green-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">NeRFs</span> | |
| <i class="fas fa-bolt text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Instant-NGP</h2> | |
| <p class="text-center text-green-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-green-600 to-green-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Instant-NGP</h3> | |
| <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> | |
| <div class="text-xs bg-green-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Key Features:</span> Hash grids, Multi-resolution, Real-time</p> | |
| <p><span class="font-bold">Performance:</span> Seconds to minutes training time</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-green-500 to-green-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">NeRFs</span> | |
| <i class="fas fa-robot text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Dynamic NeRFs</h2> | |
| <p class="text-center text-green-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-green-600 to-green-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Dynamic NeRFs</h3> | |
| <p class="text-sm mb-4">Extensions of NeRFs that can model dynamic scenes with moving objects or changing viewpoints over time.</p> | |
| <div class="text-xs bg-green-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Approaches:</span> Time-conditioned, Deformation fields, Latent codes</p> | |
| <p><span class="font-bold">Applications:</span> Free-viewpoint video, VR/AR</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gaussian Splatting Cards --> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-red-500 to-red-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Splatting</span> | |
| <i class="fas fa-spray-can text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">3D Gaussian Splats</h2> | |
| <p class="text-center text-red-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-red-600 to-red-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">3D Gaussian Splats</h3> | |
| <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> | |
| <div class="text-xs bg-red-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Properties:</span> Position, Covariance, Color (SH), Opacity</p> | |
| <p><span class="font-bold">Rendering:</span> Differentiable, Tile-based rasterization</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-red-500 to-red-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Splatting</span> | |
| <i class="fas fa-sort-amount-up text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Splatting Pipeline</h2> | |
| <p class="text-center text-red-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-red-600 to-red-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Splatting Pipeline</h3> | |
| <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> | |
| <div class="text-xs bg-red-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Steps:</span> Projection, Tile assignment, Sorting, Blending</p> | |
| <p><span class="font-bold">Optimization:</span> CUDA acceleration, Level of Detail</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-red-500 to-red-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Splatting</span> | |
| <i class="fas fa-atom text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Splatting vs NeRF</h2> | |
| <p class="text-center text-red-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-red-600 to-red-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Splatting vs NeRF</h3> | |
| <p class="text-sm mb-4">Comparison between explicit (splatting) and implicit (NeRF) scene representations for novel view synthesis.</p> | |
| <div class="text-xs bg-red-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Splatting:</span> Explicit, Fast rendering, Large scenes</p> | |
| <p><span class="font-bold">NeRF:</span> Implicit, High quality, View-dependent effects</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ray Tracing Cards --> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-yellow-500 to-yellow-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Ray Tracing</span> | |
| <i class="fas fa-bullseye text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Ray Casting</h2> | |
| <p class="text-center text-yellow-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-yellow-600 to-yellow-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Ray Casting</h3> | |
| <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> | |
| <div class="text-xs bg-yellow-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Characteristics:</span> Primary rays only, No reflections/refractions</p> | |
| <p><span class="font-bold">Usage:</span> Early 3D games, Simple ray tracers</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-yellow-500 to-yellow-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Ray Tracing</span> | |
| <i class="fas fa-mirror text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Recursive Ray Tracing</h2> | |
| <p class="text-center text-yellow-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-yellow-600 to-yellow-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Recursive Ray Tracing</h3> | |
| <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> | |
| <div class="text-xs bg-yellow-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Ray Types:</span> Primary, Shadow, Reflection, Refraction</p> | |
| <p><span class="font-bold">Optimization:</span> Ray trees, Russian roulette</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-yellow-500 to-yellow-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Ray Tracing</span> | |
| <i class="fas fa-random text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Path Tracing</h2> | |
| <p class="text-center text-yellow-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-yellow-600 to-yellow-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Path Tracing</h3> | |
| <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> | |
| <div class="text-xs bg-yellow-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Features:</span> Unbiased, Physically accurate, Slow convergence</p> | |
| <p><span class="font-bold">Optimizations:</span> Importance sampling, Next event estimation</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Volume Rendering Cards --> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-pink-500 to-pink-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Volume</span> | |
| <i class="fas fa-vial text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Volume Rendering</h2> | |
| <p class="text-center text-pink-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-pink-600 to-pink-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Volume Rendering</h3> | |
| <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> | |
| <div class="text-xs bg-pink-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Methods:</span> Ray casting, Texture slicing, Shear-warp</p> | |
| <p><span class="font-bold">Data Types:</span> CT scans, MRI, Scientific simulations</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-pink-500 to-pink-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Volume</span> | |
| <i class="fas fa-filter text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Transfer Functions</h2> | |
| <p class="text-center text-pink-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-pink-600 to-pink-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Transfer Functions</h3> | |
| <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> | |
| <div class="text-xs bg-pink-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Types:</span> 1D, 2D, Multi-dimensional</p> | |
| <p><span class="font-bold">Design:</span> Histogram-based, Interactive widgets</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-pink-500 to-pink-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Volume</span> | |
| <i class="fas fa-cut text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Isosurface Extraction</h2> | |
| <p class="text-center text-pink-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-pink-600 to-pink-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Isosurface Extraction</h3> | |
| <p class="text-sm mb-4">The process of extracting surfaces of constant value (isosurfaces) from volumetric data, typically using Marching Cubes algorithm.</p> | |
| <div class="text-xs bg-pink-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Algorithms:</span> Marching Cubes, Marching Tetrahedra, Dual Contouring</p> | |
| <p><span class="font-bold">Applications:</span> Medical imaging, CFD visualization</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Rasterization Cards --> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-indigo-500 to-indigo-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Rasterization</span> | |
| <i class="fas fa-border-none text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Rasterization</h2> | |
| <p class="text-center text-indigo-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-indigo-600 to-indigo-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Rasterization</h3> | |
| <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> | |
| <div class="text-xs bg-indigo-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Pipeline:</span> Vertex processing, Primitive assembly, Fragment processing</p> | |
| <p><span class="font-bold">Optimizations:</span> Early Z, Hierarchical Z, Tile-based</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-indigo-500 to-indigo-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Rasterization</span> | |
| <i class="fas fa-cubes text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Z-Buffering</h2> | |
| <p class="text-center text-indigo-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-indigo-600 to-indigo-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Z-Buffering</h3> | |
| <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> | |
| <div class="text-xs bg-indigo-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Advantages:</span> Simple, Handles arbitrary geometry</p> | |
| <p><span class="font-bold">Variants:</span> W-buffer, Reverse Z, Floating-point Z</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flashcard" onclick="flipCard(this)"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-gradient-to-br from-indigo-500 to-indigo-700 flex flex-col items-center justify-center p-6"> | |
| <span class="category-tag">Rasterization</span> | |
| <i class="fas fa-sync-alt text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Deferred Shading</h2> | |
| <p class="text-center text-indigo-100">Click to reveal details</p> | |
| </div> | |
| <div class="flashcard-back bg-gradient-to-br from-indigo-600 to-indigo-800 p-6"> | |
| <h3 class="text-xl font-bold mb-3">Deferred Shading</h3> | |
| <p class="text-sm mb-4">A rendering technique that separates geometry processing from lighting calculations to handle many lights efficiently.</p> | |
| <div class="text-xs bg-indigo-900 bg-opacity-50 p-2 rounded"> | |
| <p><span class="font-bold">Steps:</span> G-buffer creation, Light accumulation, Post-processing</p> | |
| <p><span class="font-bold">Tradeoffs:</span> Memory intensive, No MSAA, Many lights</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button onclick="resetAllCards()" class="bg-white text-purple-900 px-6 py-3 rounded-full font-bold hover:bg-purple-100 transition-all shadow-lg"> | |
| <i class="fas fa-sync-alt mr-2"></i> Reset All Cards | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| let flippedCards = 0; | |
| const totalCards = 21; | |
| function flipCard(card) { | |
| if (!card.classList.contains('flipped')) { | |
| flippedCards++; | |
| updateProgress(); | |
| } | |
| card.classList.toggle('flipped'); | |
| } | |
| function resetAllCards() { | |
| document.querySelectorAll('.flashcard').forEach(card => { | |
| card.classList.remove('flipped'); | |
| }); | |
| flippedCards = 0; | |
| updateProgress(); | |
| } | |
| function updateProgress() { | |
| const progress = (flippedCards / totalCards) * 100; | |
| document.getElementById('progress').style.width = `${progress}%`; | |
| document.getElementById('progress-text').textContent = `${flippedCards}/${totalCards}`; | |
| } | |
| // Add hover effects to all cards | |
| document.querySelectorAll('.flashcard').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| if (!this.classList.contains('flipped')) { | |
| this.style.transform = 'translateY(-5px)'; | |
| } | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=jrrade/3d-geometry-flashcards" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |