Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Benchmarks | GraphicsLab</title> | |
| <link rel="icon" type="image/x-icon" href="https://static.photos/technology/32x32/2"> | |
| <link rel="stylesheet" href="style.css"> | |
| <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"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="mb-10"> | |
| <h1 class="text-4xl font-bold mb-4">Graphics Benchmarks</h1> | |
| <p class="text-gray-600">Run high‑end graphics performance tests and compare results with global data.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <div class="lg:col-span-2"> | |
| <div class="card mb-8"> | |
| <h2 class="text-2xl font-bold mb-4">Available Tests</h2> | |
| <div class="space-y-6"> | |
| <div class="test-item p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-xl font-bold">T‑Rex Shader</h3> | |
| <p class="text-gray-600">Procedural dinosaur with dynamic lighting and shadows.</p> | |
| <div class="mt-2 flex gap-2"> | |
| <span class="badge badge-webgl">WebGL 2</span> | |
| <span class="badge badge-hard">High</span> | |
| </div> | |
| </div> | |
| <button class="btn-primary" onclick="runBenchmark('trex')"> | |
| <i class="fas fa-play mr-2"></i> Run | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Estimated time: 5s</span> | |
| <span>GPU‑intensive</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="test-item p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-xl font-bold">Quantum Ray Tracing</h3> | |
| <p class="text-gray-600">Full‑scene path tracing with 1M rays per frame, global illumination, and volumetric fog.</p> | |
| <div class="mt-2 flex gap-2"> | |
| <span class="badge badge-webgpu">WebGPU</span> | |
| <span class="badge badge-hard">Extreme</span> | |
| <span class="badge" style="background:#1e1b4b;color:#c7d2fe;">Level 100</span> | |
| </div> | |
| </div> | |
| <button class="btn-primary" onclick="runBenchmark('quantum')"> | |
| <i class="fas fa-play mr-2"></i> Run | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Estimated time: 15s</span> | |
| <span>GPU‑melting</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="test-item p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-xl font-bold">Fluid Simulation</h3> | |
| <p class="text-gray-600">Real‑time fluid dynamics with 100k particles.</p> | |
| <div class="mt-2 flex gap-2"> | |
| <span class="badge badge-canvas">Canvas 2D</span> | |
| <span class="badge badge-medium">Medium</span> | |
| </div> | |
| </div> | |
| <button class="btn-primary" onclick="runBenchmark('fluid')"> | |
| <i class="fas fa-play mr-2"></i> Run | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Estimated time: 8s</span> | |
| <span>CPU‑intensive</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="test-item p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-xl font-bold">Ray Tracing</h3> | |
| <p class="text-gray-600">Path‑traced scene with soft shadows and reflections.</p> | |
| <div class="mt-2 flex gap-2"> | |
| <span class="badge badge-webgpu">WebGPU</span> | |
| <span class="badge badge-hard">High</span> | |
| </div> | |
| </div> | |
| <button class="btn-primary" onclick="runBenchmark('ray')"> | |
| <i class="fas fa-play mr-2"></i> Run | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Estimated time: 12s</span> | |
| <span>GPU‑bound</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="test-item p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-xl font-bold">Texture Compression</h3> | |
| <p class="text-gray-600">Batch compress 4K textures in‑browser.</p> | |
| <div class="mt-2 flex gap-2"> | |
| <span class="badge badge-webgl">WebGL 1</span> | |
| <span class="badge badge-easy">Low</span> | |
| </div> | |
| </div> | |
| <button class="btn-primary" onclick="runBenchmark('texture')"> | |
| <i class="fas fa-play mr-2"></i> Run | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Estimated time: 3s</span> | |
| <span>Memory‑intensive</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="test-item p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-xl font-bold">Neural Renderer</h3> | |
| <p class="text-gray-600">AI‑based real‑time neural rendering with 4K output and temporal upscaling.</p> | |
| <div class="mt-2 flex gap-2"> | |
| <span class="badge badge-webgpu">WebGPU</span> | |
| <span class="badge badge-hard">Extreme</span> | |
| <span class="badge" style="background:#581c87;color:#e9d5ff;">Level 100</span> | |
| </div> | |
| </div> | |
| <button class="btn-primary" onclick="runBenchmark('neural')"> | |
| <i class="fas fa-play mr-2"></i> Run | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Estimated time: 20s</span> | |
| <span>AI/GPU fusion</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2 class="text-2xl font-bold mb-4">Live Results</h2> | |
| <div class="h-80"> | |
| <canvas id="resultsChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="card mb-8"> | |
| <h2 class="text-2xl font-bold mb-4">Your System</h2> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">GPU Vendor</span> | |
| <span class="font-semibold" id="gpuVendor">Detecting...</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">WebGL Support</span> | |
| <span class="font-semibold" id="webglSupport">Checking...</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Screen Resolution</span> | |
| <span class="font-semibold" id="screenRes">—</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Browser</span> | |
| <span class="font-semibold" id="browserName">—</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Memory</span> | |
| <span class="font-semibold" id="memory">—</span> | |
| </div> | |
| </div> | |
| <button class="btn-outline w-full mt-6" onclick="detectHardware()"> | |
| <i class="fas fa-sync-alt mr-2"></i> Re‑detect | |
| </button> | |
| </div> | |
| <div class="card"> | |
| <h2 class="text-2xl font-bold mb-4">Global Ranking</h2> | |
| <p class="text-gray-600 mb-4">Average scores from other users (simulated)</p> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center p-3 bg-gray-50 rounded"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold mr-3">1</div> | |
| <div> | |
| <div class="font-semibold">High‑End Desktop</div> | |
| <div class="text-sm text-gray-500">RTX 4090, i9‑13900K</div> | |
| </div> | |
| </div> | |
| <div class="text-2xl font-bold text-green-600">12,540</div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 bg-gray-50 rounded"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold mr-3">2</div> | |
| <div> | |
| <div class="font-semibold">Gaming Laptop</div> | |
| <div class="text-sm text-gray-500">RTX 3070, Ryzen 7</div> | |
| </div> | |
| </div> | |
| <div class="text-2xl font-bold text-blue-600">9,820</div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 bg-gray-50 rounded"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-500 text-white flex items-center justify-center font-bold mr-3">3</div> | |
| <div> | |
| <div class="font-semibold">Integrated Graphics</div> | |
| <div class="text-sm text-gray-500">Intel Iris Xe</div> | |
| </div> | |
| </div> | |
| <div class="text-2xl font-bold text-yellow-600">4,310</div> | |
| </div> | |
| </div> | |
| <a href="compare.html" class="btn-primary w-full mt-6"> | |
| <i class="fas fa-chart-bar mr-2"></i> Compare Your Results | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| // Hardware detection | |
| function detectHardware() { | |
| const canvas = document.createElement('canvas'); | |
| const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); | |
| document.getElementById('gpuVendor').textContent = gl ? gl.getParameter(gl.VENDOR) || 'Unknown' : 'No WebGL'; | |
| document.getElementById('webglSupport').textContent = gl ? 'Yes' : 'No'; | |
| document.getElementById('screenRes').textContent = `${window.screen.width} × ${window.screen.height}`; | |
| document.getElementById('browserName').textContent = navigator.userAgent.split(' ')[0]; | |
| document.getElementById('memory').textContent = navigator.deviceMemory ? `${navigator.deviceMemory} GB` : 'Unknown'; | |
| showNotification('Hardware detection completed', 'success'); | |
| } | |
| // Run benchmark | |
| async function runBenchmark(test) { | |
| const button = event.target; | |
| const originalText = button.innerHTML; | |
| button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Running...'; | |
| button.disabled = true; | |
| // Adjust duration based on test | |
| const durations = { | |
| trex: 5000, | |
| fluid: 8000, | |
| ray: 12000, | |
| texture: 3000, | |
| quantum: 15000, | |
| neural: 20000 | |
| }; | |
| const duration = durations[test] || 5000; | |
| const result = await simulateBenchmark(test, duration); | |
| showNotification(`Benchmark "${test}" completed! Score: ${result.score} (Level ${result.level})`, 'success'); | |
| button.innerHTML = originalText; | |
| button.disabled = false; | |
| updateChart(); | |
| } | |
| // Update results chart | |
| function updateChart() { | |
| const ctx = document.getElementById('resultsChart').getContext('2d'); | |
| const results = window.graphicsLab.results; | |
| new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: results.map(r => r.test), | |
| datasets: [{ | |
| label: 'Score', | |
| data: results.map(r => r.score), | |
| backgroundColor: '#8b5cf6', | |
| borderColor: '#7c3aed', | |
| borderWidth: 2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { display: false } | |
| } | |
| } | |
| }); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| detectHardware(); | |
| updateChart(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |