Startseite Erkunden Hilfe
Anmelden
lu
/
lp
Mirror von git://github.com/heyLu/lp
Beobachten 1
Favorit hinzufügen 0
Fork 0
Code Issues 0 Commits 138 Releases 1 Wiki
Quellcode durchsuchen

first attempt at using BufferGeometry.

seems quite a bit faster, possibly even more so if we'd use indexing,
but i'm not sure if that would make any difference or is just used for
custom attributes/data.
Lucas Stadler vor 12 Jahren
Ursprung
2349149fbd
Commit
b6244dec14
1 geänderte Dateien mit 57 neuen und 4 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 57 4
      js/pixl/public/thrixl.html

+ 57 - 4
js/pixl/public/thrixl.html
Datei anzeigen 

@ -14,6 +14,7 @@
14 14
15 15 
<body>
16 16 
	<script src="three.js"></script>
17 
	<script src="geometry.js"></script>
17 18 
	<script>
18 19 
		window.trixl = {};
19 20 
		trixl.chunks = {};
 
@ -49,7 +50,7 @@
49 50
50 51 
		var cube = new THREE.CubeGeometry(1, 1, 1);
51 52 
		trixl.toGeometry = function(chunk) {
52 
			var geometry = new THREE.Object3D();
53 
			var chunkGeometry = new THREE.Object3D();
53 54
54 55 
			for (var i = 0; i < chunk.voxels.length; i++) {
55 56 
				var voxel = chunk.voxels[i];
 
@ -67,10 +68,61 @@
67 68 
				mesh.matrixAutoUpdate = false;
68 69 
				mesh.updateMatrix();
69 70
70 
				geometry.add(mesh);
71 
				chunkGeometry.add(mesh);
71 72 
			}
72 73
73 
			return geometry;
74 
			return chunkGeometry;
75 
		}
76
77 
		trixl.toBufferGeometry = function(chunk) {
78 
			var n = 0;
79 
			for (var i = 0; i < chunk.voxels.length; i++) {
80 
				n += chunk.voxels[i] ? 1 : 0;
81 
			}
82 
			var chunkGeometry = new THREE.BufferGeometry();
83
84 
			// 6 sides * 2 triangles
85 
			var m = 6 * 2;
86
87 
			var vs = n * m * 3 * 3;
88 
			chunkGeometry.addAttribute('position', Float32Array, vs, 3);
89 
			chunkGeometry.addAttribute('normal', Float32Array, vs, 3);
90 
			chunkGeometry.addAttribute('color', Float32Array, vs, 3);
91
92 
			var positions = chunkGeometry.attributes.position.array;
93 
			var normals = chunkGeometry.attributes.normal.array;
94 
			var colors = chunkGeometry.attributes.color.array;
95
96 
			var cube = geometry.cube();
97 
			cube.normals = geometry.cube.normals();
98
99 
			var c = -1;
100 
			for (var i = 0; i < chunk.voxels.length; i++) {
101 
				var voxel = chunk.voxels[i];
102 
				if (!voxel) continue;
103
104 
				c += 1;
105
106 
				var x = voxel.pos[0], y = voxel.pos[1], z = voxel.pos[2];
107
108 
				for (var j = 0; j < cube.length; j += 3) {
109 
					positions[c * m * 9 + j + 0] = x + cube[j + 0]
110 
					positions[c * m * 9 + j + 1] = y + cube[j + 1]
111 
					positions[c * m * 9 + j + 2] = z + cube[j + 2]
112
113 
					normals[c * m * 9 + j + 0] = cube.normals[j + 0];
114 
					normals[c * m * 9 + j + 1] = cube.normals[j + 1];
115 
					normals[c * m * 9 + j + 2] = cube.normals[j + 2];
116
117 
					colors[c * m * 9 + j + 0] = voxel.color[0];
118 
					colors[c * m * 9 + j + 1] = voxel.color[1];
119 
					colors[c * m * 9 + j + 2] = voxel.color[2];
120 
				}
121 
			}
122
123 
			chunkGeometry.computeBoundingSphere();
124 
			var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
125 
			return new THREE.Mesh(chunkGeometry, material);
74 126 
		}
75 127
76 128 
		trixl.generate = {}
 
@ -81,7 +133,7 @@
81 133 
					lo + Math.random() * (hi - lo),
82 134 
					lo + Math.random() * (hi - lo)
83 135 
				];
84 
				var color = Math.random() * 0xffffff;
136 
				var color = [Math.random(), Math.random(), Math.random()];
85 137 
				trixl.set(pos, {color: color});
86 138 
			}
87 139 
		}
 
@ -89,6 +141,7 @@
89 141 
		var scene = new THREE.Scene();
90 142 
		var aspect = window.innerWidth / window.innerHeight;
91 143 
		var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
144 
		camera.position.z = 10;
92 145
93 146 
		var renderer = new THREE.WebGLRenderer();
94 147 
		renderer.sortObjects = false;