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

Answer 1

Another technique is to encapsulate the WebGL scene as a factory and expose access to the 3D scene to the module via the returned factory API. One advantage of this approach is that you can inject the scene into any other Controller or Directive. Factories in Angular are singletons so there is only 1 copy of the 3D scene floating around.

This encapsulation method also allows you to isolate both the 3D scene-logic from your application-logic.

You should be able to use MOST pre-existing WebGL code as long as you init the factory via the exposed Factory API. To do this, copy all your 3D scene code into a factory and then call an init function of the injected 3D factory from your controller to initialize rendering.

• 3D tic-tac-toe Demo
• Github repo

I used directives to on the canvas element to define the scene interaction. Click, marquee, keypress, events.