04-detect-webgl-support.html


<!DOCTYPE html>
<html>
<head>
    <title>three.js webgl - Detect WebGL Support</title>
    <meta charset="utf-8">
    <style>

        .big-message {
            width: 80%;
            height: auto;
            margin: 0 auto;
            padding: 5px;
            text-align: center;
            color: #33a933;
            font-family: serif;
            font-size: 40px;
        }

    </style>
</head>
<body>
 <div class="big-message" id="message">
 </div>
<script>
	window.addEventListener("DOMContentLoaded", function(event) {
        var hasGl = detectWebGL();
		if (hasGl) {
			document.getElementById("message").innerHTML = "Your browser supports WebGL";
		} else {
			document.getElementById("message").innerHTML = "Your browser NOT supports WebGL";
			document.getElementById("message").style.color = "red";
		}
    });


    function detectWebGL() {

        var testCanvas = document.createElement("canvas");
        var gl = null;
        try {
            gl = testCanvas.getContext("webgl", {antialias: false, depth: false });
        } catch (x) {
            gl = null;
        }
		if (gl==null) {
		
		    try {
				gl = testCanvas.getContext("experimental-webgl", {antialias: false, depth: false });
			} catch (x) {
				gl = null;
			}
		}
		
        if (gl) {
            return true;
        } else {
            return false;
        }
    }


</script>


</body>
</html>