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.

Answer 2

As ksons mentioned the render pipeline interface is undergoing some major changes right now, XML3D 4.8 is the last version that supports it in its current form. Version 5.0 will likely re-introduce it in a (hopefully) much improved form.

We use a custom render pipeline in one of our internal projects to draw a wireframe overlay onto selected models, I've posted a simplified version of this pipeline as a Gist for you to have a look at. Essentially it renders the scene using the standard internal render pass and then does a second pass to draw the highlighted objects in a crude wireframe mode without depth testing.

As I said this works in v4.8, if you need this functionality in v4.9 then please open an issue and I'll see about re-enabling it as a minor release.