-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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
Add support for concave /convex clipping planes + holes in CesiumJS #8751
Comments
Requested on the forum here: https://community.cesium.com/t/how-to-clipping-multiple-polygon-on-the-cesium3dtileset/9182/2 |
I also need support for concave polygon |
@NotEmptyWKL can you describe your use case? |
|
Another request for multiple disjoint clipping polygons came from https://community.cesium.com/t/multiple-clippingplanes/11809 |
I urgently need multiple clipping on the globe!. Here is a simple effect I achieved. These files are modified: GlobeSurfaceShaderSet.js, GlobeSurfaceTileProvieder.js, Globe.js, GlobeVS.glsl. You can now clip multiple polygons on the globe by passing an instance of MultiClippingPlaneCollection which manages a list of ClippingPlaneCollection to the multiClippingPlanes property new added to the globe. For example:
The key point is to rewrite the orginal getClippingFunction.js to getMultiClippingFunction.js to make the fragment shader able to handle multiple clipping plane collections. The shader also needs to know the length of every collection so it can get the correct clipping plane. This is only a temporary solution on multi-clipping on terrain, more problems to be solved:
Hope this feautre will come out soon! There are some mistakes in the MultiClippingPlaneCollection.js file. Please replace it with the new file below. Thanks to @andrevall. I reuploaded files after I updated Cesium to 1.92. I put the exmaple in the sandcaslte https://zhwy.github.io/cesium/Apps/Sandcastle/index.html?src=Terrain%20Multiple%20Clipping%20Planes.html. |
Hello @zhwy, thank you for your reply! I applied the changes you mentioned to the I really hope that @cesiumgs-admin will merge this feature in a future release: clipping multiple holes in the terrain is a feature that a lot of people would benefit from. Thank you again! Andrea |
You are welcome, Andrea. @andrevall |
excuse me, how to works on the 3dtiles? |
@abcdweiok Sorry, I'm not working on it now, might take some time to figure this out. |
@Samulus Hi, When will this capability be supported? |
Hi @zhwy, again thank you so much for this amazing extension to CesiumJS! I would like to notify two bugs that I experience with the multiClippingPlaneCollection:
I tried fixing these problems, but my webGL and JS knowledge is too limited for this complex stuff 😌 |
Hi @andrevall, Thank you for notifying! The first problem seems to be a bug of Cesium. I found the same problem of the original terrain clipping example on iphone. About the second problem, the copyFrom interface of Texture class has been modified from 1.84, a 'source' parameter is now required. Two places in MultiClippingPlaneCollection.js need correcting:
Here's the new file: |
Hi @zhwy, Following these lines, I reaffirm the importance of this extension. In my case, I am looking for a way to fit the holes in the tunnels of an underground infrastructure and without a doubt it would be great to have this active capacity. At the moment I can only apply a transparency when I approach the mouth of the tunnel. |
Hi @raulvigueras, Sorry for my replying late. You may try to use the MultiClippingPlaneCollection to clip the holes of tunnels. Yet the effect is not very good, it's hard to fit the tunnel holes very well. |
Thanks @zhwy. |
Hi @raulvigueras , did you run the compile command like 'npm run build' in the cesium root directory? After doing this a new Cesium.js will be created in the 'Source' directory and you can import it as a module to use Cesium.MultiClippingPlaneCollection in your test page with 'import * as Cesium from "path/to/Source/Cesium.js"'. If you want to make a release version, run the command 'npm run minifyRelease' in the root directory and this will create a 'Build/Cesium' directory which contains the Cesium.js. Put the entire 'Build/Cesium' directory on a server, now you can use it with <script src="path/to/Cesium.js"> . |
I added six clipping surfaces to the project, which caused my page to get stuck |
Another problem is that if I add clipping surfaces at the beginning and then I clear them, I need to add them twice if I want to add them again |
Hi, @chenwwsdo |
Okay, I would like to know if future updates will consider adding 3dTIles' multiple cropping API |
Hello! Is it possible to update the feature to the latest? 1.106 or 1.107? Thanks! |
Update for Cesium 1.108. files.zip |
@zhwy any update on multiclipping for 3D Tileset? |
Hi, I tried in Cesium1.108, no error shows,but results are not displayed on earth.o(╥﹏╥)o |
Hi,
We have tried the below update for multi-clipping, but have an issue if you could please assist? Developers code in .txt file attached.
From our developer;
I already also managed to add the version with Multi clipping code to our project. But the multi clipping code itself does not work. Or maybe it works, but due to the lack of documentation for it, I can’t understand what to set in the modelMatrix field of the options object or something else. If we have the opportunity to ask the Cesium developer who sent us this code, then we can try to ask:- How to correctly use their MultiClippingPlaneCollection?
If we built Cesium version release with multi clipping code, then what should we fix in the code below for Sandcastle so that clipping works? No error occurs. The array of ClippingPlaneCollections is successfully assigned to field collections. But clipping is not performed:
Kind Regards,
Clint Motley
Co-Founder / Managing Director
p 0431 461 763
e ***@***.***> ***@***.***
w <http://www.immersiv.com.au/> www.immersiv.com.au
<https://www.instagram.com/immersiv_3d/> <https://www.linkedin.com/company/immersivau/>
From: zhwy ***@***.***>
Sent: Tuesday, August 15, 2023 5:53 PM
To: CesiumGS/cesium ***@***.***>
Cc: Immersiv-1 ***@***.***>; Mention ***@***.***>
Subject: Re: [CesiumGS/cesium] Add support for concave /convex clipping planes + holes in CesiumJS (#8751)
Update for Cesium 1.108. files.zip <https://github.com/CesiumGS/cesium/files/12342179/files.zip>
@Immersiv-1 <https://github.com/Immersiv-1> @saadatali48 <https://github.com/saadatali48>
—
Reply to this email directly, view it on GitHub <#8751 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/A45M3UBM3VYN6RAZLHHBB7TXVMTFNANCNFSM4MG7R2FA> .
You are receiving this because you were mentioned. <https://github.com/notifications/beacon/A45M3UBFSMRGCC5NLATSEHTXVMTFNA5CNFSM4MG7R2FKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOMQGKHYA.gif> Message ID: ***@***.*** ***@***.***> >
const viewer = new Cesium.Viewer("cesiumContainer", {
terrain: Cesium.Terrain.fromWorldTerrain(),
});
const globe = viewer.scene.globe;
globe.depthTestAgainstTerrain = true;
const entity1 = createEntityAtLongitude(-2.086);
const entity2 = createEntityAtLongitude(-2.0863);
const entity3 = createEntityAtLongitude(-2.0866);
const collection1 = createClippingPlaneCollection(entity1);
const collection2 = createClippingPlaneCollection(entity2);
const collection3 = createClippingPlaneCollection(entity3);
//globe.clippingPlanes = collection1;
globe.collections = new Cesium.MultiClippingPlaneCollection({
modelMatrix: Cesium.Matrix4.IDENTITY,
collections: [
collection1,
collection2,
collection3,
],
});
viewer.trackedEntity = entity2;
function createEntityAtLongitude(longitude){
const position = Cesium.Cartesian3.fromRadians(
longitude,
0.6586620013036164,
1400.0
);
const entity = viewer.entities.add({
position: position,
box: {
dimensions: new Cesium.Cartesian3(1400.0, 1400.0, 2800.0),
material: Cesium.Color.WHITE.withAlpha(0.3),
outline: true,
outlineColor: Cesium.Color.WHITE,
},
});
return entity;
}
function createClippingPlaneCollection(entity){
const collection = new Cesium.ClippingPlaneCollection({
modelMatrix: entity.computeModelMatrix(Cesium.JulianDate.now()),
planes: [
new Cesium.ClippingPlane(
new Cesium.Cartesian3(1.0, 0.0, 0.0),
-700.0
),
new Cesium.ClippingPlane(
new Cesium.Cartesian3(-1.0, 0.0, 0.0),
-700.0
),
new Cesium.ClippingPlane(
new Cesium.Cartesian3(0.0, 1.0, 0.0),
-700.0
),
new Cesium.ClippingPlane(
new Cesium.Cartesian3(0.0, -1.0, 0.0),
-700.0
),
],
edgeWidth: 1.0,
edgeColor: Cesium.Color.WHITE,
enabled: true,
});
return collection;
}
|
I checked my codes and found that only the modelMatrix set on the MultiClippingCollection participates in the calculation, so the modelMatrix of each ClippingCollection has no effect. Better to calculate the clipping collections in the cartesian absolute coordinate system. Here is an example:
|
Thank you! We’ll give that a try.
Kind Regards,
Clint Motley
Co-Founder / Managing Director
p 0431 461 763
e ***@***.***> ***@***.***
w <http://www.immersiv.com.au/> www.immersiv.com.au
<https://www.instagram.com/immersiv_3d/> <https://www.linkedin.com/company/immersivau/>
From: zhwy ***@***.***>
Sent: Thursday, September 14, 2023 3:39 PM
To: CesiumGS/cesium ***@***.***>
Cc: Immersiv-1 ***@***.***>; Mention ***@***.***>
Subject: Re: [CesiumGS/cesium] Add support for concave /convex clipping planes + holes in CesiumJS (#8751)
@Iron-john <https://github.com/Iron-john> @Immersiv-1 <https://github.com/Immersiv-1>
I checked my codes and found that only the modelMatrix set on the MultiClippingCollection participates in the calculation, so the modelMatrix of each ClippingCollection has no effect. Better to calculate the clipping collections in the cartesian absolute coordinate system.
Here is an example:
const viewer = new Cesium.Viewer("cesiumContainer");
viewer.camera.setView({
destination: new Cesium.Cartesian3(1e7, 0, 0),
});
viewer.scene.debugShowFramesPerSecond = true;
const { globe } = viewer.scene;
globe.depthTestAgainstTerrain = true;
const multiCollections = new Cesium.MultiClippingPlaneCollection({
collections: [
generateClippingPlanesCollection([
Cesium.Cartesian3.fromDegrees(-10, -5),
Cesium.Cartesian3.fromDegrees(10, -5),
Cesium.Cartesian3.fromDegrees(0, 10),
]),
generateClippingPlanesCollection([
Cesium.Cartesian3.fromDegrees(-10, 5),
Cesium.Cartesian3.fromDegrees(0, -10),
Cesium.Cartesian3.fromDegrees(10, 5),
]),
],
modelMatrix: Cesium.Matrix4.IDENTITY,
edgeWidth: 5,
edgeColor: Cesium.Color.WHITE,
});
globe.multiClippingPlanes = multiCollections;
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
let positions = [];
// left click to add points to a clipping planes collection
handler.setInputAction(function (movement) {
const worldPosition = viewer.scene.pickPosition(movement.position);
if (Cesium.defined(worldPosition)) {
positions.push(worldPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// right click to end a clipping planes collection
handler.setInputAction(function (movement) {
const worldPosition = viewer.scene.pickPosition(movement.position);
if (Cesium.defined(worldPosition)) {
positions.push(worldPosition);
if (positions.length > 2) {
const collection = generateClippingPlanesCollection(positions);
multiCollections.add(collection);
positions = [];
}
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
function generateClippingPlanesCollection(points) {
const pointsLength = points.length;
const clippingPlanes = [];
for (let i = 0; i < pointsLength; ++i) {
const nextIndex = (i + 1) % pointsLength;
let midpoint = Cesium.Cartesian3.add(
points[i],
points[nextIndex],
new Cesium.Cartesian3()
);
midpoint = Cesium.Cartesian3.multiplyByScalar(
midpoint,
0.5,
midpoint
);
const up = Cesium.Cartesian3.normalize(
midpoint,
new Cesium.Cartesian3()
);
let right = Cesium.Cartesian3.subtract(
points[nextIndex],
midpoint,
new Cesium.Cartesian3()
);
right = Cesium.Cartesian3.normalize(right, right);
let normal = Cesium.Cartesian3.cross(
right,
up,
new Cesium.Cartesian3()
);
normal = Cesium.Cartesian3.normalize(normal, normal);
// Compute distance by pretending the plane is at the origin
const originCenteredPlane = new Cesium.Plane(normal, 0.0);
const distance = Cesium.Plane.getPointDistance(
originCenteredPlane,
midpoint
);
clippingPlanes.push(new Cesium.ClippingPlane(normal, distance));
}
return new Cesium.ClippingPlaneCollection({
planes: clippingPlanes,
modelMatrix: Cesium.Matrix4.IDENTITY,
});
}
—
Reply to this email directly, view it on GitHub <#8751 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/A45M3UFYYBVKTZ5KGK2NDZ3X2KJ7ZANCNFSM4MG7R2FA> .
You are receiving this because you were mentioned. <https://github.com/notifications/beacon/A45M3UD2PPLFLSZBDIHJ2JDX2KJ7ZA5CNFSM4MG7R2FKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOMZZLNIY.gif> Message ID: ***@***.*** ***@***.***> >
|
Hello!Do you happen to have an example in sandcastle by any chance?Thanks,ClintSent from my iPhoneOn 14 Sep 2023, at 15:40, ***@***.*** ***@***.*** { font-family: Helvetica; }
@font-face { font-family: "Cambria Math"; }
@font-face { font-family: Calibri; }
@font-face { font-family: Raleway; }
@font-face { font-family: Consolas; }
p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm; font-size: 11pt; font-family: Calibri, sans-serif; }
a:link, span.MsoHyperlink { color: blue; text-decoration: underline; }
code { font-family: "Courier New"; }
pre { margin: 0cm; font-size: 10pt; font-family: "Courier New"; }
span.HTMLPreformattedChar { font-family: Consolas; }
span.EmailStyle24 { font-family: Calibri, sans-serif; color: windowtext; }
.MsoChpDefault { font-family: Calibri, sans-serif; }
@page WordSection1 { size: 612pt 792pt; margin: 72pt; }
div.WordSection1 { page: WordSection1; }Thank you! We’ll give that a try. Kind Regards, Clint MotleyCo-Founder / Managing Director <image001.png> p 0431 461 763e ***@***.*** www.immersiv.com.au <image002.png> <image003.png> <image004.png><image005.png> From: zhwy ***@***.***> Sent: Thursday, September 14, 2023 3:39 PMTo: CesiumGS/cesium ***@***.***>Cc: Immersiv-1 ***@***.***>; Mention ***@***.***>Subject: Re: [CesiumGS/cesium] Add support for concave /convex clipping planes + holes in CesiumJS ***@***.*** @Immersiv-1I checked my codes and found that only the modelMatrix set on the MultiClippingCollection participates in the calculation, so the modelMatrix of each ClippingCollection has no effect. Better to calculate the clipping collections in the cartesian absolute coordinate system.Here is an example:const viewer = new Cesium.Viewer("cesiumContainer");viewer.camera.setView({ destination: new Cesium.Cartesian3(1e7, 0, 0),}); viewer.scene.debugShowFramesPerSecond = true; const { globe } = viewer.scene;globe.depthTestAgainstTerrain = true; const multiCollections = new Cesium.MultiClippingPlaneCollection({ collections: [ generateClippingPlanesCollection([ Cesium.Cartesian3.fromDegrees(-10, -5), Cesium.Cartesian3.fromDegrees(10, -5), Cesium.Cartesian3.fromDegrees(0, 10), ]), generateClippingPlanesCollection([ Cesium.Cartesian3.fromDegrees(-10, 5), Cesium.Cartesian3.fromDegrees(0, -10), Cesium.Cartesian3.fromDegrees(10, 5), ]), ], modelMatrix: Cesium.Matrix4.IDENTITY, edgeWidth: 5, edgeColor: Cesium.Color.WHITE,});globe.multiClippingPlanes = multiCollections; const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);let positions = []; // left click to add points to a clipping planes collectionhandler.setInputAction(function (movement) { const worldPosition = viewer.scene.pickPosition(movement.position); if (Cesium.defined(worldPosition)) { positions.push(worldPosition); }}, Cesium.ScreenSpaceEventType.LEFT_CLICK); // right click to end a clipping planes collectionhandler.setInputAction(function (movement) { const worldPosition = viewer.scene.pickPosition(movement.position); if (Cesium.defined(worldPosition)) { positions.push(worldPosition); if (positions.length > 2) { const collection = generateClippingPlanesCollection(positions); multiCollections.add(collection); positions = []; } }}, Cesium.ScreenSpaceEventType.RIGHT_CLICK); function generateClippingPlanesCollection(points) { const pointsLength = points.length; const clippingPlanes = []; for (let i = 0; i < pointsLength; ++i) { const nextIndex = (i + 1) % pointsLength; let midpoint = Cesium.Cartesian3.add( points[i], points[nextIndex], new Cesium.Cartesian3() ); midpoint = Cesium.Cartesian3.multiplyByScalar( midpoint, 0.5, midpoint ); const up = Cesium.Cartesian3.normalize( midpoint, new Cesium.Cartesian3() ); let right = Cesium.Cartesian3.subtract( points[nextIndex], midpoint, new Cesium.Cartesian3() ); right = Cesium.Cartesian3.normalize(right, right); let normal = Cesium.Cartesian3.cross( right, up, new Cesium.Cartesian3() ); normal = Cesium.Cartesian3.normalize(normal, normal); // Compute distance by pretending the plane is at the origin const originCenteredPlane = new Cesium.Plane(normal, 0.0); const distance = Cesium.Plane.getPointDistance( originCenteredPlane, midpoint ); clippingPlanes.push(new Cesium.ClippingPlane(normal, distance)); } return new Cesium.ClippingPlaneCollection({ planes: clippingPlanes, modelMatrix: Cesium.Matrix4.IDENTITY, });}—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>
|
Hi, also just confirming your code is the correct solution to our issue?Question from dev:Sent from my iPhoneOn 14 Sep 2023, at 15:40, ***@***.*** ***@***.*** { font-family: Helvetica; }
@font-face { font-family: "Cambria Math"; }
@font-face { font-family: Calibri; }
@font-face { font-family: Raleway; }
@font-face { font-family: Consolas; }
p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm; font-size: 11pt; font-family: Calibri, sans-serif; }
a:link, span.MsoHyperlink { color: blue; text-decoration: underline; }
code { font-family: "Courier New"; }
pre { margin: 0cm; font-size: 10pt; font-family: "Courier New"; }
span.HTMLPreformattedChar { font-family: Consolas; }
span.EmailStyle24 { font-family: Calibri, sans-serif; color: windowtext; }
.MsoChpDefault { font-family: Calibri, sans-serif; }
@page WordSection1 { size: 612pt 792pt; margin: 72pt; }
div.WordSection1 { page: WordSection1; }Thank you! We’ll give that a try. Kind Regards, Clint MotleyCo-Founder / Managing Director <image001.png> p 0431 461 763e ***@***.*** www.immersiv.com.au <image002.png> <image003.png> <image004.png><image005.png> From: zhwy ***@***.***> Sent: Thursday, September 14, 2023 3:39 PMTo: CesiumGS/cesium ***@***.***>Cc: Immersiv-1 ***@***.***>; Mention ***@***.***>Subject: Re: [CesiumGS/cesium] Add support for concave /convex clipping planes + holes in CesiumJS ***@***.*** @Immersiv-1I checked my codes and found that only the modelMatrix set on the MultiClippingCollection participates in the calculation, so the modelMatrix of each ClippingCollection has no effect. Better to calculate the clipping collections in the cartesian absolute coordinate system.Here is an example:const viewer = new Cesium.Viewer("cesiumContainer");viewer.camera.setView({ destination: new Cesium.Cartesian3(1e7, 0, 0),}); viewer.scene.debugShowFramesPerSecond = true; const { globe } = viewer.scene;globe.depthTestAgainstTerrain = true; const multiCollections = new Cesium.MultiClippingPlaneCollection({ collections: [ generateClippingPlanesCollection([ Cesium.Cartesian3.fromDegrees(-10, -5), Cesium.Cartesian3.fromDegrees(10, -5), Cesium.Cartesian3.fromDegrees(0, 10), ]), generateClippingPlanesCollection([ Cesium.Cartesian3.fromDegrees(-10, 5), Cesium.Cartesian3.fromDegrees(0, -10), Cesium.Cartesian3.fromDegrees(10, 5), ]), ], modelMatrix: Cesium.Matrix4.IDENTITY, edgeWidth: 5, edgeColor: Cesium.Color.WHITE,});globe.multiClippingPlanes = multiCollections; const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);let positions = []; // left click to add points to a clipping planes collectionhandler.setInputAction(function (movement) { const worldPosition = viewer.scene.pickPosition(movement.position); if (Cesium.defined(worldPosition)) { positions.push(worldPosition); }}, Cesium.ScreenSpaceEventType.LEFT_CLICK); // right click to end a clipping planes collectionhandler.setInputAction(function (movement) { const worldPosition = viewer.scene.pickPosition(movement.position); if (Cesium.defined(worldPosition)) { positions.push(worldPosition); if (positions.length > 2) { const collection = generateClippingPlanesCollection(positions); multiCollections.add(collection); positions = []; } }}, Cesium.ScreenSpaceEventType.RIGHT_CLICK); function generateClippingPlanesCollection(points) { const pointsLength = points.length; const clippingPlanes = []; for (let i = 0; i < pointsLength; ++i) { const nextIndex = (i + 1) % pointsLength; let midpoint = Cesium.Cartesian3.add( points[i], points[nextIndex], new Cesium.Cartesian3() ); midpoint = Cesium.Cartesian3.multiplyByScalar( midpoint, 0.5, midpoint ); const up = Cesium.Cartesian3.normalize( midpoint, new Cesium.Cartesian3() ); let right = Cesium.Cartesian3.subtract( points[nextIndex], midpoint, new Cesium.Cartesian3() ); right = Cesium.Cartesian3.normalize(right, right); let normal = Cesium.Cartesian3.cross( right, up, new Cesium.Cartesian3() ); normal = Cesium.Cartesian3.normalize(normal, normal); // Compute distance by pretending the plane is at the origin const originCenteredPlane = new Cesium.Plane(normal, 0.0); const distance = Cesium.Plane.getPointDistance( originCenteredPlane, midpoint ); clippingPlanes.push(new Cesium.ClippingPlane(normal, distance)); } return new Cesium.ClippingPlaneCollection({ planes: clippingPlanes, modelMatrix: Cesium.Matrix4.IDENTITY, });}—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>
|
Hi,
We now have multi-clipping working, but have the issue where performance plummets to 1-3fps on mid range computers?
Do you know of a solution? Cheers
Kind Regards,
Clint Motley
Co-Founder / Managing Director
p 0431 461 763
e ***@***.***> ***@***.***
w <http://www.immersiv.com.au/> www.immersiv.com.au
<https://www.instagram.com/immersiv_3d/> <https://www.linkedin.com/company/immersivau/>
From: zhwy ***@***.***>
Sent: Thursday, September 14, 2023 3:39 PM
To: CesiumGS/cesium ***@***.***>
Cc: Immersiv-1 ***@***.***>; Mention ***@***.***>
Subject: Re: [CesiumGS/cesium] Add support for concave /convex clipping planes + holes in CesiumJS (#8751)
@Iron-john <https://github.com/Iron-john> @Immersiv-1 <https://github.com/Immersiv-1>
I checked my codes and found that only the modelMatrix set on the MultiClippingCollection participates in the calculation, so the modelMatrix of each ClippingCollection has no effect. Better to calculate the clipping collections in the cartesian absolute coordinate system.
Here is an example:
const viewer = new Cesium.Viewer("cesiumContainer");
viewer.camera.setView({
destination: new Cesium.Cartesian3(1e7, 0, 0),
});
viewer.scene.debugShowFramesPerSecond = true;
const { globe } = viewer.scene;
globe.depthTestAgainstTerrain = true;
const multiCollections = new Cesium.MultiClippingPlaneCollection({
collections: [
generateClippingPlanesCollection([
Cesium.Cartesian3.fromDegrees(-10, -5),
Cesium.Cartesian3.fromDegrees(10, -5),
Cesium.Cartesian3.fromDegrees(0, 10),
]),
generateClippingPlanesCollection([
Cesium.Cartesian3.fromDegrees(-10, 5),
Cesium.Cartesian3.fromDegrees(0, -10),
Cesium.Cartesian3.fromDegrees(10, 5),
]),
],
modelMatrix: Cesium.Matrix4.IDENTITY,
edgeWidth: 5,
edgeColor: Cesium.Color.WHITE,
});
globe.multiClippingPlanes = multiCollections;
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
let positions = [];
// left click to add points to a clipping planes collection
handler.setInputAction(function (movement) {
const worldPosition = viewer.scene.pickPosition(movement.position);
if (Cesium.defined(worldPosition)) {
positions.push(worldPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// right click to end a clipping planes collection
handler.setInputAction(function (movement) {
const worldPosition = viewer.scene.pickPosition(movement.position);
if (Cesium.defined(worldPosition)) {
positions.push(worldPosition);
if (positions.length > 2) {
const collection = generateClippingPlanesCollection(positions);
multiCollections.add(collection);
positions = [];
}
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
function generateClippingPlanesCollection(points) {
const pointsLength = points.length;
const clippingPlanes = [];
for (let i = 0; i < pointsLength; ++i) {
const nextIndex = (i + 1) % pointsLength;
let midpoint = Cesium.Cartesian3.add(
points[i],
points[nextIndex],
new Cesium.Cartesian3()
);
midpoint = Cesium.Cartesian3.multiplyByScalar(
midpoint,
0.5,
midpoint
);
const up = Cesium.Cartesian3.normalize(
midpoint,
new Cesium.Cartesian3()
);
let right = Cesium.Cartesian3.subtract(
points[nextIndex],
midpoint,
new Cesium.Cartesian3()
);
right = Cesium.Cartesian3.normalize(right, right);
let normal = Cesium.Cartesian3.cross(
right,
up,
new Cesium.Cartesian3()
);
normal = Cesium.Cartesian3.normalize(normal, normal);
// Compute distance by pretending the plane is at the origin
const originCenteredPlane = new Cesium.Plane(normal, 0.0);
const distance = Cesium.Plane.getPointDistance(
originCenteredPlane,
midpoint
);
clippingPlanes.push(new Cesium.ClippingPlane(normal, distance));
}
return new Cesium.ClippingPlaneCollection({
planes: clippingPlanes,
modelMatrix: Cesium.Matrix4.IDENTITY,
});
}
—
Reply to this email directly, view it on GitHub <#8751 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/A45M3UFYYBVKTZ5KGK2NDZ3X2KJ7ZANCNFSM4MG7R2FA> .
You are receiving this because you were mentioned. <https://github.com/notifications/beacon/A45M3UD2PPLFLSZBDIHJ2JDX2KJ7ZA5CNFSM4MG7R2FKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOMZZLNIY.gif> Message ID: ***@***.*** ***@***.***> >
|
Too many points in the collection will raise the performace problem. You could try generating points dynamically referring to the comments above. @Immersiv-1
|
Hello,
Our developer has written a description for Cesium, so a performance integration can be incorporated for all Cesium customers using JS.
Is this possible to include as without this algorithm update, using multi clipping isn’t possible due to performance issues.
Hello Cesium team! Thank you for adding the multi clipping function. As you know, there is a considerable part of your clients who use your Cesium product in a more advanced way than most standard clients. And many on the forums have been waiting for the multi clipping function for several years. It allows to carve multiple regions, as well as get concave polygons from multiple convex polygons. Thank you again for creating it! Problem:Now we want to use it to it’s full potential. But the geographical lines of the natural landscape are so winding that hundreds of vertical planes have to be used.
And this leads to the problem of FPS drop, because each pixel of the screen goes through a clipping with several hundred planes. I am sure that when multi clipping is added to the official release, many clients will encounter this problem. Could you solve the optimization issue now? And we can test it on our project and give you feedback.The need to clip complex winding shapes arises when the question concerns the elements of nature on the ground surface.
Therefore, it will be enough to optimize just for this case. About function:The function can be called SurfaceMultiClipping or GroundMultiClipping. In addition to general ModelMatrix, this function will contain ClippingVertexGroup instead of MultiClippingPlaneCollection.ClippingVertexGroup is a new element that will be used as a node of tree. Each ClippingVertexGroup link-node as sub-tree has an array of more small adjacent in location ClippingVertexGroup. And each ClippingVertexGroup leaf-node has an array of sequential coordinates of the vertices of one convex polygon.
This tree should be converted into a tree with the ClippingPlaneGroup element as a node when the program starts. How the algorithm will work: Note: we need to select one plane relative to which we will project vertices, construct clipping planes and calculate distances. We can, of course, choose a 3-d plane horizontal with respect to the general ModelMatrix. But then we will have problems when working with particularly large clipping figures due to the ellipsoidal shape of the Earth. Therefore, I propose to perform the above operations relative to the surface of the earth at a height (distance from the center of the Earth) corresponding to the general ModelMatrix.Stage when starting the program:
1. For each ClippingVertexGroup leaf-node, align the height of the vertices according to the general ModelMatrix height.
2. Find the centre of the polygon as the point with the minimum distance from the vertices of the polygon that are furthest away from it.
3. Create a ClippingPlaneGroup, which will contain:
- the coordinates of the center of the group,
- the distance to the farthest vertex
- and one of two: either the VerticalClippingPlane array, or the array of child ClippingPlaneGroups. In this leaf-node case, with VerticalClippingPlane array.
VerticalClippingPlane contains 2 vertices and one standard ClippingPlane, which passes through 2 sequential vertices and the centre of the Earth and which clips the inside part of the polygon.
4. For each ClippingVertexGroup link-node create a ClippingPlaneGroup, which will contain the coordinates:
- of the center of this group of groups,
- the distance to the farthest vertex of all child group polygons
- and the array of child ClippingPlaneGroups.Every frame stage:1. Select all ClippingPlaneGroups wich circles (center + radius as distance to the farthest vertex) are not completely outside the viewport.
5. Select all VerticalClippingPlanes with at least one vertex is inside the viewport.
6. For each screen pixel:
- project onto the globe,
- align according to the general ModelMatrix height,
- traverse the ClippingPlaneGroup tree only by those (previously selected by the viewport) nodes in which circle or which parent’s circle the pixel projection is located,
- if ClippingPlaneGroup leaf-node is reached, check the pixel projection for clipping planes previously selected by the viewport.Expectations:The optimization will have a greater effect. We expect that the optimized algorithm can increase FPS by 15-45 times. This will allow all Cesium users to use a thousand clipping planes with 30-60 FPS for laptop.
Kind Regards,
Clint Motley
Co-Founder / Managing Director
p 0431 461 763
e ***@***.***> ***@***.***
w <http://www.immersiv.com.au/> www.immersiv.com.au
<https://www.instagram.com/immersiv_3d/> <https://www.linkedin.com/company/immersivau/>
From: zhwy ***@***.***>
Sent: Saturday, September 23, 2023 12:40 PM
To: CesiumGS/cesium ***@***.***>
Cc: Immersiv-1 ***@***.***>; Mention ***@***.***>
Subject: Re: [CesiumGS/cesium] Add support for concave /convex clipping planes + holes in CesiumJS (#8751)
Too many points in the collection will raise the performace problem. You could try generating points dynamically referring to the comments above. @Immersiv-1 <https://github.com/Immersiv-1>
Hello @kk1625846601 <https://github.com/kk1625846601> , can you upload a screenshot or a gif ? I don't understand "there is a layer of ground above, and I can't see the pipeline below from above the ground". Do you mean the ground is still visible after being clipped?
Hello, I have re studied the whole process and found that the problem lies in the method of generating pits. In the camera change event, the cutting plane can be dynamically updated. There are no problems with your multiclippingplanes.Thanks very much.
—
Reply to this email directly, view it on GitHub <#8751 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/A45M3UDYCQ5SHCYY7BB7U4TX3ZDWVANCNFSM4MG7R2FA> .
You are receiving this because you were mentioned. <https://github.com/notifications/beacon/A45M3UCIUBLJKPYJH32K3DDX3ZDWVA5CNFSM4MG7R2FKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOM47RQJI.gif> Message ID: ***@***.*** ***@***.***> >
|
Hi,
Following up regarding below? Cheers
Kind Regards,
Clint Motley
Co-Founder / Managing Director
p 0431 461 763
e ***@***.***> ***@***.***
w <http://www.immersiv.com.au/> www.immersiv.com.au
<https://www.instagram.com/immersiv_3d/> <https://www.linkedin.com/company/immersivau/>
From: ***@***.*** ***@***.***>
Sent: Sunday, September 24, 2023 5:36 AM
To: 'CesiumGS/cesium' ***@***.***>; 'CesiumGS/cesium' ***@***.***>
Cc: 'Mention' ***@***.***>; 'Kyle Heisey' ***@***.***>; 'Shehzan Mohammed' ***@***.***>
Subject: RE: [CesiumGS/cesium] Add support for concave /convex clipping planes + holes in CesiumJS (#8751)
Hello,
Our developer has written a description for Cesium, so a performance integration can be incorporated for all Cesium customers using JS.
Is this possible to include as without this algorithm update, using multi clipping isn’t possible due to performance issues.
Hello Cesium team! Thank you for adding the multi clipping function. As you know, there is a considerable part of your clients who use your Cesium product in a more advanced way than most standard clients. And many on the forums have been waiting for the multi clipping function for several years. It allows to carve multiple regions, as well as get concave polygons from multiple convex polygons. Thank you again for creating it! Problem:Now we want to use it to it’s full potential. But the geographical lines of the natural landscape are so winding that hundreds of vertical planes have to be used.
And this leads to the problem of FPS drop, because each pixel of the screen goes through a clipping with several hundred planes. I am sure that when multi clipping is added to the official release, many clients will encounter this problem. Could you solve the optimization issue now? And we can test it on our project and give you feedback.The need to clip complex winding shapes arises when the question concerns the elements of nature on the ground surface.
Therefore, it will be enough to optimize just for this case. About function:The function can be called SurfaceMultiClipping or GroundMultiClipping. In addition to general ModelMatrix, this function will contain ClippingVertexGroup instead of MultiClippingPlaneCollection.ClippingVertexGroup is a new element that will be used as a node of tree. Each ClippingVertexGroup link-node as sub-tree has an array of more small adjacent in location ClippingVertexGroup. And each ClippingVertexGroup leaf-node has an array of sequential coordinates of the vertices of one convex polygon.
This tree should be converted into a tree with the ClippingPlaneGroup element as a node when the program starts. How the algorithm will work: Note: we need to select one plane relative to which we will project vertices, construct clipping planes and calculate distances. We can, of course, choose a 3-d plane horizontal with respect to the general ModelMatrix. But then we will have problems when working with particularly large clipping figures due to the ellipsoidal shape of the Earth. Therefore, I propose to perform the above operations relative to the surface of the earth at a height (distance from the center of the Earth) corresponding to the general ModelMatrix.Stage when starting the program:
1. For each ClippingVertexGroup leaf-node, align the height of the vertices according to the general ModelMatrix height.
2. Find the centre of the polygon as the point with the minimum distance from the vertices of the polygon that are furthest away from it.
3. Create a ClippingPlaneGroup, which will contain:
- the coordinates of the center of the group,
- the distance to the farthest vertex
- and one of two: either the VerticalClippingPlane array, or the array of child ClippingPlaneGroups. In this leaf-node case, with VerticalClippingPlane array.
VerticalClippingPlane contains 2 vertices and one standard ClippingPlane, which passes through 2 sequential vertices and the centre of the Earth and which clips the inside part of the polygon.
4. For each ClippingVertexGroup link-node create a ClippingPlaneGroup, which will contain the coordinates:
- of the center of this group of groups,
- the distance to the farthest vertex of all child group polygons
- and the array of child ClippingPlaneGroups.Every frame stage:1. Select all ClippingPlaneGroups wich circles (center + radius as distance to the farthest vertex) are not completely outside the viewport.
5. Select all VerticalClippingPlanes with at least one vertex is inside the viewport.
6. For each screen pixel:
- project onto the globe,
- align according to the general ModelMatrix height,
- traverse the ClippingPlaneGroup tree only by those (previously selected by the viewport) nodes in which circle or which parent’s circle the pixel projection is located,
- if ClippingPlaneGroup leaf-node is reached, check the pixel projection for clipping planes previously selected by the viewport.Expectations:The optimization will have a greater effect. We expect that the optimized algorithm can increase FPS by 15-45 times. This will allow all Cesium users to use a thousand clipping planes with 30-60 FPS for laptop.
Kind Regards,
Clint Motley
Co-Founder / Managing Director
p 0431 461 763
e ***@***.***> ***@***.***
w <http://www.immersiv.com.au/> www.immersiv.com.au
<https://www.instagram.com/immersiv_3d/> <https://www.linkedin.com/company/immersivau/>
From: zhwy ***@***.*** ***@***.***> >
Sent: Saturday, September 23, 2023 12:40 PM
To: CesiumGS/cesium ***@***.*** ***@***.***> >
Cc: Immersiv-1 ***@***.*** ***@***.***> >; Mention ***@***.*** ***@***.***> >
Subject: Re: [CesiumGS/cesium] Add support for concave /convex clipping planes + holes in CesiumJS (#8751)
Too many points in the collection will raise the performace problem. You could try generating points dynamically referring to the comments above. @Immersiv-1 <https://github.com/Immersiv-1>
Hello @kk1625846601 <https://github.com/kk1625846601> , can you upload a screenshot or a gif ? I don't understand "there is a layer of ground above, and I can't see the pipeline below from above the ground". Do you mean the ground is still visible after being clipped?
Hello, I have re studied the whole process and found that the problem lies in the method of generating pits. In the camera change event, the cutting plane can be dynamically updated. There are no problems with your multiclippingplanes.Thanks very much.
—
Reply to this email directly, view it on GitHub <#8751 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/A45M3UDYCQ5SHCYY7BB7U4TX3ZDWVANCNFSM4MG7R2FA> .
You are receiving this because you were mentioned. <https://github.com/notifications/beacon/A45M3UCIUBLJKPYJH32K3DDX3ZDWVA5CNFSM4MG7R2FKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOM47RQJI.gif> Message ID: ***@***.*** ***@***.***> >
|
Hi, @Immersiv-1 MultiClippingCollection is not Cesium's official feature, it's my temporary solution. I am sorry you encountered problems with it. Your developer offered a good suggestion but I don't have time to solve this optimization problem right now. I suggest you look for other alternatives. |
Hey,
OK thanks for the reply. If we wrote the code, would Cesium be interested in sharing the costs so all Cesium users can make use of this?
Kind Regards,
Clint Motley
Co-Founder / Managing Director
p 0431 461 763
e ***@***.***> ***@***.***
w <http://www.immersiv.com.au/> www.immersiv.com.au
<https://www.instagram.com/immersiv_3d/> <https://www.linkedin.com/company/immersivau/>
From: zhwy ***@***.***>
Sent: Thursday, September 28, 2023 11:03 AM
To: CesiumGS/cesium ***@***.***>
Cc: Immersiv-1 ***@***.***>; Mention ***@***.***>
Subject: Re: [CesiumGS/cesium] Add support for concave /convex clipping planes + holes in CesiumJS (#8751)
Hi, @Immersiv-1 <https://github.com/Immersiv-1> MultiClippingCollection is not Cesium's official feature, it's my temporary solution. I am sorry you encountered problems with it. Your developer offered a good suggestion but I don't have time to solve this optimization problem right now. I suggest you look for other alternatives.
—
Reply to this email directly, view it on GitHub <#8751 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/A45M3UCBZ4K3BNGG4K33XQ3X4TECZANCNFSM4MG7R2FA> .
You are receiving this because you were mentioned. <https://github.com/notifications/beacon/A45M3UGDSSRXJMS3G2B7V6TX4TECZA5CNFSM4MG7R2FKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOM6OFK4Q.gif> Message ID: ***@***.*** ***@***.***> >
|
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
Hi @Immersiv-1 , @zhwy & everyone I want to have a single part of the globe and hide rest of it. As there is no option to use union clipping region, how we can use multiclipping in this case? Here is sandcastle link to current implementation. |
Regarding the cropping function of 3dTIles, is there any way to achieve multiple cropping? Currently, ClippingPlanes can only achieve single cropping |
I see a lot of feedback from people who want cesium to support multiple cropping on 3dTiles |
thank you! ClippingPolygonCollection api is very nice
…------------------ 原始邮件 ------------------
发件人: ***@***.***>;
发送时间: 2024年5月15日(星期三) 晚上6:23
收件人: ***@***.***>;
抄送: ***@***.***>; ***@***.***>;
主题: Re: [CesiumGS/cesium] Add support for concave /convex clipping planes + holes in CesiumJS (#8751)
cesium 1.117 Supports multiple polygon cropping
viewer.scene.globe.clippingPolygons = new Cesium.ClippingPolygonCollection({
polygons: polygons
});
1.png (view on web)
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you commented.Message ID: ***@***.***>
|
Is version 1.97 supported? |
version 1.117
…------------------ 原始邮件 ------------------
发件人: ***@***.***>;
发送时间: 2024年5月17日(星期五) 上午9:48
收件人: ***@***.***>;
抄送: ***@***.***>; ***@***.***>;
主题: Re: [CesiumGS/cesium] Add support for concave /convex clipping planes + holes in CesiumJS (#8751)
Is version 1.97 supported?
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you commented.Message ID: ***@***.***>
|
The user should be able to define a 2D clipping polygon with zero or more holes.
We should support:
We should disallow:
The text was updated successfully, but these errors were encountered: