Skip to content

Commit

Permalink
update images and teaser video
Browse files Browse the repository at this point in the history
  • Loading branch information
@cvachha
cvachha committed Dec 23, 2023
1 parent 6609faa commit 4291ce6
Show file tree
Hide file tree
Showing 5 changed files with 312 additions and 10 deletions.
Binary file added data/open_graph.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified data/videos/face.mp4
View file
Binary file not shown.
305 changes: 305 additions & 0 deletions index copy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,305 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta content="Instruct-GS2GS enables editing of a 3D Gaussian Splatting scene with a simple text instruction."
name="description" />
<meta content="Instruct-GS2GS: Editing 3D Scenes with Instructions" property="og:title" />
<meta content="Instruct-GS2GS enables editing of a 3D Gaussian Splatting scene with a simple text instruction."
property="og:description" />
<meta content="https://instruct-gs2gs.github.io/data/open_graph.png" property="og:image" />
<meta content="Instruct-GS2GS: Editing 3D Scenes with Instructions" property="twitter:title" />
<meta content="Instruct-GS2GS enables editing of a 3D Gaussian Splatting scene with a simple text instruction."
property="twitter:description" />
<meta content="https://instruct-gs2gs.github.io/data/open_graph.png" property="twitter:image" />
<meta property="og:type" content="website" />
<meta content="summary_large_image" name="twitter:card" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta name="google-site-verification" content="sdz4d86QkTWaWHiWkS9mtiln38Bu0wirf94l-z1MkhQ" />


<title>Instruct-GS2GS: Editing 3D Scenes with Instructions</title>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-87HN038KJT"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', 'G-87HN038KJT');
</script>

<link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">

<link href="https://fonts.googleapis.com" rel="preconnect" />
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script
type="text/javascript">WebFont.load({ google: { families: ["Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic", "Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic", "Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic", "Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic", "Changa One:400,400italic", "Varela Round:400", "Bungee Shade:regular", "Roboto:300,regular,500", "Bungee Outline:regular"] } });</script>
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

<link href="data/icons/wand_black.svg" rel="icon" media="(prefers-color-scheme: light)" />
<link href="data/icons/wand_white.svg" rel="icon" media="(prefers-color-scheme: dark)" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>


<div class="section">
<div class="container">
<div class="title-row">
<h1 class="title">Instruct-GS2GS</h1>
<h1 class="subheader">Editing 3D Scenes with Instructions</h1>
</div>
<div class="author-row" style="text-align: center">
<div class="base-col author-col">
<a href="https://cvachha.github.io/" target="_blank" class="author-text">
Cyrus Vachha
</a>
</div>
<div class="base-col author-col">
<a href="https://www.ayaanzhaque.me/" target="_blank" class="author-text">
Ayaan Haque
</a>
</div>
</div>
<div>
<h1 id="uc-berkeley">UC Berkeley</h1>
</div>

<div class="link-labels base-row">
<div class="base-col icon-col"><a href="" target="_blank" class="link-block"><img
src="https://uploads-ssl.webflow.com/51e0d73d83d06baa7a00000f/5cab99df4998decfbf9e218e_paper-01.png"
alt="paper"
sizes="(max-width: 479px) 12vw, (max-width: 767px) 7vw, (max-width: 991px) 41.8515625px, 56.6953125px"
srcset="https://uploads-ssl.webflow.com/51e0d73d83d06baa7a00000f/5cab99df4998decfbf9e218e_paper-01-p-500.png 500w, https://uploads-ssl.webflow.com/51e0d73d83d06baa7a00000f/5cab99df4998decfbf9e218e_paper-01.png 672w"
class="icon-img" /></a></div>
<div class="base-col icon-col"><a href="https://github.com/cvachha/instruct-gs2gs" class="link-block"><img
src="https://uploads-ssl.webflow.com/51e0d73d83d06baa7a00000f/5cae3b53b42ebb3dd4175a82_68747470733a2f2f7777772e69636f6e66696e6465722e636f6d2f646174612f69636f6e732f6f637469636f6e732f313032342f6d61726b2d6769746875622d3235362e706e67.png"
alt="paper" class="icon-img github-img-icon" /></a></div>
<div class="base-col icon-col"><a
href="https://drive.google.com/drive/folders/1v4MLNoSwxvSlWb26xvjxeoHpgjhi_s-s?usp=share_link"
target="_blank" class="link-block"><img
src="https://uploads-ssl.webflow.com/51e0d73d83d06baa7a00000f/5e7136849ee3b0a0c6a95151_database.svg"
alt="paper" class="icon-img data-img-icon" /></a></div>
</div>
<div class="link-labels base-row">
<div class="base-col icon-col">
<strong class="link-labels-text">Paper (Coming Soon)</strong>
</div>
<div class="base-col icon-col">
<strong class="link-labels-text">&lt;/Code&gt;</strong>
</div>
<div class="base-col icon-col">
<strong class="link-labels-text">Data</strong>
</div>
</div>

<h1 class="tldr">
<b>TL;DR</b>:
Instruct-GS2GS enables instruction-based editing of Gaussian Splatting scenes via a 2D diffusion model
</h1>
<video id="main-video" muted autoplay controls playsinline loop>
<source id="mp4" src="data/videos/face.mp4" type="video/mp4">
</video>

<h2 class="section-header">Overview</h2>
<div class="paragraph">
<p>
We propose a method for editing 3D Gaussian Splatting (3DGS) scenes with text-instructions. Given a 3DGS scene of a scene and the
collection
of images used to reconstruct it, our method uses an image-conditioned diffusion model (<a
href="https://www.timothybrooks.com/instruct-pix2pix">InstructPix2Pix</a>) to
iteratively edit the input images while optimizing the underlying scene, resulting in an optimized 3D
scene that
respects the edit instruction. We demonstrate that our proposed method is able to edit large-scale,
real-world
scenes, and is able to accomplish more realistic, targeted edits than prior work.
</p>
</div>

<h2 class="section-header">How it works</h2>
<div class="paragraph">
<p>
Our method gradually updates a reconstructed 3DGS scene by iteratively updating the dataset images while
training the 3DGS:
<ol>
<li>Images are rendered from the scene at training viewpoints.</li>
<li>They edited by InstructPix2Pix given a global text instruction.</li>
<li>The training dataset images are replaced with the edited images.</li>
<li>The 3DGS continues training as usual for 2.5k iterations.</li>
</ol>
</p>
</div>
<video id="main-video" muted autoplay playsinline loop>
<source id="mp4" src="data/videos/pipeline.mp4" type="video/mp4">
</video>



<h2 class="section-header">Results</h2>

<video id="campanile-video" muted autoplay webkit-playsinline playsinline loop>
<source id="campanile-video-src" src="data/videos/campanile/campanile-original.mp4" poster="/data/test.jpg" type="video/mp4">
</video>
<!--
<div class="video-text">
<span class="overlay-text" id="campanile-text">"Make it look like autumn"</span>
</div>
-->
<div class="base-row campanile-thumbnail-row">
<div class="base-col campanile-thumbnail-col">
<button class="thumbnail-btn" id="original">
<img src="data/icons/icons_reset-big.svg" alt="paper" class="thumbnails" />
Original
</button>
</div>
<div class="base-col campanile-thumbnail-col">
<button class="thumbnail-btn" id="snow">
<img src="data/icons/icons_snow.svg" alt="paper" class="thumbnails" />
Snow
</button>
</div>
<div class="base-col campanile-thumbnail-col">
<button class="thumbnail-btn" id="garden">
<img src="data/icons/flower_icon.png" alt="paper" class="thumbnails" />
Garden
</button>
</div>
<div class="base-col campanile-thumbnail-col">
<button class="thumbnail-btn" id="vangogh">
<img src="data/icons/paint_icon.png" alt="paper" class="thumbnails" />
Painting
</button>
</div>
<div class="base-col campanile-thumbnail-col">
<button class="thumbnail-btn" id="sunset">
<img src="data/icons/icons_sunset.svg" alt="paper" class="thumbnails" />
Sunset
</button>
</div>
<div class="base-col campanile-thumbnail-col">
<button class="thumbnail-btn" id="halloween">
<img src="data/icons/halloween_icon.png" alt="paper" class="thumbnails" />
Halloween
</button>
</div>
<div class="base-col campanile-thumbnail-col">
<button class="thumbnail-btn" id="comic">
<img src="data/icons/pencil_icon.png" alt="paper" class="thumbnails" />
Comic
</button>
</div>

</div>

<video id="bear-video" autobuffer muted autoplay webkit-playsinline playsinline loop>
<source id="bear-video-src" src="data/videos/bear/bear-original-bear.mp4" type="video/mp4">
</video>
<div class="bear-thumbnail-row">
<div class="base-col bear-thumbnail-col">
<button class="thumbnail-btn" id="original-bear">
<img src="data/icons/icons_reset-big.svg" alt="paper" class="thumbnails" />
Original
</button>
</div>
<div class="base-col bear-thumbnail-col">
<button class="thumbnail-btn" id="grizzly">
<img src="data/icons/icons_grizzly.svg" alt="paper" class="thumbnails" />
Grizzly Bear
</button>
</div>
<div class="base-col bear-thumbnail-col">
<button class="thumbnail-btn" id="panda">
<img src="data/icons/icons_panda.svg" alt="paper" class="thumbnails" />
Panda Bear
</button>
</div>
<div class="base-col bear-thumbnail-col">
<button class="thumbnail-btn" id="polar">
<img src="data/icons/icons_polar.svg" alt="paper" class="thumbnails" />
Polar Bear
</button>
</div>
</div>

<video id="egypt-video" autobuffer muted autoplay webkit-playsinline playsinline loop>
<source id="egypt-video-src" src="data/videos/egypt/egypt-original-egypt.mp4" type="video/mp4">
</video>
<div class="egypt-thumbnail-row">
<div class="base-col egypt-thumbnail-col">
<button class="thumbnail-btn" id="original-egypt">
<img src="data/icons/icons_reset-big.svg" alt="paper" class="thumbnails" />
Original
</button>
</div>
<div class="base-col egypt-thumbnail-col">
<button class="thumbnail-btn" id="sunset-egypt">
<img src="data/icons/icons_sunset.svg" alt="paper" class="thumbnails" />
Sunset
</button>
</div>
<div class="base-col egypt-thumbnail-col">
<button class="thumbnail-btn" id="snow-egypt">
<img src="data/icons/icons_snow.svg" alt="paper" class="thumbnails" />
Snow
</button>
</div>
<div class="base-col egypt-thumbnail-col">
<button class="thumbnail-btn" id="night-egypt">
<img src="data/icons/icons_midnight.svg" alt="paper" class="thumbnails" />
Night
</button>
</div>
</div>




<h2 class="section-header">Training Progression</h2>
<video id="body-video" muted autoplay playsinline controls loop>
<source id="mp4" src="data/videos/timelapse.mp4" type="video/mp4">
</video>
<div class="paragraph" style="text-align: center">
Timelapse training with Instruct-GS2GS and Instruct-NeRF2NeRF. We note that Instruct-GS2GS performs edits much faster.
</div>

<!-- <div class="base-row add-top-padding">
<img src="data/nerfstudio_logo.png" alt="Nerfstudio" style="height: 5em; margin-top:2em" />
<h1 id="abstract">
<a id="coming_soon">Integration Coming Soon...</a>
</h1>
</div> -->

<div class="citation add-top-padding">
<h1 id="abstract"> Citation </h1>
<p>Coming Soon</p>
<!--
<p> If you use this work or find it helpful, please consider citing: (bibtex) </p>
<pre id="codecell0">@inproceedings{instructnerf2023,
&nbsp;author = {Haque, Ayaan and Tancik, Matthew and Efros, Alexei and Holynski, Aleksander and Kanazawa, Angjoo},
&nbsp;title = {Instruct-NeRF2NeRF: Editing 3D Scenes with Instructions},
&nbsp;booktitle = {Proceedings of the IEEE/CVF International Conference on Computer Vision},
&nbsp;year = {2023},
} </pre>
-->
</div>

<h2 class="section-header">Acknowledgments</h2>
<div class="paragraph">
We thank our instructors Alexei A. Efros and Angjoo Kanazawa for their support on this project. We would also like to thank the Nerfstudio and gsplat team for providing the 3D Gaussian Splatting implementation.
</div>
</div>
</div>
</body>

</html>
16 changes: 7 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
<meta content="Instruct-GS2GS: Editing 3D Scenes with Instructions" property="og:title" />
<meta content="Instruct-GS2GS enables editing of a 3D Gaussian Splatting scene with a simple text instruction."
property="og:description" />
<meta content="https://instruct-nerf2nerf.github.io/data/open_graph.png" property="og:image" />
<meta content="https://instruct-gs2gs.github.io/data/open_graph.png" property="og:image" />
<meta content="Instruct-GS2GS: Editing 3D Scenes with Instructions" property="twitter:title" />
<meta content="Instruct-GS2GS enables editing of a 3D Gaussian Splatting scene with a simple text instruction."
property="twitter:description" />
<meta content="https://instruct-nerf2nerf.github.io/data/open_graph.png" property="twitter:image" />
<meta content="https://instruct-gs2gs.github.io/data/open_graph.png" property="twitter:image" />
<meta property="og:type" content="website" />
<meta content="summary_large_image" name="twitter:card" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
Expand Down Expand Up @@ -60,14 +60,12 @@
<h1 class="title">Instruct-GS2GS</h1>
<h1 class="subheader">Editing 3D Scenes with Instructions</h1>
</div>
<div class="author-row">
<div class="base-col author-col">
<a href="https://cvachha.github.io/" target="_blank" class="author-text">
<div class="author-row" style="text-align: center">
<div class="">
<a href="https://cvachha.github.io/" target="_blank" class="author-text" style="margin-right: 20px;">
Cyrus Vachha
</a>
</div>
<div class="base-col author-col">
<a href="https://www.ayaanzhaque.me/" target="_blank" class="author-text">
<a href="https://www.ayaanzhaque.me/" target="_blank" class="author-text"style="margin-left: 20px;">
Ayaan Haque
</a>
</div>
Expand All @@ -77,7 +75,7 @@ <h1 id="uc-berkeley">UC Berkeley</h1>
</div>

<div class="link-labels base-row">
<div class="base-col icon-col"><a href="https://cvachha.github.io/instruct-gs2gs/" target="_blank" class="link-block"><img
<div class="base-col icon-col"><a href="" target="_blank" class="link-block"><img
src="https://uploads-ssl.webflow.com/51e0d73d83d06baa7a00000f/5cab99df4998decfbf9e218e_paper-01.png"
alt="paper"
sizes="(max-width: 479px) 12vw, (max-width: 767px) 7vw, (max-width: 991px) 41.8515625px, 56.6953125px"
Expand Down
1 change: 0 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ body {
margin-left: 30px;
margin-right: 30px;
}

.container {
padding-left: 0;
margin-left: auto;
Expand Down

0 comments on commit 4291ce6

Please sign in to comment.