Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merge 4.2.0 master #10

Merged
merged 78 commits into from
May 1, 2024
Merged
Changes from 1 commit
Commits
Show all changes
78 commits
Select commit Hold shift + click to select a range
381993b
feat(tile-converter): add conversion resume (#2869)
maxkuznetsov-actionengine Feb 9, 2024
d4da81f
v4.2.0-alpha.1
dariaterekhova-actionengine Feb 9, 2024
2b01899
feat(tile-converter): add 3d-tiles-converter resume (#2882)
maxkuznetsov-actionengine Feb 13, 2024
9b5813a
fix(flatgeobuf): Add missing index files (#2884)
ibgreen Feb 13, 2024
ad93787
chore(examples): Rewrite I3S BSL example with React FC (#2885)
maxkuznetsov-actionengine Feb 16, 2024
fade076
feat(tile-converter): conversion dump json validation (#2883)
maxkuznetsov-actionengine Feb 19, 2024
d0e289c
feat(tile-converter): convert SLPK (#2888)
belom88 Feb 21, 2024
d66a6a4
v4.2.0-alpha.2
dariaterekhova-actionengine Feb 21, 2024
198f615
feat(tile-converter): 3d-tiles-converter progress (#2890)
belom88 Feb 22, 2024
575b24a
feat(parquet): restore ParquetWasm loader (#2868)
ibgreen Feb 24, 2024
dad90e3
feat(tile-converter): quiet mode (#2891)
belom88 Feb 26, 2024
cf18e05
v4.2.0-alpha.3
dariaterekhova-actionengine Feb 26, 2024
492f625
chore(i3s examples): Add i3s picking example (#2886)
maxkuznetsov-actionengine Feb 27, 2024
d676093
fix(tile-converter): compose SLPK hash file (#2895)
belom88 Feb 27, 2024
6c52dee
v4.2.0-alpha.4
dariaterekhova-actionengine Feb 27, 2024
3930317
chore(i3s examples): add i3s colorization by attributes (#2887)
maxkuznetsov-actionengine Feb 28, 2024
30baa50
chore(docs): Update i3s colorization tutorial (#2900)
maxkuznetsov-actionengine Feb 28, 2024
449edca
chore(docs): Add live example into I3S BSL tutorial (#2898)
maxkuznetsov-actionengine Feb 28, 2024
a8613d4
chore(examples): delete i3s example (#2899)
maxkuznetsov-actionengine Feb 28, 2024
59db089
chore(docs): Add I3S Picking Tutorial (#2896)
maxkuznetsov-actionengine Feb 28, 2024
2f954c1
feat(pmtiles): Upgrade to pmtiles v3 (#2902)
ibgreen Feb 29, 2024
562f781
chore(examples): loading of slpk in browser experimental(#2904)
dariaterekhova-actionengine Mar 4, 2024
eef42ae
chore: Move examples to deck.gl@9.0.0-beta.5 (#2901)
ibgreen Mar 5, 2024
c4dac47
chore: Port I3S examples to v9 (#2903)
ibgreen Mar 6, 2024
366bc11
feat(loader-utils): Add RequestScheduler 'debounceTime' option (#2892)
donmccurdy Mar 6, 2024
de71dfc
fix(core): Avoid reassigning loaders._state (#2905)
Pessimistress Mar 6, 2024
2940e5f
chore: Upgrade ocular-dev-tools to tsc+esbuild (#2897)
ibgreen Mar 7, 2024
32d95a8
v4.2.0-alpha.5
ibgreen Mar 7, 2024
73d8eb4
CHANGELOG for 4.2.0-beta.5
ibgreen Mar 7, 2024
78a7d82
docs: migration info loaders v4 (#2908)
birkskyum Mar 7, 2024
6840729
feat(i3s): local slpk rendering example (#2906)
belom88 Mar 8, 2024
f71b626
website: new hero example (#2907)
belom88 Mar 8, 2024
f3d6c61
chore(lerc): Restore lerc module (#2912)
ibgreen Mar 12, 2024
8bafe81
fix(parquet): Restore ParquetWASMLoader after esbuild upgrade (#2915)
ibgreen Mar 12, 2024
5190288
fix(*): Fix transitive internal dependencies (#2919)
donmccurdy Mar 18, 2024
6a1d3c0
fix(parquet): Zstd-codec import turned on (#2922)
dariaterekhova-actionengine Mar 22, 2024
a50dd50
chore(deps): bump webpack-dev-middleware from 5.3.3 to 5.3.4 in /webs…
dependabot[bot] Mar 25, 2024
6176309
chore(deps): bump follow-redirects from 1.15.4 to 1.15.6 in /website …
dependabot[bot] Mar 25, 2024
009e55c
fix (parquet): Increased max dictionary size to the max size of Array…
dariaterekhova-actionengine Mar 25, 2024
c1a1376
chore(deps): bump katex from 0.16.9 to 0.16.10 in /website (#2927)
dependabot[bot] Mar 26, 2024
0a9c693
fix(tile-converter): --install-dependencies don't raise error (#2925)
belom88 Mar 26, 2024
2ad4c3f
chore(deps): bump express from 4.18.2 to 4.19.2 in /website (#2931)
dependabot[bot] Mar 27, 2024
f421c9a
chore: fix eslint issues (#2923)
belom88 Mar 28, 2024
13dceb5
chore: Upgrade website and examples to deck.gl v9 (#2932)
ibgreen Mar 28, 2024
01c88c5
chore(deps): bump express from 4.18.2 to 4.19.2 (#2930)
dependabot[bot] Mar 28, 2024
b01c4bd
chore: Upgrade to yarn 4 (#2917)
ibgreen Mar 28, 2024
314af6c
fix(gltf): Support models where some TextureInfo definitions use KHR_…
donmccurdy Mar 28, 2024
ca4ab8c
fix(wkt): Increased amount of memory for polygon indices (#2934)
dariaterekhova-actionengine Mar 30, 2024
37bd8ca
v4.2.0-alpha.6
belom88 Apr 1, 2024
91c6402
fix(wkt): multipolygons UInt16 overflow (#2935)
belom88 Apr 1, 2024
4245e5f
Fix laslaz-decoder.ts: free memory after laz file parsed. (#2933)
blvd20 Apr 1, 2024
6e9f9a0
Revert "fix(wkt): multipolygons UInt16 overflow" (#2939)
ibgreen Apr 2, 2024
4afb366
chore: Use `const satisfies on Loaders and Writers (#2938)
ibgreen Apr 2, 2024
4ca571a
chore(compression/parquet): Improved handling of injected modules (#2…
ibgreen Apr 2, 2024
c179438
fix(parquet): zstd decompression (#2937)
belom88 Apr 3, 2024
47f091c
fix(examples): Fix texture example (+ website) (#2943)
ibgreen Apr 3, 2024
a44437d
chore: Bump to 4.2-beta (#2948)
ibgreen Apr 4, 2024
2a492a4
fix(csv): CSVLoader - narrow result types (#2945)
Pessimistress Apr 4, 2024
46d7f30
docs: update whats-new (#2946)
belom88 Apr 4, 2024
51af025
Throws more useful error when fetch fails (#2921)
Pessimistress Apr 4, 2024
30e59e5
feat: Add options.<loader>.workerUrl (#2950)
ibgreen Apr 4, 2024
03173b7
fix(draco): Ignore unknown attribute types (#2951)
ibgreen Apr 5, 2024
05c5082
fix(wms): Use correct featureInfo parameters for WMS 1.3 (#2952)
ibgreen Apr 5, 2024
143b41f
chore(draco): Clean up loader (#2955)
ibgreen Apr 5, 2024
db26c7a
feat(3d-tiles): Test cleanup (#2954)
ibgreen Apr 5, 2024
b66e9ee
fix(core): Case insensitive MIME type comparison (#2956)
ibgreen Apr 5, 2024
ca19f79
docs: Polish release notes (#2957)
ibgreen Apr 5, 2024
2f269c0
chore(worker-utils): Use polyfills in worker-utils to avoid build war…
ibgreen Apr 6, 2024
c386a91
v4.2.0-beta.1
belom88 Apr 8, 2024
55bf10a
fix: CHANGELOG.md
belom88 Apr 8, 2024
84864bd
fix(parquet): fix stack overflow for large datasets (#2960)
belom88 Apr 8, 2024
cd2b578
fix(parquet): incorrect dictionary loading (#2959)
belom88 Apr 8, 2024
6a37840
fix(loader-utils): Do not require dataType and batchType on loaders. …
ibgreen Apr 8, 2024
13c0366
v4.2.0-beta.2
belom88 Apr 8, 2024
0d9f54f
v4.2.0
belom88 Apr 9, 2024
3c5f743
docs: v4.2 release notes (#2963)
ibgreen Apr 9, 2024
03f2dd1
sync with upstream 4.2.0
quipo Apr 12, 2024
ff77f03
Use volta
Kaapp Apr 30, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore(docs): Update i3s colorization tutorial (visgl#2900)
maxkuznetsov-actionengine authored Feb 28, 2024

Verified

This commit was signed with the committer’s verified signature.
yanmxa Meng Yan
commit 30baa500537bfd06d32de5ef77e2cf64d49f986d
118 changes: 0 additions & 118 deletions docs/modules/i3s/recipes/attribute-driven-colorization.md

This file was deleted.

130 changes: 130 additions & 0 deletions docs/modules/i3s/recipes/attribute-driven-colorization.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
# Attribute-driven colorization

import Demo from 'examples/website/i3s-colorization-by-attributes/src/app';

<div style={{height: '50vh'}}>
<Demo />
</div>
Please find source code of the example [here](https://github.com/visgl/loaders.gl/tree/master/examples/website/i3s-colorization-by-attributes)

In I3S, a feature represents a real-world object within a node. For example, a building within a 3D object scene layer. Node resources such as geometry buffer and attributes can belong to a feature and can be accessed by an object-ID.

In terms of geometry, every vertex of a mesh is associated with some feature. At the same time, every feature is associated with feature attribute values. For example, there might be `HEIGHT` attribute that stores roof height information about every building.

All that means that it is possible to make some visual effects related to attribute value. It might be text labels, colors, opacity etc.

The complete case of attributes colorization is done in [I3S Explorer](https://i3s.loaders.gl/viewer?tileset=new-york). It is an open source ReactJS application. See source code on [GitHub](https://github.com/visgl/loaders.gl-showcases).

![I3S New York dataset colorized by height roof](i3s-new-york-colorize-by-heightroof.png)

## Find out layer's attributes

It is necessary to pick some attribute to colorize a layer by. So it is necessary to load the layer JSON:

```javascript
import {load} from '@loaders.gl/core';
import {I3SLoader} from '@loaders.gl/i3s';

const i3sLayer = await load(url, I3SBuildingSceneLayerLoader);
```

List and types of attributes might be taken from [`i3sLayer.fields`](https://github.com/Esri/i3s-spec/blob/master/docs/1.9/field.cmn.md) and [`i3sLayer.attributeStorageInfo`](https://github.com/Esri/i3s-spec/blob/master/docs/1.8/attributeStorageInfo.cmn.md) properties.

## Setup colorization scale

Attributes colorization capability applies linear color gradient. To create this gradient attribute values range is required.

To get minimum and maximum attribute values [statistics](https://github.com/Esri/i3s-spec/blob/master/docs/1.9/statisticsInfo.cmn.md) can be used. The [statistics info JSON](https://github.com/Esri/i3s-spec/blob/master/docs/1.9/statsInfo.cmn.md) has min and max values. Usage of those values allows setting true attribute values range not clamping extremum values.

As soon as statistics info is stored in separate resources, it has to be loaded in a separate request. Statistics is just a JSON data and can be loaded the following way:

```ts
import {fetchFile} from '@loaders.gl/core';
import {StatsInfo} from '@loaders.gl/i3s';

const dataResponse = await fetchFile(`${url}/statistics/f_5/0`);
const data = JSON.parse(await dataResponse.text());
const stats: StatsInfo | null = (data?.stats as StatsInfo) || null;
```

## Use DataDrivenTile3DLayer

To colorize an I3S dataset on the fly you have to use `DataDrivenTile3DLayer` from `@deck.gl-community/layers`. First of all you need to add `@deck.gl-community/layers` into the project:

```bash
yarn add @deck.gl-community/layers
```

Then you can use `DataDrivenTile3DLayer`, `colorizeTile` util function as a prop `customizeColors` of the layer and set prop `colorsByAttribute` with required params (attribute name, min/max values, min/max colors, mode):

```ts
import Map from 'react-map-gl';
import maplibregl from 'maplibre-gl';
import DeckGL from "@deck.gl/react";
import {DataDrivenTile3DLayer, colorizeTile} from '@deck.gl-community/layers';
import {I3SLoader} from "@loaders.gl/i3s";

function renderLayers() {
const loadOptions = {i3s: {coordinateSystem: COORDINATE_SYSTEM.LNGLAT_OFFSETS}};
const colorsByAttribute = {
attributeName,
minValue: stats.min,
maxValue: stats.max,
minColor: [146, 146, 252, 255], // #9292FC
maxColor: [44, 44, 175, 255], // #2C2CAF
mode: 'replace'
}
const layers = new DataDrivenTile3DLayer({
data: url,
loader: I3SLoader,
onTilesetLoad: onTilesetLoadHandler,
loadOptions,
colorsByAttribute,
customizeColors: colorizeTile
});

return layers;
}

<DeckGL initialViewState={viewState} layers={renderLayers()} controller>
<Map
reuseMaps
mapLib={maplibregl}
mapStyle={style}
/>
</DeckGL>
```

## Colorization mode

Attributes colorization capability can work in 2 modes: 'replace' and 'multiply'.

`replace` mode. Attribute-based colors replace geometry vertex colors.

`multiply` mode. Attribute-based colors multiply with geometry vertex colors.

Usage example:

```ts
function renderLayers() {
const loadOptions = {i3s: {coordinateSystem: COORDINATE_SYSTEM.LNGLAT_OFFSETS}};
const colorsByAttribute = {
attributeName,
minValue: stats.min,
maxValue: stats.max,
minColor: [146, 146, 252, 255], // #9292FC
maxColor: [44, 44, 175, 255], // #2C2CAF
mode: 'multiply' // or 'replace'
};
const layers = new DataDrivenTile3DLayer({
data: url,
loader: I3SLoader,
onTilesetLoad: onTilesetLoadHandler,
loadOptions,
colorsByAttribute,
customizeColors: colorizeTile
});

return layers;
}
```
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@
"@loaders.gl/core": "^4.0.0",
"@loaders.gl/i3s": "^4.0.0",
"@luma.gl/core": "^8.5.21",
"mapbox-gl": "npm:empty-npm-package@^1.0.0",
"mapbox-gl": "npm:empty-npm-package@1.0.0",
"maplibre-gl": "^3.6.2",
"prop-types": "^15.7.2",
"react": "^18.2.0",
3 changes: 2 additions & 1 deletion examples/website/i3s-colorization-by-attributes/src/app.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, {useEffect, useState} from 'react';
import {createRoot} from 'react-dom/client';

import {Map} from 'react-map-gl';
import Map from 'react-map-gl';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

import DeckGL from '@deck.gl/react';
import {ViewState, FlyToInterpolator} from '@deck.gl/core';