Skip to content

Instantly share code, notes, and snippets.

@pjanik
Last active Dec 15, 2015
Embed
What would you like to do?
Pixi.js CanvasRenderer
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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