Commits

Eric Fredricksen committed d11f737

Render a color-inverting reticule in GL, rather than with a image overlaying the canvas

  • Participants
  • Parent commits 889e080

Comments (0)

Files changed (5)

 Web Workers
 https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers
 http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast
+
+Color inversion for reticule
+http://stackoverflow.com/questions/3885247/inverted-colors-text-on-top-of-an-opengl-scene
 <script id="twodee-vs" type="x-shader/x-vertex">
   attribute vec2 aPosition;
   uniform vec2 uResolution;
-  uniform float uPointsize;
   void main() {
-    gl_PointSize = uPointsize;
-    vec2 reposition = 2.0 * aPosition * vec2(1,-1) / uResolution - 1.0;
+    vec2 reposition = (2.0 * aPosition / uResolution - 1.0) * vec2(1,-1);
     gl_Position = vec4(reposition, 0, 1);
   }
 </script>
   margin-top: 30%;
 }
 
-#reticule {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 24px;
-  height: 24px;
-  margin-top: -12px;
-  margin-left: -12px;
-}
-
 .logo {
   position: absolute;
   left: 50%;
   <div id="cancan">
     <canvas id="canvas" width="854" height="480"></canvas>
     <div id="hud" class="page">
-      <div id="reticule">
-        <img src="reticule.png" height="24" width="24"> 
-      </div>
       <div id="chat"><div id="clog">&nbsp;</div></div>
     </div>
     <div id="stats" class="page"></div>
 
 
 
-function drawScene(camera, showWireframe) {
+function drawScene(camera, showInterface) {
 
   RENDER_STAT.start();
 
   gl.mainShader.disuse();
 
   // Render block selection indicator
-  if (PICKED && showWireframe)
+  if (PICKED && showInterface)
     gl.wireframe.render();
 
+  // Render reticule
+  if (showInterface)
+    gl.reticule.render();
+
   RENDER_STAT.end();
 }
 
 }
 
 
+function Reticule() {
+  this.shader = new Shader('twodee');
+  
+  var cx = gl.viewportWidth / 2, cy = gl.viewportHeight / 2;
+  var s = 10;
+  var vertices = [ 
+    cx-s, cy, cx+s, cy,
+    cx, cy-s, cx, cy+s,
+  ];
+  this.aPosition = makeBuffer(vertices, 2);
+}
+
+Reticule.prototype.render = function () {
+  this.shader.use();
+
+  gl.uniform2f(this.shader.uniforms.uResolution, 
+               gl.viewportWidth, gl.viewportHeight);
+  gl.uniform4f(this.shader.uniforms.uColor, 1,1,1,1);
+
+  gl.lineWidth(2);
+
+  gl.blendFunc(gl.ONE_MINUS_DST_COLOR, gl.ZERO);
+  gl.enable(gl.BLEND);
+
+  pointToAttribute(this.shader, this, 'aPosition');
+  gl.drawArrays(gl.LINES, 0, this.aPosition.numItems);
+
+  gl.disable(gl.BLEND);
+
+  this.shader.disuse();
+}
+
 function Skybox(vs, fs) {
   this.shader = new Shader(vs, fs);
   this.buffer = makeBuffer([-1,-1, +1,-1, +1,+1, -1,+1], 2);
   HY = NY * SY;
 
   gl.wireframe = new Wireframe();
+  gl.reticule = new Reticule();
 
   // Create game
   GAME = new Game();

File reticule.acorn

Binary file removed.

File reticule.png

Removed
Old image