{"id":2422,"date":"2017-06-04T18:15:23","date_gmt":"2017-06-04T18:15:23","guid":{"rendered":"http:\/\/www.cornflex.org\/?p=2251"},"modified":"2021-04-11T23:14:27","modified_gmt":"2021-04-11T23:14:27","slug":"point-cloud-sandbox","status":"publish","type":"post","link":"https:\/\/quentinlengele.com\/index.php\/2017\/06\/04\/point-cloud-sandbox\/","title":{"rendered":"Point Cloud Sandbox"},"content":{"rendered":"<h2>UPDATE APRIL 12, 2021<\/h2>\n<p>Reviewed WebGL and blog pages. Standalone version is now running under Unity 2021 and should be ready for release quite soon.<br \/>\n<!--more--><br \/>\nPCSB can now export interesting point clouds into Houdini (or other softwares) to do some nice renderings.<br \/>\nYou can test the limited version of the export feature by yourself, right here (one frame only):<\/p>\n<p><span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/pcsb.quentinlengele.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color: #cc00c2;\">pcsb.quentinlengele.com<\/span><\/a><\/span><\/p>\n<p><strong>Why a Desktop version?<\/strong><br \/>\nI wanted to be able to export PLY sequences at high framerate to get it animated in Houdini.<br \/>\nI managed to do it from the browser but I quickly run into memory problems and browser limitations. I was only able to get short sequences with a very low framerate.<\/p>\n<p>That&#8217;s why I decided to port all this native OpenGL 2.x code to Unity and take profit from the power of DirectX11 and compute shaders. I still have a lot to do but I can now record very large sequences with a decent framerate&#8230; and export it very quickly on the hard drive.<\/p>\n<div class=\"videoWrapper\"><iframe loading=\"lazy\" width=\"240\" height=\"135\" src=\"https:\/\/www.youtube.com\/embed\/JBPtTMWe68Y?vq=hd1080&amp;controls=1&amp;showinfo=0&amp;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/div>\n<div class=\"row list-container\"><div class=\"wp-caption col-md-6\"><a class=\"thumbnail magnific-gallery\" href=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57232223_10157325064394695_5750999163969994752_o.jpg\" data-links=\" https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57232223_10157325064394695_5750999163969994752_o.jpg,https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57486394_10157325064264695_7432622273606975488_o.jpg \"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57232223_10157325064394695_5750999163969994752_o.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57232223_10157325064394695_5750999163969994752_o.jpg 1920w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57232223_10157325064394695_5750999163969994752_o-300x169.jpg 300w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57232223_10157325064394695_5750999163969994752_o-768x432.jpg 768w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57232223_10157325064394695_5750999163969994752_o-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><p class=\"wp-caption-text\">\n\t\t\t\t\t\t<\/p><\/div><div class=\"wp-caption col-md-6\"><a class=\"thumbnail magnific-gallery\" href=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57486394_10157325064264695_7432622273606975488_o.jpg\" data-links=\" https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57486394_10157325064264695_7432622273606975488_o.jpg,https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57232223_10157325064394695_5750999163969994752_o.jpg \"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57486394_10157325064264695_7432622273606975488_o.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57486394_10157325064264695_7432622273606975488_o.jpg 1920w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57486394_10157325064264695_7432622273606975488_o-300x169.jpg 300w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57486394_10157325064264695_7432622273606975488_o-768x432.jpg 768w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/57486394_10157325064264695_7432622273606975488_o-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><p class=\"wp-caption-text\">\n\t\t\t\t\t\t<\/p><\/div><\/div>\n<p>Various Experiments:<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p dir=\"ltr\" lang=\"en\">Guys! Me and my point cloud shit again &#x1f605; I found a way to export PLY sequences. This small webapp starts to become really interesting. Here is a bunch of these exports into <a href=\"https:\/\/twitter.com\/hashtag\/houdini?src=hash&amp;ref_src=twsrc%5Etfw\">#houdini<\/a>, rendered with <a href=\"https:\/\/twitter.com\/hashtag\/redshift?src=hash&amp;ref_src=twsrc%5Etfw\">#redshift<\/a>, as always. <a href=\"https:\/\/twitter.com\/hashtag\/webgl?src=hash&amp;ref_src=twsrc%5Etfw\">#webgl<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/threejs?src=hash&amp;ref_src=twsrc%5Etfw\">#threejs<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/pointcloud?src=hash&amp;ref_src=twsrc%5Etfw\">#pointcloud<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/indiedev?src=hash&amp;ref_src=twsrc%5Etfw\">#indiedev<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/3d?src=hash&amp;ref_src=twsrc%5Etfw\">#3d<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/vfx?src=hash&amp;ref_src=twsrc%5Etfw\">#vfx<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/cgi?src=hash&amp;ref_src=twsrc%5Etfw\">#cgi<\/a> <a href=\"https:\/\/t.co\/bLtReTM45x\">pic.twitter.com\/bLtReTM45x<\/a><\/p>\n<p>\u2014 Q. (@qornflex) <a href=\"https:\/\/twitter.com\/qornflex\/status\/1111757172973682694?ref_src=twsrc%5Etfw\">March 29, 2019<\/a><\/p><\/blockquote>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p dir=\"ltr\" lang=\"en\">Forbidden Research 02, another step in weirdness rendering using PCS, Houdini and Redshift. I&#8217;m very sorry for sensible souls &#x1f61e; <a href=\"https:\/\/twitter.com\/hashtag\/houdini?src=hash&amp;ref_src=twsrc%5Etfw\">#houdini<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/redshift?src=hash&amp;ref_src=twsrc%5Etfw\">#redshift<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/webgl?src=hash&amp;ref_src=twsrc%5Etfw\">#webgl<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/pointcloud?src=hash&amp;ref_src=twsrc%5Etfw\">#pointcloud<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/indiedev?src=hash&amp;ref_src=twsrc%5Etfw\">#indiedev<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/3d?src=hash&amp;ref_src=twsrc%5Etfw\">#3d<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/digitalart?src=hash&amp;ref_src=twsrc%5Etfw\">#digitalart<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/vfx?src=hash&amp;ref_src=twsrc%5Etfw\">#vfx<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/cgi?src=hash&amp;ref_src=twsrc%5Etfw\">#cgi<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/gore?src=hash&amp;ref_src=twsrc%5Etfw\">#gore<\/a> <a href=\"https:\/\/t.co\/SwW4OBtgOB\">pic.twitter.com\/SwW4OBtgOB<\/a><\/p>\n<p>\u2014 Q. (@qornflex) <a href=\"https:\/\/twitter.com\/qornflex\/status\/1112836101952208897?ref_src=twsrc%5Etfw\">April 1, 2019<\/a><\/p><\/blockquote>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p dir=\"ltr\" lang=\"en\">Forbidden Research 03 &#8211; Still working on PLY sequence export from PointCloud Sandbox <a href=\"https:\/\/twitter.com\/hashtag\/houdini?src=hash&amp;ref_src=twsrc%5Etfw\">#houdini<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/redshift?src=hash&amp;ref_src=twsrc%5Etfw\">#redshift<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/webgl?src=hash&amp;ref_src=twsrc%5Etfw\">#webgl<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/pointcloud?src=hash&amp;ref_src=twsrc%5Etfw\">#pointcloud<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/indiedev?src=hash&amp;ref_src=twsrc%5Etfw\">#indiedev<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/3d?src=hash&amp;ref_src=twsrc%5Etfw\">#3d<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/digitalart?src=hash&amp;ref_src=twsrc%5Etfw\">#digitalart<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/vfx?src=hash&amp;ref_src=twsrc%5Etfw\">#vfx<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/cgi?src=hash&amp;ref_src=twsrc%5Etfw\">#cgi<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/gore?src=hash&amp;ref_src=twsrc%5Etfw\">#gore<\/a> <a href=\"https:\/\/t.co\/A4UYaM0tHR\">pic.twitter.com\/A4UYaM0tHR<\/a><\/p>\n<p>\u2014 Q. (@qornflex) <a href=\"https:\/\/twitter.com\/qornflex\/status\/1115952618545790976?ref_src=twsrc%5Etfw\">April 10, 2019<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<div class=\"row list-container\"><div class=\"wp-caption col-md-4\"><a class=\"thumbnail magnific-gallery\" href=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/53676876_10157255918994695_8997687572922630144_n.jpg\" data-links=\" https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/53676876_10157255918994695_8997687572922630144_n.jpg,https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54278261_10157255918989695_7552575573403369472_n.jpg,https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54730419_10157255918984695_7231683160671518720_n.jpg \"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"960\" src=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/53676876_10157255918994695_8997687572922630144_n.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/53676876_10157255918994695_8997687572922630144_n.jpg 960w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/53676876_10157255918994695_8997687572922630144_n-150x150.jpg 150w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/53676876_10157255918994695_8997687572922630144_n-300x300.jpg 300w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/53676876_10157255918994695_8997687572922630144_n-768x768.jpg 768w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/53676876_10157255918994695_8997687572922630144_n-600x600.jpg 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><p class=\"wp-caption-text\">\n\t\t\t\t\t\t<\/p><\/div><div class=\"wp-caption col-md-4\"><a class=\"thumbnail magnific-gallery\" href=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54278261_10157255918989695_7552575573403369472_n.jpg\" data-links=\" https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54278261_10157255918989695_7552575573403369472_n.jpg,https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/53676876_10157255918994695_8997687572922630144_n.jpg,https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54730419_10157255918984695_7231683160671518720_n.jpg \"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"960\" src=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54278261_10157255918989695_7552575573403369472_n.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54278261_10157255918989695_7552575573403369472_n.jpg 960w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54278261_10157255918989695_7552575573403369472_n-150x150.jpg 150w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54278261_10157255918989695_7552575573403369472_n-300x300.jpg 300w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54278261_10157255918989695_7552575573403369472_n-768x768.jpg 768w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54278261_10157255918989695_7552575573403369472_n-600x600.jpg 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><p class=\"wp-caption-text\">\n\t\t\t\t\t\t<\/p><\/div><div class=\"wp-caption col-md-4\"><a class=\"thumbnail magnific-gallery\" href=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54730419_10157255918984695_7231683160671518720_n.jpg\" data-links=\" https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54730419_10157255918984695_7231683160671518720_n.jpg,https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54278261_10157255918989695_7552575573403369472_n.jpg,https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/53676876_10157255918994695_8997687572922630144_n.jpg \"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"960\" src=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54730419_10157255918984695_7231683160671518720_n.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54730419_10157255918984695_7231683160671518720_n.jpg 960w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54730419_10157255918984695_7231683160671518720_n-150x150.jpg 150w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54730419_10157255918984695_7231683160671518720_n-300x300.jpg 300w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54730419_10157255918984695_7231683160671518720_n-768x768.jpg 768w, https:\/\/quentinlengele.com\/wp-content\/uploads\/2017\/06\/54730419_10157255918984695_7231683160671518720_n-600x600.jpg 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><p class=\"wp-caption-text\">\n\t\t\t\t\t\t<\/p><\/div><\/div>\n<div class=\"videoWrapper\"><iframe loading=\"lazy\" width=\"640\" height=\"360\" src=\"https:\/\/player.vimeo.com\/video\/326313694\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h2>UPDATE JUNE 16, 2017<\/h2>\n<p>Finally released: <a href=\"https:\/\/pcsb.quentinlengele.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">pcsb.quentinlengele.com<\/a><\/p>\n<div class=\"videoWrapper\"><iframe loading=\"lazy\" width=\"240\" height=\"135\" src=\"https:\/\/www.youtube.com\/embed\/od-ahFDj0Y0?vq=hd1080&amp;controls=1&amp;showinfo=0&amp;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<div><\/div>\n<h2>UPDATE NOVEMBER 08, 2016<\/h2>\n<p>I got some time to optimize my FBO engine and expose a few parameters to UI controls.<br \/>\nThe user can now upload a OBJ or PLY file, apply tessellation iterations to add more vertices to the cloud, play with it by using a brush tool, take snapshots or freeze the velocities and gravity, &#8230; I think it&#8217;s almost ready for a first public release.<\/p>\n<div class=\"videoWrapper\"><iframe loading=\"lazy\" width=\"240\" height=\"135\" src=\"https:\/\/www.youtube.com\/embed\/6stskUfwtoU?vq=hd1080&amp;controls=1&amp;showinfo=0&amp;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>And here is my Simulation Fragment Shader:<\/p>\n<pre class=\"height-set:true height-mode:2 lang:default decode:true\">#extension GL_EXT_draw_buffers : require\r\n#extension GL_EXT_frag_depth : enable\r\n\r\nprecision highp float;\r\n\r\nuniform sampler2D originTexture;\r\nuniform sampler2D posTexture;\r\nuniform sampler2D velTexture;\r\nuniform sampler2D propertyTexture;\r\n\r\nuniform float dt;\r\nuniform float time;\r\nuniform mat4 uMVMatrix;\r\nuniform mat4 uPMatrix;\r\n\r\nuniform float meshScale;\r\nuniform vec3 mousePosition;\r\nuniform vec3 mouseVelocity;\r\nuniform float noiseState;\r\nuniform vec3 noiseFBM;\r\nuniform vec3 noiseSeed;\r\nuniform float noiseScale;\r\nuniform float forceState;\r\nuniform float brushRadius;\r\nuniform float brushGravityScale;\r\nuniform float brushForceScale;\r\nuniform float gravityScale;\r\nuniform float maxAge;\r\n\r\nvarying vec2 vuv;\r\n\r\n#include noise.glinc\r\n\r\nvoid main(void)\r\n{\r\n    vec4 o = vec4(0.0, 0.0, 0.0, 1.0);\r\n    vec4 pos = vec4(0.0, 0.0, 0.0, 1.0);\r\n    vec4 vel = vec4(0.0, 0.0, 0.0, 1.0);\r\n    vec4 prop = texture2D( propertyTexture, vuv );\r\n\r\n    if (prop.a == 1.0) \/\/ check if particle is active\r\n    {\r\n        o    = texture2D( originTexture,   vuv ) * meshScale;\r\n        pos  = texture2D( posTexture,      vuv );\r\n        vel  = texture2D( velTexture,      vuv );\r\n\r\n        vec3  dirToOrigin = o.xyz - pos.xyz;\r\n        float distToOrigin = length(dirToOrigin);\r\n        vec3  dirToMouse = pos.xyz - mousePosition;\r\n        float distToMouse = length(dirToMouse);\r\n        vec3  dir2m = normalize(dirToMouse);\r\n\r\n        float diffm = max(distToMouse \/ (brushRadius * 0.1), 3.0);\r\n        float diffm2 = max(distToMouse \/ (brushRadius * 0.1), 3.0);\r\n\r\n        vec3 brushMoveForce = (mouseVelocity * brushForceScale) \/ (diffm*diffm);\r\n        vec3 brushGravity = vec3(0, 0, 0);\r\n\r\n\r\n        \/\/ handle force according mouse pos ------------------------------------------------------\r\n        brushGravity = (dirToMouse \/ (diffm2*diffm2)) * brushGravityScale;\r\n\r\n        \/\/ handle age -------------------------------------------------------------------------\r\n        if (forceState &gt; 0.0)\r\n        {\r\n            vel.xyz += brushMoveForce - brushGravity;\r\n        }\r\n\r\n        \/\/ handle noise -------------------------------------------------------------------------\r\n        if (noiseState == 1.0)\r\n        {\r\n            applyPerlin(noiseFBM, pos.xyz, vel.xyz, noiseSeed, distToOrigin * (noiseScale * 0.01));\r\n        }\r\n\r\n       \/\/ handle gravity ------------------------------------------------------------------------\r\n        vel.xyz = mix(vel.xyz, dirToOrigin * gravityScale, dt);\r\n\r\n        \/\/ apply velocity to position ------------------------------------------------------------\r\n        pos.xyz += vel.xyz * dt;\r\n\r\n        \/\/ proximity -----------------------------------------------------------------------------\r\n        prop.r = clamp((1.0 \/ (distToMouse * 0.5)) * 50.0, 1.0, 50.0);\r\n    }\r\n\r\n    gl_FragData[0] = pos;\r\n    gl_FragData[1] = vel;\r\n    gl_FragData[2] = prop;\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h3><\/h3>\n<h2>UPDATE JULY 21, 2016<\/h2>\n<p>At last, my native WebGL particles now\u00a0support (classic) shadow maps\u00a0and phong\u00a0lighting is fully integrated with ThreeJS pipeline according a point sprites technique with\u00a0generated depth.<br \/>\nAnother Live Demo is coming but I need to provide some additional parameters and propose a fresh GUI&#8230; but here is another preview:<\/p>\n<div class=\"videoWrapper\"><iframe loading=\"lazy\" width=\"240\" height=\"135\" src=\"https:\/\/www.youtube.com\/embed\/HtF2qWKM_go?vq=hd1080&amp;controls=1&amp;showinfo=0&amp;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h2>FIRST RESEARCH MAY 4, 2016<\/h2>\n<p>I wrote Particle Systems in many different environments. This time, I port my experiences on a web page through WebGL and Javascript.<\/p>\n<p>To start with this, I looked for examples and I found quite a lot with different approaches but I was not happy with the functionalities and the structure of source code. That&#8217;s why I wrote a new FBO oriented system from scratch to get access to the GL_DRAW_BUFFER extension in a proper way. With this GL extension I&#8217;m able to output in more than one texture from the fragment shader and handle more data in a GP-GPU way, with position maps, velocity maps, extra-parameter maps, &#8230;<\/p>\n<p>To illustrate this approach, I created a model of myself using a Kinect 2 device to get a PLY file with encoded vertex colors. Then I use ThreeJS to load and parse\u00a0the PLY file. I create data textures to store 32bit\u00a0values of\u00a0these vertex positions, velocities, colors\u00a0and other parameters like distances from the mouse, sizes, &#8230; To process these data,\u00a0I use an old texture swapping\u00a0technique as input\/output of my framebuffer because WebGL (OpenGL ES 2.0) has no computation feature like OpenCL or DirectCompute (more <a href=\"https:\/\/en.wikipedia.org\/wiki\/General-purpose_computing_on_graphics_processing_units#Textures_as_stream\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>).<\/p>\n<p>I also made a complete integration of this FBO particle system with the ThreeJS lighting pipeline.<\/p>\n<p>The particles can be rendered as spherical billboards with generated normals and depth. Later, I&#8217;ll try to get a Lagrangian render of these particles (like the one I made in unity, <a href=\"https:\/\/www.youtube.com\/watch?v=w6Q4TuNTbcA\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>).<\/p>\n<p>Now, I&#8217;m working on PSM (Particle Shadow Map) (more <a href=\"https:\/\/developer.nvidia.com\/sites\/default\/files\/akamai\/gamedev\/docs\/BAVOIL_ParticleShadowsAndCacheEfficientPost.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>).<\/p>\n<p>The source code is not fully cleaned yet but I&#8217;ll try to push a live demo\u00a0online\u00a0soon.<br \/>\nHere is a short video preview running in Google Chrome.<\/p>\n<div class=\"videoWrapper\"><iframe loading=\"lazy\" width=\"300\" height=\"150\" src=\"https:\/\/www.youtube.com\/embed\/rlHFFAdoLOk?vq=hd1080&amp;controls=1&amp;showinfo=0&amp;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>UPDATE APRIL 12, 2021 Reviewed WebGL and blog pages. Standalone version is now running under Unity 2021 and should be ready for release quite soon.<\/p>\n","protected":false},"author":1,"featured_media":18906,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,7,20,8,21],"tags":[],"class_list":["post-2422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-c","category-gpu","category-houdini","category-unity","category-webgl"],"_links":{"self":[{"href":"https:\/\/quentinlengele.com\/index.php\/wp-json\/wp\/v2\/posts\/2422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quentinlengele.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quentinlengele.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quentinlengele.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quentinlengele.com\/index.php\/wp-json\/wp\/v2\/comments?post=2422"}],"version-history":[{"count":17,"href":"https:\/\/quentinlengele.com\/index.php\/wp-json\/wp\/v2\/posts\/2422\/revisions"}],"predecessor-version":[{"id":18920,"href":"https:\/\/quentinlengele.com\/index.php\/wp-json\/wp\/v2\/posts\/2422\/revisions\/18920"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quentinlengele.com\/index.php\/wp-json\/wp\/v2\/media\/18906"}],"wp:attachment":[{"href":"https:\/\/quentinlengele.com\/index.php\/wp-json\/wp\/v2\/media?parent=2422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quentinlengele.com\/index.php\/wp-json\/wp\/v2\/categories?post=2422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quentinlengele.com\/index.php\/wp-json\/wp\/v2\/tags?post=2422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}