three.js emissive material maps

Question

I'm currently experimenting a bit in three.js, and I'd like to use an emissive map. I've tried just loading a texture into the emissive property of a phong material, but it doesn't work like that, unfortunately. Here's my code:

var params = {
    emissive: THREE.ImageUtils.loadTexture( emissive ),
    shininess: shininess,
    map: THREE.ImageUtils.loadTexture( map ),
    normalMap: THREE.ImageUtils.loadTexture( normalMap ),
    normalScale: new THREE.Vector2(0,-1),
    envMap: this.reflectionCube,
    combine: THREE.MixOperation,
    reflectivity: 0.05
};
var material = new THREE.MeshPhongMaterial(params);

Can anyone point me in the right direction to get the emissive map working?

yes, i figured. but i need emissive maps working. is there anything that does support emissive maps? — Kevin Kuyl
No. You can see that yourself by searching the codebase. You can, however, create your own custom ShaderMaterial. — WestLangley

timeinvariant timeinvariant · Accepted Answer · 2014-05-18T13:12:45

You can make a material with emissive (glow) map support by extending the shaders from existing three.js materials (MeshPhong, MeshLambert, etc).

The benefit is you retain all the functionality from the standard three.js material and also add glow map support.

For the purposes of this example, I'll use the three.js Phong shader as a starting point:

Make a "PhongGlowShader" by extending (via UniformsLib/ShaderChunk) the existing Phong shader

Add glow map uniforms:

"glowMap" : { type: "t", value: null },
"glowIntensity": { type: "f", value: 1 },

Add a glow map factor to its fragment shader:

float glow = texture2D(glowMap, vUv).x * glowIntensity * 2.0; // optional * 2.0 and clamp
gl_FragColor.xyz = texelColor.xyz * clamp(emissive + totalDiffuse + ambientLightColor * ambient + glow, 0.0, 2.0) + totalSpecular;

Create a new THREE.ShaderMaterial using that shader, and pass the glow texture along with its usual uniforms

For further details, take a look at this fiddle: http://jsfiddle.net/Qr7Bb/2/.

You'll notice I made a "MeshPhongGlowMaterial" class that inherits from THREE.ShaderMaterial. That's purely optional; you can also just have a function that creates a new THREE.ShaderMaterial with the above shaders and uniforms.

The standard "emissive" property affects the entire surface of the mesh, it has nothing to do with the glow map (instead use the custom "glowIntensity" property for that).

three.js emissive material maps

1 Answers