jrrade's picture
Add 1 files
0e943d3 verified
<!DOCTYPE html>
<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>