@shapediver/viewer.features.attribute-visualization 3.3.4 → 3.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +8 -9
- package/src/implementation/AttributeVisualizationEngine.ts +0 -345
- package/src/implementation/AttributeVisualizationUtils.ts +0 -196
- package/src/index.ts +0 -21
- package/src/interfaces/IAttribute.ts +0 -34
- package/src/interfaces/IAttributeVisualizationEngine.ts +0 -49
- package/src/interfaces/ILayer.ts +0 -11
- package/tsconfig.json +0 -17
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shapediver/viewer.features.attribute-visualization",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.7",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Michael Oppitz <michael@shapediver.com>",
|
|
@@ -10,11 +10,10 @@
|
|
|
10
10
|
"test": "__tests__"
|
|
11
11
|
},
|
|
12
12
|
"files": [
|
|
13
|
-
"dist",
|
|
14
|
-
"src",
|
|
15
13
|
"package.json",
|
|
14
|
+
"dist/",
|
|
16
15
|
"README.md",
|
|
17
|
-
"
|
|
16
|
+
"LICENSE"
|
|
18
17
|
],
|
|
19
18
|
"publishConfig": {
|
|
20
19
|
"access": "public"
|
|
@@ -28,7 +27,7 @@
|
|
|
28
27
|
"build": "bash ../../scripts/building/build.sh",
|
|
29
28
|
"build-watch": "bash ../../scripts/building/build-watch.sh",
|
|
30
29
|
"build-dep": "bash ../../scripts/building/build-dep.sh",
|
|
31
|
-
"build-
|
|
30
|
+
"build-all": "npm run build",
|
|
32
31
|
"doc": "typedoc"
|
|
33
32
|
},
|
|
34
33
|
"bugs": {
|
|
@@ -41,13 +40,13 @@
|
|
|
41
40
|
"testEnvironment": "node"
|
|
42
41
|
},
|
|
43
42
|
"devDependencies": {
|
|
44
|
-
"@shapediver/viewer": "3.3.
|
|
45
|
-
"@shapediver/viewer.shared.services": "3.3.
|
|
46
|
-
"@shapediver/viewer.shared.types": "3.3.
|
|
43
|
+
"@shapediver/viewer": "3.3.7",
|
|
44
|
+
"@shapediver/viewer.shared.services": "3.3.7",
|
|
45
|
+
"@shapediver/viewer.shared.types": "3.3.7"
|
|
47
46
|
},
|
|
48
47
|
"dependencies": {
|
|
49
48
|
"detect-it": "4.0.1",
|
|
50
49
|
"gl-matrix": "3.3.0"
|
|
51
50
|
},
|
|
52
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "112787d5c5226cca5e89d08102d0b1a3dd4a1d71"
|
|
53
52
|
}
|
|
@@ -1,345 +0,0 @@
|
|
|
1
|
-
/* eslint-disable no-case-declarations */
|
|
2
|
-
import { ILayer } from '../interfaces/ILayer';
|
|
3
|
-
import { addListener, ITreeNode, IViewportApi, sceneTree } from '@shapediver/viewer';
|
|
4
|
-
import { IAttribute, IDefaultAttribute, INumberAttribute, IStringAttribute } from '../interfaces/IAttribute';
|
|
5
|
-
import { mat4 } from 'gl-matrix';
|
|
6
|
-
import { Converter, EVENTTYPE, UuidGenerator } from '@shapediver/viewer.shared.services';
|
|
7
|
-
import { IAttributeVisualizationEngine } from '../interfaces/IAttributeVisualizationEngine';
|
|
8
|
-
import { IMaterialAbstractData, ISDTFItemData, ISDTFOverview, MaterialGemData, MaterialShadowData, MaterialSpecularGlossinessData, MaterialStandardData, MaterialUnlitData, SDTFItemData, SdtfPrimitiveTypeGuard } from '@shapediver/viewer.shared.types';
|
|
9
|
-
import { AttributeVisualizationUtils } from './AttributeVisualizationUtils';
|
|
10
|
-
|
|
11
|
-
export class AttributeVisualizationEngine implements IAttributeVisualizationEngine {
|
|
12
|
-
// #region Properties (7)
|
|
13
|
-
|
|
14
|
-
readonly #uuidGenerator: UuidGenerator = UuidGenerator.instance;
|
|
15
|
-
readonly #viewport: IViewportApi;
|
|
16
|
-
|
|
17
|
-
#attributes: IAttribute[] = [];
|
|
18
|
-
#defaultMaterial: IMaterialAbstractData = new MaterialUnlitData({ color: '#000000', opacity: 1 });
|
|
19
|
-
#defaultLayer: ILayer = {
|
|
20
|
-
color: '#000000',
|
|
21
|
-
opacity: 1,
|
|
22
|
-
enabled: true
|
|
23
|
-
};
|
|
24
|
-
#layers: {
|
|
25
|
-
[key: string]: ILayer
|
|
26
|
-
} = {};
|
|
27
|
-
#overview: ISDTFOverview;
|
|
28
|
-
#listeners: {
|
|
29
|
-
[key: string]: () => void
|
|
30
|
-
} = {};
|
|
31
|
-
#visualizedMaterialType: 'unlit' | 'standard' = 'unlit';
|
|
32
|
-
#layerMaterialType: 'unlit' | 'standard' = 'unlit';
|
|
33
|
-
#nodesWithAttributeData: ITreeNode[] = [];
|
|
34
|
-
|
|
35
|
-
// #endregion Properties (7)
|
|
36
|
-
|
|
37
|
-
// #region Constructors (1)
|
|
38
|
-
|
|
39
|
-
constructor(viewport: IViewportApi) {
|
|
40
|
-
this.#viewport = viewport;
|
|
41
|
-
|
|
42
|
-
this.#overview = this.#viewport.createSDTFOverview(sceneTree.root);
|
|
43
|
-
this.createLayers();
|
|
44
|
-
this.constructAttributeVisualization();
|
|
45
|
-
this.gatherNodesWithAttributeData();
|
|
46
|
-
this.#nodesWithAttributeData.forEach(n => this.#viewport.updateNode(n));
|
|
47
|
-
|
|
48
|
-
addListener(EVENTTYPE.SESSION.SESSION_CUSTOMIZED, () => {
|
|
49
|
-
this.#overview = this.#viewport.createSDTFOverview(sceneTree.root);
|
|
50
|
-
|
|
51
|
-
const layers = this.#layers;
|
|
52
|
-
this.createLayers();
|
|
53
|
-
for (const l in layers) {
|
|
54
|
-
if (this.#layers[l])
|
|
55
|
-
this.#layers[l] = layers[l];
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
this.constructAttributeVisualization();
|
|
59
|
-
this.gatherNodesWithAttributeData();
|
|
60
|
-
|
|
61
|
-
for (const l in this.#listeners)
|
|
62
|
-
this.#listeners[l]();
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
// #endregion Constructors (1)
|
|
67
|
-
|
|
68
|
-
// #region Public Accessors (3)
|
|
69
|
-
|
|
70
|
-
private gatherNodesWithAttributeData() {
|
|
71
|
-
this.#nodesWithAttributeData = [];
|
|
72
|
-
|
|
73
|
-
sceneTree.root.traverse((node: ITreeNode) => {
|
|
74
|
-
if (node.data.some(d => d instanceof SDTFItemData)) {
|
|
75
|
-
this.#nodesWithAttributeData.push(node);
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
public get defaultMaterial(): IMaterialAbstractData {
|
|
81
|
-
return this.#defaultMaterial;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
public get defaultLayer(): ILayer {
|
|
85
|
-
return this.#defaultLayer;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
public get layers(): { [key: string]: ILayer } {
|
|
89
|
-
return this.#layers;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
public get layerMaterialType(): 'unlit' | 'standard' {
|
|
93
|
-
return this.#layerMaterialType;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
public get visualizedMaterialType(): 'unlit' | 'standard' {
|
|
97
|
-
return this.#visualizedMaterialType;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
public get overview(): ISDTFOverview {
|
|
101
|
-
return this.#overview;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
// #endregion Public Accessors (3)
|
|
105
|
-
|
|
106
|
-
// #region Public Methods (3)
|
|
107
|
-
|
|
108
|
-
public updateAttributes(attributes: IAttribute[]) {
|
|
109
|
-
this.#attributes = attributes;
|
|
110
|
-
this.constructAttributeVisualization();
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
public updateDefaultLayer(layer: ILayer) {
|
|
114
|
-
this.#defaultLayer = layer;
|
|
115
|
-
this.constructAttributeVisualization();
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
public updateDefaultMaterial(material: IMaterialAbstractData) {
|
|
119
|
-
this.#defaultMaterial = material;
|
|
120
|
-
this.constructAttributeVisualization();
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
public updateLayerMaterialType(type: 'unlit' | 'standard') {
|
|
124
|
-
this.#layerMaterialType = type;
|
|
125
|
-
this.createLayers();
|
|
126
|
-
this.constructAttributeVisualization();
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
public updateVisualizedMaterialType(type: 'unlit' | 'standard') {
|
|
130
|
-
this.#visualizedMaterialType = type;
|
|
131
|
-
this.createLayers();
|
|
132
|
-
this.constructAttributeVisualization();
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
public updateLayers(layers: { [key: string]: ILayer }) {
|
|
136
|
-
this.#layers = layers;
|
|
137
|
-
this.constructAttributeVisualization();
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
public addListener(cb: () => void): string {
|
|
141
|
-
const token = this.#uuidGenerator.create();
|
|
142
|
-
this.#listeners[token] = cb;
|
|
143
|
-
return token;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
public removeListener(token: string): boolean {
|
|
147
|
-
if (!this.#listeners[token]) return false;
|
|
148
|
-
delete this.#listeners[token];
|
|
149
|
-
return true;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
// #endregion Public Methods (3)
|
|
153
|
-
|
|
154
|
-
// #region Private Methods (2)
|
|
155
|
-
|
|
156
|
-
private constructAttributeVisualization() {
|
|
157
|
-
this.#viewport.visualizeAttributes = (overview: ISDTFOverview, itemData?: ISDTFItemData) => {
|
|
158
|
-
// early out if there are not attributes in this itemData
|
|
159
|
-
if (!itemData || !itemData.attributes) {
|
|
160
|
-
if (this.#attributes.length === 0) {
|
|
161
|
-
// return default layer material
|
|
162
|
-
let material;
|
|
163
|
-
if(this.#layerMaterialType === 'unlit') {
|
|
164
|
-
material = new MaterialUnlitData({
|
|
165
|
-
opacity: this.#defaultLayer.enabled ? this.#defaultLayer.opacity : 0,
|
|
166
|
-
color: this.#defaultLayer.color
|
|
167
|
-
});
|
|
168
|
-
} else {
|
|
169
|
-
material = new MaterialStandardData({
|
|
170
|
-
opacity: this.#defaultLayer.enabled ? this.#defaultLayer.opacity : 0,
|
|
171
|
-
color: this.#defaultLayer.color
|
|
172
|
-
});
|
|
173
|
-
}
|
|
174
|
-
return {
|
|
175
|
-
matrix: mat4.create(),
|
|
176
|
-
material
|
|
177
|
-
};
|
|
178
|
-
} else {
|
|
179
|
-
// return default layer material
|
|
180
|
-
let material;
|
|
181
|
-
if(this.#layerMaterialType === 'unlit') {
|
|
182
|
-
material = new MaterialUnlitData({
|
|
183
|
-
opacity: this.#defaultLayer.enabled ? this.#defaultLayer.opacity * this.#defaultMaterial.opacity : 0,
|
|
184
|
-
color: this.#defaultMaterial.color
|
|
185
|
-
});
|
|
186
|
-
} else {
|
|
187
|
-
material = new MaterialStandardData({
|
|
188
|
-
opacity: this.#defaultLayer.enabled ? this.#defaultLayer.opacity * this.#defaultMaterial.opacity : 0,
|
|
189
|
-
color: this.#defaultMaterial.color
|
|
190
|
-
});
|
|
191
|
-
}
|
|
192
|
-
return {
|
|
193
|
-
matrix: mat4.create(),
|
|
194
|
-
material
|
|
195
|
-
};
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
// search for the responsible layer property, if none is found, default layer is assigned
|
|
200
|
-
let layer: ILayer = this.defaultLayer;
|
|
201
|
-
if (itemData.attributes['layer'] && SdtfPrimitiveTypeGuard.isStringType(itemData.attributes['layer'].typeHint)) {
|
|
202
|
-
const layerAttributes = itemData.attributes['layer'];
|
|
203
|
-
layer = this.#layers[layerAttributes.value];
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
// early out, layer is not enabled
|
|
207
|
-
if (layer.enabled === false) {
|
|
208
|
-
const mat = this.createMaterialCopy(this.#defaultMaterial);
|
|
209
|
-
mat.opacity = 0;
|
|
210
|
-
return {
|
|
211
|
-
matrix: mat4.create(),
|
|
212
|
-
material: mat
|
|
213
|
-
};
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
if (this.#attributes.length === 0) {
|
|
217
|
-
// no attributes are specified, we go into layer visualization mode
|
|
218
|
-
let material;
|
|
219
|
-
if(this.#layerMaterialType === 'unlit') {
|
|
220
|
-
material = new MaterialUnlitData({
|
|
221
|
-
opacity: layer.opacity,
|
|
222
|
-
color: layer.color
|
|
223
|
-
});
|
|
224
|
-
} else {
|
|
225
|
-
material = new MaterialStandardData({
|
|
226
|
-
opacity: layer.opacity,
|
|
227
|
-
color: layer.color
|
|
228
|
-
});
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
return {
|
|
232
|
-
matrix: mat4.create(),
|
|
233
|
-
material
|
|
234
|
-
};
|
|
235
|
-
} else {
|
|
236
|
-
// attributes are specified, we go into attribute visualization mode
|
|
237
|
-
const material = this.#visualizedMaterialType === 'unlit' ? new MaterialUnlitData() : new MaterialStandardData();
|
|
238
|
-
for (let i = 0; i < this.#attributes.length; i++) {
|
|
239
|
-
const a = this.#attributes[i];
|
|
240
|
-
if (itemData.attributes[a.key] && itemData.attributes[a.key].typeHint === a.type) {
|
|
241
|
-
const itemDataAttribute = itemData.attributes[a.key];
|
|
242
|
-
const itemDataAttributeOverview = overview[a.key].filter(o => o.typeHint === a.type)[0];
|
|
243
|
-
|
|
244
|
-
switch (true) {
|
|
245
|
-
case SdtfPrimitiveTypeGuard.isColorType(a.type):
|
|
246
|
-
// multiply each color values with 255 to convert them to the range [0, 255]
|
|
247
|
-
const convertedValue = itemDataAttribute.value.map((v: number) => v * 255);
|
|
248
|
-
material.color = convertedValue;
|
|
249
|
-
material.opacity *= layer.opacity;
|
|
250
|
-
return {
|
|
251
|
-
matrix: mat4.create(),
|
|
252
|
-
material
|
|
253
|
-
};
|
|
254
|
-
case SdtfPrimitiveTypeGuard.isNumberType(a.type):
|
|
255
|
-
const numberAttribute = <INumberAttribute>a;
|
|
256
|
-
const numberVisualizationData = AttributeVisualizationUtils.numberVisualization(
|
|
257
|
-
itemDataAttribute.value,
|
|
258
|
-
(numberAttribute.min !== undefined ? numberAttribute.min : itemDataAttributeOverview.min)!,
|
|
259
|
-
(numberAttribute.max !== undefined ? numberAttribute.max : itemDataAttributeOverview.max)!,
|
|
260
|
-
numberAttribute.visualization,
|
|
261
|
-
this.#visualizedMaterialType,
|
|
262
|
-
this.#defaultMaterial
|
|
263
|
-
);
|
|
264
|
-
numberVisualizationData.material.opacity *= layer.opacity;
|
|
265
|
-
return numberVisualizationData;
|
|
266
|
-
case SdtfPrimitiveTypeGuard.isStringType(a.type):
|
|
267
|
-
const stringAttribute = <IStringAttribute>a;
|
|
268
|
-
const stringVisualizationData = AttributeVisualizationUtils.stringVisualization(
|
|
269
|
-
itemDataAttribute.value,
|
|
270
|
-
stringAttribute.values || itemDataAttributeOverview.values,
|
|
271
|
-
stringAttribute.visualization,
|
|
272
|
-
this.#visualizedMaterialType,
|
|
273
|
-
this.#defaultMaterial
|
|
274
|
-
);
|
|
275
|
-
|
|
276
|
-
stringVisualizationData.material.opacity *= layer.opacity;
|
|
277
|
-
return stringVisualizationData;
|
|
278
|
-
default:
|
|
279
|
-
const defaultAttribute = <IDefaultAttribute>a;
|
|
280
|
-
material.color = defaultAttribute.color;
|
|
281
|
-
material.opacity *= layer.opacity;
|
|
282
|
-
return {
|
|
283
|
-
matrix: mat4.create(),
|
|
284
|
-
material
|
|
285
|
-
};
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
// no attributes were found, return the default material adjusted by the layer opacity
|
|
291
|
-
const mat = this.createMaterialCopy(this.#defaultMaterial);
|
|
292
|
-
mat.opacity *= layer.opacity;
|
|
293
|
-
return {
|
|
294
|
-
matrix: mat4.create(),
|
|
295
|
-
material: mat
|
|
296
|
-
};
|
|
297
|
-
}
|
|
298
|
-
};
|
|
299
|
-
this.#nodesWithAttributeData.forEach(n => this.#viewport.updateNode(n));
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
private createMaterialCopy(material: IMaterialAbstractData): IMaterialAbstractData {
|
|
303
|
-
if(material instanceof MaterialGemData) {
|
|
304
|
-
const newMaterial = new MaterialGemData();
|
|
305
|
-
newMaterial.copy(material);
|
|
306
|
-
return newMaterial;
|
|
307
|
-
} else if(material instanceof MaterialShadowData) {
|
|
308
|
-
const newMaterial = new MaterialShadowData();
|
|
309
|
-
newMaterial.copy(material);
|
|
310
|
-
return newMaterial;
|
|
311
|
-
} else if(material instanceof MaterialSpecularGlossinessData) {
|
|
312
|
-
const newMaterial = new MaterialSpecularGlossinessData();
|
|
313
|
-
newMaterial.copy(material);
|
|
314
|
-
return newMaterial;
|
|
315
|
-
} else if(material instanceof MaterialStandardData) {
|
|
316
|
-
const newMaterial = new MaterialStandardData();
|
|
317
|
-
newMaterial.copy(material);
|
|
318
|
-
return newMaterial;
|
|
319
|
-
} else if(material instanceof MaterialUnlitData) {
|
|
320
|
-
const newMaterial = new MaterialUnlitData();
|
|
321
|
-
newMaterial.copy(material);
|
|
322
|
-
return newMaterial;
|
|
323
|
-
} else {
|
|
324
|
-
return new MaterialStandardData();
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
private createLayers() {
|
|
329
|
-
this.#layers = {};
|
|
330
|
-
if (this.#overview['layer']) {
|
|
331
|
-
const layerStringAttributeOverview = this.#overview['layer'].find(a => a.typeHint === 'string');
|
|
332
|
-
if (layerStringAttributeOverview && layerStringAttributeOverview.values) {
|
|
333
|
-
for (let i = 0; i < layerStringAttributeOverview.values.length; i++) {
|
|
334
|
-
this.#layers[layerStringAttributeOverview.values[i]] = {
|
|
335
|
-
enabled: true,
|
|
336
|
-
opacity: 1,
|
|
337
|
-
color: this.defaultMaterial.color
|
|
338
|
-
};
|
|
339
|
-
}
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
// #endregion Private Methods (2)
|
|
345
|
-
}
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
import { IMaterialAbstractData, ISDTFAttributeVisualizationData, MaterialStandardData, MaterialUnlitData } from "@shapediver/viewer.shared.types";
|
|
2
|
-
import { mat4 } from "gl-matrix";
|
|
3
|
-
import { ATTRIBUTE_VISUALIZATION } from "../interfaces/IAttribute";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const grayscaleVisualization = (factor: number, materialType: 'unlit' | 'standard'): ISDTFAttributeVisualizationData => {
|
|
7
|
-
const color = Math.floor(factor * 255.0);
|
|
8
|
-
return {
|
|
9
|
-
material: materialType === 'unlit' ? new MaterialUnlitData({color: 'rgb(' + color + ', ' + color + ', ' + color + ')', opacity: 1}) : new MaterialStandardData({color: 'rgb(' + color + ', ' + color + ', ' + color + ')', opacity: 1}),
|
|
10
|
-
matrix: mat4.create()
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const opacityVisualization = (factor: number, materialType: 'unlit' | 'standard', defaultMaterial: IMaterialAbstractData): ISDTFAttributeVisualizationData => {
|
|
15
|
-
return {
|
|
16
|
-
material: materialType === 'unlit' ? new MaterialUnlitData({color: defaultMaterial.color, opacity: factor}) : new MaterialStandardData({color: defaultMaterial.color, opacity: factor}),
|
|
17
|
-
matrix: mat4.create()
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const blueRedVisualization = (factor: number, materialType: 'unlit' | 'standard'): ISDTFAttributeVisualizationData => {
|
|
22
|
-
const red = factor * 255.0;
|
|
23
|
-
const blue = (1 - factor) * 255.0;
|
|
24
|
-
return {
|
|
25
|
-
material: materialType === 'unlit' ? new MaterialUnlitData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(0) + ', ' + Math.floor(blue) + ')', opacity: 1}) : new MaterialStandardData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(0) + ', ' + Math.floor(blue) + ')', opacity: 1}),
|
|
26
|
-
matrix: mat4.create()
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
const blueWhiteRedVisualization = (factor: number, materialType: 'unlit' | 'standard'): ISDTFAttributeVisualizationData => {
|
|
31
|
-
let red = 255, green = 255, blue = 255;
|
|
32
|
-
|
|
33
|
-
if(factor < 0.5) {
|
|
34
|
-
const remappedFactor = factor / 0.5;
|
|
35
|
-
red = 255.0 * remappedFactor;
|
|
36
|
-
green = 255.0 * remappedFactor;
|
|
37
|
-
blue = 255.0;
|
|
38
|
-
} else {
|
|
39
|
-
const remappedFactor = (factor - 0.5) / 0.5;
|
|
40
|
-
red = 255.0;
|
|
41
|
-
green = 255.0 * (1 - remappedFactor);
|
|
42
|
-
blue = 255.0 * (1 - remappedFactor);
|
|
43
|
-
}
|
|
44
|
-
return {
|
|
45
|
-
material: materialType === 'unlit' ? new MaterialUnlitData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(blue) + ')', opacity: 1}) : new MaterialStandardData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(blue) + ')', opacity: 1}),
|
|
46
|
-
matrix: mat4.create()
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
const greenRedVisualization = (factor: number, materialType: 'unlit' | 'standard'): ISDTFAttributeVisualizationData => {
|
|
51
|
-
const red = factor * 255.0;
|
|
52
|
-
const green = (1 - factor) * 255.0;
|
|
53
|
-
return {
|
|
54
|
-
material: materialType === 'unlit' ? new MaterialUnlitData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(0) + ')', opacity: 1}) : new MaterialStandardData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(0) + ')', opacity: 1}),
|
|
55
|
-
matrix: mat4.create()
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const greenWhiteRedVisualization = (factor: number, materialType: 'unlit' | 'standard'): ISDTFAttributeVisualizationData => {
|
|
60
|
-
let red = 255, green = 255, blue = 255;
|
|
61
|
-
|
|
62
|
-
if(factor < 0.5) {
|
|
63
|
-
const remappedFactor = factor / 0.5;
|
|
64
|
-
red = 255.0 * remappedFactor;
|
|
65
|
-
green = 255.0;
|
|
66
|
-
blue = 255.0 * remappedFactor;
|
|
67
|
-
} else {
|
|
68
|
-
const remappedFactor = (factor - 0.5) / 0.5;
|
|
69
|
-
red = 255.0;
|
|
70
|
-
green = 255.0 * (1 - remappedFactor);
|
|
71
|
-
blue = 255.0 * (1 - remappedFactor);
|
|
72
|
-
}
|
|
73
|
-
return {
|
|
74
|
-
material: materialType === 'unlit' ? new MaterialUnlitData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(blue) + ')', opacity: 1}) : new MaterialStandardData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(blue) + ')', opacity: 1}),
|
|
75
|
-
matrix: mat4.create()
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
const blueGreenRedVisualization = (factor: number, materialType: 'unlit' | 'standard'): ISDTFAttributeVisualizationData => {
|
|
80
|
-
let red = 255, green = 255, blue = 255;
|
|
81
|
-
|
|
82
|
-
if(factor < 0.5) {
|
|
83
|
-
const remappedFactor = factor / 0.5;
|
|
84
|
-
red = 0;
|
|
85
|
-
green = 255.0 * remappedFactor;
|
|
86
|
-
blue = 255.0 * (1 - remappedFactor);
|
|
87
|
-
} else {
|
|
88
|
-
const remappedFactor = (factor - 0.5) / 0.5;
|
|
89
|
-
red = 255.0 * remappedFactor;
|
|
90
|
-
green = 255.0 * (1 - remappedFactor);
|
|
91
|
-
blue = 0;
|
|
92
|
-
}
|
|
93
|
-
return {
|
|
94
|
-
material: materialType === 'unlit' ? new MaterialUnlitData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(blue) + ')', opacity: 1}) : new MaterialStandardData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(blue) + ')', opacity: 1}),
|
|
95
|
-
matrix: mat4.create()
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
const blueGreenYellowRedPurpleWhiteVisualization = (factor: number, materialType: 'unlit' | 'standard'): ISDTFAttributeVisualizationData => {
|
|
100
|
-
let red = 255, green = 255, blue = 255;
|
|
101
|
-
|
|
102
|
-
if(factor < 0.2) {
|
|
103
|
-
const remappedFactor = factor / 0.2;
|
|
104
|
-
red = 0;
|
|
105
|
-
green = 255.0 * remappedFactor;
|
|
106
|
-
blue = 255.0 * (1 - remappedFactor);
|
|
107
|
-
} else if(factor < 0.4) {
|
|
108
|
-
const remappedFactor = (factor - 0.2) / 0.2;
|
|
109
|
-
red = 255.0 * remappedFactor;
|
|
110
|
-
green = 255.0;
|
|
111
|
-
blue = 0.0;
|
|
112
|
-
} else if(factor < 0.6) {
|
|
113
|
-
const remappedFactor = (factor - 0.4) / 0.2;
|
|
114
|
-
red = 255.0;
|
|
115
|
-
green = 255.0 * (1 - remappedFactor)
|
|
116
|
-
blue = 0.0;
|
|
117
|
-
} else if(factor < 0.8) {
|
|
118
|
-
const remappedFactor = (factor - 0.6) / 0.2;
|
|
119
|
-
red = 255.0;
|
|
120
|
-
green = 0.0;
|
|
121
|
-
blue = 255.0 * remappedFactor;
|
|
122
|
-
} else {
|
|
123
|
-
const remappedFactor = (factor - 0.8) / 0.2;
|
|
124
|
-
red = 255.0;
|
|
125
|
-
green = 255.0 * remappedFactor;
|
|
126
|
-
blue = 255.0;
|
|
127
|
-
}
|
|
128
|
-
return {
|
|
129
|
-
material: materialType === 'unlit' ? new MaterialUnlitData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(blue) + ')', opacity: 1}) : new MaterialStandardData({color: 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(blue) + ')', opacity: 1}),
|
|
130
|
-
matrix: mat4.create()
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
const hslVisualization = (factor: number, materialType: 'unlit' | 'standard'): ISDTFAttributeVisualizationData => {
|
|
135
|
-
const hue = factor * 359.99;
|
|
136
|
-
return {
|
|
137
|
-
material: materialType === 'unlit' ? new MaterialUnlitData({color: 'hsl(' + Math.floor(hue) + ', 100%, 50%)', opacity: 1}) : new MaterialStandardData({color: 'hsl(' + Math.floor(hue) + ', 100%, 50%)', opacity: 1}),
|
|
138
|
-
matrix: mat4.create()
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
const numberVisualization = (value: number, min: number, max: number, type: ATTRIBUTE_VISUALIZATION, materialType: 'unlit' | 'standard', defaultMaterial: IMaterialAbstractData): ISDTFAttributeVisualizationData => {
|
|
143
|
-
let factor = (value - min) / (max - min);
|
|
144
|
-
factor = Math.min(1, Math.max(0, factor))
|
|
145
|
-
|
|
146
|
-
switch(type) {
|
|
147
|
-
case ATTRIBUTE_VISUALIZATION.GRAYSCALE:
|
|
148
|
-
return grayscaleVisualization(factor, materialType);
|
|
149
|
-
case ATTRIBUTE_VISUALIZATION.OPACITY:
|
|
150
|
-
return opacityVisualization(factor, materialType, defaultMaterial);
|
|
151
|
-
case ATTRIBUTE_VISUALIZATION.BLUE_RED:
|
|
152
|
-
return blueRedVisualization(factor, materialType);
|
|
153
|
-
case ATTRIBUTE_VISUALIZATION.BLUE_WHITE_RED:
|
|
154
|
-
return blueWhiteRedVisualization(factor, materialType);
|
|
155
|
-
case ATTRIBUTE_VISUALIZATION.GREEN_RED:
|
|
156
|
-
return greenRedVisualization(factor, materialType);
|
|
157
|
-
case ATTRIBUTE_VISUALIZATION.GREEN_WHITE_RED:
|
|
158
|
-
return greenWhiteRedVisualization(factor, materialType);
|
|
159
|
-
case ATTRIBUTE_VISUALIZATION.BLUE_GREEN_RED:
|
|
160
|
-
return blueGreenRedVisualization(factor, materialType);
|
|
161
|
-
case ATTRIBUTE_VISUALIZATION.BLUE_GREEN_YELLOW_RED_PURPLE_WHITE:
|
|
162
|
-
return blueGreenYellowRedPurpleWhiteVisualization(factor, materialType);
|
|
163
|
-
case ATTRIBUTE_VISUALIZATION.HSL:
|
|
164
|
-
return hslVisualization(factor, materialType);
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
const stringVisualization = (value: string, values: string[], type: ATTRIBUTE_VISUALIZATION, materialType: 'unlit' | 'standard', defaultMaterial: IMaterialAbstractData): ISDTFAttributeVisualizationData => {
|
|
169
|
-
let factor = values.indexOf(value) / (values.length - 1);
|
|
170
|
-
factor = Math.min(1, Math.max(0, factor))
|
|
171
|
-
switch(type) {
|
|
172
|
-
case ATTRIBUTE_VISUALIZATION.GRAYSCALE:
|
|
173
|
-
return grayscaleVisualization(factor, materialType);
|
|
174
|
-
case ATTRIBUTE_VISUALIZATION.OPACITY:
|
|
175
|
-
return opacityVisualization(factor, materialType, defaultMaterial);
|
|
176
|
-
case ATTRIBUTE_VISUALIZATION.BLUE_RED:
|
|
177
|
-
return blueRedVisualization(factor, materialType);
|
|
178
|
-
case ATTRIBUTE_VISUALIZATION.BLUE_WHITE_RED:
|
|
179
|
-
return blueWhiteRedVisualization(factor, materialType);
|
|
180
|
-
case ATTRIBUTE_VISUALIZATION.GREEN_RED:
|
|
181
|
-
return greenRedVisualization(factor, materialType);
|
|
182
|
-
case ATTRIBUTE_VISUALIZATION.GREEN_WHITE_RED:
|
|
183
|
-
return greenWhiteRedVisualization(factor, materialType);
|
|
184
|
-
case ATTRIBUTE_VISUALIZATION.BLUE_GREEN_RED:
|
|
185
|
-
return blueGreenRedVisualization(factor, materialType);
|
|
186
|
-
case ATTRIBUTE_VISUALIZATION.BLUE_GREEN_YELLOW_RED_PURPLE_WHITE:
|
|
187
|
-
return blueGreenYellowRedPurpleWhiteVisualization(factor, materialType);
|
|
188
|
-
case ATTRIBUTE_VISUALIZATION.HSL:
|
|
189
|
-
return hslVisualization(factor, materialType);
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
export const AttributeVisualizationUtils = {
|
|
194
|
-
numberVisualization,
|
|
195
|
-
stringVisualization
|
|
196
|
-
};
|
package/src/index.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { AttributeVisualizationEngine } from "./implementation/AttributeVisualizationEngine";
|
|
2
|
-
import { IAttribute, IColorAttribute, IStringAttribute, INumberAttribute, IDefaultAttribute, ATTRIBUTE_VISUALIZATION } from "./interfaces/IAttribute";
|
|
3
|
-
import { IAttributeVisualizationEngine } from "./interfaces/IAttributeVisualizationEngine";
|
|
4
|
-
import { ILayer } from "./interfaces/ILayer";
|
|
5
|
-
|
|
6
|
-
export {
|
|
7
|
-
IAttributeVisualizationEngine, AttributeVisualizationEngine
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export {
|
|
11
|
-
ILayer,
|
|
12
|
-
IAttribute,
|
|
13
|
-
IColorAttribute,
|
|
14
|
-
IStringAttribute,
|
|
15
|
-
INumberAttribute,
|
|
16
|
-
IDefaultAttribute
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export {
|
|
20
|
-
ATTRIBUTE_VISUALIZATION
|
|
21
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { SDTF_TYPEHINT } from "@shapediver/viewer.shared.types";
|
|
2
|
-
import { vec3 } from "gl-matrix";
|
|
3
|
-
|
|
4
|
-
export enum ATTRIBUTE_VISUALIZATION {
|
|
5
|
-
GRAYSCALE = 'grayscale',
|
|
6
|
-
OPACITY = 'opacity',
|
|
7
|
-
BLUE_RED = 'blue_red',
|
|
8
|
-
BLUE_WHITE_RED = 'blue_white_red',
|
|
9
|
-
GREEN_RED = 'green_red',
|
|
10
|
-
GREEN_WHITE_RED = 'green_white_red',
|
|
11
|
-
BLUE_GREEN_RED = 'blue_green_red',
|
|
12
|
-
BLUE_GREEN_YELLOW_RED_PURPLE_WHITE = 'blue_green_yellow_red_purple_white',
|
|
13
|
-
HSL = 'hsl'
|
|
14
|
-
}
|
|
15
|
-
export interface IAttribute {
|
|
16
|
-
key: string,
|
|
17
|
-
type: SDTF_TYPEHINT,
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export interface IColorAttribute extends IAttribute {};
|
|
21
|
-
|
|
22
|
-
export interface INumberAttribute extends IAttribute {
|
|
23
|
-
min: number,
|
|
24
|
-
max: number,
|
|
25
|
-
visualization: ATTRIBUTE_VISUALIZATION
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export interface IStringAttribute extends IAttribute {
|
|
29
|
-
values: string[],
|
|
30
|
-
visualization: ATTRIBUTE_VISUALIZATION
|
|
31
|
-
}
|
|
32
|
-
export interface IDefaultAttribute extends IAttribute {
|
|
33
|
-
color: string | vec3 | number[]
|
|
34
|
-
}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { IMaterialAbstractData, ISDTFOverview } from "@shapediver/viewer.shared.types";
|
|
2
|
-
import { IAttribute } from "./IAttribute";
|
|
3
|
-
import { ILayer } from "./ILayer";
|
|
4
|
-
|
|
5
|
-
export interface IAttributeVisualizationEngine {
|
|
6
|
-
// #region Properties (3)
|
|
7
|
-
|
|
8
|
-
readonly defaultMaterial: IMaterialAbstractData;
|
|
9
|
-
readonly layers: { [key: string]: ILayer };
|
|
10
|
-
readonly overview: ISDTFOverview;
|
|
11
|
-
|
|
12
|
-
// #endregion Properties (3)
|
|
13
|
-
|
|
14
|
-
// #region Public Methods (5)
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Add a listener that will be called whenever there was an update to the attributes.
|
|
18
|
-
* Use this listener to update your menu.
|
|
19
|
-
* @param cb
|
|
20
|
-
*/
|
|
21
|
-
addListener(cb: () => void): string;
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Remove a listener.
|
|
25
|
-
* @param token
|
|
26
|
-
*/
|
|
27
|
-
removeListener(token: string): boolean;
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* Update the attributes that are used to visualize the geometry.
|
|
31
|
-
* If an object is present in multiple of the attributes, only the first one will be used.
|
|
32
|
-
* @param attributes
|
|
33
|
-
*/
|
|
34
|
-
updateAttributes(attributes: IAttribute[]): void;
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Update the default material that is used to visualize objects without attributes.
|
|
38
|
-
* @param material
|
|
39
|
-
*/
|
|
40
|
-
updateDefaultMaterial(material: IMaterialAbstractData): void;
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* Update the layers, the opacity is multiplied with the attribute visualization opacity.
|
|
44
|
-
* @param layers
|
|
45
|
-
*/
|
|
46
|
-
updateLayers(layers: { [key: string]: ILayer }): void;
|
|
47
|
-
|
|
48
|
-
// #endregion Public Methods (5)
|
|
49
|
-
}
|
package/src/interfaces/ILayer.ts
DELETED
package/tsconfig.json
DELETED