mirror of
https://github.com/pissang/claygl.git
synced 2026-02-01 17:27:08 +00:00
89 lines
3.7 KiB
HTML
89 lines
3.7 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script type="text/javascript" src="../thirdparty/require.js"></script>
|
|
<script type="text/javascript" src="js/config.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;color:white;"></div>
|
|
<script type="text/javascript">
|
|
require(['qtek/qtek'], function(qtek){
|
|
var Shader = qtek.Shader;
|
|
var Material = qtek.Material;
|
|
var Mesh = qtek.Mesh;
|
|
var Cube = qtek.geometry.Cube;
|
|
var meshUtil = qtek.util.mesh;
|
|
var shaderLibrary = qtek.shader.library;
|
|
var animation = new qtek.animation.Animation;
|
|
animation.start();
|
|
|
|
var renderer = new qtek.Renderer({
|
|
canvas : document.getElementById("Main"),
|
|
devicePixelRatio : 1.0
|
|
});
|
|
renderer.resize(window.innerWidth, window.innerHeight);
|
|
var scene = new qtek.Scene;
|
|
var camera = new qtek.camera.Perspective({
|
|
aspect : renderer.canvas.width/renderer.canvas.height,
|
|
far : 500
|
|
});
|
|
|
|
var cube = new Cube();
|
|
var shader = shaderLibrary.get('buildin.basic', 'diffuseMap');
|
|
shader.define('fragment', 'RENDER_NORMAL');
|
|
var material = new Material({
|
|
shader : shader
|
|
});
|
|
var texture = new qtek.texture.Texture2D;
|
|
texture.image = new Image;
|
|
texture.image.onload = function(){
|
|
texture.dirty();
|
|
}
|
|
texture.image.src = "assets/textures/crate.gif";
|
|
var uniforms = material.uniforms;
|
|
uniforms.diffuseMap.value = texture;
|
|
|
|
var root = new qtek.Node({
|
|
name : 'ROOT'
|
|
});
|
|
scene.add(root);
|
|
for( var i = 0; i < 10; i++){
|
|
for(var j = 0; j < 20; j++){
|
|
for( var k = 0; k < 50; k++){
|
|
var mesh = new Mesh({
|
|
geometry : cube,
|
|
material : material,
|
|
});
|
|
mesh.position.set(50-Math.random()*100, 50-Math.random()*100, 50-Math.random()*100);
|
|
root.add(mesh);
|
|
}
|
|
}
|
|
}
|
|
|
|
camera.position.set(0, 0, 10);
|
|
|
|
var light = new qtek.light.Point({
|
|
color : [1.5, 1.5, 1.5]
|
|
})
|
|
light.position.set(0, 0, 0);
|
|
light.range = 30;
|
|
scene.add(light);
|
|
|
|
animation.on('frame', function(deltaTime) {
|
|
var start = new Date().getTime();
|
|
var drawInfo = renderer.render(scene, camera);
|
|
var renderTime = new Date().getTime() - start;
|
|
document.getElementById('time').innerHTML =
|
|
Math.round(1000 / deltaTime) + '<br />'
|
|
+ renderTime + '<br />'
|
|
+ drawInfo.drawCallNumber + '(' + 10000 + ')';
|
|
// near z is larger than far z in view space !!
|
|
camera.far = Math.max(camera.near, -camera.sceneBoundingBoxLastFrame.min.z);
|
|
root.rotation.rotateY(Math.PI/500);
|
|
});
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html> |