Skip to content

Instantly share code, notes, and snippets.

@pjanik

pjanik/README.md

Last active December 15, 2015 09:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pjanik/5238284 to your computer and use it in GitHub Desktop.
Save pjanik/5238284 to your computer and use it in GitHub Desktop.
Download ZIP
Pixi.js CanvasRenderer
Display the source blob
Display the rendered blob
Raw
circle.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" xml:space="preserve">
<circle fill="red" stroke="black" stroke-width="2" cx="16" cy="16" r="15"/>
</svg>
Raw
index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
canvas {
border: 1px dashed gray;
}
#results, #container {
display: inline-block;
margin: 15px;
}
p {
margin: 15px;
}
td {
border: 1px solid #bbb;
}
.header {
font-weight: bold;
}
</style>
<body>
<p id="user-agent"></p>
<div id="container"></div>
<table id="results">
<tr class="header">
<td>Circles</td>
<td>FPS</td>
<td>repaint [ms]</td>
</tr>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script src="http://www.goodboydigital.com/pixijs/bunnymark/js/pixi.js"></script>
<script>
/* global requestAnimationFrame, $, PIXI, canvg */
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000/60);
};
})();
var tests = [25, 50, 150, 250, 500, 750, 5000];
function updateResults(count, time, steps) {
var repaint = time / steps,
$tr = $("<tr>");
$tr.append("<td>" + count + "</td><td>" + (1000/repaint).toFixed(2) + "</td><td>" + repaint.toFixed(2) + "</td>");
$("#results").append($tr);
}
function test() {
var count,
maxX = 500,
maxY = 400,
maxSteps = 150,
steps = 0,
renderer,
stage,
container,
circleCanvas,
circleTexture,
circles = [],
cdata = [],
startTime,
circle,
i;
if (tests.length > 0) {
$("#container").empty();
count = tests.shift();
} else {
return;
}
renderer = new PIXI.CanvasRenderer(maxX, maxY);
$("#container").append(renderer.view);
stage = new PIXI.Stage(0xFFFFFF);
container = new PIXI.DisplayObjectContainer();
stage.addChild(container);
circleCanvas = document.createElement("canvas");
canvg(circleCanvas, "circle.svg");
// workaround: without removing cached textures creating a new texture
// will use cached texture from old WebGL context.
PIXI.BaseTextureCache = {};
PIXI.TextureCache = {};
circleTexture = new PIXI.Texture.fromCanvas(circleCanvas);
for (i = 0; i < count; i++) {
circle = {
x: maxX * Math.random(),
y: maxY * Math.random(),
vx: Math.random(),
vy: Math.random()
};
cdata.push(circle);
circle = new PIXI.Sprite(circleTexture);
circle.anchor.x = 0.5;
circle.anchor.y = 0.5;
circles.push(circle);
container.addChild(circle);
}
// Start animation.
startTime = new Date().getTime();
requestAnimationFrame(step);
function step() {
var i, len, c, time;
for (i = 0, len = count; i < len; i++) {
c = cdata[i];
if (c.x >= maxX || c.x <= 0) c.vx *= -1;
if (c.y >= maxY || c.y <= 0) c.vy *= -1;
c.x += c.vx;
c.y += c.vy;
circles[i].position.x = c.x;
circles[i].position.y = c.y;
}
renderer.render(stage);
if (steps < maxSteps) {
steps++;
requestAnimationFrame(step);
} else {
time = new Date().getTime() - startTime;
updateResults(count, time, maxSteps);
test();
}
}
}
$(function () {
$("#user-agent").text(navigator.userAgent);
test();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment