Computing Smoothed Normals for Vertices Along the Edge of a Plane

Questions
,
8

Just for fun, I eliminated the x portion of the calculation and ended up with my good old waves.
There was a visible split between the adjacent meshes, but that appears to be the result of some slight difference in the calculation of the y value (I increased the pi value to see if that helped, but no.)

In any case, it appears that, with these few small steps, you have achieved a y-displacement, computation of normals and changes in color due to elevation - all things I am trying to do.

Regarding computation of normals, it appears that is done with these commands:

`.replace(
	`#include <beginnormal_vertex>`,
	`#include <beginnormal_vertex>
		vec3 p = vec3(modelMatrix * vec4(position, 1.));
		vec3 pos = getNoised(p);
		vec2 shift = vec2(0.01, 0);
		vec3 pos2 = getNoised(p + shift.yyx);
		vec3 pos3 = getNoised(p + shift.xyy);
		objectNormal = normalize(cross(normalize(pos2-pos), normalize(pos3-pos)));
	`
	)

Since I have never constructed a shader using this method, can you tell me what is going on?

It appears that beginning with the “onBeforeCompile: shader => {” command, you are telling the program compiler to perform the specified steps.

What does the replace do? And the “#include <beginnormal_vertex>”? Are you telling it to replace certain sections of the existing shader?

In my standalone vertex shader, I have copies the above steps and tried to change the normal values using both vNormal and ObjectNormal and neither seem to make a difference. So I am a bit baffled.

Thanks for your patience and persistence!

ADDENDUM

I found an excellent article which discusses the practice of extending three.js shaders. This avoids the need to, as I have done, writing a complete shader to handle everything. And, as luck would have it, I found an interesting example of a sent of extenders, one of which creates ocean waves similar to what I was looking for. Interestingly, only the first option, the extender to the MeshPhysicalMarerial seems to generate good looking waves. So there are many ways to go wrong. And, even if I duplicate the result, it is not clear whether I can tile it or create a huge stationary plane - as discussed here.

SUCCESS !?!?!

Relying on my old friends, trial and error, I appear to have come up with something that works. Here is the program. Let me know if this makes any sense. The only drawback is that the colors seem a bit too dark. But the problem I complained about in my OP appears to have gone away. (Or maybe it is just too dark to see it!)