-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
219 lines (198 loc) · 10.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="static/css/syles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gaussian Splashing</title>
<meta name="description" content="Description of the paper and key contributions.">
<meta name="keywords" content="relevant, keywords, here" />
<meta name="author" content="Your Name" />
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.7.0/dist/tabler-icons.min.css" rel="stylesheet">
</head>
<body>
<header>
<h1>
<span class="title-main"><span>Gaussian Splashing: Direct Volumetric Rendering Underwater</span></span>
<span class="title-small">A fast underwater 3D reconstruction method, that accounts for light attenuation and backscattering.</span>
</h1>
</header>
<div class="authors">
<div class="author">
<span class="author-name">Nir Mualem</span>
<span class="author-affiliation">Ben-Gurion University</span>
</div>
<div class="author">
<span class="author-name">Roy Amoyal</span>
<span class="author-affiliation">Ben-Gurion University</span>
</div>
<div class="author">
<span class="author-name">Oren Freifeld</span>
<span class="author-affiliation">Ben-Gurion University</span>
</div>
<div class="author">
<span class="author-name">Derya Akkaynak</span>
<span class="author-affiliation">The Inter-University Institute for Marine Sciences and the University of Haifa</span>
</div>
<!-- Add more authors as needed -->
</div>
<div class="links">
<!-- <a class="button" href="/paper.pdf"><i class="ti ti-file-type-pdf"></i> Paper</a> -->
<a class="button" href="http://arxiv.org/abs/2411.19588"><img style="height:80%;margin-right:0.2em;filter: brightness(0) saturate(100%) invert(100%)" src="/assets/arxiv.svg"> Paper</a>
<a class="button"><i class="ti ti-brand-github-filled"></i> Code (coming soon)</a>
<a class="button" ><i class="ti ti-database"></i> TableDB dataset (coming soon)</a>
</div>
<style>
.video.teaser-video::before {
padding-bottom: 50%;
}
</style>
<figure style="margin: 0; padding: 0; line-height: 0; font-size: 0; display: flex; flex-direction: column">
<div style="position: relative; width: 120%; margin-left: -10%"> <!-- Made container wider and centered it -->
<video class="video" style="aspect-ratio: 1920/1080; display: block; margin: 0; padding: 0; vertical-align: bottom; width: 100%" loop muted autoplay>
<source src="static/assets/JP_bs_medium.webm" type="video/webm">
<source src="static/assets/JP_bs_medium.mp4" type="video/mp4">
</video>
<div style="position: absolute; bottom: 130px; width: 100%; display: flex; justify-content: space-around; font-size: 0.9rem; color: black; padding: 0 0%; padding-left: -7px">
<span><strong>Original Rendering (novel views)</strong></span>
<span><strong>Normalized Backscatter</strong></span>
<span><strong>Clean Rendering (novel views)</strong></span>
</div>
</div>
<figcaption style="text-align: center; font-size: 1.1rem; margin-top: -90px; padding: 0; line-height: 1; position: relative; top: -20px">
<strong>GaussianSplashing</strong>
Rendered novel views of the Red Sea scene generated by the reconstructed scene model, alongside normalized backscatter images and clear medium-free images.
</figcaption>
</figure>
<br>
<br>
<video class="video" style="aspect-ratio: 1920/1080" loop muted autoplay>
<source src="static/assets/TableDBGTFrames.webm" type="video/webm">
<source src="static/assets/TableDBGTFrames.mp4" type="video/mp4">
</video>
<p class="justify" style="font-size: 1.1rem;margin: 0 0 0.4rem 0; margin-top: 10px;text-align-last: center">
<strong>TableDB dataset:</strong> A newly added underwater dataset includes scene captures from different distances and viewpoints.
</p>
<section class="abstract">
<h2>Abstract</h2>
<p>
Most useful features in underwater images are occluded by water. Consequently, underwater scenes present additional difficulties beyond the usual challenges of 3D reconstruction and rendering for in-air scenes.
Naive applications of Neural Radiance Field methods (NeRFs) or Gaussian Splatting, while highly robust for in-air scenes, fail to perform underwater. Here we introduce Gaussian Splashing, a new method based on 3D Gaussian Splatting (3DGS), into which we incorporate an image formation model for scattering.
Concretely, we introduce three additional learnable parameters to the rendering procedure, modify the depth estimation step for underwater conditions, alter the original loss term used in 3DGS, and introduce an additional loss term for backscatter.
Our approach achieves state-of-the-art performance for underwater scenes and is highly efficient, with 3D reconstruction taking only a few minutes and rendering at 140 FPS, despite the complexities of underwater adaptation.
</p>
<figure style="margin: 0">
<picture>
<source srcset="static/assets/methodOverview.webp" type="image/webp" />
<source srcset="static/assets/methodOverview.png" type="image/png" />
<img src="static/assets/overview.png" alt="WaterSplatting overview" style="width: 100%; margin: 1em auto 0.3em auto; display: block;" />
</picture>
<figcaption style="text-align: justify">
<strong>Method overview: </strong>Initially, we utilize Structure from Motion (SfM) to acquire an initial point cloud and camera poses.
Subsequently, we commence the optimization process to refine the model based on our underwater rendering equation and modified tile rasterization, taking those distortions into account.
We evaluate backscatter every 500 steps to ensure convergence towards the accurate medium coefficients using our approach.
</figcaption>
</figure>
</section>
<section>
<h2>Results</h2>
<figure>
<div class="video-wrapper">
<video id="videoCompare" class="video-compare" style="aspect-ratio: 1280/720" loop muted>
<source src="static/assets/JP_comp.webm" type="video/webm">
<source src="static/assets/JP_comp.mp4" type="video/mp4">
</video>
<span class="video-label">
<span>Gaussian Splashing</span>
<span>3DGS</span>
</span>
</div>
<figcaption>
<strong>Red Sea Scene</strong> A comparison of our method against 3DGS highlights the differences, showcasing the improvements in underwater scene reconstruction.
</figure>
<figure>
<div class="video-wrapper">
<video id="videoCompare" class="video-compare" style="aspect-ratio: 1280/720" loop muted>
<source src="static/assets/TableDB_comp.webm" type="video/webm">
<source src="static/assets/TableDB_comp.mp4" type="video/mp4">
</video>
<span class="video-label">
<span>Gaussian Splashing</span>
<span>3DGS</span>
</span>
</div>
<figcaption>
<strong>Red Sea Scene:</strong> Notice how the improvement becomes significantly more pronounced as the view zooms out and the distance to the objects increases, with differences in far details clearly highlighted.
</figure>
<figure>
<div class="video-wrapper">
<video id="videoCompare" class="video-compare" style="aspect-ratio: 1280/720" loop muted>
<source src="static/assets/Curasao_depth.webm" type="video/webm">
<source src="static/assets/Curasao_depth.mp4" type="video/mp4">
</video>
<span class="video-label">
<span>Rendered (154 FPS)</span>
<span>Depth</span>
</span>
</div>
<figcaption>
<strong>Curacao Scene</strong> The Rendered view shows the scene’s colors and textures, while the Depth view represents object distances.
</figure>
<figure>
<div class="video-wrapper">
<video id="videoCompare" class="video-compare" style="aspect-ratio: 1280/720" loop muted>
<source src="static/assets/Panama_depth.webm" type="video/webm">
<source src="static/assets/Panama_depth.mp4" type="video/mp4">
</video>
<span class="video-label">
<span>Rendered (163 FPS)</span>
<span>Depth</span>
</span>
</div>
<figcaption>
<strong>Panama Scene</strong> rendered and depth.
</figure>
<figure style="margin: 0">
<picture>
<source srcset="static/assets/table_compTime.webp" type="image/webp" />
<source srcset="static/assets/table_compTime.png" type="image/png" />
<img src="static/assets/overview.png" alt="WaterSplatting overview" style="width: 100%; margin: 1em auto 0.3em auto; display: block;" />
</picture>
<figcaption style="text-align: justify">
<strong>Render and Training Time: </strong> A detailed comparison table showcasing the frames per second (FPS) performance during rendering,
along with the training time (minutes) needed to build the model across various scenes.
</figcaption>
</figure>
<!-- Repeat figure blocks as needed -->
</section>
<!-- <section>
<h2>Acknowledgements</h2>
<p class="justify">
Acknowledge contributors, funding sources, and other assistance here.
</p>
</section> -->
<section class="citation">
<h2>Citation</h2>
<span>Please use the following citation:</span>
<pre><code>@article{mualem2024gaussiansplashing,
title={Gaussian Splashing: Direct Volumetric Rendering Underwater},
author={Nir Mualem and Roy Amoyal and Oren Freifeld and Derya Akkaynak},
journal={arXiv},
year={2024}
}</code></pre>
</section>
<div style="background-color: #f5f5f5; color: #555; padding: 10px; text-align: center; font-size: 0.9em;">
<footer>
<p>
This website's source code is adapted from <a href="https://nerfies.github.io/" target="_blank">Nerfies</a>,
Credit to the authors for the original template.
</p>
</footer>
</div>
<script type="text/javascript" src="static/js/script.js"></script>
</body>
</html>