Merge pull request #5 from amenadiel/canvasrenderer

Canvas Renderer

Author: aemkei

examples/index.html

@@ -24,11 +24,6 @@
 
       function init() {
 
-        if (!Detector.webgl) {
-          Detector.addGetWebGLMessage();
-          return;
-        }
-
         var container = document.getElementById('map-div');
 
         var map = new google.maps.Map(container, {
@@ -39,8 +34,33 @@
           styles: styles
         });
 
+        // if you add renderertype:'Canvas' to the options for ThreejsLayer, you can force the usage of CanvasRenderer
         new ThreejsLayer({ map: map }, function(layer){
 
+          if (layer.renderertype=='Canvas' || !Detector.webgl) {
+            texture = new THREE.Texture(generateSprite());
+            particles = new THREE.Object3D();
+            material = new THREE.SpriteMaterial({
+              size: 20,
+              map: texture,
+              opacity: 1,
+              blending: THREE.NormalBlending,
+              depthTest: false,
+              transparent: true
+            });
+            
+            
+            photos.forEach(function (photo) {
+              var particle = new THREE.Sprite(material);
+              var location = new google.maps.LatLng(photo[0], photo[1]),
+                vertex = layer.fromLatLngToVertex(location);
+
+              particle.position.set(vertex.x, vertex.y, 0);
+              particle.scale.x = particle.scale.y = 20;
+              particles.add(particle);
+              material.size = 20;
+            });
+          } else {
           var geometry = new THREE.Geometry(),
             texture = new THREE.Texture(generateSprite()),
             material, particles;
@@ -64,11 +84,13 @@
           });
 
           particles = new THREE.ParticleSystem( geometry, material );
+          }
           layer.add( particles );
 
           gui = new dat.GUI();
 
           function update(){
+            if (layer.renderertype=='Canvas' || !Detector.webgl)  material.map = new THREE.Texture(generateSprite(material.size));
             layer.render();
           }
 
@@ -78,14 +100,14 @@
         });
       }
 
-      function generateSprite() {
+      function generateSprite(size) {
 
         var canvas = document.createElement('canvas'),
           context = canvas.getContext('2d'),
           gradient;
-
-        canvas.width = 20;
-        canvas.height = 20;
+        size = size || 20;
+        canvas.width = size;
+        canvas.height = size;
 
         gradient = context.createRadialGradient(
           canvas.width / 2, canvas.height / 2, 0,