Demo Repository: Difference between revisions
Jump to navigation
Jump to search
Kbr google (talk | contribs) No edit summary |
Kbr google (talk | contribs) Remove Jonas Sicking's demos which are no longer available |
||
| (38 intermediate revisions by 14 users not shown) | |||
| Line 1: | Line 1: | ||
The [ | The [https://github.com/KhronosGroup/WebGL WebGL repository] contains a number of demos that highlight WebGL functionality. The following table shows these demos and whether they are known to run in the current builds of WebGL-capable browsers. It may be out of date at any time; if in doubt, just try it! | ||
You can check out the source code for all of these demos via Git: | |||
git clone https://github.com/KhronosGroup/WebGL.git | |||
<table border="1" cellpadding="5"> | <table border="1" cellpadding="5"> | ||
| Line 6: | Line 10: | ||
<th>Originator</th> | <th>Originator</th> | ||
<th>Apple (WebKit)</th> | <th>Apple (WebKit)</th> | ||
<th>Google (Chrome)</th> | <th>Google (Chrome)<sup>1</sup></th> | ||
<th>Microsoft (Internet Explorer)</th> | |||
<th>Mozilla (Firefox)</th> | <th>Mozilla (Firefox)</th> | ||
<th>Opera</th> | <th>Opera</th> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/google/san-angeles/index.html san-angeles]</td> | ||
<td style="background:#AAA; color:white">Google</td> | <td style="background:#AAA; color:white">Google</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/google/particles/index.html particles]</td> | ||
<td style="background:#AAA; color:white">Google</td> | <td style="background:#AAA; color:white">Google</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
</tr> | |||
<tr> | |||
<td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/google/shiny-teapot/index.html shiny-teapot]</td> | |||
<td style="background:#AAA; color:white">Google</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
</tr> | |||
<tr> | |||
<td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/google/high-dpi/index.html high-dpi]</td> | |||
<td style="background:#AAA; color:white">Google</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/google/image-texture-test/index.html image-texture-test]</td> | ||
<td style="background:#AAA; color:white">Google</td> | <td style="background:#AAA; color:white">Google</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/google/procedural-texture-test/index.html procedural-texture-test]</td> | ||
<td style="background:#AAA; color:white">Google</td> | <td style="background:#AAA; color:white">Google</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/google/nvidia-vertex-buffer-object/index.html Vertex Buffer Object Example]</td> | ||
<td style="background:#AAA; color:white">Google</td> | <td style="background:#AAA; color:white">Google</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/SpinningBox.html Colored Box]</td> | ||
<td style="background:#AAA; color:white"> Apple </td> | <td style="background:#AAA; color:white"> Apple </td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/SpiritBox.html Textured Box]</td> | ||
<td style="background:#AAA; color:white"> Apple </td> | <td style="background:#AAA; color:white"> Apple </td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/Earth.html Earth (and Mars)]</td> | ||
<td style="background:#AAA; color:white"> Apple </td> | <td style="background:#AAA; color:white"> Apple </td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/TeapotPerVertex.html Teapot Per Vertex]</td> | ||
<td style="background:#AAA; color:white"> Apple </td> | <td style="background:#AAA; color:white"> Apple </td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/TeapotPerPixel.html Teapot Per Pixel]</td> | ||
<td style="background:#AAA; color:white"> Apple </td> | <td style="background:#AAA; color:white"> Apple </td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/ManyPlanetsDeep.html Many Planets Deep]</td> | ||
<td style="background:#AAA; color:white">Apple</td> | <td style="background:#AAA; color:white">Apple</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/WebGL+CSS.html WebGL + CSS]</td> | ||
<td style="background:#AAA; color:white">Apple</td> | <td style="background:#AAA; color:white">Apple</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:green">Yes</td> | ||
<td style="color:black">No (Demo requires -webkit CSS prefixes, need to update it)</td> | |||
<td>No (teapot not drawn, CSS effects not supported)</td> | |||
</tr> | |||
<tr> | |||
<td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/MatrixTest.html J3DI Matrix Test]</td> | |||
<td style="background:#AAA; color:white">Apple</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https:// | <td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/mozilla/spore/index.html Spore COLLADA Viewer]</td> | ||
<td style="background:#AAA; color:white">Mozilla</td> | <td style="background:#AAA; color:white">Mozilla</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td style="color:green">Yes</td> | <td style="color:green">Yes</td> | ||
<td></td> | <td style="color:red">No</td> | ||
<td style="color:green">Yes</td> | |||
<td style="color:green">Yes</td> | |||
</tr> | </tr> | ||
</table> | </table> | ||
=== Notes === | |||
<sup>1</sup> Chrome disable (black-list) WebGL for some old graphics cards. For some of them other browsers work very well. For example WebGL is not working for Intel Mobile 945 Express family, but Internet Explorer 11 works very well. | |||
Latest revision as of 00:51, 18 July 2019
The WebGL repository contains a number of demos that highlight WebGL functionality. The following table shows these demos and whether they are known to run in the current builds of WebGL-capable browsers. It may be out of date at any time; if in doubt, just try it!
You can check out the source code for all of these demos via Git:
git clone https://github.com/KhronosGroup/WebGL.git
| Test | Originator | Apple (WebKit) | Google (Chrome)1 | Microsoft (Internet Explorer) | Mozilla (Firefox) | Opera |
|---|---|---|---|---|---|---|
| san-angeles | Yes | Yes | Yes | Yes | Yes | |
| particles | Yes | Yes | Yes | Yes | Yes | |
| shiny-teapot | Yes | Yes | Yes | Yes | Yes | |
| high-dpi | Yes | Yes | Yes | Yes | Yes | |
| image-texture-test | Yes | Yes | Yes | Yes | Yes | |
| procedural-texture-test | Yes | Yes | Yes | Yes | Yes | |
| Vertex Buffer Object Example | Yes | Yes | Yes | Yes | Yes | |
| Colored Box | Apple | Yes | Yes | Yes | Yes | Yes |
| Textured Box | Apple | Yes | Yes | Yes | Yes | Yes |
| Earth (and Mars) | Apple | Yes | Yes | Yes | Yes | Yes |
| Teapot Per Vertex | Apple | Yes | Yes | Yes | Yes | Yes |
| Teapot Per Pixel | Apple | Yes | Yes | Yes | Yes | Yes |
| Many Planets Deep | Apple | Yes | Yes | Yes | Yes | Yes |
| WebGL + CSS | Apple | Yes | Yes | Yes | No (Demo requires -webkit CSS prefixes, need to update it) | No (teapot not drawn, CSS effects not supported) |
| J3DI Matrix Test | Apple | Yes | Yes | Yes | Yes | Yes |
| Spore COLLADA Viewer | Mozilla | Yes | Yes | No | Yes | Yes |
Notes
1 Chrome disable (black-list) WebGL for some old graphics cards. For some of them other browsers work very well. For example WebGL is not working for Intel Mobile 945 Express family, but Internet Explorer 11 works very well.