Home Explore Help
Sign In
lu
/
lp
mirror of git://github.com/heyLu/lp
Watch 1
Star 0
Fork 0
Code Issues 0 Commits 136 Releases 1 Wiki
Browse Source

chunking demo using three.js.

far slower than trixl itself, not sure why yet. even with frustum
culling disabled, it seems that the communication with GL is still too
much. possibly because we use a custom material for each cube?

still, if we could batch-draw each chunk i think this should be far
faster as we'd only draw 64 batches for a -100,100 area.
Lucas Stadler 12 years ago
parent
97a062e5dd
commit
2a39244e89
3 changed files with 134 additions and 1 deletions
Split View Show Diff Stats
  1. 1 0
      js/pixl/.gitignore
  2. 2 1
      js/pixl/Makefile
  3. 131 0
      js/pixl/public/thrixl.html

+ 1 - 0
js/pixl/.gitignore
View File 

@ -1,3 +1,4 @@
1 1 
/node_modules
2 2
3 3 
public/glmatrix.js
4 
public/three.js

+ 2 - 1
js/pixl/Makefile
View File 

@ -1,5 +1,6 @@
1 1 
fetch_live:
2 2 
	curl pixl.papill0n.org:8001/world > data/live.json
3 3
4 
fetch_glmatrix:
4 
fetch_deps:
5 5 
	curl -o public/glmatrix.js https://raw.github.com/toji/gl-matrix/master/dist/gl-matrix.js
6 
	curl -o public/three.js https://rawgithub.com/mrdoob/three.js/master/build/three.min.js

+ 131 - 0
js/pixl/public/thrixl.html
View File 

@ -0,0 +1,131 @@
1 
<!doctype html>
2 
<html>
3 
<head>
4 
	<title>.thrixl</title>
5 
	<meta charset="utf-8" />
6 
	<style>
7 
		canvas {
8 
			position: absolute;
9 
			top: 0;
10 
			left: 0;
11 
		}
12 
	</style>
13 
</head>
14
15 
<body>
16 
	<script src="three.js"></script>
17 
	<script>
18 
		window.trixl = {};
19 
		trixl.chunks = {};
20 
		trixl.chunkSize = 32;
21 
		trixl.bits = 5;
22
23 
		trixl.toChunk = function(pos) {
24 
			var b = trixl.bits;
25 
			return [pos[1] >> b, pos[2] >> b, pos[3] >> b];
26 
		}
27
28 
		trixl.toIndex = function(pos) {
29 
			var b = trixl.bits;
30 
			var mask = (1 << b) - 1;
31 
			return (pos[0] & mask) + ((pos[1] & mask) << b) + ((pos[2] & mask) << b * 2);
32 
		}
33
34 
		trixl.set = function(pos, data) {
35 
			var chunkIndex = trixl.toChunk(pos).join(',');
36 
			var chunk = trixl.chunks[chunkIndex];
37 
			if (!chunk) {
38 
				chunk = trixl.chunks[chunkIndex] = { voxels: [] };
39 
			}
40 
			data.pos = pos;
41 
			chunk.voxels[trixl.toIndex(pos)] = data;
42 
			chunk.dirty = true;
43 
		}
44
45 
		trixl.get = function(pos) {
46 
			var chunk = trixl.chunks[trixl.toChunk(pos).join(',')];
47 
			return chunk ? (chunk.voxels[trixl.toIndex(pos)] || null) : null;
48 
		}
49
50 
		var cube = new THREE.CubeGeometry(1, 1, 1);
51 
		trixl.toGeometry = function(chunk) {
52 
			var geometry = new THREE.Object3D();
53
54 
			for (var i = 0; i < chunk.voxels.length; i++) {
55 
				var voxel = chunk.voxels[i];
56 
				if (!voxel) {
57 
					continue;
58 
				}
59
60 
				var mesh = new THREE.Mesh(cube, new THREE.MeshBasicMaterial({color: voxel.color}));
61
62 
				mesh.position.x = voxel.pos[0];
63 
				mesh.position.y = voxel.pos[1];
64 
				mesh.position.z = voxel.pos[2];
65
66 
				mesh.frustumCulled = false;
67 
				mesh.matrixAutoUpdate = false;
68 
				mesh.updateMatrix();
69
70 
				geometry.add(mesh);
71 
			}
72
73 
			return geometry;
74 
		}
75
76 
		trixl.generate = {}
77 
		trixl.generate.many = function(n, lo, hi) {
78 
			for (var i = 0; i < n; i++) {
79 
				var pos = [
80 
					lo + Math.random() * (hi - lo),
81 
					lo + Math.random() * (hi - lo),
82 
					lo + Math.random() * (hi - lo)
83 
				];
84 
				var color = Math.random() * 0xffffff;
85 
				trixl.set(pos, {color: color});
86 
			}
87 
		}
88
89 
		var scene = new THREE.Scene();
90 
		var aspect = window.innerWidth / window.innerHeight;
91 
		var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
92
93 
		var renderer = new THREE.WebGLRenderer();
94 
		renderer.sortObjects = false;
95 
		renderer.setClearColor(0xffffff);
96 
		renderer.setSize(window.innerWidth, window.innerHeight);
97 
		document.body.appendChild(renderer.domElement);
98
99 
		var group = new THREE.Object3D();
100 
		group.frustumCulled = false;
101 
		scene.add(group);
102
103 
		var render = function() {
104 
			requestAnimationFrame(render);
105
106 
			for (var key in trixl.chunks) {
107 
				var chunk = trixl.chunks[key];
108 
				if (chunk.dirty) {
109 
					group.remove(chunk.geometry);
110 
					chunk.geometry = trixl.toGeometry(chunk);
111 
					chunk.dirty = false;
112 
					group.add(chunk.geometry);
113 
				}
114 
			}
115
116 
			renderer.render(scene, camera);
117 
		}
118
119 
		render();
120
121 
		document.addEventListener("keydown", function(ev) {
122 
			if (ev.keyCode == 87) {
123 
				camera.position.z -= 1.0;
124 
			}
125 
			if (ev.keyCode == 83) {
126 
				camera.position.z += 1.0;
127 
			}
128 
		});
129 
	</script>
130 
</body>
131 
</html>