Skip to content

Commit

Permalink
fix(entwine): change transparency settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@ftoromanoff
ftoromanoff committed May 24, 2024
1 parent 5668334 commit 47f859d
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 35 deletions.
2 changes: 1 addition & 1 deletion src/Layer/PointCloudLayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ class PointCloudLayer extends GeometryLayer {
if (this.material) {
this.material.visible = this.visible;
this.material.opacity = this.opacity;
this.material.transparent = this.opacity < 1;
this.material.transparent = this.opacity < 1 || this.material.userData.needTransparency[this.material.mode];
this.material.size = this.pointSize;
this.material.scale = context.camera.preSSE;
if (this.material.updateUniforms) {
Expand Down
23 changes: 14 additions & 9 deletions src/Renderer/PointsMaterial.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const ClassificationScheme = {
10: { visible: true, name: 'rail', color: new THREE.Color(0.8, 0.8, 1.0), opacity: 1.0 },
11: { visible: true, name: 'road Surface', color: new THREE.Color(0.4, 0.4, 0.7), opacity: 1.0 },
12: { visible: true, name: 'overlap', color: new THREE.Color(1.0, 1.0, 0.0), opacity: 1.0 },
DEFAULT: { visible: true, name: 'default', color: new THREE.Color(0.3, 0.6, 0.6), opacity: 0.5 },
DEFAULT: { visible: true, name: 'default', color: new THREE.Color(0.3, 0.6, 0.6), opacity: 1.0 },
},
};

Expand All @@ -75,7 +75,7 @@ const DiscreteScheme = {
5: { visible: true, name: '5', color: new THREE.Color('rgb(230, 25, 75)'), opacity: 1.0 },
6: { visible: true, name: '6', color: new THREE.Color('rgb(66, 212, 244)'), opacity: 1.0 },
7: { visible: true, name: '7', color: new THREE.Color('rgb(240, 50, 230)'), opacity: 1.0 },
DEFAULT: { visible: true, name: 'default', color: white, opacity: 0.5 },
DEFAULT: { visible: true, name: 'default', color: white, opacity: 1.0 },
},
};

Expand Down Expand Up @@ -116,6 +116,7 @@ function generateGradientTexture(gradient) {
}

function recomputeTexture(scheme, texture, nbClass) {
let needTransparency;
const data = texture.image.data;
const width = texture.image.width;
if (!nbClass) { nbClass = Object.keys(scheme).length; }
Expand Down Expand Up @@ -147,9 +148,11 @@ function recomputeTexture(scheme, texture, nbClass) {
data[j + 1] = parseInt(255 * color.g, 10);
data[j + 2] = parseInt(255 * color.b, 10);
data[j + 3] = visible ? parseInt(255 * opacity, 10) : 0;
}

needTransparency = needTransparency || opacity < 1;
}
texture.needsUpdate = true;
return needTransparency;
}

class PointsMaterial extends THREE.ShaderMaterial {
Expand All @@ -163,7 +166,6 @@ class PointsMaterial extends THREE.ShaderMaterial {
* @param {THREE.Vector2} [options.intensityRange=new THREE.Vector2(1, 65536)] intensity range.
* @param {THREE.Vector2} [options.elevationRange=new THREE.Vector2(0, 1000)] elevation range.
* @param {THREE.Vector2} [options.angleRange=new THREE.Vector2(-90, 90)] scan angle range.
* @param {boolean} [options.applyOpacityClassication=false] apply opacity classification on all display mode.
* @param {Scheme} [options.classification] LUT for point classification colorization.
* @param {Scheme} [options.discreteScheme] LUT for other discret point values colorization.
* @param {string} [options.gradient] Descrition of the gradient to use for continuous point values.
Expand Down Expand Up @@ -191,7 +193,6 @@ class PointsMaterial extends THREE.ShaderMaterial {
const oiMaterial = options.orientedImageMaterial;
const classificationScheme = options.classification || ClassificationScheme.DEFAULT;
const discreteScheme = options.discreteScheme || DiscreteScheme.DEFAULT;
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;
Expand All @@ -212,7 +213,6 @@ class PointsMaterial extends THREE.ShaderMaterial {
delete options.orientedImageMaterial;
delete options.classification;
delete options.discreteScheme;
delete options.applyOpacityClassication;
delete options.size;
delete options.mode;
delete options.shape;
Expand All @@ -222,6 +222,7 @@ class PointsMaterial extends THREE.ShaderMaterial {
delete options.gradient;

super(options);
this.userData.needTransparency = {};
this.gradients = gradients;
this.gradientTexture = new THREE.CanvasTexture();

Expand All @@ -242,7 +243,6 @@ class PointsMaterial extends THREE.ShaderMaterial {
CommonMaterial.setUniformProperty(this, 'intensityRange', intensityRange);
CommonMaterial.setUniformProperty(this, 'elevationRange', elevationRange);
CommonMaterial.setUniformProperty(this, 'angleRange', angleRange);
CommonMaterial.setUniformProperty(this, 'applyOpacityClassication', applyOpacityClassication);
CommonMaterial.setUniformProperty(this, 'sizeMode', sizeMode);
CommonMaterial.setUniformProperty(this, 'scale', scale);
CommonMaterial.setUniformProperty(this, 'minAttenuatedSize', minAttenuatedSize);
Expand Down Expand Up @@ -299,15 +299,20 @@ class PointsMaterial extends THREE.ShaderMaterial {
}

recomputeClassification() {
recomputeTexture(this.classificationScheme, this.classificationTexture, 32);
const needTransparency = recomputeTexture(this.classificationScheme, this.classificationTexture, 32);
this.userData.needTransparency[PNTS_MODE.CLASSIFICATION] = needTransparency;
this.dispatchEvent({
type: 'material_property_changed',
target: this.uniforms,
});
}

recomputeDiscreteTexture() {
recomputeTexture(this.discreteScheme, this.discreteTexture);
const needTransparency = recomputeTexture(this.discreteScheme, this.discreteTexture);
this.userData.needTransparency[PNTS_MODE.RETURN_NUMBER] = needTransparency;
this.userData.needTransparency[PNTS_MODE.RETURN_TYPE] = needTransparency;
this.userData.needTransparency[PNTS_MODE.RETURN_COUNT] = needTransparency;
this.userData.needTransparency[PNTS_MODE.POINT_SOURCE_ID] = needTransparency;
this.dispatchEvent({
type: 'material_property_changed',
target: this.uniforms,
Expand Down
13 changes: 5 additions & 8 deletions src/Renderer/Shader/PointsVS.glsl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ uniform vec2 elevationRange;
uniform vec2 intensityRange;
uniform vec2 angleRange;

uniform bool applyOpacityClassication;

uniform sampler2D classificationTexture;
uniform sampler2D discreteTexture;
uniform sampler2D gradientTexture;
Expand Down Expand Up @@ -93,14 +91,11 @@ void main() {
if (picking) {
vColor = unique_id;
} else {
vColor.a = opacity;
if (applyOpacityClassication || mode == PNTS_MODE_CLASSIFICATION) {
vColor.a = 1.0;
if (mode == PNTS_MODE_CLASSIFICATION) {
vec2 uv = vec2(classification/255., 0.5);
vColor = texture2D(classificationTexture, uv);
vColor.a *= opacity;
}

if (mode == PNTS_MODE_NORMAL) {
} else if (mode == PNTS_MODE_NORMAL) {
vColor.rgb = abs(normal);
} else if (mode == PNTS_MODE_COLOR) {
// default to color mode
Expand Down Expand Up @@ -150,6 +145,8 @@ void main() {
vec2 uv = vec2(i, (1. - i));
vColor = texture2D(gradientTexture, uv);
}

vColor.a *= opacity;
}

#include <begin_vertex>
Expand Down
33 changes: 16 additions & 17 deletions utils/debug/PotreeDebug.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,67 +75,66 @@ export default {

const styleUI = layer.debugUI.addFolder('Styling');
if (layer.material.mode != undefined) {
styleUI.add(layer.material, 'mode', PNTS_MODE).name('Display mode').onChange(update);
const gradiantsName = Object.keys(layer.material.gradients);
styleUI.add({ gradient: gradiantsName[0] }, 'gradient', gradiantsName).name('gradient')
const modeNames = Object.keys(PNTS_MODE);
const mode = modeNames.filter(v => PNTS_MODE[v] === layer.material.mode)[0];
styleUI.add({ mode }, 'mode', modeNames).name('Display mode')
.onChange((value) => {
layer.material.mode = PNTS_MODE[value];
update();
});
const gradiantsNames = Object.keys(layer.material.gradients);
styleUI.add({ gradient: gradiantsNames[0] }, 'gradient', gradiantsNames).name('gradient')
.onChange((value) => {
layer.material.gradient = layer.material.gradients[value];
setupControllerVisibily(layer.debugUI, layer.material.mode);
view.notifyChange(layer, true);
update();
});
styleUI.add(layer, 'minIntensityRange', layer.minIntensityRange, layer.maxIntensityRange - 1).name('Intensity min')
.onChange((value) => {
if (value >= layer.maxIntensityRange) {
layer.maxIntensityRange = value + 1;
getController(layer.debugUI, 'maxIntensityRange').updateDisplay();
}
setupControllerVisibily(layer.debugUI, layer.material.mode);
view.notifyChange(layer, true);
update();
});
styleUI.add(layer, 'maxIntensityRange', layer.minIntensityRange + 1, layer.maxIntensityRange).name('Intensity max')
.onChange((value) => {
if (value <= layer.minIntensityRange) {
layer.minIntensityRange = value - 1;
getController(layer.debugUI, 'minIntensityRange').updateDisplay();
}
setupControllerVisibily(layer.debugUI, layer.material.mode);
view.notifyChange(layer, true);
update();
});
styleUI.add(layer, 'minElevationRange', layer.minElevationRange, layer.maxElevationRange).name('Elevation min')
.onChange((value) => {
if (value >= layer.maxElevationRange) {
layer.maxElevationRange = value + 1;
getController(layer.debugUI, 'maxElevationRange').updateDisplay();
}
setupControllerVisibily(layer.debugUI, layer.material.mode);
view.notifyChange(layer, true);
update();
});
styleUI.add(layer, 'maxElevationRange', layer.minElevationRange, layer.maxElevationRange).name('Elevation max')
.onChange((value) => {
if (value <= layer.minElevationRange) {
layer.minElevationRange = value - 1;
getController(layer.debugUI, 'minElevationRange').updateDisplay();
}
setupControllerVisibily(layer.debugUI, layer.material.mode);
view.notifyChange(layer, true);
update();
});
styleUI.add(layer, 'minAngleRange', layer.minAngleRange, layer.maxAngleRange).name('Angle min')
.onChange((value) => {
if (value >= layer.maxAngleRange) {
layer.maxAngleRange = value + 1;
getController(layer.debugUI, 'maxAngleRange').updateDisplay();
}
setupControllerVisibily(layer.debugUI, layer.material.mode);
view.notifyChange(layer, true);
update();
});
styleUI.add(layer, 'maxAngleRange', layer.minAngleRange, layer.maxAngleRange).name('Angle max')
.onChange((value) => {
if (value <= layer.minAngleRange) {
layer.minAngleRange = value - 1;
getController(layer.debugUI, 'minAngleRange').updateDisplay();
}
setupControllerVisibily(layer.debugUI, layer.material.mode);
view.notifyChange(layer, true);
update();
});
}
if (layer.material.shape != undefined) {
Expand Down

0 comments on commit 47f859d

Please sign in to comment.