Three js and webGL support
As of version r69 of Threejs the 2d canvas software renderer has been removed from the core of threejs itself, and moved to the examples folder. It was still possible to use it as an add on file but as of late versions of threejs it would seem that is no longer the case. There once was a time where webGL support was not so great, however that was then, and now when comes to modern web browsers webgl support is pretty good.
For the most part these days there is no need to bother with the 2d canvas powered software renderer as the built in webgl renderer will work just fine on most clients, but if for some reason you do want to add more robust support for older clients that do not have great web gl support than the some other renderer option will need to be used in the event that it will not work.
I can not say that I bother with this myself, but never the less there is the question of that small minority of people using outdated browsers and having code not break. Also there is not just concerns over using older browsers but using a client where certain webgl features will just not work. For example webGl2 features will not work on my raspberry pi 4 because of limitations with the video adapter that is used on it even if I am using a modern browser. So then in this post I thought I would touch base on this sort of topic for those that might be interested.
WebGL in three.js and what to know before hand
More on the webGL renderer
In this post I am mostly writing about feature testing for webGL and then doing something different in the event that webGL is not supported. However I am not really getting into the webGL renderer in detail as I have wrote a post on the webGL renderer in detail a while back and there is therefore no need to do so here.
Also check out the shader material
Sense I first wrote this blog post I got around to writing at least one post on the shader material in threejs. The shader material is a great way to get started with GLSL code that is a lot easier compared to starting from the ground up as I have access to the shader library of threejs.
Source Code is also up on Github
The source code examples that I am writing about here can also be found up on Github. This is also the repo where I store the source code examples for my many other blog posts on threejs as well.
Version numbers matter
When writing this post for the first time I was using revision 104 of three.js, and the last time I cam around to do some editing I was using r146 of threejs. So a lot has changed between those two revision numbers, far more that I can write about when it comes to this single little blog post on the subject. However I will say that as of revision r141+ it is now assumed that a client has webgl2 support, which will case erros when working on a project on a client system that does not. So I find myself using the WebGl1Renderer now as my default go to renderer that is built into the threejs core.
On top of all of this I am also using some additional assets in the renderer’s folder of the js folder in the examples folder of the three.js repo. When it comes to rendering a three js scene with a renderer other than the built in webGL renderer additional assets must be used to provide that additional way of rendering. To further complicate matters there the options of what there are to work with in terms of software rendering will differ from one revision to the next. When it came to r104 the 2d canvas renderer was still an option when added as an additional external file which was called the software-renderer.js file. However in later revisions of threejs it would seem the best option would be to use the SVGRenderer as of r146+.
1 - Testing if webgl is there to work with
It is becoming less of a problem every day, but there is still a concern if webGl is even there to work with to begin with. Even if I stop caring about old browsers all together there is still a possibility that a lot of people might be using not so great graphics adapters that do not support all webgl features. So there is still testing if webgl is there to work with, and if so what version. There is also going into depth as to what features are working and what are not but that might prove to be a bit to advanced for now.
1.a - The webgl-r0.js file
Here is my webgl.js file that just contains one method that is just a slightly modified version of what is also in the three.js repo. This method just simply returns true of the client supports webGL 1, and false if that is not the case with the main is web gl method. In addition to this I also have a method that will just return true or false in the event that a client supports webgl2 or not.
If you want to use the official webgl.js file here is a link to that in the repo. The file adds some additional functionality but for the most part it is just to feature test for webGL. Feature testing for just webGL by itself is not always enough also, for example a client count support webGL by itself, but that does not mean that all the features of the three js webGL renderer will work as expected. I can confirm that this is sometimes that case with some clients.
1.1 - Using the SVGRenderer (threejs r146) demo
As of revision r146 of threejs it would seem that the best alternative option to that of the web gl renderer would be the SVG Renderer. It would seem that the 2d canvas renderer is not longer being supported at all, so that might only be an option when using older revisions of threejs, or if for some reason one can get that working on later revisions.
1.2 - Software renderer (threejs r104) demo
Here I have the setup.js file that makes use of the webGL method in webgl.js, as well as the additional assets depending if webGl is supported or not.
In order to get this demo to work on top of using r104 of three.js the projector.js and softwareRenderer.js files will also need to be loaded in as well. Projector.js will need to be loaded after three.js and before softwareRenderer.js as that file depends on projector.js and projector.js depends on three.js
So in the html of this example I am linking to three.js like normal, but I am also linking to the additional assets in the github repo as well. I am also linking to some additional assets that feature test for webGL and render a scene differently depending on the state of webGL support in the client which are as follows.
The demo involves creating a mesh with an array of materials the first of which is the Depth Material that works great in the Software Renderer and the second material is the standard material that is one of the several materials that will respond to a light source in three js.
The Material index property of a Face3 instance in three js is what can be used to set the material in this array of materials to use when skinning A Face3 instance in a geometry. So in the event that webGL is supported then the Standard Material will be used else the Depth material will be used as a fall back or sorts that will work okay with the Software Renderer.
2 - Starting out with WebGl From the ground up
In this section I will be going over a few examples that have to do with starting to work with WebGl alone from the ground up. At the time of this writing I have to say that I do not think that this is a good idea, unless of course you want to get into writing custom shaders, or not use threejs but work directly with webGL. There is all kinds of ways of getting started with webgl alone which is something that I am going to touch base on at least here. However there is also making use of the shader library of threejs as well which is great for quickly adding certain common features.
2.1 - Raw WebGl Hello world program with a script tag
2.2 - Raw Webgl demo with shader tags
Even if a client does support webgl that does not mean that all the webgl features will work as expected. A simple check if webgl is there or not will result in a true response with a simple feature test for webgl alone, but things will still not render as expected.
Also when it comes to trying to get things work on both new and old platforms it is not always a question of using this late version of three.js, and then using the 2d canvas renderer with a later version of three.js as a later version of three.js might very well break on older platforms. Doing this sort of thing can prove to be very time consuming, and often it is just not worth the hassle.