{"id":13758993,"url":"https://github.com/jbouny/fft-ocean","last_synced_at":"2026-01-10T15:23:55.712Z","repository":{"id":23042630,"uuid":"26395621","full_name":"jbouny/fft-ocean","owner":"jbouny","description":"WebGL FFT (Fast Fourier transform) ocean rendering for Three.js","archived":false,"fork":false,"pushed_at":"2015-11-12T18:24:03.000Z","size":11276,"stargazers_count":297,"open_issues_count":4,"forks_count":55,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-08-03T13:02:28.223Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jbouny.github.io/fft-ocean/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jbouny.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-09T12:59:00.000Z","updated_at":"2024-07-28T19:37:36.000Z","dependencies_parsed_at":"2022-08-21T18:50:42.629Z","dependency_job_id":null,"html_url":"https://github.com/jbouny/fft-ocean","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbouny%2Ffft-ocean","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbouny%2Ffft-ocean/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbouny%2Ffft-ocean/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbouny%2Ffft-ocean/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbouny","download_url":"https://codeload.github.com/jbouny/fft-ocean/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224940759,"owners_count":17395752,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T13:00:42.774Z","updated_at":"2026-01-10T15:23:55.659Z","avatar_url":"https://github.com/jbouny.png","language":"JavaScript","funding_links":[],"categories":["Water","Lighting, Rendering \u0026 Shaders"],"sub_categories":["Svelte","Rendering \u0026 Shader Theory"],"readme":"A trip under the moonlight\n=========\n\nFast Fourier Transform ocean rendering for Three.js\n\nThis demo shows a way to render realistic scenes in WebGL.\n\nYou can travel by using the keyboard and the environment can be selected. You can also explore the working of the scene by typing 'h'.\n\nLive demo: https://jbouny.github.io/fft-ocean/\n\n### Screenshots\n\n![Alt text](/visual/night_ocean_fft.jpg \"Ocean rendering in a night environment\")\n\n![Alt text](/visual/sunset_ocean_fft.jpg \"Ocean rendering in a sunset environment\")\n\n![Alt text](/visual/day_ocean_fft.jpg \"Ocean rendering in a day environment\")\n\n### Features\n\n- Ocean rendering is based on the generation of a displacement map and a normal map applied with vertex and fragment shader\n- Ocean mesh is computed in screen space\n- Clouds and rain come from Three.js community\n\n### Screen space grid\n\nThe screen space working is in fact simple:\n\n- Add a grid in the scene, anywhere\n- The grid must always be seen by the camera, or the vertex shader will not be applied\n- In the vertex shader, the grid is then put in front of the camera in order to fill the entire screen\n- In the vertex shader, the grid is projected on a 3d plane (just change the depth)\n\nA complete explanation can be find here: http://habib.wikidot.com/projected-grid-ocean-shader-full-html-version\n\nSo, results are here.\n\nWith a 64*64 grid:\n\n![Alt text](/visual/screen_space_64.jpg \"Screen space 64*64 grid\")\n\nWith a 256*256 grid:\n\n![Alt text](/visual/screen_space_256.jpg \"Screen space 256*256 grid\")\n\n\n\n\n### Acknowledgments\n\n- @mrdoob and the three.js community for the library\n- @zz85 for the cloud shader\n- @dli for the original WebGL version of the fft rendering http://david.li/waves/\n- Aleksandr Albert for the three.js version and improvements www.routter.co.tt\n- Hipshot for the skyboxes http://www.quake3world.com/forum/viewtopic.php?t=9242\n- Kevin Boone for the 3d Black Pearl model\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbouny%2Ffft-ocean","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbouny%2Ffft-ocean","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbouny%2Ffft-ocean/lists"}