Noise Mesh on a Sphere

[TheMikeyRoss]

Heey Caleb 👋

I absolutely love your tutorials on youtube and I'm a beginner in javascript and react threejs. I forked this github repository here https://github.com/TheMikeyRoss/procedural-mesh-animation and I'm stuck trying to use the same noise mesh but as a sphere to create something like a random terrain on a sphere. Can you please help me with it?

[arulandu]

Hey! That's actually one of my future video plans lol. I'd love to help and should have the time to this weekend.

[TheMikeyRoss]

That's wonderful! really excited to learn from you. Are you going to update this repository or make a new one for the sphere tutorial?

[TheMikeyRoss]

Heey @Claeb101 ,

Really sorry to annoy you, but I'm still stuck. How do we get the normal of a sphere since Z axis is not applicable?

[arulandu]

Had midterms this week, so I'm sorry for not getting to your question sooner. If the center of the sphere is the origin, the normal at some point p on a perfect sphere should just be its position normalized. I'll experiment with this today and let you know when I get it working. Don't worry, I haven't forgotten about this :)

[TheMikeyRoss]

Best of luck on your exams, hope you ace them 😁👍

Thank you for the update, I've been trying many things but to no avail. I'm excited to see how you do it 🤩

[arulandu]

Finally got it working. Let me clean everything up and put up the result.

[arulandu]

Done. Let me know if you have any questions. I purposely decided not to use shaders in the procedural mesh animation video, but for what you are trying to do, not using shaders might be harder than just learning / using them.

https://claeb101.github.io/procedural-mesh-animation/ b2032d4e4aead0d78140db2c01dba4bbcf7e5868

[TheMikeyRoss]

Awesome! that looks great!

By shaders you mean the changing colors based on the height of the normals?

[TheMikeyRoss]

Oh ok I found it, I can change the colors in TerrainSphere/frag.js

although is a boxGeometry better than sphereGeometry in this context?

[arulandu]

frag.js contains the fragment shader and vert.js contains the vertex shader. The use of boxGeometry is intentional. If you use sphereGeometry, face size decreases near the poles, creating greater detail near the poles and less detail near the equator. If an icosahedronGeometry is used, face size is constant, but detail is only in powers of four, which is not optimal. Instead, I use a "cube sphere" in which I create a subdivided cube and then project it onto a sphere in the vertex shader. This results in a "compromise" between variation in face size and control of detail.

The fragment shader runs on every pixel and is useful for coloring the geometry, in this case, based on the radius from the center.

Feel free to make any changes that you want, just in a fork ❤️

[TheMikeyRoss]

Well done friend. although I noticed when I rotate the sphere it lacks subdivisions on the sides. But I'll try my best to figure it out to create procedural planets-like shapes.

I found this while researching, could be helpful for general knowledge