<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta> <style> body { color: #6b6b6b; font-family: ubuntu, helvetica, arial, sans, sans-serif; } a { color: #3194d5; } @media (max-device-width: 480px) { #wrapper #support h1 { font-weight: bold; font-size: 20px; margin: 10px 0px; } #wrapper #support .webgl-div div { margin: 10px 10px; } #wrapper #support #logo-container { text-align: center; } #wrapper #support canvas { margin: 10px 0px 10px 0px; } #wrapper hr { margin: 10px 0px; } #wrapper #moreinfo { margin: 10px 0px 0px 0px; } } @media (min-device-width: 600px) { #wrapper #support h1 { font-weight: normal; font-size: 40px; margin: 40px 0px; } #wrapper #support { text-align: center; } #wrapper #support canvas { margin: 30px 0px 10px 0px; } #wrapper hr { margin: 40px 0px; } #wrapper { width: 600px; } #wrapper #moreinfo { width: 250px; margin: 0px 20px 0px 20px; float: left; } #wrapper #resources { width: 250px; height: 150px; margin: 0px 20px 0px 40px; float: left; } #wrapper #support .webgl-div div { margin: 20px 100px; } } #wrapper { margin: auto; } #wrapper hr { border-top: solid #e3e3e3; border-width: 1px 0px 0px 0px; height: 0px; } #wrapper #support h1 { color: #33a933; } #wrapper #resources div { font-size: 13px; } #wrapper #moreinfo div { font-size: 13px; } .webgl-hidden { display: none; } #webgl-browser-list { white-space: nowrap; } #hostedby, #hostedby a { clear: left; font-size: 12px; text-align: center; color: #e5e5e5; } </style> <script type="text/javascript" src="troubleshooting/DoNotCopyOrLinkThisFileElseYouWillNotGetAutoUpdatedHelpForYourUsers.js"></script> <script type="text/javascript" src="tdl/tdl-minified.js"></script> <script type="text/javascript" src="logo4.js"></script> <script type="text/javascript"> /**/ function $$(x) { return document.getElementById(x); } // Add indexOf to IE. if(!Array.indexOf){ Array.prototype.indexOf = function(obj){ for(var i=0; i<this.length; i++){ if(this[i]==obj){ return i; } } return -1; } } var canvas, gl; function launchLogo() { initializeLogo(canvas); } function log(msg) { var d = document.createElement("div"); d.appendChild(document.createTextNode(msg)); document.body.appendChild(d); } function removeClass(element, clas) { // Does not work in IE var classes = element.getAttribute("class"); var classes = element.className; if (classes) { var cs = classes.split(/\s+/); if (cs.indexOf(clas) != -1) { cs.splice(cs.indexOf(clas), 1); } // Does not work in IE element.setAttribute("class", cs.join(" ")); element.className = cs.join(" "); } } function addClass(element, clas) { element.className = element.className + " " + clas; } function pageLoaded() { removeClass($$("have-javascript"), "webgl-hidden"); addClass($$("no-javascript"), "webgl-hidden"); b = BrowserDetect; b.init(); canvas = document.getElementById("webgl-logo"); var ratio = (window.devicePixelRatio ? window.devicePixelRatio : 1); canvas.width = 140 * ratio; canvas.height = 150 * ratio; var experimental = false; try { gl = canvas.getContext("webgl"); } catch (x) { gl = null; } if (gl == null) { try { gl = canvas.getContext("experimental-webgl"); experimental = true; } catch (x) { gl = null; } } if (gl) { // hide/show phrase for webgl-experimental $$("webgl-experimental").style.display = experimental ? "auto" : "none"; // Set the support link to the correct URL for the browser. $$("support-link").href = b.urls.troubleshootingUrl; // show webgl supported div, and launch webgl demo removeClass($$("webgl-yes"), "webgl-hidden"); launchLogo(); } else if ("WebGLRenderingContext" in window) { // not a foolproof way to check if the browser // might actually support WebGL, but better than nothing removeClass($$("webgl-disabled"), "webgl-hidden"); // Do we know this browser? if (b.browser != "unknown") { // Yes. So show the known-browser message. removeClass($$("known-browser"), "webgl-hidden"); // Hide the unknonw-browser message. addClass($$("unknown-browser"), "webgl-hidden"); // Set the correct link for troubleshooting. $$("troubleshooting-link").href = b.urls.troubleshootingUrl; } } else { // Show the no webgl message. removeClass($$("webgl-no"), "webgl-hidden"); // Do we know the browser and can it be upgraded? if (b.browser != "unknown" && b.urls.upgradeUrl) { // Yes, show the browser and the upgrade link. $$("name").innerHTML = b.browser; $$("upgrade-link").href = b.urls.upgradeUrl; } else { // No, so only the link for browser for this platform. randomizeBrowsers(); addClass($$("upgrade-browser"), "webgl-hidden"); removeClass($$("get-browser"), "webgl-hidden"); $$("platform").innerHTML = b.platform; } } } function randomizeBrowsers() { var bl = $$("webgl-browser-list"); var browsers = []; var infos = b.platformInfo.browsers; for (var ii = 0; ii < infos.length; ++ii) { browsers.push({ info: infos[ii], weight: Math.random() }); } browsers = browsers.sort(function(a, b) { if (a.weight < b.weight) return -1; if (a.weight > b.weight) return 1; return 0; }); for (var ii = 0; ii < browsers.length; ++ii) { var info = browsers[ii].info; var div = document.createElement("p"); var a = document.createElement("a"); a.href = info.url; a.innerHTML = info.name; div.appendChild(a); bl.appendChild(div); } } // addEventListener does not work on IE7/8. window.onload = pageLoaded; </script> </head> <body> <div id="wrapper"> <div id="support"> <div class="webgl-hidden" id="have-javascript"> <div class="webgl-hidden webgl-div" id="webgl-yes"> <h1 class="good">Your browser supports WebGL</h1> <div id="webgl-experimental">However, it indicates that support is experimental; Not all WebGL functionality may be supported, and content may not run as expected.</div> <div>You should see a spinning cube. If you do not, please <a id="support-link">visit the support site for your browser</a>.</div> <div id="logo-container"> <canvas id="webgl-logo" style="width: 140px; height: 150px;" /></canvas> </div> </div> <div class="webgl-hidden webgl-div" id="webgl-disabled"> <p>Hmm. While your browser seems to support WebGL, it is disabled or unavailable. If possible, please ensure that you are running the latest drivers for your video card.</p> <p id="known-browser" class="webgl-hidden"><a id="troubleshooting-link" href="">For more help, please click this link</a>.</p> <p id="unknown-browser">For more help, please visit the support site for your browser.</p> </div> <div class="webgl-hidden webgl-div" id="webgl-no"> <p>Oh no! We are sorry, but your browser does not seem to support WebGL.</p> <div id="upgrade-browser"> <p><a id="upgrade-link" href="">You can upgrade <span id="name"></span> by clicking this link.</a></p> </div> <div id="get-browser" class="webgl-hidden"> <p>You may want to download one of the following browsers to view WebGL content.</p> <p>The following browsers support WebGL on <span id="platform"></span>:</p> <div id="webgl-browser-list"> </div> </div> </div> </div> <div id="no-javascript"> You must enable JavaScript to use WebGL. </div> </div> <hr /> <div id="resources"> <div>Check out some of the following links to learn more about WebGL and to find more web applications using WebGL.</div><br /> <div><a href="http://www.khronos.org/webgl/wiki/Main_Page">WebGL Wiki</a></div> </div> <div id="moreinfo"> <div>Want more information about WebGL?</div><br /> <div><a href="http://khronos.org/webgl">khronos.org/webgl</a></div> </div> <div id="hostedby">Hosted by <a href="https://www.digitalocean.com/?refcode=645028c23608">Digital Ocean</a></div> </div> </div> <script id="modelVertexShader" type="text/something-not-javascript"> uniform mat4 worldViewProjection; attribute vec4 position; void main() { gl_Position = (worldViewProjection * position); } </script> <script id="modelFragmentShader" type="text/something-not-javascript"> precision mediump float; void main() { gl_FragColor = vec4(0.4, 0.4, 0.4, 1.0); } </script> </body> </html>

CINXE.COM