feat(points): Add option to render points in shape square or circle

examples/3dtiles_pointcloud.html

@@ -62,6 +62,7 @@
                 name: 'SetePC',
                 sseThreshold: 5,
                 pntsMode: itowns.PNTS_MODE.CLASSIFICATION,
+                pntsShape : itowns.PNTS_SHAPE.CIRCLE,
                 source: new itowns.C3DTilesSource({
                     url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/pnts-sete-2021-0756_6256/tileset.json',
                 }),

examples/itowns-potree.html

@@ -232,7 +232,7 @@
                         pointcloud.getAttribute('intensity').range = [0, 10000];
 
                         material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
-                        material.shape = Potree.PointShape.CIRCLE
+                        material.shape = Potree.PointShape.CIRCLE;
 
                         pointcloud.position.copy(pivotTHREE.position);
                         pointcloud.quaternion.copy(pivotTHREE.quaternion);

src/Layer/C3DTilesLayer.js

@@ -3,7 +3,7 @@ import GeometryLayer from 'Layer/GeometryLayer';
 import { init3dTilesLayer, pre3dTilesUpdate, process3dTilesNode } from 'Process/3dTilesProcessing';
 import C3DTileset from 'Core/3DTiles/C3DTileset';
 import C3DTExtensions from 'Core/3DTiles/C3DTExtensions';
-import { PNTS_MODE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
+import { PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
 // eslint-disable-next-line no-unused-vars
 import Style from 'Core/Style';
 import C3DTFeature from 'Core/3DTiles/C3DTFeature';
@@ -70,6 +70,7 @@ class C3DTilesLayer extends GeometryLayer {
      * removed from the scene.
      * @param {C3DTExtensions} [config.registeredExtensions] 3D Tiles extensions managers registered for this tileset.
      * @param {String} [config.pntsMode= PNTS_MODE.COLOR] {@link PointsMaterials} Point cloud coloring mode. Only 'COLOR' or 'CLASSIFICATION' are possible. COLOR uses RGB colors of the points, CLASSIFICATION uses a classification property of the batch table to color points.
+     * @param {String} [config.pntsShape= PNTS_SHAPE.CIRCLE] Point cloud point shape. Only 'CIRCLE' or 'SQUARE' are possible.
      * @param {String} [config.pntsSizeMode= PNTS_SIZE_MODE.VALUE] {@link PointsMaterials} Point cloud size mode. Only 'VALUE' or 'ATTENUATED' are possible. VALUE use constant size, ATTENUATED compute size depending on distance from point to camera.
      * @param {Number} [config.pntsMinAttenuatedSize=3] Minimum scale used by 'ATTENUATED' size mode
      * @param {Number} [config.pntsMaxAttenuatedSize=10] Maximum scale used by 'ATTENUATED' size mode
@@ -86,14 +87,28 @@ class C3DTilesLayer extends GeometryLayer {
         this.registeredExtensions = config.registeredExtensions || new C3DTExtensions();
 
         this.pntsMode = PNTS_MODE.COLOR;
+        this.pntsShape = PNTS_SHAPE.CIRCLE;
         this.classification = config.classification;
         this.pntsSizeMode = PNTS_SIZE_MODE.VALUE;
         this.pntsMinAttenuatedSize = config.pntsMinAttenuatedSize || 3;
         this.pntsMaxAttenuatedSize = config.pntsMaxAttenuatedSize || 10;
 
         if (config.pntsMode) {
             const exists = Object.values(PNTS_MODE).includes(config.pntsMode);
-            if (!exists) { console.warn("The points cloud mode doesn't exist. Use 'COLOR' or 'CLASSIFICATION' instead."); } else { this.pntsMode = config.pntsMode; }
+            if (!exists) {
+                console.warn("The points cloud mode doesn't exist. Use 'COLOR' or 'CLASSIFICATION' instead.");
+            } else {
+                this.pntsMode = config.pntsMode;
+            }
+        }
+
+        if (config.pntsShape) {
+            const exists = Object.values(PNTS_SHAPE).includes(config.pntsShape);
+            if (!exists) {
+                console.warn("The points cloud point shape doesn't exist. Use 'CIRCLE' or 'SQUARE' instead.");
+            } else {
+                this.pntsShape = config.pntsShape;
+            }
         }
 
         if (config.pntsSizeMode) {

src/Layer/ReferencingLayerProperties.js

@@ -21,6 +21,11 @@ function ReferLayerProperties(material, layer) {
                 get: () => material.layer.pntsMode,
             });
         }
+        if (material.uniforms && material.uniforms.shape != undefined) {
+            Object.defineProperty(material.uniforms.shape, 'value', {
+                get: () => material.layer.pntsShape,
+            });
+        }
         if (material.uniforms && material.uniforms.sizeMode != undefined) {
             Object.defineProperty(material.uniforms.sizeMode, 'value', {
                 get: () => material.layer.pntsSizeMode,

src/Main.js

@@ -19,7 +19,7 @@ export { VIEW_EVENTS } from 'Core/View';
 export { default as FeatureProcessing } from 'Process/FeatureProcessing';
 export { updateLayeredMaterialNodeImagery, updateLayeredMaterialNodeElevation } from 'Process/LayeredMaterialNodeProcessing';
 export { default as OrientedImageCamera } from 'Renderer/OrientedImageCamera';
-export { default as PointsMaterial, PNTS_MODE, PNTS_SIZE_MODE, ClassificationScheme } from 'Renderer/PointsMaterial';
+export { default as PointsMaterial, PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE, ClassificationScheme } from 'Renderer/PointsMaterial';
 export { default as GlobeControls } from 'Controls/GlobeControls';
 export { default as FlyControls } from 'Controls/FlyControls';
 export { default as FirstPersonControls } from 'Controls/FirstPersonControls';

src/Provider/3dTilesProvider.js

@@ -32,6 +32,7 @@ function pntsParse(data, layer) {
             new PointsMaterial({
                 size: 0.05,
                 mode: layer.pntsMode,
+                shape: layer.pntsShape,
                 classification: layer.classification,
                 sizeMode: layer.pntsSizeMode,
                 minAttenuatedSize: layer.pntsMinAttenuatedSize,

src/Renderer/PointsMaterial.js

@@ -12,6 +12,11 @@ export const PNTS_MODE = {
     NORMAL: 3,
 };
 
+export const PNTS_SHAPE = {
+    CIRCLE: 0,
+    SQUARE: 1,
+};
+
 export const PNTS_SIZE_MODE = {
     VALUE: 0,
     ATTENUATED: 1,
@@ -60,6 +65,7 @@ class PointsMaterial extends THREE.RawShaderMaterial {
      * @param      {object}  [options={}]  The options
      * @param      {number}  [options.size=0]  size point
      * @param      {number}  [options.mode=PNTS_MODE.COLOR]  display mode.
+     * @param      {number}  [options.mode=PNTS_SHAPE.CIRCLE]  rendered points shape.
      * @param      {THREE.Vector4}  [options.overlayColor=new THREE.Vector4(0, 0, 0, 0)]  overlay color.
      * @param      {THREE.Vector2}  [options.intensityRange=new THREE.Vector2(0, 1)]  intensity range.
      * @param      {boolean}  [options.applyOpacityClassication=false]  apply opacity classification on all display mode.
@@ -82,6 +88,7 @@ class PointsMaterial extends THREE.RawShaderMaterial {
         const applyOpacityClassication = options.applyOpacityClassication == undefined ? false : options.applyOpacityClassication;
         const size = options.size || 0;
         const mode = options.mode || PNTS_MODE.COLOR;
+        const shape = options.shape || PNTS_SHAPE.CIRCLE;
         const sizeMode = size === 0 ? PNTS_SIZE_MODE.ATTENUATED : (options.sizeMode || PNTS_SIZE_MODE.VALUE);
         const minAttenuatedSize = options.minAttenuatedSize || 3;
         const maxAttenuatedSize = options.maxAttenuatedSize || 10;
@@ -92,6 +99,7 @@ class PointsMaterial extends THREE.RawShaderMaterial {
         delete options.applyOpacityClassication;
         delete options.size;
         delete options.mode;
+        delete options.shape;
         delete options.sizeMode;
         delete options.minAttenuatedSize;
         delete options.maxAttenuatedSize;
@@ -103,10 +111,12 @@ class PointsMaterial extends THREE.RawShaderMaterial {
         this.scale = options.scale || 0.05 * 0.5 / Math.tan(1.0 / 2.0); // autosizing scale
 
         CommonMaterial.setDefineMapping(this, 'PNTS_MODE', PNTS_MODE);
+        CommonMaterial.setDefineMapping(this, 'PNTS_SHAPE', PNTS_SHAPE);
         CommonMaterial.setDefineMapping(this, 'PNTS_SIZE_MODE', PNTS_SIZE_MODE);
 
         CommonMaterial.setUniformProperty(this, 'size', size);
         CommonMaterial.setUniformProperty(this, 'mode', mode);
+        CommonMaterial.setUniformProperty(this, 'shape', shape);
         CommonMaterial.setUniformProperty(this, 'picking', false);
         CommonMaterial.setUniformProperty(this, 'opacity', this.opacity);
         CommonMaterial.setUniformProperty(this, 'overlayColor', options.overlayColor || new THREE.Vector4(0, 0, 0, 0));
@@ -233,6 +243,7 @@ class PointsMaterial extends THREE.RawShaderMaterial {
         this.transparent = source.transparent;
         this.size = source.size;
         this.mode = source.mode;
+        this.shape = source.shape;
         this.sizeMode = source.sizeMode;
         this.minAttenuatedSize = source.minAttenuatedSize;
         this.maxAttenuatedSize = source.maxAttenuatedSize;

src/Renderer/Shader/PointsFS.glsl

@@ -7,12 +7,18 @@
 
 varying vec4 vColor;
 uniform bool picking;
+uniform int shape;
+
 void main() {
     #include <logdepthbuf_fragment>
-    // circular point rendering
-    if((length(gl_PointCoord - 0.5) > 0.5) || (vColor.a == 0.0)) {
-        discard;
+    //square shape does not require any change.
+    if (shape == PNTS_SHAPE_CIRCLE) {
+        //circular rendering in glsl
+        if ((length(gl_PointCoord - 0.5) > 0.5) || (vColor.a == 0.0)) {
+            discard;
+        }
     }
+
 #if defined(USE_TEXTURES_PROJECTIVE)
     vec4 color = vColor;
     if (!picking) {

utils/debug/3dTilesDebug.js

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import View from 'Core/View';
 import GeometryLayer from 'Layer/GeometryLayer';
-import { PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
+import { PNTS_SHAPE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
 import GeometryDebug from './GeometryDebug';
 import OBBHelper from './OBBHelper';
 
@@ -113,7 +113,9 @@ export default function create3dTilesDebugUI(datDebugTool, view, _3dTileslayer)
     gui.add(_3dTileslayer, 'sseThreshold', 0, 100).name('sseThreshold').onChange(() => {
         view.notifyChange(view.camera.camera3D);
     });
-
+    gui.add(_3dTileslayer, 'pntsShape', PNTS_SHAPE).name('Points Shape').onChange(() => {
+        view.notifyChange(view.camera.camera3D);
+    });
     gui.add(_3dTileslayer, 'pntsSizeMode', PNTS_SIZE_MODE).name('Pnts size mode').onChange(() => {
         view.notifyChange(view.camera.camera3D);
     });

utils/debug/PotreeDebug.js

@@ -1,4 +1,4 @@
-import { PNTS_MODE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
+import { PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
 
 export default {
     initTools(view, layer, datUi) {
@@ -24,6 +24,9 @@ export default {
             styleUI.add(layer.material, 'mode', PNTS_MODE).name('Display mode').onChange(update);
             styleUI.add(layer, 'maxIntensityRange', 0, 1).name('Intensity max').onChange(update);
         }
+        if (layer.material.shape != undefined) {
+            styleUI.add(layer.material, 'shape', PNTS_SHAPE).name('Shape mode').onChange(update);
+        }
         styleUI.add(layer, 'opacity', 0, 1).name('Layer Opacity').onChange(update);
         styleUI.add(layer, 'pointSize', 0, 15).name('Point Size').onChange(update);
         if (layer.material.sizeMode != undefined) {