Browser-support.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <base href="../../" />
  6. <script src="list.js"></script>
  7. <script src="page.js"></script>
  8. <link type="text/css" rel="stylesheet" href="page.css" />
  9. </head>
  10. <body>
  11. <h1>[name]</h1>
  12. <h2>Overview</h2>
  13. <div>
  14. <p>
  15. Three.js can use WebGL to render your scenes on all modern browsers. For older browsers, especially Internet Explorer 10 and below, you may have to fallback to one of the other renderers (CSS2DRenderer, CSS3DRenderer, SVGRenderer, CanvasRenderer). Additionally, you may have to include some polyfills, especially if you are using files from the /examples folder.
  16. </p>
  17. <p>
  18. Note: if you don't need to support these old browsers, then it is not recommended to use the other renderers as they are slower and support less features than the WebGLRenderer.
  19. </p>
  20. </div>
  21. <h2>Browsers that support WebGL</h2>
  22. <div>
  23. <p>
  24. Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 and Microsoft Edge. You can find which browsers support WebGL at <a href="https://caniuse.com/#feat=webgl" target="_blank">Can I use WebGL?</a>.
  25. </p>
  26. </div>
  27. <h2>JavaScript Language Features or Web APIs Used in three.js</h2>
  28. <div>
  29. <p>
  30. Here are some features used in three.js. Some of them may require additional polyfills.
  31. </p>
  32. <table>
  33. <thead>
  34. <tr>
  35. <th>Feature</th>
  36. <th>Use Scope</th>
  37. <th>Modules</th>
  38. </tr>
  39. </thead>
  40. <tbody>
  41. <tr>
  42. <td>Typed Arrays</td>
  43. <td>Source</td>
  44. <td>BufferAttribute, BufferGeometry, etc.</td>
  45. </tr>
  46. <tr>
  47. <td>Web Audio API</td>
  48. <td>Source</td>
  49. <td>Audio, AudioContext, AudioListener, etc.</td>
  50. </tr>
  51. <tr>
  52. <td>WebVR API</td>
  53. <td>Source</td>
  54. <td>WebVRManager, etc.</td>
  55. </tr>
  56. <tr>
  57. <td>Blob</td>
  58. <td>Source</td>
  59. <td>FileLoader, etc.</td>
  60. </tr>
  61. <tr>
  62. <td>Promise</td>
  63. <td>Examples</td>
  64. <td>GLTFLoader, GLTF2Loader, WebVR, VREffect, etc.</td>
  65. </tr>
  66. <tr>
  67. <td>Fetch</td>
  68. <td>Examples</td>
  69. <td>ImageBitmapLoader, etc.</td>
  70. </tr>
  71. <tr>
  72. <td>File API</td>
  73. <td>Examples</td>
  74. <td>GLTFExporter, etc.</td>
  75. </tr>
  76. <tr>
  77. <td>URL API</td>
  78. <td>Examples</td>
  79. <td>GLTFLoader, etc.</td>
  80. </tr>
  81. <tr>
  82. <td>Pointer Lock API</td>
  83. <td>Examples</td>
  84. <td>PointerLockControls</td>
  85. </tr>
  86. </tbody>
  87. </table>
  88. </div>
  89. <h2>Polyfills</h2>
  90. <div>
  91. <p>Just import polyfills base on your requirements. Taking IE9 as an example, you need to polyfill at least these features:</p>
  92. <ul>
  93. <li>Typed Arrays</li>
  94. <li>Blob</li>
  95. </ul>
  96. </div>
  97. <h3>Suggested polyfills</h3>
  98. <div>
  99. <ul>
  100. <li>
  101. <a href="https://github.com/zloirock/core-js" target="_blank">core-js</a>
  102. </li>
  103. <li>
  104. <a href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank">typedarray.js</a>
  105. </li>
  106. <li>
  107. <a href="https://github.com/stefanpenner/es6-promise/" target="_blank">ES6-Promise</a>
  108. </li>
  109. <li>
  110. <a href="https://github.com/github/fetch" target="_blank">fetch</a>
  111. </li>
  112. </ul>
  113. </div>
  114. </body>
  115. </html>