Skip to content

Commit 363f137

Browse files
PourfexPourfex
authored
feat(points): Add option to render points in shape square or circle
1 parent 6db3c5e commit 363f137

10 files changed

+54
-10
lines changed

‎examples/3dtiles_pointcloud.html

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
name: 'SetePC',
6363
sseThreshold: 5,
6464
pntsMode: itowns.PNTS_MODE.CLASSIFICATION,
65+
pntsShape : itowns.PNTS_SHAPE.CIRCLE,
6566
source: new itowns.C3DTilesSource({
6667
url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/pnts-sete-2021-0756_6256/tileset.json',
6768
}),

‎examples/itowns-potree.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@
232232
pointcloud.getAttribute('intensity').range = [0, 10000];
233233

234234
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
235-
material.shape = Potree.PointShape.CIRCLE
235+
material.shape = Potree.PointShape.CIRCLE;
236236

237237
pointcloud.position.copy(pivotTHREE.position);
238238
pointcloud.quaternion.copy(pivotTHREE.quaternion);

‎src/Layer/C3DTilesLayer.js

+17-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import GeometryLayer from 'Layer/GeometryLayer';
33
import { init3dTilesLayer, pre3dTilesUpdate, process3dTilesNode } from 'Process/3dTilesProcessing';
44
import C3DTileset from 'Core/3DTiles/C3DTileset';
55
import C3DTExtensions from 'Core/3DTiles/C3DTExtensions';
6-
import { PNTS_MODE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
6+
import { PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
77
// eslint-disable-next-line no-unused-vars
88
import Style from 'Core/Style';
99
import C3DTFeature from 'Core/3DTiles/C3DTFeature';
@@ -70,6 +70,7 @@ class C3DTilesLayer extends GeometryLayer {
7070
* removed from the scene.
7171
* @param {C3DTExtensions} [config.registeredExtensions] 3D Tiles extensions managers registered for this tileset.
7272
* @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.
73+
* @param {String} [config.pntsShape= PNTS_SHAPE.CIRCLE] Point cloud point shape. Only 'CIRCLE' or 'SQUARE' are possible.
7374
* @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.
7475
* @param {Number} [config.pntsMinAttenuatedSize=3] Minimum scale used by 'ATTENUATED' size mode
7576
* @param {Number} [config.pntsMaxAttenuatedSize=10] Maximum scale used by 'ATTENUATED' size mode
@@ -86,14 +87,28 @@ class C3DTilesLayer extends GeometryLayer {
8687
this.registeredExtensions = config.registeredExtensions || new C3DTExtensions();
8788

8889
this.pntsMode = PNTS_MODE.COLOR;
90+
this.pntsShape = PNTS_SHAPE.CIRCLE;
8991
this.classification = config.classification;
9092
this.pntsSizeMode = PNTS_SIZE_MODE.VALUE;
9193
this.pntsMinAttenuatedSize = config.pntsMinAttenuatedSize || 3;
9294
this.pntsMaxAttenuatedSize = config.pntsMaxAttenuatedSize || 10;
9395

9496
if (config.pntsMode) {
9597
const exists = Object.values(PNTS_MODE).includes(config.pntsMode);
96-
if (!exists) { console.warn("The points cloud mode doesn't exist. Use 'COLOR' or 'CLASSIFICATION' instead."); } else { this.pntsMode = config.pntsMode; }
98+
if (!exists) {
99+
console.warn("The points cloud mode doesn't exist. Use 'COLOR' or 'CLASSIFICATION' instead.");
100+
} else {
101+
this.pntsMode = config.pntsMode;
102+
}
103+
}
104+
105+
if (config.pntsShape) {
106+
const exists = Object.values(PNTS_SHAPE).includes(config.pntsShape);
107+
if (!exists) {
108+
console.warn("The points cloud point shape doesn't exist. Use 'CIRCLE' or 'SQUARE' instead.");
109+
} else {
110+
this.pntsShape = config.pntsShape;
111+
}
97112
}
98113

99114
if (config.pntsSizeMode) {

‎src/Layer/ReferencingLayerProperties.js

+5
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ function ReferLayerProperties(material, layer) {
2121
get: () => material.layer.pntsMode,
2222
});
2323
}
24+
if (material.uniforms && material.uniforms.shape != undefined) {
25+
Object.defineProperty(material.uniforms.shape, 'value', {
26+
get: () => material.layer.pntsShape,
27+
});
28+
}
2429
if (material.uniforms && material.uniforms.sizeMode != undefined) {
2530
Object.defineProperty(material.uniforms.sizeMode, 'value', {
2631
get: () => material.layer.pntsSizeMode,

‎src/Main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export { VIEW_EVENTS } from 'Core/View';
1919
export { default as FeatureProcessing } from 'Process/FeatureProcessing';
2020
export { updateLayeredMaterialNodeImagery, updateLayeredMaterialNodeElevation } from 'Process/LayeredMaterialNodeProcessing';
2121
export { default as OrientedImageCamera } from 'Renderer/OrientedImageCamera';
22-
export { default as PointsMaterial, PNTS_MODE, PNTS_SIZE_MODE, ClassificationScheme } from 'Renderer/PointsMaterial';
22+
export { default as PointsMaterial, PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE, ClassificationScheme } from 'Renderer/PointsMaterial';
2323
export { default as GlobeControls } from 'Controls/GlobeControls';
2424
export { default as FlyControls } from 'Controls/FlyControls';
2525
export { default as FirstPersonControls } from 'Controls/FirstPersonControls';

‎src/Provider/3dTilesProvider.js

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ function pntsParse(data, layer) {
3232
new PointsMaterial({
3333
size: 0.05,
3434
mode: layer.pntsMode,
35+
shape: layer.pntsShape,
3536
classification: layer.classification,
3637
sizeMode: layer.pntsSizeMode,
3738
minAttenuatedSize: layer.pntsMinAttenuatedSize,

‎src/Renderer/PointsMaterial.js

+11
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ export const PNTS_MODE = {
1212
NORMAL: 3,
1313
};
1414

15+
export const PNTS_SHAPE = {
16+
CIRCLE: 0,
17+
SQUARE: 1,
18+
};
19+
1520
export const PNTS_SIZE_MODE = {
1621
VALUE: 0,
1722
ATTENUATED: 1,
@@ -60,6 +65,7 @@ class PointsMaterial extends THREE.RawShaderMaterial {
6065
* @param {object} [options={}] The options
6166
* @param {number} [options.size=0] size point
6267
* @param {number} [options.mode=PNTS_MODE.COLOR] display mode.
68+
* @param {number} [options.mode=PNTS_SHAPE.CIRCLE] rendered points shape.
6369
* @param {THREE.Vector4} [options.overlayColor=new THREE.Vector4(0, 0, 0, 0)] overlay color.
6470
* @param {THREE.Vector2} [options.intensityRange=new THREE.Vector2(0, 1)] intensity range.
6571
* @param {boolean} [options.applyOpacityClassication=false] apply opacity classification on all display mode.
@@ -82,6 +88,7 @@ class PointsMaterial extends THREE.RawShaderMaterial {
8288
const applyOpacityClassication = options.applyOpacityClassication == undefined ? false : options.applyOpacityClassication;
8389
const size = options.size || 0;
8490
const mode = options.mode || PNTS_MODE.COLOR;
91+
const shape = options.shape || PNTS_SHAPE.CIRCLE;
8592
const sizeMode = size === 0 ? PNTS_SIZE_MODE.ATTENUATED : (options.sizeMode || PNTS_SIZE_MODE.VALUE);
8693
const minAttenuatedSize = options.minAttenuatedSize || 3;
8794
const maxAttenuatedSize = options.maxAttenuatedSize || 10;
@@ -92,6 +99,7 @@ class PointsMaterial extends THREE.RawShaderMaterial {
9299
delete options.applyOpacityClassication;
93100
delete options.size;
94101
delete options.mode;
102+
delete options.shape;
95103
delete options.sizeMode;
96104
delete options.minAttenuatedSize;
97105
delete options.maxAttenuatedSize;
@@ -103,10 +111,12 @@ class PointsMaterial extends THREE.RawShaderMaterial {
103111
this.scale = options.scale || 0.05 * 0.5 / Math.tan(1.0 / 2.0); // autosizing scale
104112

105113
CommonMaterial.setDefineMapping(this, 'PNTS_MODE', PNTS_MODE);
114+
CommonMaterial.setDefineMapping(this, 'PNTS_SHAPE', PNTS_SHAPE);
106115
CommonMaterial.setDefineMapping(this, 'PNTS_SIZE_MODE', PNTS_SIZE_MODE);
107116

108117
CommonMaterial.setUniformProperty(this, 'size', size);
109118
CommonMaterial.setUniformProperty(this, 'mode', mode);
119+
CommonMaterial.setUniformProperty(this, 'shape', shape);
110120
CommonMaterial.setUniformProperty(this, 'picking', false);
111121
CommonMaterial.setUniformProperty(this, 'opacity', this.opacity);
112122
CommonMaterial.setUniformProperty(this, 'overlayColor', options.overlayColor || new THREE.Vector4(0, 0, 0, 0));
@@ -233,6 +243,7 @@ class PointsMaterial extends THREE.RawShaderMaterial {
233243
this.transparent = source.transparent;
234244
this.size = source.size;
235245
this.mode = source.mode;
246+
this.shape = source.shape;
236247
this.sizeMode = source.sizeMode;
237248
this.minAttenuatedSize = source.minAttenuatedSize;
238249
this.maxAttenuatedSize = source.maxAttenuatedSize;

‎src/Renderer/Shader/PointsFS.glsl

+9-3
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,18 @@
77

88
varying vec4 vColor;
99
uniform bool picking;
10+
uniform int shape;
11+
1012
void main() {
1113
#include <logdepthbuf_fragment>
12-
// circular point rendering
13-
if((length(gl_PointCoord - 0.5) > 0.5) || (vColor.a == 0.0)) {
14-
discard;
14+
//square shape does not require any change.
15+
if (shape == PNTS_SHAPE_CIRCLE) {
16+
//circular rendering in glsl
17+
if ((length(gl_PointCoord - 0.5) > 0.5) || (vColor.a == 0.0)) {
18+
discard;
19+
}
1520
}
21+
1622
#if defined(USE_TEXTURES_PROJECTIVE)
1723
vec4 color = vColor;
1824
if (!picking) {

‎utils/debug/3dTilesDebug.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as THREE from 'three';
22
import View from 'Core/View';
33
import GeometryLayer from 'Layer/GeometryLayer';
4-
import { PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
4+
import { PNTS_SHAPE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
55
import GeometryDebug from './GeometryDebug';
66
import OBBHelper from './OBBHelper';
77

@@ -113,7 +113,9 @@ export default function create3dTilesDebugUI(datDebugTool, view, _3dTileslayer)
113113
gui.add(_3dTileslayer, 'sseThreshold', 0, 100).name('sseThreshold').onChange(() => {
114114
view.notifyChange(view.camera.camera3D);
115115
});
116-
116+
gui.add(_3dTileslayer, 'pntsShape', PNTS_SHAPE).name('Points Shape').onChange(() => {
117+
view.notifyChange(view.camera.camera3D);
118+
});
117119
gui.add(_3dTileslayer, 'pntsSizeMode', PNTS_SIZE_MODE).name('Pnts size mode').onChange(() => {
118120
view.notifyChange(view.camera.camera3D);
119121
});

‎utils/debug/PotreeDebug.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PNTS_MODE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
1+
import { PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';
22

33
export default {
44
initTools(view, layer, datUi) {
@@ -24,6 +24,9 @@ export default {
2424
styleUI.add(layer.material, 'mode', PNTS_MODE).name('Display mode').onChange(update);
2525
styleUI.add(layer, 'maxIntensityRange', 0, 1).name('Intensity max').onChange(update);
2626
}
27+
if (layer.material.shape != undefined) {
28+
styleUI.add(layer.material, 'shape', PNTS_SHAPE).name('Shape mode').onChange(update);
29+
}
2730
styleUI.add(layer, 'opacity', 0, 1).name('Layer Opacity').onChange(update);
2831
styleUI.add(layer, 'pointSize', 0, 15).name('Point Size').onChange(update);
2932
if (layer.material.sizeMode != undefined) {

0 commit comments

Comments
 (0)