Add document for browser support #12796
Conversation
| <h2>Overview</h2> | ||
| <div> | ||
| <p> | ||
| <strong>TL;DR</strong> three.js supports most modern browsers, including Internet Explorer 11 and above.</p> |
There was a problem hiding this comment.
I think you can leave out the "TL;DR".
I think you can just say "Three.js supports all modern browsers" and leave it at that.
There was a problem hiding this comment.
Actually I would word this a bit differently - the introduction doesn't make it that clear what this document is for.
Something like:
"Three.js can use WebGL to render you scenes on all modern browsers. For older browsers, especially Internet Explorer version 10 and below, you may have to fallback to one of the other renderers (CSS2DRenderer, CSS3DRenderer, SVGRenderer, CanvasRenderer). Additionally, you may have include some polyfills, especially if you are using files from the /examples folder."
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.
Browsers that support WebGL:
Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 and Microsoft Edge (link to caniuse)
| <p> | ||
| <strong>TL;DR</strong> three.js supports most modern browsers, including Internet Explorer 11 and above.</p> | ||
| <p> | ||
| three.js provides WebGL, Canvas, SVG and CSS renderers. Different renderers may have different requirements of compatibility. |
There was a problem hiding this comment.
Three.js at the start of a sentence should be capitalised.
There was a problem hiding this comment.
I disagree, and always write it as three.js, even at the start of a sentence. See the wikipedia article for eBay, for example -- or iPad.
If that is bothersome to you, you can rewrite the sentence and avoid three.js as the first word.
There was a problem hiding this comment.
We did discuss this before and the consensus then was to capitalize it at the start of sentences.
There was a problem hiding this comment.
@looeee Where was this discussed?
There was a problem hiding this comment.
If three.js is correct, this wikipedia article needs a revision 😁
BTW: I always write it as three.js, too.
We did discuss this before and the consensus then was to capitalize it at the start of sentences.
Can't remember. A link to this discussion would be helpful.
There was a problem hiding this comment.
I personally don't mind. Three.js or three.js are fine. I have more of a problem with ThreeJS, threeJS, THREEjs and other variations...
| instead. Note that CanvasRenderer only supports a small subset of WebGLRenderer's features. | ||
| </p> | ||
| <p> | ||
| For Internet Explorer, the table below lists avaiable renderers. |
| </table> | ||
| </div> | ||
|
|
||
| <h2>Part of ECMAScript Language Features or Web APIs Used in three.js</h2> |
There was a problem hiding this comment.
Drop the "Part of" -> ECMAScript Language Features or Web APIs Used in three.js.
Also, do we need to call it ECMAScript? This should be as beginner friendly as possible, not everyone knows that JavaScript and ECMAScript are the same.
| <td>FileLoader, etc.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>performance</td> |
There was a problem hiding this comment.
Clock already defaults back to Date.now if Performance.now is not found, so you can leave this one out.
| <tr> | ||
| <td>Web Workers</td> | ||
| <td>Examples</td> | ||
| <td>WWOBJLoader2, etc.</td> |
There was a problem hiding this comment.
I think WWOBJLoader2 is now OBJLoader2 and uses workers only if they are available, so you can leave this on out.
| <tr> | ||
| <td>Pointer Lock API</td> | ||
| <td>Examples</td> | ||
| <td>PointerLockControls, etc.</td> |
| <a href="https://github.com/eligrey/Blob.js" target="_blank">Blob.js</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://gist.github.com/paulirish/5438650" target="_blank">performance</a> |
There was a problem hiding this comment.
Again, no need for a Performance polyfill as the Clock already has a fallback.
| <li>Typed Arrays</li> | ||
| <li>Blob</li> | ||
| <li>performance</li> | ||
| <li>requestAnimationFrame</li> |
There was a problem hiding this comment.
Actually you don't need to polyfill this - it's used in the WebGLRenderer (only for VR I think?), but you can't use that anyway with IE9.
| <ul> | ||
| <li>Typed Arrays</li> | ||
| <li>Blob</li> | ||
| <li>performance</li> |
There was a problem hiding this comment.
Not needed - see my comment on Clock above.
| <h2>Overview</h2> | ||
| <div> | ||
| <p> | ||
| <strong>TL;DR</strong> three.js supports most modern browsers, including Internet Explorer 11 and above.</p> |
There was a problem hiding this comment.
Actually I would word this a bit differently - the introduction doesn't make it that clear what this document is for.
Something like:
"Three.js can use WebGL to render you scenes on all modern browsers. For older browsers, especially Internet Explorer version 10 and below, you may have to fallback to one of the other renderers (CSS2DRenderer, CSS3DRenderer, SVGRenderer, CanvasRenderer). Additionally, you may have include some polyfills, especially if you are using files from the /examples folder."
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.
Browsers that support WebGL:
Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 and Microsoft Edge (link to caniuse)
|
Thanks for reviewing @looeee 🙏 |
|
@keqingrong it's looking good now! Just a couple of minor issues, and sorry for the delay in getting back to you 😄 |
| <h2>Browsers that support WebGL</h2> | ||
| <div> | ||
| <p> | ||
| 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>. |
There was a problem hiding this comment.
Links can be done like this BTW:
[link:https://caniuse.com/#feat=webgl Can I use WebGL?]
...although some characters cause issues (you'll have to check if the # is OK.
| <h2>Overview</h2> | ||
| <div> | ||
| <p> | ||
| 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. |
There was a problem hiding this comment.
Can you add a link to the folder with the other renderers?
...to one of the other [link:https://github.com/mrdoob/three.js/tree/master/examples/js/renderers renderers]
And also to the /examples folder:
...you are using files from the [link:https://github.com/mrdoob/three.js/tree/master/examples /examples] folder
|
|
||
| <h2>Polyfills</h2> | ||
| <div> | ||
| <p>Just import polyfills base on your requirements. Taking IE9 as an example, you need to polyfill at least these features:</p> |
|
@looeee I've updated the links, thank you for reviewing! 😁 |
| </p> | ||
| </div> | ||
|
|
||
| <h2>JavaScript Language Features or Web APIs Used in three.js</h2> |
There was a problem hiding this comment.
Sorry, I do not think this section provides sufficiently-valuable information, and it can be removed.
There was a problem hiding this comment.
I don't think I agree. I think it's a good start and we can complete it over time. I think this is good information for new people to start grasping how the library works.
|
Thanks! |
#12698