High Quality Splatting demo

High Quality Splatting demo is now online at potree.org/demo/lion/lion_takanawa.html
Loading may take a while. The model is 12mb.
This demo needs the OES_texture_float extension. Unfortunately, it seems like Chrome does not support this extension well which can result in very bad performance in Chrome.

Sourcecode is here: lion_demo.zip
The program has to be run from a webserver!

5 thoughts on “High Quality Splatting demo

  1. I was wondering if there was an in depth tutorial on this as I am trying to implement this in C++ and finding it a little difficult to know where to start.


    • Hello James,
      Unfortunately, I don’t know about an in depth tutorial on this. There are other resources online that might help you, though. Try searching for “gpu splatting” or “surface splatting”.
      Good luck!

      • Hi Markus,

        Ha yeah an in-depth tutorial might be a bit much to ask for.
        How about just the general steps in implementing the filtered points with flat shading. Like which shader files I should be looking at in the demo?


        • Take a look at src/materials/FilteredSplatsMaterial.js
          It renders the object in 3(or 4 if normals are needed) passes.

          1.Pass: depthPass
          Uses filteredSplatsDepthPass.vs and filteredSplatsDepthPass.fs to render depth into a framebuffer object.

          2.Pass: colorPass
          Uses filteredSplatsAttributePass.vs and filteredSplatsColorAttributePass.fs to render weighted colors into a framebuffer object.
          The depth buffer is used to discard fragments that are farther than (depthBuffer+smallOffset).
          This leaves all points closest to the camera with roughly the same depth. Some of which overlap.
          In order to interpolate overlapping points, we now render all fragments, with blending enabled and set to ADD ( -> gl.blendFunc(gl.ONE, gl.ONE);)
          Each fragment is also weighted by it’s distance to the center of the point with higher weight at the center and low weight at the border.
          The weighted color is stored in the rgb components of the framebuffer, and the weight is stored in the a component.
          The result is something like this: http://potree.org/resources/images/colorPass.png (at the top, the alpha component of the framebuffer and at the bottom, the color component)
          Keep in mind that the values after this step are not bound to be between 0 and 1. Depending in your weight function, they can be much much higher.

          2.5.Pass: normalPass
          This does pretty much the same as the colorPass, except with normals.
          It is only used when illumination mode is set to PHONG.

          3.Pass: Normalization (see FilteredSplatsMaterial.prototype.shadingPass)
          Uses drawTexture.vs and filteredSplats/filteredSplatsShadingPass.fs
          In this pass, the color values are normalized to the [0,1] intervall. This is done by dividing the color values of the previous pass by the weight values.
          See: http://potree.org/resources/images/normalizationPass.png
          Only a simple rectangle spanning the canvas is rendered in this pass.

          Depending on your weight function, you’ll get smooth or hard borders between overlapping points.

          • Thanks Markus.
            That is exactly what I was looking for.


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>