Drawing Isolines using Shaders

Questions
,
1

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 **

<bufferAttribute
              attach="attributes-vHeight"
              count={vHeight.length}
              array={vHeight}
              itemSize={1}
/>

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 :

image
image768×504 1.28 KB

what I would like to get :slight_smile:

image
image837×406 3.65 KB

2

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

https://codepen.io/boytchev/full/gOQQRLd

image

3 Likes
3

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)

4 Likes
4

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