Skip to content

Commit cc2a499

Browse files
author
Roberto Nacchia
committed
Initial commit
0 parents  commit cc2a499

35 files changed

Lines changed: 7501 additions & 0 deletions

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎index.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/webgpu.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>WebGPU Tutorial</title>
9+
<style>
10+
body {
11+
background-image: url("background.png");
12+
}
13+
14+
body>div {
15+
display: flex;
16+
}
17+
18+
body>div>div {
19+
margin: 0 20px;
20+
padding: 10px;
21+
flex: 1
22+
}
23+
</style>
24+
</head>
25+
26+
<body style="background-color: red;">
27+
<div id="app"></div>
28+
<script type="module" src="/src/main.ts"></script>
29+
<h1 style="text-align: center;">Web GPU Tutorial</h1>
30+
<div>
31+
<canvas width="800" height="600" style="border: 1px solid;background-color: white;"></canvas>
32+
<div style="background-color: white;">
33+
<div>
34+
<div>
35+
<strong>Seleziona uno dei Tutorial per eseguirlo</strong>
36+
</div>
37+
<ol>
38+
<li><a href="#" title="Inizializzazione un'app WebGPU. Il risultato sarà una canvas vuota e bianca"
39+
data-tutorial="00">Inizializza Web GPU</a></li>
40+
<li><a href="#" title="Clear del Render Target. Clicca sullo schermo per cambiare il colore dello sfondo"
41+
data-tutorial="01">Render Target</a></li>
42+
<li><a href="#" title="Rendering di una geomatria di base tramite Vertex e Fragment Shader"
43+
data-tutorial="02">Shaders</a></li>
44+
<li><a href="#" title="Utilizzo di un Buffer per memorizzare la geometria" data-tutorial="03">Vertex
45+
Buffer</a>
46+
</li>
47+
<li><a href="#" title="Ottimizzazione della gestione della geometria tramite gli index buffer"
48+
data-tutorial="04">Index
49+
Buffer</a></li>
50+
<li><a href="#" title="Gestione dello scambio di dati tra gli Shader ed il codice tramite Uniform Shader"
51+
data-tutorial="05">Uniform
52+
Buffer</a></li>
53+
<li><a href="#"
54+
title="Gestione della profondità tramite Depth Buffer. I due quadrati si trovano ad altezze diverse"
55+
data-tutorial="06">Depth Buffer</a></li>
56+
<li><a href="#" title="Gestione delle matrici di trasformazione" data-tutorial="07">Matrici di
57+
Trasformazione</a></li>
58+
<li><a href="#" title="Aggiunta di texture ai modelli" data-tutorial="08">Texture</a></li>
59+
<li><a href="#" title="Ottimizzazione tramite Render Bundle." data-tutorial="09">Render Bundle</a></li>
60+
<li><a href="#" title="Moltiplicazione di vertex buffer tramite Geometry Instancing"
61+
data-tutorial="10">Geometry Instancing</a></li>
62+
<li><a href="#"
63+
title="Miglioramento della qualità tramite Multiple Sample Anti Aliasing. Clicca per attivare/disattivare ed osservare i bordi"
64+
data-tutorial="11">MSAA</a></li>
65+
<li><a href="#" title="Realizzazione effetti tramite Rendering su Texture" data-tutorial="12">Render to
66+
Texture</a></li>
67+
<li><a href="#" title="Utilizzo di Video come Texture per i modelli" data-tutorial="13">Utilizzo di Video</a>
68+
</li>
69+
<li><a href="#"
70+
title="Compute Shader. Clicca nuovamente per eseguire altri test. Non verrà visualizzato nulla nella canvas"
71+
data-tutorial="14">Compute
72+
Shader</a></li>
73+
<li><a href="#"
74+
title="Sobel Filter tramite Compute Shader. Clicca sullo schermo per alternare la visualizzazione"
75+
data-tutorial="15">Sobel Filter</a></li>
76+
<li><a href="#" title="Maschere tramite Stencil Buffer" data-tutorial="16">Stencil Buffer</a></li>
77+
78+
<li><a href="#" title="Statistiche di rendering" data-tutorial="17">Query Set</a></li>
79+
<li><a href="#" title="Utilizzare una canvas come texture per disegnare testo" data-tutorial="18">Testo su una Texture</a></li>
80+
81+
</ol>
82+
<hr>
83+
<h7>&nbsp;</h7>
84+
<p>&nbsp;</p>
85+
</div>
86+
</div>
87+
</div>
88+
<br>
89+
<textarea id="codetxt" style="width: 100%;" rows="20" readonly></textarea>
90+
</body>
91+
92+
</html>

0 commit comments

Comments
 (0)