222 lines
4.9 KiB
HTML
Executable File
222 lines
4.9 KiB
HTML
Executable File
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Making the Most of 3D on the Web with <model-viewer></title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #666;
|
|
font-size: 30px;
|
|
font-family: "Verdana";
|
|
font-style: italic;
|
|
background-color: #eee;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
td:hover {
|
|
color: #222;
|
|
}
|
|
|
|
a {
|
|
color: #48f;
|
|
text-decoration: none;
|
|
}
|
|
|
|
strong {
|
|
color: #222;
|
|
}
|
|
|
|
h1 {
|
|
color: #222;
|
|
font-size: 40px;
|
|
margin: 20px;
|
|
}
|
|
|
|
h2 {
|
|
color: #222;
|
|
font-size: 40px;
|
|
margin: 24px;
|
|
}
|
|
|
|
hr {
|
|
margin: 40px 100px;
|
|
border: 0px;
|
|
height: 1px;
|
|
background-color: #bbb;
|
|
}
|
|
|
|
img,
|
|
video {
|
|
max-width: 100%;
|
|
}
|
|
|
|
pre {
|
|
padding: -20px -40px !important;
|
|
font-size: 20px;
|
|
text-align: left;
|
|
}
|
|
|
|
iframe {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
section {
|
|
text-align: center;
|
|
}
|
|
|
|
section.background-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 50%;
|
|
background-size: contain;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
table {
|
|
margin: auto;
|
|
position: relative;
|
|
}
|
|
|
|
td {
|
|
padding: 0px 10px;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
#controls {
|
|
position: absolute;
|
|
padding: 5px;
|
|
left: calc(50% - 100px);
|
|
bottom: 4px;
|
|
width: 200px;
|
|
font-size: 16px;
|
|
opacity: 0.2;
|
|
text-align: center;
|
|
transition: opacity 0.5s;
|
|
/* background-color: #000;*/
|
|
/* mix-blend-mode: difference; */
|
|
z-index: 1;
|
|
}
|
|
|
|
#controls:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#controls span {
|
|
margin: 2px;
|
|
padding: 2px 10px;
|
|
color: #222;
|
|
}
|
|
|
|
#html-draw td {
|
|
width: 150px;
|
|
height: 100px;
|
|
border: 1px solid #444;
|
|
border-spacing: 20px;
|
|
}
|
|
|
|
.url {
|
|
position: absolute;
|
|
display: inline-block;
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
left: 50%;
|
|
bottom: 40px;
|
|
border-radius: 20px;
|
|
background-color: black;
|
|
padding: 10px 20px;
|
|
transform: translateX(-50%)
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body ontouchstart="">
|
|
<section>
|
|
<h1>Making the Most of 3D on the Web<br /><br /> with <model-viewer></h1>
|
|
<hr /> Emmett Lalish, Google<br /><br /> July 27, 2024
|
|
</section>
|
|
<section>
|
|
<iframe src="../.." frameborder="0"></iframe>
|
|
<div class="url"><model-viewer> v3.5 has a lot to offer!</div>
|
|
</section>
|
|
<section>
|
|
<iframe src="../lightingandenv/#toneMapping" frameborder="0"></iframe>
|
|
<div class="url">Khronos PBR Neutral Tone Mapping for color accuracy</div>
|
|
</section>
|
|
<section>
|
|
<iframe src="../postprocessing/#colorgrade" frameborder="0"></iframe>
|
|
<div class="url">Post-processing effects, like bloom</div>
|
|
</section>
|
|
<section>
|
|
<iframe src="../lightingandenv/#groundedSkybox" frameborder="0"></iframe>
|
|
<div class="url">Easy backgrounds, now with UltraHDR!</div>
|
|
</section>
|
|
<section>
|
|
<iframe src="../scenegraph/#animatedTexturesExample" frameborder="0"></iframe>
|
|
<div class="url">Animated/Video textures - before glTF!</div>
|
|
</section>
|
|
<section>
|
|
<iframe src="../annotations/index.html#dimensions" frameborder="0"></iframe>
|
|
<div class="url">Automatic dimensions, with easy a11y & i18n</div>
|
|
</section>
|
|
<section>
|
|
<iframe src="../annotations/index.html#animatedHotspots" frameborder="0"></iframe>
|
|
<div class="url">Animated hotspots, with DOM & SVG</div>
|
|
</section>
|
|
<section>
|
|
<iframe src="../augmentedreality/#transparentBackground" frameborder="0"></iframe>
|
|
<div class="url">Transparent rendering lets DOM content show through</div>
|
|
</section>
|
|
<section>
|
|
<h1>Seamless integration with 2D page design</h1><br /> Setting limits on the camera can make your whole page seem
|
|
3D<br /><br />
|
|
<a href="https://www.redbullracing.com/int-en/cars">Red Bull Racing</a><br /><br />
|
|
</section>
|
|
<section>
|
|
<h1>Google Store</h1><br /> Variant selection and camera-based walkthrough<br /><br />
|
|
<a href="https://store.google.com/product/pixel_watch_2">Pixel Watch 2</a><br /><br /> Animation-based
|
|
walkthrough<br /><br />
|
|
<a href="https://store.google.com/us/product/pixel_buds_pro">Pixel Buds Pro</a><br /><br />
|
|
</section>
|
|
<section>
|
|
<h1>Search Education</h1><br /> Includes <model-viewer> right on Google Search<br /><br /> With annotations!
|
|
And a game!<br /><br />
|
|
<a href="https://www.google.com/search?q=eukaryote">Google Search for Eukaryote</a>
|
|
</section>
|
|
<section>
|
|
<h1>Music Video</h1><br /> Whole new ways to be creative!<br /><br />
|
|
<a href="https://x.com/shortcircuitsss/status/1808347767581893007">From twitter / X</a><br /><br />
|
|
</section>
|
|
<section>
|
|
<h1>Thanks!</h1><br />
|
|
<a href="https://modelviewer.dev">https://modelviewer.dev</a><br /><br />
|
|
<a href="https://github.com/google/model-viewer">https://github.com/google/model-viewer</a><br />
|
|
</section>
|
|
<script src="slides.js"></script>
|
|
</body>
|
|
|
|
</html>
|