WebGL Renderer core features and more in threejs
There are a few core components to making a three.js project, there needs to be a scene object, a camera to set the point in space by which to look at something in the scene object, and one final other component that is needed on top of all of this and that is a renderer. There is also having something to look at added to the scene object as well such as a mesh object that is composed of a buffer geometry, and a material. However there are other options when it comes to adding content to a scene object, so the core set of objects are really just those three things. That is a scene object, camera, and renderer.
The webGl renderer in threejs and What to know first
Check out Scene objects and Camera Objects
The main method of interest with the WebGl renderer as well as with renderers in general is the render method that will take a scene object as well as a camera as arguments. After calling the method the given scene object will be drawn from the perspective of the given camera object. So then there is looking more into what there is to be ware of when it comes to creating a scene object, as well as many of the features of scene objects much of which is based off of the object3d class. There is also looking into what the options are with cameras as well, but for the most part I just go with the perspective camera.
Source Code examples are on Github
The Source code examples that i am writing about here can also be found in my test threejs repository on Github.
Version numbers matter
In this post I was using three.js r98 when I first wrote the post which was released in November of 2018. The last time I edited this post I was using r146, and thus made additional changes to all the source code examples to make them work better in late versions of threejs. In the r98 of threejs the canvas renderer was removed, there where also a number of other significant changes in that version. So now I am limited in terms of other renderer options that are baked into threejs itself at least. As of r118 the WebGL Renderer will default to using WebGL2, which for the most part will not be a problem on most clients, except for when it is a problem and results in some errors. As such if I am in a situation in which I am sure that WebGL1 features alone will work fine with what I want to do, I can use the WebGL1 Renderer now.
I also fixed some code breaking changes with these examples and they seem to be working fine with r127 as of this writing. Still lots of code breaking changes are made to threejs all the time so if the code in this example, or any of my three.js examples breaks be sure to check the revision number of the three.js file you are using first.
1 - Basic WebGL Renderer Demos
To get started with the WebGLRenderer all I need to do is just call the THREE.WebGLRenderer constructor method to create a new instance of the WebGL renderer. Once I have my WebGL renderer instance I can then call methods like the set size method to set the native size of the canvas that is to be used to render my project. I can also use the render function to draw the current state of a scene with a scene object and a camera. In this example I will be creating a basic scene, and a camera just for the sake of having a basic full working getting started type example of the WebGL renderer in threejs.
1.1 - Basic three.js example using the WebGLRenderer
Now that I have the renderer I will want a scene object with something to look at attached to it, and a camera. So the nest step is to just create a new scene object, and then a camera too such as the perspective camera. I then created a Mesh with a simple geometry and material for it, and made sure to add the mesh to the scene object. Now I can use the render function of the WebGL renderer, with that said all I have to do is call the render function. When calling the render function I pass the scene object as the first argument, and the camera as the second argument.
1.2 - Using WebGL 1 Always, if that works
As of r118+ The WebGL Renderer will always use WebGL2 which for the most part will not present a problem with most clients. However this still might cause some errors on certain platforms. So if I am sure that WebGL1 alone will work fine with what I want to do, and more often that not it will, I can just make sure that I will always use the WebGL1 Renderer if it is there to work with in the revision of threejs that I am using.
So then in this example I always use the THREE.WebGL1Renderer if it is there. In older versions of threejs it might not be there, so in that case the regular webGL renderer will be used. There may be better ways of handing this sort of thing when it comes to feature testing what there is to work with and make a choice that way. Also there are a number of threejs features that will not work with WebGL1 so in that case if I want to use these kinds of features I will of course need to just always use THREE.WebGLRenderer with a late revision of threejs then. In any case this is something to be aware of as there is more that one built in webgl renderer, one that will always use webgl1 and another that will always use webgl2 as of r118+.
2 - Making a render loop
2.1 - Using request animation frame
In this example I am doing something to limit the number of frames that are rendered per second. There are many more simple animation loop examples where they do not go this far with things, but I think that having a way to adjust that is important when it comes to making a final product. When it comes to setting a low frame rate target the lower the better until it starts to get to the point where the animation is just too choppy, doing so helps to reduce stress on the clients resources.
2.2 - Using the set animation loop method
Another option for setting up and animation loop in which the render function will be called would be to use the set animation loop method of the WebGL renderer instance. The process of using it is pretty straight forward I just need to call the method off of the renderer instance and pass the function that I want called over and over again as the first argument for the function. If I want to stop the animation for any reason I can then just pass a null value as a way to stop it.
In the event that there is no support for webGL in a client browser there are ways of feature testing for WebGL and then using another kind of renderer to render a scene, or at least inform the user of what the problem is. For more on this topic check out my other post that has to do with feature testing on webGL.
The WebGL renderer is the default renderer that I often go with mainly because it is a renderer that is built into the core of threejs itself. Many of the other renderer options have to be added by way of an additional external file, or do not have the same set of features such is the case with the SVG renderer for example. Some of these other renderer’s might still prove to be a good choice in some situations though, it is just that so far I can not say that I have found myself in situations in which I need to work with these other options.