Added info box and browser compatibility check to WebGL particle example.

c8a85ebf · alteredq · 54e3bc61 · c8a85ebf
隐藏空白更改
内联并排

Showing with 64 addition and 0 deletion

examples/particles_random_gl.html examples/particles_random_gl.html +64 -0

未找到文件。
--- a/examples/particles_random_gl.html
+++ b/examples/particles_random_gl.html
@@ -8,19 +8,71 @@
 				background-color: #000000;
 				margin: 0px;
 				overflow: hidden;
+                font-family:Monospace;
+                font-size:13px;
+                text-align:center;
+                font-weight: bold;
+				text-align:center;
 			}

 			a {
 				color:#0078ff;
 			}
+			
+            #info {
+				color:#fff;
+                position: absolute;
+                top: 0px; width: 100%;
+                padding: 5px;
+				z-index:100;
+				
+            }
+			
+			#oldie {
+				font-family:monospace;
+				font-size:13px;
+
+				text-align:center;
+				background:#eee;
+				color:#000;
+				padding:1em;
+
+				width:475px;
+				margin:5em auto 0;
+
+				display:none;
+			}
+			
 		</style>
 	</head>
 	<body>
+	
+        <div id="info">
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particles example
+		</div>
+
+		<center>
+		<div id="oldie">
+			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
+			and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
+			<br/>
+			Please try in
+			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
+			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
+			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
+		</div>
+		</center>

 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>

 		<script type="text/javascript">
+		
+			if ( !is_browser_compatible() ) {
+
+				document.getElementById( "oldie" ).style.display = "block";
+
+			}

 			var container, stats;
 			var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color;
@@ -152,6 +204,18 @@
 				stats.update();
 			}

+			function is_browser_compatible() {
+
+				// WebGL support
+
+				try { var test = new Float32Array(1); } catch(e) { return false; }
+
+				// Web workers
+
+				return !!window.Worker;
+
+			}
+
 		</script>
 	</body>
 </html>