fix pointCloudExample for emscripten

Author: ofTheo

examples/3d/pointCloudExample/src/ofApp.cpp

@@ -7,30 +7,71 @@ void ofApp::setup() {
 	// load an image from disk
 	img.load("linzer.png");
 
-	// we're going to load a ton of points into an ofMesh
-	mesh.setMode(OF_PRIMITIVE_POINTS);
-
-	// loop through the image in the x and y axes
-	int skip = 4; // load a subset of the points
-	for(int y = 0; y < img.getHeight(); y += skip) {
-		for(int x = 0; x < img.getWidth(); x += skip) {
-			ofColor cur = img.getColor(x, y);
-			if(cur.a > 0) {
-				// the alpha value encodes depth, let's remap it to a good depth range
-				float z = ofMap(cur.a, 0, 255, -300, 300);
-				cur.a = 255;
-				mesh.addColor(cur);
-				glm::vec3 pos(x, y, z);
-				mesh.addVertex(pos);
+	//for everything but web
+	#ifndef TARGET_EMSCRIPTEN
+		mesh.setMode(OF_PRIMITIVE_POINTS); // we're going to load a ton of points into an ofMesh
+
+		glEnable(GL_POINT_SMOOTH); // use circular points instead of square points
+		glPointSize(3); // make the points bigger
+
+		// loop through the image in the x and y axes
+		int skip = 3; // load a subset of the points
+		for(int y = 0; y < img.getHeight(); y += skip) {
+			for(int x = 0; x < img.getWidth(); x += skip) {
+				ofColor cur = img.getColor(x, y);
+				if(cur.a > 0) {
+					// the alpha value encodes depth, let's remap it to a good depth range
+					float z = ofMap(cur.a, 0, 255, -300, 300);
+					cur.a = 255;
+					mesh.addColor(cur);
+					glm::vec3 pos(x, y, z);
+					mesh.addVertex(pos);
+				}
 			}
 		}
-	}
+
+		mesh.setupIndicesAuto();
+	#else
+		//for web we have to make tiny square meshes out of two triangles 
+		//OF should maybe do this on the backend for emscripten but for now we'll do it manually 
+		mesh.setMode(OF_PRIMITIVE_TRIANGLES);
+
+		//play with this number to make the pixel/point size bigger
+		float hPointSize = 1;
+
+		//these are the offsets for the four corners of the square 
+		std::vector<glm::vec3> offsets = {glm::vec3(-hPointSize, -hPointSize, 0.0), glm::vec3(hPointSize, -hPointSize, 0.0), glm::vec3(hPointSize, hPointSize, 0.0), glm::vec3(-hPointSize, hPointSize, 0.0) };
+
+		//we make the square out of two triangles so 0,1,2 is a triangle made out of the first 3 points above and 2,3,0 is a triangle made out of the last 3 points above 
+		std::vector<ofIndexType> indices = {0, 1, 2, 2, 3, 0};
+
+		// loop through the image in the x and y axes
+		int skip = 3; // load a subset of the points
+		int pixelCount = 0; 
+		for(int y = 0; y < img.getHeight(); y += skip) {
+			for(int x = 0; x < img.getWidth(); x += skip) {
+				ofColor cur = img.getColor(x, y);
+				if(cur.a > 0) {
+					// the alpha value encodes depth, let's remap it to a good depth range
+					float z = ofMap(cur.a, 0, 255, -300, 300);
+					cur.a = 255;
+					glm::vec3 pos(x, y, z);
+					//build our pixel/point as a small square from the offsets above 
+					for( auto & offset : offsets){
+						mesh.addColor(cur);
+						mesh.addVertex(offset + pos);
+					}
+					//add the index so the triangles can be made out of the vertex data 
+					for( auto & index : indices ){
+						mesh.addIndex(pixelCount + index);
+					}
+					pixelCount+=4;
+				}
+			}
+		}
+	#endif 
 
 	ofEnableDepthTest();
-	#ifndef TARGET_EMSCRIPTEN
-		glEnable(GL_POINT_SMOOTH); // use circular points instead of square points
-		glPointSize(3); // make the points bigger
-	#endif
 }
 
 //--------------------------------------------------------------