failed webgl test

2025-09-19 02:37:59 +08:00 · 2015-02-27 10:34:23 +07:00
parent e1051b2b00
commit 70d1d3f71c
3 changed files with 1549 additions and 0 deletions
--- a/test/performance/bunnieswebgl.html
+++ b/test/performance/bunnieswebgl.html
@@ -0,0 +1,209 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0px;
+        padding: 0px;
+      }
+      
+    </style>
+  </head>
+  <body>
+    <div id='container'></div>
+    <script src='../konva.js'></script>
+    <script src='webgl-2d.js'></script>
+    <script src='konva.webgl.js'></script>
+    <script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
+    <script src='../lib/stats.js'></script>
+    <script defer='defer'>      
+      var lastTime = 0;
+      var vendors = ['ms', 'moz', 'webkit', 'o'];
+      for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+          window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+          window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
+                                     || window[vendors[x]+'CancelRequestAnimationFrame'];
+      }
+      if (!window.requestAnimationFrame) {
+          window.requestAnimationFrame = function(callback) {
+              var currTime = new Date().getTime();
+              var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+              var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
+                timeToCall);
+              lastTime = currTime + timeToCall;
+              return id;
+          };
+      }
+      window.requestAnimFrame = window.requestAnimationFrame;
+      
+      var width = $(window).width();
+      var height = $(window).height();
+      
+      var wabbitTexture;
+      
+      var bunnys = [];
+      var gravity = 0.75;
+      
+      var maxX = width - 10;
+      var minX = 0;
+      var maxY = height - 10;
+      var minY = 0;
+      
+      var startBunnyCount = 10;
+      var isAdding = false;
+      var count = 0;
+      var container;
+      var layer;
+      var stats;
+      var amount = 10;
+      var counter;
+      
+      function onReady() {
+          var stage = new Konva.Stage({
+              container: 'container',
+              width: width - 10,
+              height: height - 10,
+          });
+          layer = new Konva.FastLayer();
+          stage.add(layer);
+          stats = new Stats();
+          
+          wabbitTexture = new Image();
+          wabbitTexture.onload = function() {
+              _handleTextureLoaded();
+          };
+          wabbitTexture.src = '../assets/bunny.png';
+          
+          document.body.appendChild( stats.domElement );
+          stats.domElement.style.position = 'absolute';
+          stats.domElement.style.top = '0px';
+          
+          window.requestAnimationFrame(update);
+      
+          counter = document.createElement('div');
+          counter.className = 'counter';
+          counter.style.position = 'absolute';
+          counter.style.top = '50px';
+
+          document.body.appendChild(counter);
+          
+          count = startBunnyCount;
+          counter.innerHTML = startBunnyCount + ' BUNNIES';
+          
+          container = stage;
+          // stage.addChild(container);
+          
+          $(stage.getContainer()).mousedown(function(){
+              isAdding = true;
+          });
+          
+          $(stage.getContainer()).mouseup(function(){
+              isAdding = false;
+          });
+          
+          document.addEventListener('touchstart', onTouchStart, true);
+          document.addEventListener('touchend', onTouchEnd, true);
+      }
+      
+      function _handleTextureLoaded (event) {
+          for (var i = 0; i < startBunnyCount; i++) 
+          {
+              var bunny = new Konva.Image({
+                  image: wabbitTexture,
+                  transformsEnabled: 'position',
+                  hitGraphEnabled: false,
+                  x : 10,
+                  y : 10
+              });
+             
+
+      
+              bunny.speedX = Math.random() * 10;
+              bunny.speedY = (Math.random() * 10) - 5;
+              
+              bunnys.push(bunny);
+              // bunny.cache();
+              layer.add(bunny);
+              bunny.cache();
+
+              layer.draw();
+          }
+      }
+      
+      function onTouchStart(event){
+          isAdding = true;
+      }
+      
+      function onTouchEnd(event){
+          isAdding = false;
+      }
+      
+      function update(){
+          stats.begin();
+          if(isAdding) {
+              // add 10 at a time :)
+              
+              for (var i = 0; i < amount; i++) 
+              {
+                  var bunny = new Konva.Image({
+                      image: wabbitTexture,
+                      transformsEnabled: 'position',
+                      x : 0,
+                      y : 0
+                  });
+                  bunny.speedX = Math.random() * 10;
+                  bunny.speedY = (Math.random() * 10) - 5;
+                  // bunny.cache();
+                  bunnys.push(bunny);
+                  layer.add(bunny);
+                  bunny.cache();
+
+                  
+                  
+                  count++;
+              }    
+              counter.innerHTML = count + ' BUNNIES';
+          }
+          
+          for (var i = 0; i < bunnys.length; i++) {
+              var bunny = bunnys[i];
+              bunny.setX(bunny.getX() + bunny.speedX);
+              bunny.setY(bunny.getY() + bunny.speedY);
+              bunny.speedY += gravity;
+              if (bunny.getX() > maxX - wabbitTexture.width)
+              {
+                  bunny.speedX *= -1;
+                  bunny.setX(maxX - wabbitTexture.width);
+              }
+              else if (bunny.getX() < minX)
+              {
+                  bunny.speedX *= -1;
+                  bunny.setX(minX);
+              }
+              
+              if (bunny.getY() > maxY - wabbitTexture.height)
+              {
+                  bunny.speedY *= -0.85;
+                  bunny.setY(maxY - wabbitTexture.height);
+                  if (Math.random() > 0.5)
+                  {
+                      bunny.speedY -= Math.random() * 6;
+                  }
+              } 
+              else if (bunny.getY() < minY)
+              {
+                  bunny.speedY = 0;
+                  bunny.setY(minY);
+              }
+              
+          }
+          layer.drawScene();
+          requestAnimFrame(update);
+          stats.end();
+      }
+
+      $(document).ready(onReady);
+      
+    </script>
+  </body>
+</html>
--- a/test/performance/konva.webgl.js
+++ b/test/performance/konva.webgl.js
@@ -0,0 +1,36 @@
+Konva.WebGLLayer = function(config) {
+    this.nodeType = 'Layer';
+    this.canvas = new Konva.SceneWebGLCanvas();
+    this.hitCanvas = new Konva.HitCanvas({
+        pixelRatio : 1
+    });
+    // call super constructor
+    Konva.BaseLayer.call(this, config);
+};
+
+Konva.Util.extend(Konva.WebGLLayer, Konva.Layer);
+
+Konva.SceneWebGLCanvas = function(config) {
+    var conf = config || {};
+    var width = conf.width || 0,
+        height = conf.height || 0;
+
+    Konva.Canvas.call(this, conf);
+    WebGL2D.enable(this._canvas);
+    this.context = new Konva.SceneWebGLContext(this);
+    this.setSize(width, height);
+};
+
+Konva.Util.extend(Konva.SceneWebGLCanvas, Konva.SceneCanvas);
+
+Konva.SceneWebGLContext = function(canvas) {
+    this.canvas = canvas;
+    this._context = canvas._canvas.getContext('webgl-2d');
+
+    if (Konva.enableTrace) {
+        this.traceArr = [];
+        this._enableTrace();
+    }
+};
+
+Konva.Util.extend(Konva.SceneWebGLContext, Konva.SceneContext);
--- a/test/performance/webgl-2d.js
+++ b/test/performance/webgl-2d.js