Realistic Waters Effects in JavaScript Web Apps

[RichieCarmichael]

At last year's Developer Summit, Jesse van den Kieboom demonstrated how realistic water effects can be applied to a JavaScript based web application (see slides, demo and source).  The Prototype Lab modified Jesse's code to work with coastal inundation areas hosted in an AGOL feature service.  This sample is based on version 4.3 of the ArcGIS API for JavaScript and three.js.

Click here for the live application.

Click here for the source code.

[IsmaelChivite]

Thanks for sharing Richie!  The links to the live app and source code are reversed. The live  app links to the source code and the source link take you to the live app.

[RichieCarmichael]

Posting corrected. Thanks Ismael!

[VirNaidoo]

Hi， Ismael：

   The code i have downloaded ,but the html file i can't open it.Would you mind to tell me how to deploy it ??

   Thanks advance.

Vir Naidoo

[RichieCarmichael]

Hi Vir Naidoo‌,

The downloaded html/js/css files need to be hosted on a web server like IIS. Below is a link to a short youTube video describing how to host web page files on a local IIS server on Windows 10.

How To Setup Website Hosting On Windows 10 Using IIS

Hope this helps!

[VirNaidoo]

Dear Richie :

The video is good helpful.The website has opened successful！Thank you ~

[VirNaidoo]

Dear Richie :

I see the code of the demo's html and JS files,and want to know whether the render is based on sceneLayer? I have been always think it is based on featureLayer. Could you please tell me ??

[RichieCarmichael]

Hi Vir Naidoo‌,

Geometry for the ocean, or specifically the Patapsco River in Baltimore, is sourced from a feature service. This geometry is rendered using an external renderer.

[VirNaidoo]

Hi Richie Carmichael ,

I really want to know why use "esri/geometry/Extent"and"esri/views/3d/layers/graphics/earcut/earcut",? forgive me, i'm a freshman on this.

[RichieCarmichael]

Hi Vir Naidoo‌,

No need to apologize. You can find the API reference and developer samples for the ArcGIS API for JavaScript here. Earcut is an undocumented class used for polygon tessellation.

[VirNaidoo]

HiRichie Carmichael ,

I just replace the URL of featureLayer, in my scene the featureLayer was broken,it seems been cut by the code, just like the picture in the below. could you please tell me what cause that?? thanks advance.

Here is my featureLayer service:    https://trail.arcgisonline.cn/arcgis/rest/services/lake/FeatureServer 

[RichieCarmichael]

Hi Vir Naidoo‌,

Very unusual. Perhaps you are reaching a vertex count limitation. Try generalizing the geometry with either the REST API or client-side (see generalize).

[jinghan2]

hey,I wander weather you can do some external work to make this code simple to use??

[RichieCarmichael]

Hi jing han‌, I agree that to achieve this water affect is fairly complicated. Hopefully future releases of the ArcGIS API for JavaScript will make this easier.  In the meantime perhaps CityEngine can provide a realistic representation of your data.

[VirNaidoo]

Hi Richie Carmichael ,

I just achieved it with custom elevation layer,and now i have a project include 2D and 3D switch function, and i wonder how  to put the realistic water in to my project. I have tried so many time and failed ,could you please show me how to achieve it??? 

[RichieCarmichael]

Hi Vir Naidoo‌, I may not be able provide the timely assistance you need. As such, may I suggest you contact Esri Support.

[SaschaBrunnerCH]

With ArcGIS JS API Version 4.12 there is now support for realistic water effect out of the box.
See:
https://developers.arcgis.com/javascript/latest/sample-code/visualization-realistic-water/index.html
https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-WaterSymbol3DLayer.html