title: Three.js Get local position of vertex in shader, is that even what I need?
body: <p>I am attempting to implement this technique of rendering grass into my three.js app.</p>
  
  <p><a href="http://davideprati.com/demo/grass/" rel="nofollow noreferrer">http://davideprati.com/demo/grass/</a></p>
  
  <p>On level terrain at y position 0, everything looks absolutely fantastic!</p>
  
  <p>Problem is, my app (game) has the terrain modified by a heightmap so very few (if any) positions on that terrain are at y position 0.</p>
  
  <p>It seems this vertex shader animation code assumes the grass object is sitting at y position 0 for the following vertex shader code to work as intended:</p>
  
  <pre><code>    if (pos.y &gt; 1.0) {
          float noised = noise(pos.xy);
          pos.y += sin(globalTime * magnitude * noised);
          pos.z += sin(globalTime * magnitude * noised);
          if (pos.y &gt; 1.7){
              pos.x += sin(globalTime * noised);
          }
      }
  </code></pre>
  
  <p>This condition works on the assumption that terrain is flat and at position 0, so that only vertices above the ground animate. Well.. umm.. since all vertices are above 1 with a heightmap (mostly), some strange effects occur, such as grass sliding all over the place lol.</p>
  
  <p>Is there a way to do this where I can specify a y position threshold based more on the sprite than its world position? Or is there a better way all together to deal with this "slidy" problem?</p>
  
  <p>I am an extreme noobie when it comes to shader code =]</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>I have no idea what I'm doing.</p>
  
  <p>Edit* Ok, I think the issue is that I am altering the y position of each mesh merged into the main grass container geometry based on the y position of the terrain it sits on. I guess the shader is looking at the local position, but since the geometry itself vertically displaced, the shader doesn’t know how to compensate. Hmm…</p>
  
  <p>Ok, I made a fiddle that demonstrates the issue:
  <a href="https://jsfiddle.net/titansoftime/a3xr8yp7/" rel="nofollow noreferrer">https://jsfiddle.net/titansoftime/a3xr8yp7/</a></p>
  
  <p>Change the value on line# 128 to a 1 instead of 2 and everything looks fine. Not sure how to go about fixing this.</p>
  
  <p>Also, I have no idea why the colors are doing that, they look fine in my app.</p>