How to implement the outline effect when object being selected in three.js stroke effect in babylon

Questions
1

Hello，
I’m trying to implement the outline effect when object being selected in three.js stroke effect in babylon.
The outline effect when object being selected in three.js is as follows：
three.js examples

Here is some of the shader implementation code in three.js:

////////////////////////
vertexShader:
`#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>

			varying vec4 projTexCoord;
			varying vec4 vPosition;
			uniform mat4 textureMatrix;

			void main() {

				#include <skinbase_vertex>
				#include <begin_vertex>
				#include <morphtarget_vertex>
				#include <skinning_vertex>
				#include <project_vertex>

				vPosition = mvPosition;

				vec4 worldPosition = vec4( transformed, 1.0 );

				#ifdef USE_INSTANCING

					worldPosition = instanceMatrix * worldPosition;

				#endif
				
				worldPosition = modelMatrix * worldPosition;

				projTexCoord = textureMatrix * worldPosition;

			}`,

		fragmentShader:
			`#include <packing>
			varying vec4 vPosition;
			varying vec4 projTexCoord;
			uniform sampler2D depthTexture;
			uniform vec2 cameraNearFar;

			void main() {

				float depth = unpackRGBAToDepth(texture2DProj( depthTexture, projTexCoord ));
				float viewZ = - DEPTH_TO_VIEW_Z( depth, cameraNearFar.x, cameraNearFar.y );
				float depthTest = (-vPosition.z > viewZ) ? 1.0 : 0.0;
				gl_FragColor = vec4(0.0, depthTest, 1.0, 1.0);

			}`

/////////////////////
but now I I’m facing with some problems:
1、I try to pass in textureMatrix ，but it doesn’t seem to be working out right；
2、I can not find texture2DProj and unpackRGBAToDepth in Babylon；

Here is the PG for testing in babylon:
https://playground.babylonjs.com/#ZE5GU1#10( without textureMatrix )
https://playground.babylonjs.com/#ZE5GU1#11( with textureMatrix )

Looking forward to your help!

2

Have you seen these existing features?

4

I tried. They didn’t do what I wanted.So I wanted to write my own shader based on threejs.

5

cc @Evgeni_Popov as he loves shaders :slight_smile:

6

The Threejs code is quite complicated, there are several passes and several materials involved:

It would be a non trivial task to port it to Babylon, and unfortunately I don’t have enough time to dig into it myself. But if someone is willing to help you, that would be a nice project to tackle!

7

Did you try the isStroke parameter from the highlight layer ?Babylon.js docs

8

Could you use the edge renderer and just make any meshes that occlude the edge semi transparent (and move them to rendering group 1) - https://playground.babylonjs.com/#TYAHX#282

1 Like
10

Our product manager thought that the function you mentioned could not meet his need for stroke, so he found the stroke effect of Three.js, hoping that I can implement it in babylon, so this is a work requirement, I am trying to find a solution. If it really cannot be achieved, it will communicate with the product manager that this function cannot be achieved in Babylon at present.

11

Hello,Can the Material Plugins support multiple Passes? Now I have finished the depth pass calculation and the stroke calculation,but I don’t know what to do next.

12

No, you can’t do multiple passes within a single material plugin. You can do multiple passes by using multiple RenderTargetTexture or multiple post processes (or both!), depending on your needs.

13

I think the best way is updating Highlight Layer, so that it could be work for InstancedMesh

14

The method of using multi-passes that you mentioned is used in post-processing. What I want to know is whether the material used on the object currently supports multi-channel?For example, I want to stroke an object with two passes.

15

We tested Highlight Layer,But there are some problems.Our product manager wants the object selected to have a stroke, including the obscured part.At present, if two objects are highlighted, and in the same highlighting layer, the place where the two objects overlap will not be highlighted, if placed in two highlighting layers, it will seriously consume efficiency.

16

No, materials / material plugins don’t support multiple passes out of the box, but if you write a custom shader or create a node material, you can implement the different passes in the material yourself.

17

Ok, thank you. I understand. This part of the work has to be suspended for now.