1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Test of dojox.gfx3d.scheduler</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojox.gfx3d");
var view = null;
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
view = surface.createViewport();
var tas = [
[{x: 100, y: 0, z: 0}, {x: 100, y: 100, z: 0}, {x: 50, y: 50, z: 50}],
[{x: 100, y: 0, z: 0}, {x: 100, y: 100, z: 0}, {x: 0, y: 70, z: 50}]
];
var fills = ["#0cc", "#c0c"];
var m = dojox.gfx3d.matrix;
for(var i = 0; i < tas.length; i++){
console.debug(fills[i]);
view.createPolygon(tas[i])
.setStroke({color: "blue", width: 1})
.setFill(fills[i]);
}
var camera = dojox.gfx3d.matrix.normalize([m.cameraTranslate(0, -300, 0)]);
view.applyCameraTransform(camera);
view.render();
// set up the click handlers.
dojo.connect(dojo.byId("bsp"), "onclick", renderWithBSP);
dojo.connect(dojo.byId("zorder"), "onclick", renderWithZOrder);
};
render = function(title, render){
dojo.byId("render").innerHTML = title;
view.setScheduler(render);
view.invalidate();
view.render();
};
renderWithBSP = function(){
render("BSP", dojox.gfx3d.scheduler.bsp);
};
renderWithZOrder = function(){
render("ZOrder", dojox.gfx3d.scheduler.zOrder);
};
dojo.addOnLoad(makeObjects);
</script>
</head>
<body>
<h1>Scheduler Test</h1>
<p>There are two schedulers available in dojox.gfx3d, zOrder and BSP. zOrder is much simpler, and it performs quite well in most cases, it may fail in some rare cases, for example: two triangles share the same two vertice, and have the same Z value of the third vertex, in this case, they have the same z-order. They are rendered in arbitary order. In this case, BSP is the rescure.</p>
<p>Current render: <strong id="render">default</strong></p>
<p><button id="bsp">BSP</button> <button id="zorder">zOrder</button></p>
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>
|
