improvements and fixes

[farfromrefug]

Amazing tuto. It was exactly what i was looking for!

I have an issue with it doing some weird stuff in some case. Do you have any idea?

https://user-images.githubusercontent.com/655344/112893198-a32f7a00-90da-11eb-996c-97c724493b64.mp4

Also i have seen your comment about possible improvement in getting normal maps. Could you elaborate? I would like to improve it if possible.

Again thanks a lot for what you have done!

[OmarShehata]

Glad to hear this was useful to you @farfromrefug ! Do you have a link to the 3D model or the ThreeJS/PlayCanvas scene? My best guess is you may need to either tweak the camera near/far or the depth bias parameter (or both).

Alternatively this might be a good use case for a geometry-based approach to outlines instead of post-processing based which I've been considering. But would be easier to tell if I have a link to a Codesandbox/Glitch demo I can run and test on.

[farfromrefug]

@OmarShehata thanks a lot for your fast answer! Here is the repo for this https://github.com/farfromrefug/three_terrain_outline Simply clone, npm install , and npm run start Here is where i create the mesh for one elevation tile https://github.com/farfromrefug/three_terrain_outline/blob/main/src/threejs/ThreeEntryPoint.js#L368 And here is where i apply your pass https://github.com/farfromrefug/three_terrain_outline/blob/main/src/threejs/ThreeEntryPoint.js#L118

[farfromrefug]

@OmarShehata I actually discovered that you are active in the cesium community. Do you think your webgl outline could be applied to cesium? It would help a lot as i would not have to write the whole tile system, and more ....

[OmarShehata]

@farfromrefug it should be possible yeah! It's a post process effect, and CesiumJS already has a good post processing system. The only hard part would be creating the normal buffer I think.

I think it would be helpful if you start a thread in the Cesium community. I may not be able to dedicate time to this right away but I may be able to point you in the right direction, and there may be others who can help. I think this would be useful to others as well.

[OmarShehata]

I think a lot of this is fixed by the new article I just put up: https://omar-shehata.medium.com/better-outline-rendering-using-surface-ids-with-webgl-e13cdab1fd94

The way this would apply to this project is:

• You'd use a "surfaceID" buffer instead of a normal buffer. On terrain like this, that means the only edges we'll see will come from the depth buffer, since it's all one big connected "surface"
• To get good crisp outlines on the terrain with the depth buffer, you will probably want a high depth bias value, and to fully render an edge when the depth is above a certain threshold, something like:

if (depthDiff >= 0.2) depthDiff = 1.0;

• One issue that will arise here is that in certain camera angles, the depth value changes very quickly on surfaces that are parallel with the view direction. This twitter thread discusses a solution where the view direction and the normal of the surface is taken into account: https://twitter.com/ianmaclarty/status/1499495014082441218

The last point is something my updated article above doesn't have an implementation of yet. It would be great to be able to reproduce this issue in a simple ThreeJS scene so it would be easy to demonstrate the solution on.