-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
217 lines (180 loc) · 9.63 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="lib/pace.min.js"></script>
<link rel="stylesheet" href="lib/pace.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
<title>ClayGL Examples</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="http://claygl.xyz">
<img src="./img/logo.svg" id="logo" alt="">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="http://docs.claygl.xyz/api">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://examples.claygl.xyz">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/pissang/claygl">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/pissang/claygl/releases">Download</a>
</li>
</ul>
</div>
</nav>
<div id="main">
<h1>
Examples
</h1>
<div class="row">
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/advancedDeferredSponza.html" target="_blank"><img src="thumb/advancedDeferredSponza.png" alt=""></a>
<h5>Sponza with deferred rendering</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/advancedGBuffer.html" target="_blank"><img src="thumb/advancedGBuffer.png" alt=""></a>
<h5>GBuffer</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/advancedRenderer.html" target="_blank"><img src="thumb/advancedRenderer.png" alt=""></a>
<h5>Monument with Advanced Renderer</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/advancedRendererShaderBall.html" target="_blank"><img src="thumb/advancedRendererShaderBall.png" alt=""></a>
<h5>Shader Ball</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicColoredCube.html" target="_blank"><img src="thumb/basicColoredCube.png" alt=""></a>
<h5>Basic Colored Cube</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicCubeCustomShader.html" target="_blank"><img src="thumb/basicCubeCustomShader.png" alt=""></a>
<h5>Cube with Custom Shader</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicCubeWave.html" target="_blank"><img src="thumb/basicCubeWave.png" alt=""></a>
<h5>Cube Wave Animation</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicCubeWaveInstanced.html" target="_blank"><img src="thumb/basicCubeWaveInstanced.png" alt=""></a>
<h5>Instanced Cube Wave Animation</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicFlyingCubes.html" target="_blank"><img src="thumb/basicFlyingCubes.png" alt=""></a>
<h5>Flying Cubes</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicGeometry.html" target="_blank"><img src="thumb/basicGeometry.png" alt=""></a>
<h5>Basic Geometries</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicGLTFCameraAnimation.html" target="_blank"><img src="thumb/basicGLTFCameraAnimation.png" alt=""></a>
<h5>Camera Animation in glTF Model</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicInstancing.html" target="_blank"><img src="thumb/basicInstancing.png" alt=""></a>
<h5>Instancing</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicJumpingCube.html" target="_blank"><img src="thumb/basicJumpingCube.png" alt=""></a>
<h5>Jumping Cube</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicJumpingCubeInfinite.html" target="_blank"><img src="thumb/basicJumpingCubeInfinite.png" alt=""></a>
<h5>Jumping Cube on Infinite Platform</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicLogoWireframe.html" target="_blank"><img src="thumb/basicLogoWireframe.png" alt=""></a>
<h5>ClayGL Logo with Wireframe</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicModelAnimation.html" target="_blank"><img src="thumb/basicModelAnimation.png" alt=""></a>
<h5>Load an Animated Model - Samba Dancing</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicModelLogo.html" target="_blank"><img src="thumb/basicModelLogo.png" alt=""></a>
<h5>ClayGL Logo Model</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicModelMonkey.html" target="_blank"><img src="thumb/basicModelMonkey.png" alt=""></a>
<h5>Load a Model - Suzanne Monkey</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicModelPBR.html" target="_blank"><img src="thumb/basicModelPBR.png" alt=""></a>
<h5>Load a PBR Model</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicOrbitControl.html" target="_blank"><img src="thumb/basicOrbitControl.png" alt=""></a>
<h5>Use Orbit Camera Control</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicPanorama.html" target="_blank"><img src="thumb/basicPanorama.png" alt=""></a>
<h5>Basic Panorama</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicPanoramaHDR.html" target="_blank"><img src="thumb/basicPanoramaHDR.png" alt=""></a>
<h5>Basic HDR Panorama</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicPaperMap.html" target="_blank"><img src="thumb/basicPaperMap.png" alt=""></a>
<h5>3D Paper Map</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicParallaxOcclusionMap.html" target="_blank"><img src="thumb/basicParallaxOcclusionMap.png" alt=""></a>
<h5>Parallax Occlusion Map</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicParametricWaterDrop.html" target="_blank"><img src="thumb/basicParametricWaterDrop.png" alt=""></a>
<h5>Water Drop Drawn with Parametric Surface</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicPointLightShadow.html" target="_blank"><img src="thumb/basicPointLightShadow.png" alt=""></a>
<h5>Shadow of Point Light on the Samba Dancing Model</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicRotatingCube.html" target="_blank"><img src="thumb/basicRotatingCube.png" alt=""></a>
<h5>Basic Rotating Cube</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicSkinnedModelClone.html" target="_blank"><img src="thumb/basicSkinnedModelClone.png" alt=""></a>
<h5>Dancing Groups</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicSkybox.html" target="_blank"><img src="thumb/basicSkybox.png" alt=""></a>
<h5>Basic Skybox</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicSpotLightShadow.html" target="_blank"><img src="thumb/basicSpotLightShadow.png" alt=""></a>
<h5>Use Spot Light</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicStandardMaterial.html" target="_blank"><img src="thumb/basicStandardMaterial.png" alt=""></a>
<h5>Standard Material</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicTreeShadow.html" target="_blank"><img src="thumb/basicTreeShadow.png" alt=""></a>
<h5>Tree Model with Shadow</h5>
</div>
<div class="item col-lg-3 col-md-4 col-sm-6">
<a href="examples/basicTriangle.html" target="_blank"><img src="thumb/basicTriangle.png" alt=""></a>
<h5>Basic Triangle</h5>
</div>
</div>
</div>
</body>
</html>