How to combine shader effects in threejs

Question

Coming from the Flash background, I'm used to creating a fragment shader in the following manner:

filters = [];

filters.push(new BasicFilter(SomeTexture));
filters.push(new NormalMapFilter(SomeOtherTexture));

myShader = new Shader(filters);

As a result, I could combine a number of effects freely and easily without the need of writing a large separate shader each time.

In case of threejs, I noticed that for complex visual effects, a single shader is written, like here: http://threejs.org/examples/#webgl_materials_bumpmap_skin

Is it possible to write e.g. a bump map shader and environment map shader separately and then combine them dynamically when needed? What would be the most proper way of doing this?

Answer 1

It is not possible directly in three.js. Three creates shaders by passing the shader code as a string directly to a WebGL shader object to compile. There is no mechanism to automatically build complex shaders, you have to write your own. Three.js conveniently adds a couple of uniforms/attributes to the shader, but you have to write what's done with them.

Answer 2

You can use Effect Composer now to combine shaders