claygl/example/updateperf.html

53 lines
1.8 KiB
HTML

<html>
<head>
<meta charset="utf-8">
<script src="../dist/claygl.js"></script>
</head>
<body style="margin:0px;">
<canvas width="1200" height="640" id="Main"></canvas>
<div id="time" style="position:absolute;left:10px;top:10px;"></div>
<script type="text/javascript">
var Shader = clay.Shader;
var Material = clay.Material;
var Mesh = clay.Mesh;
var Cube = clay.geometry.Cube;
var shaderLibrary = clay.shader.library;
var timeline = new clay.Timeline;
timeline.start();
var scene = new clay.Scene;
var cube = new Cube();
var shader = shaderLibrary.get('clay.basic');
var material = new Material({
shader: shader
});
var root = new clay.Node({
name: 'ROOT'
});
scene.add(root);
var meshList = [];
for( var i = 0; i < 10; i++){
for(var j = 0; j < 10; j++){
for( var k = 0; k < 100; k++){
var mesh = new clay.Mesh({
geometry: cube,
material: material,
});
mesh.position.set(20-Math.random()*40, 20-Math.random()*40, 20-Math.random()*40);
root.add(mesh);
}
}
}
setInterval(function() {
var start = performance.now();
scene.update();
var end = performance.now();
var time = end - start
document.getElementById('time').innerHTML = time;
root.rotation.rotateY(Math.PI/500);
}, 1000);
</script>
</body>
</html>