Commits

Brian McKenna committed 4449c15

Add license message, WebGL detector, resize for different aspects

Comments (0)

Files changed (1)

         margin: 0;
         padding: 0;
         overflow: hidden;
+        font-family: sans-serif;
         background-image: -webkit-gradient(
           linear, 0 100%, 2% 0,
           color-stop(0, #121212),
         background-image: url(opera-house.png);
         opacity: 0;
       }
+      footer {
+        z-index: 1;
+        background: #FFF;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 3em;
+        line-height: 3em;
+        vertical-align: middle;
+      }
+      .cc-text a {
+        color: #77A2D9;
+      }
+      .cc-text {
+        float: right;
+        padding-right: 1em;
+      }
+      .cc-logo {
+        float: left;
+        padding-left: 1em;
+      }
+      .cc-logo img {
+        border-width: 0;
+        vertical-align: middle;
+      }
+      #webgl-disabled {
+        padding: 1em;
+        background: #FFF;
+        font-size: 2em;
+        color: #F00;
+        position: absolute;
+        height: 100%;
+      }
     </style>
   </head>
   <body>
+    <footer>
+      <div class="cc-logo"><a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a></div>
+      <div class="cc-text">This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.</div>
+    </footer>
     <div id="content"></div>
-    <div class="floater" id="devday">&nbsp;</div>
-    <div class="floater" id="operahouse">&nbsp;</div>
-    </div>
+    <div class="floater" id="devday"></div>
+    <div class="floater" id="operahouse"></div>
+    <div id="webgl-disabled">You need to have WebGL enabled to view this HTML5 x GDD entry!</div>
     <script>
       (function() {
+        // Detect WebGL
+        if(!window.WebGLRenderingContext) {
+          return;
+        }
+        try {
+          document.createElement('canvas').getContext('experimental-webgl');
+        } catch(e) {
+          return;
+        }
+        document.body.removeChild(document.getElementById('webgl-disabled'));
+
+        // Create the scene
         var camera = new THREE.Camera(50, window.innerWidth / window.innerHeight, 1, 10000);
-        camera.position.z = 17;
+        var distance = 27;
+
+        var rezoom = function() {
+          camera.position.z = distance / (window.innerWidth / window.innerHeight);
+        };
+        rezoom();
 
         var scene = new THREE.Scene();
 
         var renderer = new THREE.WebGLRenderer();
         renderer.setSize(window.innerWidth, window.innerHeight);
         window.addEventListener('resize', function() {
-           camera.aspect = window.innerWidth / window.innerHeight;
-           camera.updateProjectionMatrix();
-           renderer.setSize(window.innerWidth, window.innerHeight);
+          camera.aspect = window.innerWidth / window.innerHeight;
+          camera.updateProjectionMatrix();
+          renderer.setSize(window.innerWidth, window.innerHeight);
+          rezoom();
         }, false);
         document.getElementById('content').appendChild(renderer.domElement);