Hello, friends. There was such a task. Start up one! a wave over a sphere, which, as it were, looks like a map of the planet, which (map) in turn is generated from planeBufferGeometry and then these geometries are combined using
THREE.BufferGeometryUtils.mergeBufferGeometries(geometries, false);
Code of vertex shader:
vertexShader:`
varying vec2 vUv;
uniform float time;
void main(){
vUv=uv;
vec3 newposition = position + position*sin(position.z*12.)*0.03;
gl_Position = projectionMatrix * modelViewMatrix * vec4( newposition, 1. );
}
`,
The question is how to make only this one “wave”, i.e. so that sin does not go over the entire sphere, but only in the middle, for example. And further. How can I change the direction of this “wave”, now it comes from the Z coordinate of this sphere, I need it to go from the position I have defined (for example, approximate coordinates of London).
screenshot:
Hi!
About waves, you can take a look at this topic: Impact shock wave - #9 by prisoner849
2 Likes
No, this is not a principle. What you indicated just animates the color, and I need to move the point in the form of a wave. Take a closer look at the image.
The same principle of taking a distance between a point in a geometry and the point you want the wave start from. Instead of perform it in fragment shader, do it in vertex shader.
1 Like
I’ll try. Thank you. Sorry I didn’t get it right away. I use a translator to understand your speech)
1 Like
Don’t worry. English is not my native language either 
Please, tell me how to make this material transparent, from your example?
To be transparent instead of black?
Code:
var material0 = new THREE.MeshStandardMaterial({
opacity:1,
// wireframe: true,
color: new THREE.Color('#000000'),
transparent: true,
blending: THREE.AdditiveBlending,
blendEquation:THREE.ReverseSubtractEquation
});
I thought you want it at the level of vertices, in vertex shader.
But answering your question: try to use transparent: true and something like this
gl_FragColor = vec4( col, 1. - finalStep ); instead of the last line in the fragment shader.
2 Likes
Oh, it’s so cool! Thank u!
Братик, ты на русском говоришь?
Can I donate for u?
Something more interesting and more colorful
3 Likes
It is possible to do this without shaders? Just by changing positions attribute in a mesh?
Yes, of course.
But I’m not sure that doing this on JS side is a good way for stuff like that.
Could you please expand about why it is not a good way?
I am being trying to build something similar to your demo using just JS (I don’t know Shaders, actually first time doing anything with ThreeJS). Close I have got is this https://online-nemi.onrender.com/, using a displacementMap which is more or less the effect I want, but as a disadvantage I don’t have particles, which is what I really want.
Any reference picture of the desired result? And/or more detailed explanation?
