Double Render in prod.

[MauricioRojasCareers]

Hey, thank you so much for making this repo public! This is pure gold. Just wanted to inform you about something I discovered while trying to extend on the logic you already provided. In your article you note:
"Another thing I missed was a dev environment double-render example. With NextJs 13.4+, React strcit mode is enabled by default on the dev environment. So if you have an initializing function that adds things like Primitives for example, you need to have a cleanup function so the same things don’t get added twice. I added an example in the repo on May 19 2024 tackling this. Or you can turn off React Strict mode… but I do not suggest you doing that!"

I think that your css styles are actually hiding the fact that there is two viewers initialized. That is why when you zoom in to the red ellipse given by the positions, the rendering starts to break down... take a look:
https://drive.google.com/file/d/1j9C1kiGAayKuzIhEz2QUg1ub8imGv-gB/view?usp=sharing

In the first part of the video, I am visiting your deployed version of the app. In the second example where the ellipse does not break down, I have disabled strict mode because when removing the default styling that your repo offers and installing tailwindcss I discovered that the viewer gets rendered twice. I am trying to combat this by fetching terrain data in a server component and passing as props but no luck yet. Doesn't seem to happen in prod though, but I suspect that your deployed app has two viewers overlayed on top of each other.

For reference here is a deployed version of my app (turned strict mode back on for deployment): https://flight-planner-next-git-se-d8bdb6-mauriciorojascareers-projects.vercel.app/

[hyundotio]

Hey Mauricio, I am glad that the repo has helped out. I can't view your Preview link as it's locked to your account / your Vercel team. As for the issue, I'm not convinced that the rendering errors you've faced on Cesium has anything to do with CSS as the clipping issue seems more like a 3D z-index issue from Cesium (maybe caused by the flat red ellipse/circle on top of a sphere with varying height). What are you trying to do exactly? I can try to diagnose the issue with you. I did so much work with Cesium lately that it's still fresh in my mind. www.satcat.com <- is where all of my work is in. Thanks!

[MauricioRojasCareers]

Satcat is insanely impressive! This is using Next and Cesium? I can only dream of building something like this haha. Here is an updated link to deployment: https://flight-planner-next-git-se-d8bdb6-mauriciorojascareers-projects.vercel.app/?_vercel_share=yT2ThnHcrDglE3KIIQN45NIvqqTi0LH1 I am trying to build a UAV flight planner. This tool already exists at my company but the current standing repo is using vanilla html/js and bootstrap and it is not scaling at all. I know Next pretty well, however what you are doing here is the first I'm seeing of such patterns. I am trying to experiment with your repo as I believe it will scale much better. At the moment, I have a working viewer and even got tailwind working so that I can implement some custom ui. I am using try { // Wait for the terrain provider to load asynchronously const terrainProvider = await CesiumJs.CesiumTerrainProvider.fromUrl( ` https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${process.env.NEXT_PUBLIC_MAPTILER_KEY}` , { requestVertexNormals: true, // Enables smooth shading requestWaterMask: true, // Enables water effects } ); for serving a terrain model that is a little more pronounced and accurate than cesiumViewer.current = new CesiumJs.Viewer(cesiumContainerRef.current, { //Using the Sandcastle example below // https://sandcastle.cesium.com/?src=3D%20Tiles%20Feature%20Styling.html terrain: CesiumJs.Terrain.fromWorldTerrain() }); but I keep getting two viewers in the dev environment and it is annoying, though I don't think it is entirely critical because it does not happen in prod.

…

On Sun, Nov 17, 2024 at 10:43 AM Hyun Seo ***@***.***> wrote: Hey Mauricio, I am glad that the repo has helped out. I can't view your Preview link as it's locked to your account / your Vercel team. As for the issue, I'm not convinced that the rendering errors you've faced on Cesium has anything to do with CSS as the clipping issue seems more like a 3D z-index issue from Cesium (maybe caused by the flat red ellipse/circle on top of a sphere with varying height). What are you trying to do exactly? I can try to diagnose the issue with you. I did so much work with Cesium lately that it's still fresh in my mind. www.satcat.com <- is where all of my work is in. Thanks! Hyun On Nov 17, 2024, at 11:25 AM, Mauricio A Rojas ***@***.***> wrote: Hey, thank you so much for making this repo public! This is pure gold. Just wanted to inform you about something I discovered while trying to extend on the logic you already provided. In your article you note: "Another thing I missed was a dev environment double-render example. With NextJs 13.4+, React strcit mode is enabled by default on the dev environment. So if you have an initializing function that adds things like Primitives for example, you need to have a cleanup function so the same things don’t get added twice. I added an example in the repo on May 19 2024 tackling this. Or you can turn off React Strict mode… but I do not suggest you doing that!" I think that your css styles are actually hiding the fact that there is two viewers initialized. That is why when you zoom in to the red ellipse given by the positions, the rendering starts to break down... take a look: https://drive.google.com/file/d/1j9C1kiGAayKuzIhEz2QUg1ub8imGv-gB/view?usp=sharing In the first part of the video, I am visiting your deployed version of the app. In the second example where the ellipse does not break down, I have disabled strict mode because when removing the default styling that your repo offers and installing tailwindcss I discovered that the viewer gets rendered twice. I am trying to combat this by fetching terrain data in a server component and passing as props but no luck yet. Doesn't seem to happen in prod though, but I suspect that your deployed app has two viewers overlayed on top of each other. For reference here is a deployed version of my app (turned strict mode back on for deployment): https://flight-planner-next-git-se-d8bdb6-mauriciorojascareers-projects.vercel.app/ — Reply to this email directly, view it on GitHub , or unsubscribe . You are receiving this because you are subscribed to this thread. Message ID: ***@***.***> — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AT4RJJ5D2HY7SCEYCKMKSW32BDBUFAVCNFSM6AAAAABR6C2BACVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOBRGM3DEOBXGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[hyundotio]

Thank you! Yea Satcat uses Nextjs, Cesiumjs and some other tech of course.

Regarding your issue, how are you setting terrainProvier to the Cesium Viewer? Are you sure you're not making a new CesiumJs.Viewer every time the data updates or sets? (perhaps, sorry I don't have the full? Make sure you're make a new Viewer once then modify the existing Viewer.