Phil 2.19.15

8:00 – 4:00 SR

  • Looks like the Angular/TypeScript/WebGL code will probably work on the production machines, based on preliminary tests. Next is to try a full deployment onto the test server. Will need:
    • Angular libraries (or just angular/angular.js)
    • threejs libraries (or just threejs/build/three.js)
    • Test code with assets (basically the whole AngularThreeTS directory
  • Updated month for truancy report. We really need to automate this. Also, Lenny wants an FY15 report.
  • Adding an overlay plane turned out to be pretty damn hard, basically because Angular doesn’t want this to be easy, I think. Anyway, here’s how it’s done:
  • Have a variable for your context. I don’t seem to need it, but I’ve grabbed the elements for the WebGL and overlay as well:
glElement:HTMLCanvasElement;
overlayElement:HTMLCanvasElement;
overlayContext:CanvasRenderingContext2D;
  • Set up the WebGLRenderer and the overlay. Note that I have to set attributes using the following styles:
.glContainer {
    position: absolute;
    z-index: 0;
}

.overlayContainer {
    position: absolute;
    z-index: 1;
}
  • Now use the styles to set up the elements:
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setClearColor(this.blackColor, 1);
this.renderer.setSize(this.contW, this.contH);

// element is provided by the angular directive
this.renderer.domElement.setAttribute("class", "glContainer");
this.glElement = this.myElements[0].appendChild(this.renderer.domElement);

//this.overlayNode = angular.element(divString);
this.overlayElement = document.createElement("canvas");
this.overlayElement.setAttribute("class", "overlayContainer");
this.myElements[0].appendChild(this.overlayElement);
this.overlayContext = this.overlayElement.getContext("2d");
  • The 3D and 2D rendering is then done as follows:
draw2D = (ctx:CanvasRenderingContext2D):void =>{
   var canvas:HTMLCanvasElement = ctx.canvas;
   canvas.width = this.contW;
   canvas.height = this.contH;
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.font = '12px "Times New Roman"';
   ctx.fillStyle = 'rgba( 255, 255, 255, 1)'; // Set the letter color
   ctx.fillText("Hello, framecount: "+this.frameCount, 10, 20);
};

render = ():void=> {
   // do the 3D rendering
   this.camera.lookAt(this.scene.position);
   this.renderer.render(this.scene, this.camera);
   this.frameCount++;

   this.draw2D(this.overlayContext);
};