Drawing Isolines using Shaders

Hi All,

I would like to draw isolines (lines that have the same elevation for example) just like the picture shown below using shaders. The lines have the same z-value (say z = 5, z= 10, z= 15, etc.)

this is what I have so far:

Currently I have two problems:
**1)- I can’t add vHeight attribute to the vertex shader using R3F. I tried using useMemo but I’m having an issue understanding the logic. I have commented out the section of **


2)- I’m trying to plot the isolines using the code from this thread:
graphics - Contour line and Contour tree - Stack Overflow

however, without vHeight passed to the frag shader, i can’t do much

what I have so far :

what I would like to get :slight_smile:

Please, ignore my reply, as it is not what you specifically need, because:

  • it does not use a shader for the isolines
  • it is vanilla, react-three-fiberless code




Vanilla three.js version: Draw a horizontal line around object on Mouse Hover - #5 by prisoner849
See the jsfiddle for GPU raycast (alternative link: GPUraycastIsolines)
Another example: IsoNoise (Icosahedron + Perlin noise + Isolines + SelectiveBloom)


Thank you for your continued support to this community ! This is the shader code that I needed to plot the isolines !