Probably hard to write code in the blind. Here is a Pen
The changes you are proposing are in lines .184-185. When I activate them, the program stops working. So I am probably not defining a value.
Regarding the alternate idea of using a displacement map, I reduced the Plane Size to 100, (which is smaller than the size of the displacement image) and the displacement map worked. The displaced values were apparently not part of the “position” value since I was not able to modify them. If that means that the displacement is done after our modifications, then the normals may be unreliable.
used:
-
gu.image.value = texture; in the callback function;
- bigger size of the plane;
- more segments on the plane;
Still enigmatic, why you use script tags in js section, when you already have them in html section.
1 Like
Great! Thanks!
In both cases, my understanding of what needed to be done was incorrect.
- I had thought that what I had done would correctly load the value into the uniform.
- I thought I had to use the script tag in the js section to specify that I was using type = module.
(I’m glad you mentioned that because it eliminates the need to include the importmap twice.)
EDIT
Here are three variations:
-
Standard Ocean - Uses MeshStandardMaterial. This is the standard version with both a normal and perlin map which create height.
-
Cartoon Ocean - .Uses MeshToonMaterial. For some reason, I like this one the best. Instead of height, the normal map creates colors. And there is no reflection of the sun.
-
Mirror Ocean - A mirror-like surface that reflects the sky and has all kinds of colors. If pushed, this would probably be the first to drop below 60 fps.
For some reason, the perlin mapping lines up if the plane size is a multiple of 1000.
While these look okay here, they do not work so well with the flight simulation due to the tiling effect which is mitigated somewhat by increasing the grid size.
1 Like
Didn’t want to multiply offtopics in the showcase with the ocean waves 
I tried to make the flag with 2D noise and computation of normals: https://codepen.io/prisoner849/full/LYrRBea
1 Like
You are right. That looks great! Certainly more realistic than what I am using.
What is the mechanism in the code that causes the random numbers to behave like a perlin noise?
Can I borrow it for the boat?
Just out of curiosity, how many shaders can a GPU handle?
The chunk of code with 2D noise in the noise varialbe in script tag of the html-section.
1 Like
Yes, but which line/lines?
On your topic of viewer-centered scrolling scenery, the topics discussed over the past few days make me wonder if you can’t use them to create a scrolling landscape with different levels of resolution. For example:
I believe Sean described how to create a circular segmented plane with more vertices in the center.
You showed me how to read height data from a perlin image. What if, instead of a perlin image, you had a height map with the highest resolution you would need.
As you move, you would be changing your offset position on that height map and could read the height values underlying the vertex positions on your circular segmented plane and adjust the height of the those vertices to match.
To reduce the number of computations, you would only update the vertex height values for the vertices which are in your field of view.
Or am I merely restating an obvious solution?
Or an impractical solution? Would the required size of the high resolution map take up too much memory. Or would updating all those vertex values - even if they weren’t updated - take too much time? (If the later is a problem, perhaps you could divide your circular segmented plane into separate meshes and de-activate the meshes which are not in your field of view?)
All of them 
And then, you call snoise() function somewhere in main().
1 Like
Ok. I was hoping there was one magic line that I might not be recognizing, especially since I am not familiar with some of those commands. Apparently not.