Emissive maps in threejs
There are a lot of texture maps that can be used with the various materials in threejs, such as using a basic diffuse color map with the basic material, or an alpha map to set transparent areas. I am not sure if I will ever get around to writing posts on every kind of map there is to be aware of in threejs, but there are some that really stand out for me more than others, and one of these map options is an emissive map.
When I am working with a material that will respond to a light source such as the standard material, there is the color property of the material that can be used to set a base color for the material. This color property will work a little different with the standard material compared to other materials like the basic material in that the color will only show up when there is some light in effect. So then there should be some kind of color property that will work with the standard material in the same way as the color property in the basic material in that it can be used to set a color that will always show up regardless of what the situation is with lighting. This is where the emissive property comes into play to set a color that will always show up.
However there is not just thinking in terms of simple solid colors for mesh objects, there is also getting into textures. With the basic material there is using the map property as a way to set a simple color map. When it comes to the standard material, there is also a map property but as with the color property it will only work with light. So then there is also the emissive map property that can be used in place of the map property when compared to the basic material. With that said the color, map, emissive, and emissiveMap options can be used to set the base color and textures in terms of what will respond to light, and what will always show up. Of course there is a whole lot more to this when it comes to yet even more material options, as well as other related topics that have to do with geometry. However in this post the main focus will be on emissive maps.
Emissive maps and what to know first
The texture loader, canvas textures, and data textures.
Read up more on materials to know your options
There are a number of options when it comes to materials that support the emissive map feature, for these examples I will be sticking mainly to the standard material. The standard material is a great general purpose material, and for that reason it is more or less my first go to material and not just because it supports emissive maps. However another great option would be the Phong material which also supports specular highlights which is cool, but getting into that would be a bit off topic here.
Diffuse Color maps, and lighting.
Although emissive maps and the emissive color can be used without a light source, the main reason why we are bothering with them is becuase we are working with a material that responds to light. So in order to really know what emissive maps are about you are going to want to play around with lighting, and also the color property and color maps that are effected by lighting. When it comes to what the options are with lighting there are again a range of options just like that of many other kinds of objects in threejs.
For the most part thought I like to go with ambient light and point lights as a way to set an over all base about of light for all surfaces, and to also make use of something where distance an direction have some effect on surfaces.
The source code examples in this post are up on Github
The source code examples that I am writing about in this post can be found in my test threejs repository. This is also the repo where I park the source code examples for all my other posts on threejs as well. Also if you want to get things working on you end with these examples I do try to keep them copy and paste friendly but often the best way would be to clone down the repo, start the server, and view the examples that way.
Version numbers matter
When I wrote this post for the first time I was using r127 of threejs which was a late version of threejs that was released in early 2021. The last time that I came around to do a little editing of this post I was using r146 of threejs and the old examples as well as the new one I made at that point on data texture worked fine with that version of threejs. Still code breaking changes are made to threejs often so always be mindful of the version number that you are using.
1 - Some basic examples of emsiive maps
1.1 - Data texture example of an emissive map
This example of emissive maps that I made makes use of data textures as a way to create the texture that will be used for an emissive map. This is a way of creating a texture by making an instance of a unit8Array and then having values between 0 and 255 for each color channel, including alpha, for each pixle. To quickly just create a texture with random color values purely or the sake of having an emissive map texture I am using the seeded random method of the math utils object and then using function arguments to change what the values are for each color channel.
1.2 - Canvas texture example of an emissive map
In this section I will be writing about a quick basic example of an emissive map where I am creating the emissive map with a canvas element rather than loading an external texture. So for this example I have a create canvas texture helper that I can call and then pass a function that will be by draw function that will be called to create the texture with the 2d drawing context.
I then have my create emiisve map helper that will create and return the texture that I want to use for an emissive map using my create canvas texture helper. For this basic example I am just creating a square around the edge of the canvas element to define the outer edge of the texture as the emissive area.
I also have one more helper function for this example and that is one that will create and return a mesh object that will make use of a material that has an emissive map created with the other above helper functions. I am calling the create emissive map as a way to create and return the texture that I want to use for the emissive map. In addition to this there are a few more properties that are worth taking about for the material. One of which is the emissive intensity property that can be used to adjust the intensity of the emissive glow effect. There is then also adjusting what the solid emissive, and regular color values are. In any case the emisisve color is the color that will be the glow effect, and as such it should be just about any desired color other than the default black.
The end result of this then is a cube where the sides are lit up a little because of the presence of the light source in the form of a point light. However regardless of what the lighting situation is with a side all the areas effected by the emissive map are glowing a little with the color that I set with the emissive property.
2 - Animation loop examples of emissive maps
For this section I will be going over a few examples that make use of an animation loop. This allows for me to update things over time to really help get an idea of what the deal is with emissive maps.
2.1 - First video example
For the first video that I made for this blog post I created a video using a hacked over version of r2 of my object grid warp threejs example. I have the full source code of this hacked over version of the object grid wrap module and the addtional files that I am using in the Girhub folder.
2.2 - Animation loop with directional light and updating textures
When I write posts on subjects like this I have come to find that I should make at least one of not more animation loop examples. The main thing here might be how to go about creating a new texture on each frame tick with data textures or canvas elements. So this section will be about a quick example that involves a animation lop function powered by the request animation frame method, and in the body of this loop method I will be creating anew textures each frame tick.
On top of also updating the texture used for both of the map and emissive map, I am also changing the location of a directional light as a way to show that as the light moves that will effect the map. That is that the light source will effect the noise texture used with the map, but it will not do anything with the emssive map as that will always show up no matter what regardless of what the state if with light in the scene object.
That will be it for now when it comes to emissive maps, I wanted to write at least something about them for now at least so this should work for the moment. There might be a great deal more to write about with this subject but I think for the most part a great deal of it has to do with other aspects of the threejs library beyond just that of the emissive map property of a material that supports this. There is not just having an emiaaive map, but also a regular color map on top of that, and also there is the solid colors for but the regular color that is effected by a light source as well as the emissive color as well. On top of all of that there is also the emissive intensity value that is also something that I might want to adjust when it comes to this sort of thing.