Demo Repository: Difference between revisions

From WebGL Public Wiki
Jump to navigation Jump to search
← Older edit
No edit summary
Remove Jonas Sicking's demos which are no longer available
 
(28 intermediate revisions by 13 users not shown)
Line 1: Line 1:
The [https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/ WebGL SDK 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!
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 Subversion:
You can check out the source code for all of these demos via Git:


     svn checkout https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl
     git clone https://github.com/KhronosGroup/WebGL.git


<table border="1" cellpadding="5">
<table border="1" cellpadding="5">
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>
</tr>
</tr>
<tr>
<tr>
   <td style="background:#CCC; color:white">[https://cvs.khronos.org/svn/repos/registry/trunk/public/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>
   <td style="color:green">Yes</td>
   <td></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/particles/index.html particles]</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/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>
<tr>
<tr>
   <td style="background:#CCC; color:white">[https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/google/particles/index.html particles]</td>
   <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="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://cvs.khronos.org/svn/repos/registry/trunk/public/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/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>
   <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://cvs.khronos.org/svn/repos/registry/trunk/public/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/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>
   <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://cvs.khronos.org/svn/repos/registry/trunk/public/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/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://cvs.khronos.org/svn/repos/registry/trunk/public/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>
   <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://cvs.khronos.org/svn/repos/registry/trunk/public/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>
   <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://cvs.khronos.org/svn/repos/registry/trunk/public/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>
   <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://cvs.khronos.org/svn/repos/registry/trunk/public/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>
   <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://cvs.khronos.org/svn/repos/registry/trunk/public/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>
   <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://cvs.khronos.org/svn/repos/registry/trunk/public/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>
   <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://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/WebGL+CSS.html WebGL + CSS]</td>
   <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:black">Yes* (CSS transforms not supported yet)</td>
   <td style="color:green">Yes</td>
   <td style="color:green">Yes/No (Some CSS effects not supported yet)</td>
   <td style="color:green">Yes</td>
   <td></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://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/mozilla/spore/index.html Spore COLLADA Viewer]</td>
   <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: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>
  <td></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 Google Yes Yes Yes Yes Yes
particles Google Yes Yes Yes Yes Yes
shiny-teapot Google Yes Yes Yes Yes Yes
high-dpi Google Yes Yes Yes Yes Yes
image-texture-test Google Yes Yes Yes Yes Yes
procedural-texture-test Google Yes Yes Yes Yes Yes
Vertex Buffer Object Example Google 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.

Retrieved from "https://wikis.khronos.org/webgl/index.php?title=Demo_Repository&oldid=2610"