Access to render pipeline in XML3D: Object highlightning

Question

I want to make object to become highlighted when selected in order to do this I need a custom shader that scales that renders the model outline - this part of the task I'm familiar with - XML3D provides a way to implement custom shader.

But the missing piece is having access to render pipeline: Its impossible to make nice highlighting without copying the model and painting it over old one or rendering the scene in two passes (postprocessing). Creating another model copy in the usual way (attaching new element to dom tree) won't solve the issue since I need also control scene blending.

How to I get it done with with xml3d? Is it possible without digging deep into the library?

Answer 1

In general there are four approaches to implement highlighting:

1. you can exchange materials back and forth (not very efficient)
2. you can use material overrides for highlighted objects, which will adapt one or more parameters of the current shading (e.g. emissive color)
3. you can use a custom shader in combination with an arbitrary uniform attribute which indicates that the object should be highlighted. In the shader, you can adapt color and rendering based on the attribute. E.g. you could do a rim-highlighting or a wireframe rendering. Here is an example for a shader that colors an object if the uniform selected has a specific value. For instance:
   <mesh id="foo"> <data src="mesh-data.json"></data> <float name="selected">0</float> </mesh>
   To highlight this object: $("#foo float[name=selected]").text("1");
4. you can adapt the rendering pipeline to render the highlighted object twice and blend it in various ways

If sufficient for your use-case, I would recommend approach 3, as it is not very intrusive. The interface for creating custom rendering pipeline is not yet very stable.