Demo Repository: Difference between revisions
Jump to navigation
Jump to search
Kbr google (talk | contribs) Adjusted docs to point to Github and links to point to www.khronos.org/registry/webgl/ |
Kbr google (talk | contribs) Remove Jonas Sicking's demos which are no longer available |
||
| (13 intermediate revisions by 5 users not shown) | |||
| Line 10: | 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> | ||
| Line 17: | Line 18: | ||
<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:#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> | ||
| Line 25: | Line 27: | ||
<td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/google/particles/index.html particles]</td> | <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 style="color:green">Yes</td> | ||
| Line 33: | Line 36: | ||
<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:#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="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> | ||
| Line 41: | Line 54: | ||
<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:#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 style="color:green">Yes</td> | ||
| Line 49: | Line 63: | ||
<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:#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 style="color:green">Yes</td> | ||
| Line 57: | Line 72: | ||
<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:#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> | ||
| Line 65: | Line 81: | ||
<td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/SpinningBox.html Colored Box]</td> | <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> | ||
| Line 73: | Line 90: | ||
<td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/SpiritBox.html Textured Box]</td> | <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> | ||
| Line 79: | Line 97: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/Earth.html Earth]</td> | <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> | ||
| Line 89: | Line 108: | ||
<td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/TeapotPerVertex.html Teapot Per Vertex]</td> | <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> | ||
| Line 97: | Line 117: | ||
<td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/TeapotPerPixel.html Teapot Per Pixel]</td> | <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> | ||
| Line 105: | Line 126: | ||
<td style="background:#CCC; color:white">[https://www.khronos.org/registry/webgl/sdk/demos/webkit/ManyPlanetsDeep.html Many Planets Deep]</td> | <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> | ||
| Line 115: | Line 137: | ||
<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:black">No ( | <td style="color:green">Yes</td> | ||
<td>No (teapot not drawn, CSS effects not supported | <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> | ||
<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:#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="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> | ||
| Line 131: | Line 155: | ||
<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:red">No</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> | ||
| Line 136: | Line 161: | ||
</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.