Demo Repository: Difference between revisions

From WebGL Public Wiki
Jump to navigation Jump to search
← Older edit
m separated non SDK demos from SDK demos.
Remove Jonas Sicking's demos which are no longer available
 
(14 intermediate revisions by 6 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>
Line 23: Line 25:
</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/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 31: Line 34:
</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/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>
Line 39: Line 43:
</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/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>
Line 47: Line 52:
</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/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 55: Line 61:
</tr>
</tr>
<tr>
<tr>
   <td style="background:#CCC; color:white">[https://cvs.khronos.org/svn/repos/registry/trunk/public/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/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 63: Line 70:
</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/google/nvidia-vertex-buffer-object/index.html Vertex Buffer Object Example]</td>
   <td style="background:#AAA; color:white"> Apple </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 71: Line 79:
</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/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 79: Line 88:
</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/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 87: Line 97:
</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/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 95: Line 106:
</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/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 103: Line 115:
</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/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 111: Line 124:
</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/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:black">No (Some CSS effects not supported yet)</td>
   <td style="color:green">Yes</td>
   <td>No (teapot not drawn, CSS effects not supported as per Mozilla)</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/MatrixTest.html J3DI Matrix Test]</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: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: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://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/webkit/MatrixTest.html J3DI Matrix Test]</td>
   <td style="background:#AAA; color:white">Mozilla</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 style="color:green">Yes</td>
   <td style="color:green">Yes</td>
</tr>
</table>
Other demos
<table border="1" cellpadding="5">
<tr style="background:#AAA; color:white">
  <th>Test</th>
  <th>Originator</th>
  <th>Apple (WebKit)</th>
  <th>Google (Chrome)</th>
  <th>Mozilla (Firefox)</th>
  <th>Opera</th>
</tr>
<tr>
  <td style="background:#CCC; color:white">[http://people.mozilla.com/~sicking/webgl/ray.html Ray Tracer] [http://people.mozilla.com/~sicking/webgl/raycolor.html 2]</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 style="color:green">Yes</td>
</tr>
</tr>
<tr>
<tr>
   <td style="background:#CCC; color:white">[http://people.mozilla.com/~sicking/webgl/juliaanim.html Julia fractal]</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:green">Yes</td>
   <td style="color:green">Yes</td>
   <td style="color:green">Yes</td>
</tr>
   <td style="color:red">No</td>
<tr>
  <td style="background:#CCC; color:white">[http://people.mozilla.com/~sicking/webgl/mandjulia.html Mandelbrot/Julia transition]</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 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 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"