Addind help text to examples.

benvanik · Apr 30, 2013 · 75bafb9 · 75bafb9
1 parent e67ba00
commit 75bafb9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -74,6 +74,14 @@ calibration tool and copy the value out.
 
 ### Reducing Latency
 
+#### Don't Overlap the WebGL Canvas
+
+If you place any other DOM element on top of the Canvas rendering your content
+you may cause extra browser compositing that can slow down your rendering.
+Since you have to draw your entire HUD/etc distored anyway, avoid placing
+any UI on top of the Canvas or adding any CSS effects to it
+(rounded corners, etc).
+
 #### Disable Aero on Windows
 
 This removes a frame of latency.

diff --git a/examples/rift_cube_demo.html b/examples/rift_cube_demo.html
@@ -6,20 +6,19 @@
     <script src="../third_party/gl-matrix/gl-matrix.js"></script>
     <script src="rift_cube_demo.js"></script>
     <style>
+      body {
+        margin: 0;
+      }
       #canvas {
-        position: absolute;
         left: 0;
         top: 0;
       }
-      #status {
-        position: absolute;
-        top: 800px;
-      }
     </style>
   </head>
   <body>
     <canvas id="canvas"></canvas>
     <div id="status"></div>
+    <div id="info">Move this window to your Rift (use the Windows key + arrows to get it there fast) then hit 'f' to make it fullscreen.</div>
 
     <script>
       launchDemo(

diff --git a/examples/threejs_boxes_demo.html b/examples/threejs_boxes_demo.html
@@ -16,15 +16,13 @@
 				font-family: arial;
 			}
 
+			#help {
+				position: absolute;
+				top: 800px;
+			}
 			#info {
 				position: absolute;
-				top: 0px; width: 100%;
-				padding: 5px;
-				-moz-user-select: none;
-				-webkit-user-select: none;
-				user-select: none;
-				color: white;
-				z-index: 1;
+				top: 820px;
 			}
 
 			canvas {
@@ -41,6 +39,7 @@
 		<script src="js/controls/OculusRiftControls.js"></script>
 		<script src="js/effects/OculusRiftEffect.js"></script>
 
+    <div id="help">Move this window to your Rift (use the Windows key + arrows to get it there fast) then hit 'f' to make it fullscreen.</div>
 		<div id="info">IPD: <span id='ipd'>0</span> (+o/-p)</div>
 
 		<script>