Test your browser's WebGL 1.0 and WebGL 2.0 support. Instantly view GPU hardware details, maximum texture sizes, and a complete list of supported WebGL extensions.
AI Generation Prompt
WebGL Capability & Feature Inspector
Overview
A clean, high-performance, single-file browser utility that probes the WebGL API to provide a comprehensive report on the user's graphics hardware capabilities. This tool is built specifically for web developers and graphics engineers to quickly debug environment-specific issues without needing to write custom debugging code.
Core Feature Set
- Context Detection: Automatically attempts to initialize both
webgl(v1) andwebgl2(v2) contexts. - System Info Extraction: Displays the Vendor, Renderer (GPU model), and Unmasked Vendor/Renderer info via the
WEBGL_debug_renderer_infoextension. - Parameter Inspector: A searchable table of all WebGL parameters (e.g.,
MAX_TEXTURE_SIZE,MAX_VERTEX_ATTRIBS,MAX_COMBINED_TEXTURE_IMAGE_UNITS). - Extension Catalog: A filterable list of all supported extensions, displayed with status badges.
- Quick-Export: A one-click button to copy the entire raw JSON capability report to the clipboard for bug reports.
UI/UX Specification
- Layout:
- Header: Title and a status indicator (Green/Amber/Red) indicating WebGL availability.
- Dashboard: Three primary cards: 'System Overview', 'Hardware Limits', and 'Supported Extensions'.
- Controls: A search bar to filter through extensions and parameters.
- Aesthetic:
- Theme: Clean, light-mode only. Use
#f8fafc(slate-50) for background,#fffffffor cards, and#334155(slate-700) for text. - Typography: Sans-serif (Inter or system-ui) for readability.
- Interactions: Subtle box-shadow transitions on hover and smooth CSS fade-in animations for the extension list.
- Theme: Clean, light-mode only. Use
Technical Implementation Constraints
- Architecture: Must be a single index.html file. All CSS must be inside a
<style>block; all JS must be in a<script>block. - Storage: STRICTLY FORBIDDEN. Do not use
localStorage,sessionStorage, or cookies. The app must derive state purely from API calls. - Dependencies: May use Tailwind CSS via CDN for rapid styling and a lightweight icon library (e.g., Lucide or Heroicons) via CDN.
- Iframe Compatibility: The code must be self-contained and not attempt to access
window.topor any external cross-origin APIs. It must work inside aniframewith thesandbox="allow-scripts"attribute. - Error Handling: Gracefully handle browsers where WebGL is completely disabled, displaying a user-friendly troubleshooting guide instead of breaking.
Color Palette (Light Mode)
- Primary:
#2563eb(Blue-600) for primary buttons and accents. - Background:
#f8fafc(Slate-50). - Card Background:
#ffffff(White). - Border:
#e2e8f0(Slate-200). - Text:
#1e293b(Slate-800).
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is the purpose of this WebGL capability checker?
This tool is designed to provide developers, designers, and users with a comprehensive snapshot of their browser's 3D graphics capabilities. It probes the browser to determine whether WebGL 1.0 or WebGL 2.0 is supported and exposes critical hardware information provided by your graphics card via the browser. By running this analysis, you can debug graphics rendering issues, ensure compatibility for 3D web applications, and verify that hardware acceleration is correctly enabled in your current browser session.
Does this tool store my hardware information?
No. This tool operates entirely on a client-side basis within your web browser. It does not possess any server-side components to log, track, or store your hardware configuration, IP address, or session data. All data processing happens locally in the volatile memory of your browser tab. Once you close the tab or refresh the page, all information retrieved about your graphics environment is instantly cleared and destroyed, ensuring your privacy is maintained.
What should I do if WebGL reports as unsupported?
If this tool indicates that WebGL is not supported, it typically means your browser has hardware acceleration disabled or your GPU drivers are outdated. First, check your browser's settings menu to ensure that 'Use hardware acceleration when available' is toggled to the 'on' position. After ensuring the setting is enabled, consider updating your computer's graphics drivers to the latest version provided by the manufacturer (NVIDIA, AMD, or Intel). If you are running this inside a virtual machine or a restricted container, ensure the host environment allows for pass-through graphics acceleration.
Why is the list of WebGL extensions important?
WebGL extensions are optional features that allow the browser to access advanced graphics functionality not included in the core WebGL specification. Different browsers and GPU hardware support different sets of these extensions, which are crucial for high-performance rendering tasks like complex shadows, advanced texture compression, or floating-point depth buffers. Developers use this list to implement feature detection logic. By checking if a specific extension is available, an application can gracefully degrade its visuals for browsers with less capable hardware while providing a premium experience on modern, high-end machines.
