{"id":142059975798,"date":"2017-02-16T16:00:55","date_gmt":"2017-02-16T15:00:55","guid":{"rendered":"http:\/\/blog.sketchfab.com\/?p=142059975798"},"modified":"2019-08-15T16:52:07","modified_gmt":"2019-08-15T14:52:07","slug":"tutorial-processing-point-cloud-data-unity","status":"publish","type":"post","link":"https:\/\/sketchfab.com\/blogs\/community\/tutorial-processing-point-cloud-data-unity\/","title":{"rendered":"Tutorial: Processing Point Cloud Data with Unity"},"content":{"rendered":"<p><em>Sketchfab Community Member Leon Denise created his own solution to make point clouds, the output of many 3D scanning apps, more visually attractive. While we have in the meantime <a href=\"http:\/\/blog.sketchfab.com\/can-see-point\/\" target=\"_blank\" rel=\"noopener noreferrer\">released a similar feature for point clouds<\/a>, his approach to using and transforming such data is very interesting and can be applied in many different and new ways. In addition his script has some nice tricks that we don\u2019t, so if you\u2019re into point clouds be sure to read this!<\/em><\/p>\n<p>Hi! My name is Leon Denise, I\u2019m an independent artist programmer. I draw comics, make games, code shaders, hug trees and talk to cows. You can find my work on <a href=\"http:\/\/leon196.github.io\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">GitHub<\/a>, <a href=\"http:\/\/giphy.com\/leondenise\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Giphy<\/a> and of course <a href=\"https:\/\/sketchfab.com\/LeonDenise\">here on Sketchfab<\/a>!<\/p>\n<p>In this tutorial, I\u2019m going to explain how I did the Simon Splash:<\/p>\n<div class=\"sketchfab-embed-wrapper\">    <iframe title=\"Simon Splash\" class=\"\" width=\"690\" height=\"388\" src=\"https:\/\/sketchfab.com\/models\/23ca1c9754444c2d85af5c31684bd81f\/embed\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\" xr-spatial-tracking=\"true\" execution-while-out-of-viewport=\"true\" execution-while-not-rendered=\"true\" web-share=\"true\"><\/iframe><\/div>\n<p>I used <a href=\"http:\/\/www.agisoft.com\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Agisoft PhotoScan<\/a> to generate the point cloud and <a href=\"https:\/\/unity3d.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Unity3D<\/a> to create the mesh.<\/p>\n<p>The Unity3D project can be downloaded at <a href=\"http:\/\/github.com\/leon196\/PointCloudExporter\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">github.com\/leon196\/PointCloudExporter<\/a>.<\/p>\n<h2>About the project<\/h2>\n<p>The project is a point cloud tool used for generative art. It is a real-time software that generates triangle particles from a point cloud and displace them in a vector field with specific rules for velocity behavior. The tool also exports the generated particles into a standard 3d mesh and bakes the vertex colors into a map with generated texture coordinates.<\/p>\n\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-1' class='gallery galleryid-142059975798 gallery-columns-3 gallery-size-medium'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/sketchfab.com\/blogs\/community\/tutorial-processing-point-cloud-data-unity\/image21-5\/'><img decoding=\"async\" width=\"300\" height=\"181\" src=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image21-300x181.png\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image21-300x181.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image21-768x463.png 768w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image21-1030x621.png 1030w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image21-830x500.png 830w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image21.png 1303w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/sketchfab.com\/blogs\/community\/tutorial-processing-point-cloud-data-unity\/image20-6\/'><img decoding=\"async\" width=\"300\" height=\"192\" src=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image20-300x192.png\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image20-300x192.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image20-768x490.png 768w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image20-1030x658.png 1030w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image20-783x500.png 783w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image20.png 1737w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n\n<h2>The motivation<\/h2>\n<p>The motivation came from the fact that point cloud viewers are not very advanced, since point clouds are not the real matter of 3d worlds such as video games. When you zoom in, points stay as dots, it creates to me a frustration that needs to be satisfied. <em>[<a href=\"http:\/\/blog.sketchfab.com\/can-see-point\/\" target=\"_blank\" rel=\"noopener noreferrer\">you can set the point size now<\/a> &#8211; ed]<\/em><\/p>\n<p>So I\u2019ve coded a program that generate triangles from the dots, taking position, normal and color. I\u2019m sharing the source code of the program, it\u2019s a simplified version (no GPU particles) of my point cloud engine. For the sake of comprehension and because the advanced version is part of a commercial project.<\/p>\n\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-2 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-2 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-2 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-2 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-2' class='gallery galleryid-142059975798 gallery-columns-3 gallery-size-medium'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/sketchfab.com\/blogs\/community\/tutorial-processing-point-cloud-data-unity\/image18-8\/'><img decoding=\"async\" width=\"300\" height=\"220\" src=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image18-300x220.png\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image18-300x220.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image18-768x564.png 768w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image18-1030x756.png 1030w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image18-681x500.png 681w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image18.png 1045w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/sketchfab.com\/blogs\/community\/tutorial-processing-point-cloud-data-unity\/image23-4\/'><img decoding=\"async\" width=\"300\" height=\"186\" src=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image23-300x186.png\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image23-300x186.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image23-768x476.png 768w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image23-1030x638.png 1030w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image23-808x500.png 808w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image23.png 1494w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n\n<h2>Export a point cloud<\/h2>\n<p>After you have generated a point cloud in your favourite software, export it as PLY format:<br \/>\nbinary encoding with position, normal and color.<\/p>\n<p>Examples with Agisoft Photoscan and MeshLab:<\/p>\n\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-3 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-3 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-3 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-3 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-3' class='gallery galleryid-142059975798 gallery-columns-3 gallery-size-medium'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/sketchfab.com\/blogs\/community\/tutorial-processing-point-cloud-data-unity\/image00-97\/'><img decoding=\"async\" width=\"300\" height=\"259\" src=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image00-300x259.png\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image00-300x259.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image00.png 415w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/sketchfab.com\/blogs\/community\/tutorial-processing-point-cloud-data-unity\/image02-84\/'><img decoding=\"async\" width=\"300\" height=\"161\" src=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image02-300x161.png\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image02-300x161.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image02-370x200.png 370w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image02.png 702w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n\n<p>My PLY importer C# script is pretty naive and there is chances that it won\u2019t work with a PLY exported from a different software. If you improve the importer script, and like to share, do not hesitate to send a pull request on the git repository.<\/p>\n<h2>Start the Unity3D project<\/h2>\n<p>Download, install Unity3D and <a href=\"http:\/\/github.com\/leon196\/PointCloudExporter\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">grab the project here<\/a>.\u00a0If you don\u2019t know how to use git, find the download zip button:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975800 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image01.png\" alt=\"image01\" width=\"996\" height=\"515\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975800 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image01.png\" alt=\"image01\" width=\"996\" height=\"515\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image01.png 996w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image01-300x155.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image01-768x397.png 768w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image01-967x500.png 967w\" sizes=\"(max-width: 996px) 100vw, 996px\" \/><\/noscript><br \/>\nYou will find the scripts and shaders used to generate triangle mesh from a point cloud. The main script is PointCloudGenerator.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-142059975820 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image21-1030x621.png\" alt=\"image21\" width=\"690\" height=\"416\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-large wp-image-142059975820 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image21-1030x621.png\" alt=\"image21\" width=\"690\" height=\"416\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image21-1030x621.png 1030w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image21-300x181.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image21-768x463.png 768w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image21-830x500.png 830w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image21.png 1303w\" sizes=\"(max-width: 690px) 100vw, 690px\" \/><\/noscript><\/p>\n<p>If you don\u2019t know about Unity3D, <a href=\"https:\/\/docs.unity3d.com\/Manual\/index.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">the official documentation<\/a> is great and there are <a href=\"http:\/\/unitylist.com\/browse\/samples\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">plenty tutorial resources<\/a>\u00a0all over the web. To use the tool, open the scene \u201cPointCloudExporter\u201d. Start the play button, select the PointCloud game object in the hierarchy window, so you can adjust parameters in the inspector window.<\/p>\n<h2>Set the load parameters<\/h2>\n<p>PointCloudGenerator will load a file in the <a href=\"https:\/\/docs.unity3d.com\/Manual\/StreamingAssets.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">StreamingAssets<\/a> folder and automatically adds the .ply extension. That\u2019s why File Name is just \u201cSimon2\u201d. You can adjust the Maximum Vertices count to get more details.<br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975808 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image09.png\" alt=\"image09\" width=\"272\" height=\"105\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975808 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image09.png\" alt=\"image09\" width=\"272\" height=\"105\" \/><\/noscript><\/p>\n<h2>Set the renderer parameters<\/h2>\n<ul>\n<li><strong>Size<\/strong> is the radius of the triangle.<\/li>\n<li><strong>Sprite<\/strong> allows you to choose a texture for the triangle.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975814 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image15.png\" alt=\"image15\" width=\"271\" height=\"89\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975814 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image15.png\" alt=\"image15\" width=\"271\" height=\"89\" \/><\/noscript><\/p>\n<h2>About the sprite<\/h2>\n<p>The texture used for the sprite must have <strong>clamp wrap mode.<\/strong>\u00a0<strong>Disabling mipmapping<\/strong>\u00a0will give better results. Since we use triangles instead of quads for performance, the UV mapping is sized to cover the triangle.<\/p>\n<p>On the left, sprite with clamp wrap mode. On the right, sprite with repeat wrap mode.<\/p>\n\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-4 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-4 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-4 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-4 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-4' class='gallery galleryid-142059975798 gallery-columns-3 gallery-size-medium'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/sketchfab.com\/blogs\/community\/tutorial-processing-point-cloud-data-unity\/image06-56\/'><img decoding=\"async\" width=\"300\" height=\"279\" src=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image06-1-300x279.png\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image06-1-300x279.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image06-1.png 494w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/sketchfab.com\/blogs\/community\/tutorial-processing-point-cloud-data-unity\/image24-4\/'><img decoding=\"async\" width=\"300\" height=\"268\" src=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image24-300x268.png\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image24-300x268.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image24.png 512w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/dt><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n\n<h2>About the shader<\/h2>\n<p>You can check the <strong>Shader<\/strong> code used to generate triangles. (warning: geometry shader stuff)<\/p>\n<p>If you inspect the \u201cGenerate\u201d function in the PointCloudGenerator script, there is a part where it creates mesh with point topology. So the script create a mesh with no triangles, only points. Then a geometry shader is generating triangle from point.<\/p>\n<p>If you change the shader for \u201cUnlit\/Color\u201d for example, you will get this render: points.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975804 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image05.png\" alt=\"image05\" width=\"658\" height=\"198\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975804 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image05.png\" alt=\"image05\" width=\"658\" height=\"198\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image05.png 658w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image05-300x90.png 300w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/noscript><br \/>\nWith the PointCloud shader, you will get this render: triangles with color and direction.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975809 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image10.png\" alt=\"image10\" width=\"662\" height=\"202\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975809 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image10.png\" alt=\"image10\" width=\"662\" height=\"202\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image10.png 662w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image10-300x92.png 300w\" sizes=\"(max-width: 662px) 100vw, 662px\" \/><\/noscript><br \/>\nHere is a scary screenshot with hieroglyph characters known as shader language code. That part shows a function that create a triangle from a point: a geometry shader.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975816 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image17.png\" alt=\"image17\" width=\"806\" height=\"488\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975816 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image17.png\" alt=\"image17\" width=\"806\" height=\"488\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image17.png 806w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image17-300x182.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image17-768x465.png 768w\" sizes=\"(max-width: 806px) 100vw, 806px\" \/><\/noscript><\/p>\n<p>The challenge is to display triangles that will face a certain direction. Manipulating vertex in a shader is about parallelism and knowing if a point in space belong to a triangle requires storing data into vertices. I\u2019m using geometry shader mainly because you can not setup custom attributes for vertices in Unity3D. (There are tricks, but let\u2019s keep it simple for this tutorial)<\/p>\n<h2>Displace parameters<\/h2>\n<ul>\n<li><strong>Should<\/strong> is the ratio that selects which particles should be displaced.<\/li>\n<li><strong>Time<\/strong> is the duration of the displacement.<\/li>\n<li><strong>Speed<\/strong> is the velocity unit.<\/li>\n<li><strong>Noise Scale<\/strong> is the level of details of the Perlin noise.<\/li>\n<li><strong>Noise Speed<\/strong> is the coefficient of the noise offset.<\/li>\n<li><strong>Target Speed<\/strong> is the coefficient of the target offset.<\/li>\n<li><strong>Noisy<\/strong> is like salt, it adds a grain to coefficients.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975806 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image07.png\" alt=\"image07\" width=\"272\" height=\"179\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975806 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image07.png\" alt=\"image07\" width=\"272\" height=\"179\" \/><\/noscript><\/p>\n<p>The displacement behaviour can be found in the \u201cDisplace\u201d function. This simple version is about two vectors: a smooth random direction and moving away from a point in space. This is where you can adjust and customise the displacement behaviour.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975810 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image11.png\" alt=\"image11\" width=\"916\" height=\"388\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975810 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image11.png\" alt=\"image11\" width=\"916\" height=\"388\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image11.png 916w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image11-300x127.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image11-768x325.png 768w\" sizes=\"(max-width: 916px) 100vw, 916px\" \/><\/noscript><\/p>\n<h2>Baking parameters<\/h2>\n<ul>\n<li><strong>Details<\/strong> is a sort of level of details for color.<\/li>\n<li><strong>Circle Radius<\/strong> is the size of the color on the map.<\/li>\n<li><strong>Shader Baked<\/strong> is the shader to use when triangle mesh is generated.<\/li>\n<\/ul>\n<p>A baked map with a &#8216;details&#8217; value of 4:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975813 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image14.png\" alt=\"image14\" width=\"256\" height=\"123\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975813 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image14.png\" alt=\"image14\" width=\"256\" height=\"123\" \/><\/noscript><\/p>\n<p>A baked map\u00a0with a &#8216;details&#8217; value of 16:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975821 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image22.png\" alt=\"image22\" width=\"1024\" height=\"350\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975821 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image22.png\" alt=\"image22\" width=\"1024\" height=\"350\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image22.png 1024w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image22-300x103.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image22-768x263.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/p>\n<p>Because you can\u2019t always have custom shader, you can\u2019t set the triangle color from the vertices color attribute. That\u2019s why this tool have a baking map colors, so the mesh can be imported on Sketchfab or any 3d viewer. If you inspect the baked mesh, you will find the generated texture coordinates.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-142059975818 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image19-1030x451.png\" alt=\"image19\" width=\"690\" height=\"302\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-large wp-image-142059975818 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image19-1030x451.png\" alt=\"image19\" width=\"690\" height=\"302\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image19-1030x451.png 1030w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image19-300x131.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image19-768x336.png 768w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image19-1142x500.png 1142w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image19.png 1571w\" sizes=\"(max-width: 690px) 100vw, 690px\" \/><\/noscript><\/p>\n<h2>Action buttons<\/h2>\n<ul>\n<li><strong>Generate<\/strong> is triggered when pressing start button, and can be used to reload point cloud.<\/li>\n<li><strong>Reset<\/strong> will move the vertices to their original positions.<\/li>\n<li><strong>Displace<\/strong> will start a displacement sequence, with the chosen parameters.<\/li>\n<li><strong>Export<\/strong> will create a mesh ready to be exported. (it does not create a file on the disk)<\/li>\n<li><strong>Save Baked Colours<\/strong> will open a save dialog window, asking where you write the texture file.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975824 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image25.png\" alt=\"image25\" width=\"270\" height=\"174\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975824 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image25.png\" alt=\"image25\" width=\"270\" height=\"174\" \/><\/noscript><\/p>\n<p>To export the model, you have to press the export button. It will create a triangle topology mesh that will replace the point topology mesh. The easiest way to publish this to Sketchfab is to use the <a href=\"https:\/\/sketchfab.com\/exporters\/unity\" target=\"_blank\" rel=\"noopener noreferrer\">Unity Exporter<\/a>. You\u00a0can also use the script <a href=\"http:\/\/wiki.unity3d.com\/index.php?title=ExportOBJ\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ExportOBJ<\/a> from the UnifyCommunity, that is already in the project. It works like this: select any game object, click through File \/ Export \/ Wavefront OBJ.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975807 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image08.png\" alt=\"image08\" width=\"612\" height=\"474\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059975807 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image08.png\" alt=\"image08\" width=\"612\" height=\"474\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image08.png 612w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image08-300x232.png 300w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/noscript><\/p>\n<p>If everything worked out, you should be able to import it in you favourite 3D software, and then share it on Sketchfab!<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-142059975815 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image16-1030x358.png\" alt=\"image16\" width=\"690\" height=\"240\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-large wp-image-142059975815 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2017\/02\/image16-1030x358.png\" alt=\"image16\" width=\"690\" height=\"240\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image16-1030x358.png 1030w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image16-300x104.png 300w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image16-768x267.png 768w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image16-1440x500.png 1440w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/image16.png 1506w\" sizes=\"(max-width: 690px) 100vw, 690px\" \/><\/noscript><\/p>\n<p>Voil\u00e0 !<\/p>\n<p>I hope it will work at the first try for your point cloud data. It\u2019s an open source work in progress project, so there is unstable code, optimizable algorithm and performance issues. Also after an export, you will have to generate again a point topology mesh, to be able to displace again. There is a lot of things that could be improved.<\/p>\n<p>Thanks for reading through this whole article. You can find more open source resources and personal projects on <a href=\"http:\/\/github.com\/leon196\/Workshop\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">my little compilation repository<\/a>. \u00a0Also I\u2019m spamming gifs on Twitter <a href=\"http:\/\/twitter.com\/leondenise\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">@leondenise<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sketchfab Community Member Leon Denise created his own solution in Unity to make point clouds, the output of many 3D scanning apps, more visually attractive. <\/p>\n","protected":false},"author":2,"featured_media":142059975825,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[582],"tags":[67,984,991],"class_list":["post-142059975798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-magicavoxel","tag-tutorial-photogrammetry","tag-tutorial-3d-scanning"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2017\/02\/simon_splash-copy.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/142059975798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/comments?post=142059975798"}],"version-history":[{"count":8,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/142059975798\/revisions"}],"predecessor-version":[{"id":142059990670,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/142059975798\/revisions\/142059990670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/media\/142059975825"}],"wp:attachment":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/media?parent=142059975798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/categories?post=142059975798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/tags?post=142059975798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}