AngularJS Binding to WebGL / Canvas

Question

I'm very green to AngularJS. I'm wondering if it's possible to use it when your view is using HTML5 Canvas or WebGL? If so, are there any good tutorials on how you go about this?

I've seen several games boast they are made using AngularJS, but I don't know if that is limited to their menus, leaderboards, and other dashboard elements.

(I wouldn't necessarily be using MVC in a game, but obviously you can do more than just games with Canvas and WebGL.)

Thanks!

Answer 1

EDIT: I made a full example of a WebGL directive using three.js with bindings to resize the object or change it's material type. Also, events such as window resizing and mouse moved:

• source: https://github.com/winkerVSbecks/angularWebglDirective
• demo: http://winkervsbecks.github.io/angularWebglDirective/

---

Yes this is very much possible. Beyond the menus, leaderboards, etc. you can wrap your canvas into a directive too.

1. The controller will setup the game state
2. Pass this state, loaded data from server and any other data you might have to the directive
3. Finally you init the canvas in the directives link function

I made this little app to help me with a school project: http://callmethey.herokuapp.com/polygons. This is the directive I use (with three.js for the canvas part):

app.directive('polygon', function() {
  return {
    restrict: 'A',
    scope: { 
      vertices: '=polygon',  
      color: '=color'
    },
    link: function(scope, element, attrs)
    {
      var camera, scene, renderer;
      var polygon;
      var targetRotation = 0;
      var targetYRotation = 0, targetXRotation = 0;
      var targetYRotationOnMouseDown = 0, targetXRotationOnMouseDown = 0;
      var mouseX = 0, mouseY = 0;
      var mouseXOnMouseDown = 0, mouseYOnMouseDown = 0;
      var width = $(element).width();
      var height = 200;
      var widthHalfX = width/2;
      var widthHalfY = height/2;

      init();

      function init() {
        // Setup scene
        camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 300;
        scene = new THREE.Scene();
        // Build Polygon
        var geometry =  new THREE.Geometry();
        angular.forEach(scope.vertices, function (v) {
          geometry.vertices.push( new THREE.Vector3( v.x, v.y, v.z ) );
        });
        geometry.faces.push( new THREE.Face3(0, 1, 2 ));
        THREE.GeometryUtils.center( geometry );
        // Push polygon to scene
        var material = new THREE.MeshBasicMaterial( { color: cols[scope.color], side: THREE.DoubleSide } );
        polygon = new THREE.Mesh( geometry, material );
        scene.add(polygon);
        renderer = new THREE.WebGLRenderer();
        renderer.setSize( width, height );
      }

     // ..... rest of the code truncated for readability
  };
});