218 lines
4.8 KiB
HTML
218 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>WebMetal demos</title>
|
|
<link rel="stylesheet" href="https://webkit.org/wp-content/themes/webkit/style.css">
|
|
<link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Myriad+Set+Pro&v=1">
|
|
<style>
|
|
* {
|
|
--back: rgb(130, 130, 126);
|
|
--dark: rgb(65, 65, 63);
|
|
--sub-highlight: rgb(148, 176, 83);
|
|
--highlight: rgb(189, 235, 7);
|
|
--body: rgb(224, 224, 224);
|
|
--body-darker: rgb(204, 204, 204);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--body);
|
|
color: var(--dark);
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
header {
|
|
position: relative;
|
|
height: 20vw;
|
|
background-color: var(--back);
|
|
overflow: hidden;
|
|
border-bottom: none;
|
|
}
|
|
|
|
header * {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 30vw;
|
|
}
|
|
|
|
header img {
|
|
width: 40vw;
|
|
height: 40vw;
|
|
animation: spin 60s infinite linear;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
top: 10vw;
|
|
width: 40vw;
|
|
margin: 0 auto;
|
|
font-size: 5vw;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: var(--dark);
|
|
line-height: 1.0;
|
|
text-shadow: 0px 2px 0px var(--back);
|
|
}
|
|
|
|
section.demos {
|
|
display: grid;
|
|
margin: 5vw 20vw;
|
|
grid-template-columns: 16vw 16vw 16vw;
|
|
grid-gap: 6vw;
|
|
}
|
|
|
|
section p {
|
|
padding: 12px 20px;
|
|
color: var(--dark);
|
|
}
|
|
|
|
section p a {
|
|
text-decoration: none;
|
|
color: var(--sub-highlight);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.intro {
|
|
grid-column: 1 / 4;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.howto {
|
|
grid-column: 1 / 4;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.warning {
|
|
grid-column: 1 / 4;
|
|
grid-row: 3;
|
|
border: 2px solid var(--sub-highlight);
|
|
background-color: var(--highlight);
|
|
color: black;
|
|
}
|
|
|
|
.example {
|
|
border: 2px solid var(--sub-highlight);
|
|
text-align: center;
|
|
padding: 10px 10px;
|
|
background-color: var(--body-darker);
|
|
}
|
|
|
|
.example img {
|
|
background-color: black;
|
|
border: 1px solid black;
|
|
box-sizing: border-box;
|
|
width: 12vw;
|
|
height: 12vw;
|
|
}
|
|
|
|
.example a {
|
|
text-decoration: none;
|
|
color: var(--dark);
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
header {
|
|
height: 40vw;
|
|
}
|
|
|
|
header * {
|
|
left: 10vw;
|
|
}
|
|
|
|
header img {
|
|
width: 80vw;
|
|
height: 80vw;
|
|
}
|
|
|
|
h1 {
|
|
top: 20vw;
|
|
width: 80vw;
|
|
font-size: 10vw;
|
|
}
|
|
|
|
section.demos {
|
|
margin: 5vw 5vw;
|
|
grid-template-columns: 90vw;
|
|
grid-gap: 6vw;
|
|
}
|
|
|
|
.intro, .howto, .warning {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.example img {
|
|
width: 70vw;
|
|
height: 70vw;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<img src="circle.svg">
|
|
<h1>WebMetal<br>demos</h1>
|
|
</header>
|
|
<section class="demos">
|
|
<p class="intro">
|
|
Here are a collection of simple <a
|
|
href="https://webkit.org/blog/7380/next-generation-3d-graphics-on-the-web/">WebMetal</a>
|
|
examples. They should work in the latest <a
|
|
href="https://developer.apple.com/safari/technology-preview/">Safari
|
|
Technology Preview</a> releases, as well as <a
|
|
href="https://webkit.org/nightly/">nightly WebKit</a> builds. At
|
|
the moment there are a few small differences between the
|
|
implementation and the <a
|
|
href="https://webkit.org/wp-content/uploads/webgpu-api-proposal.html
|
|
">documented proposal</a>, most of which are documented in the code.
|
|
</p>
|
|
<p class="howto">
|
|
Make sure you are on a system with WebMetal enabled. In Safari, first
|
|
make sure the Developer Menu is visible (Preferences → Advanced),
|
|
then Develop → Experimental Features → Enable WebMetal.
|
|
</p>
|
|
<p class="warning">
|
|
WebMetal is an experimental technology, and you should not browse the entire
|
|
Web with it enabled for now. It doesn't do any validation of content, and
|
|
thus may cause some issues with your computer.
|
|
</p>
|
|
<div class="example">
|
|
<a href="hello.html">
|
|
<img src="hello.jpg"><br>
|
|
Hello World Triangle
|
|
</a>
|
|
</div>
|
|
<div class="example">
|
|
<a href="2d.html">
|
|
<img src="2d.jpg"><br>
|
|
2d-drawing like Shadertoy
|
|
</a>
|
|
</div>
|
|
<div class="example">
|
|
<a href="simple.html">
|
|
<img src="simple.jpg"><br>
|
|
Simple Spinning Cube
|
|
</a>
|
|
</div>
|
|
<div class="example">
|
|
<a href="cubes.html">
|
|
<img src="cubes.jpg"><br>
|
|
Animating Cubes
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|