lidar_threejs_playground/index.html at master · JustinGOSSES/lidar_threejs_playground · GitHub

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - buffer geometry custom attributes - particles</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				color: #ffffff;
				background-color: #000000;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				position: absolute;
				top: 0px;
				width: 100%;
				padding: 5px;
				font-family: Monospace;
				font-size: 13px;
				text-align: center;
				font-weight: bold;
			}
			a {
				color: #fff;
			}
		</style>
	</head>

	<body>
		<p>test</p>
		<div id="container"></div>
		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - single frame of lidar from the KITTI Vision Benchmark Suite - <a href="http://www.cvlibs.net/datasets/kitti/raw_data.php">2011_09_26_drive_0001<a/> </div>

		<script src="https://threejs.org/build/three.min.js"></script>
 		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

		<!-- various d3 scripts -->
  		<script src="https://d3js.org/d3.v3.js"></script>
		<script src="https://d3js.org/d3-collection.v1.min.js"></script>
		<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
		<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
		<script src="https://d3js.org/d3-request.v1.min.js"></script>

		<!-- script for orbit style UI controls -->
		<script src="js/controls/OrbitControls.js"></script>

		<!-- scripts for shader variables to control lighting on points etc. part 1 -->
		<script type="x-shader/x-vertex" id="vertexshader">
			attribute float size;
			attribute vec3 customColor;
			varying vec3 vColor;
			void main() {
				vColor = customColor;
				vec4 mvPosition = modelViewMatrix * vec4( position, 2.0 );
				gl_PointSize = size * ( 1100.0 / -mvPosition.z );
				gl_Position = projectionMatrix * mvPosition;
			}
		</script>
		<!-- scripts for shader variables to control lighting on points etc. part 2 -->
		<script type="x-shader/x-fragment" id="fragmentshader">
			uniform vec3 color;
			uniform sampler2D texture;
			varying vec3 vColor;
			void main() {
				gl_FragColor = vec4( color * vColor, 50 );
			}
		</script>

		<!-- loading the data for single frame of lidar -->
		<script>
		d3.csv("HDL32.csv", function(error, data) {
			  if (error) throw error;
			  console.log(data);
			  // and calls "rest" function to start rest of page
			  rest(data)
		});

		// the bulk of the three.js code and data visualization happens in here
		function rest(data){
			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
			var renderer, scene, camera, stats;
			var particleSystem, uniforms, geometry;
			var particles = data.length;
			// console message to check number of particles being rendered
			console.log("particles length = ",particles)
			var WIDTH = window.innerWidth;
			var HEIGHT = window.innerHeight;
			init();
			animate();
			// this function sets the initial state of the scene
			function init() {
				scene = new THREE.Scene();
				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				// grabs full-page dom container element
				var container = document.getElementById( 'container' );
				container.appendChild( renderer.domElement );

				// establishes camera position and perspective
				camera = new THREE.PerspectiveCamera( 20, WIDTH / HEIGHT, 1, 1000 );
				camera.position.z = 60;
				camera.position.y = -50;
				// the lines with 'controls' below establish the orbit style UI with mouse click and drag
				controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.addEventListener( 'change', render ); // remove when using animation loop
				controls.enableZoom = true;

				// uniforms and shader material have to do with materials that make the objects and points visible
				uniforms = {
					color:     { value: new THREE.Color( 0xffffff ) },
					texture:   { value: new THREE.TextureLoader().load( "spark1.png" ) }
				};
				var shaderMaterial = new THREE.ShaderMaterial( {
					uniforms:       uniforms,
					vertexShader:   document.getElementById( 'vertexshader' ).textContent,
					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
					blending:       THREE.AdditiveBlending,
					depthTest:      false,
					transparent:    true,
					fog: false
				});
				// establishing variables used in particle attributes
				var radius = 200;
				geometry = new THREE.BufferGeometry();
				var positions = new Float32Array( particles * 3 );
				var colors = new Float32Array( particles * 3 );
				var sizes = new Float32Array( particles );
				var color = new THREE.Color();
				// adding in the particles based on the data from the csv loaded by d3.js
				for ( var i = 0, i3 = 0; i < particles; i ++, i3 += 3 ) {
					if(i<40){ console.log("X is ",data[i]["X"])}
					positions[ i3 + 0 ] = data[i]["X"];
					positions[ i3 + 1 ] = data[i]["Y"];
					positions[ i3 + 2 ] = data[i]["Z"];

					nearest_int = Math.ceil(data[i]["distance_m"])
					timestamp = Math.ceil(data[i]["vertical_angle"])
					time_normal_unq = (timestamp/40)
					if(i<10){console.log("nearest_int = ",nearest_int,"data[i]['distance_m']",data[i]["distance_m"])}
					if(i<10){console.log("nearest_int = ",time_normal_unq,"data[i]['distance_m']",data[i]["timestamp"])}
					color.setHSL( time_normal_unq, 1, 0.5 );
					colors[ i3 + 0 ] = color.r;
					colors[ i3 + 1 ] = color.g;
					colors[ i3 + 2 ] = color.b;
					sizes[ i ] = 0.4;
				}
				geometry.attributes.position = new THREE.BufferAttribute( positions, 3 );
				geometry.attributes.customColor = new THREE.BufferAttribute( colors, 3 );
				geometry.attributes.size = new THREE.BufferAttribute( sizes, 1 );
				particleSystem = new THREE.Points( geometry, shaderMaterial );
				scene.add( particleSystem );
				stats = new Stats();
				container.appendChild( stats.dom );
				window.addEventListener( 'resize', onWindowResize, false );
			}
			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
			function animate() {
				requestAnimationFrame( animate );
				controls.update();
				render();
				stats.update();
			}
			function render() {
				var time = Date.now() * 0.005;
				// uncomment the line below with 'rotation.z' to have cloud of particples spin by default
				// particleSystem.rotation.z = 0.015 * time;
				var sizes = geometry.attributes.size.array;
				geometry.attributes.size.needsUpdate = true;
				renderer.render( scene, camera );
			}
		}
	</script>

</body>
</html>