Put a shader on a sphere to make it look like a planet?

Questions
1

I made a little fictional custom solar system with spheres as planets rotating around a sun. I wanted to give the planets unique textures, but rather than make a gltf I thought it would be best to make some fractal type shaders to wrap around the planets.

I’m having a really hard time finding an example of say a simple fractal texture that can wrap around a sphere. I found some simple examples in the book of shaders but I can’t get it to wrap around the sphere.

Is there a dead simple example of shader wrapped around sphere somewhere?

thanks

2

While you wait for a dead simple example, here is a dead beautiful one:

2 Likes
3

Use position (of vec3), not uv (of vec2), with the respective noise algorithm.

изображение
изображение969×860 96.1 KB

Demo: https://codepen.io/prisoner849/full/KKLPvBK

3 Likes
4

your demo is so cool! I actually saw it. I’m so new to shaders though was trying to get it done without uniforms, I dont totally understand them (I’m using Threlte which is 3js for svelte, demo here https://codesandbox.io/p/devbox/threlte-obj-with-glsl-tex-forked-n9tlfr it takes the uniforms differently)
thank you though! will try to poke around

5

I think this is exactly what I’m looking for, thanks!!

1 Like
6

prisoner’s suggestion also works with textures. Here are two screenshots from my app junk folder. 4 years ago I was also new in three.js and was experimenting with textures on spheres.

northpole:

Screenshot_20240507_221356_Chrome
Screenshot_20240507_221356_Chrome1752×2040 472 KB

southpole:

Screenshot_20240507_221447_Chrome
Screenshot_20240507_221447_Chrome1752×2130 189 KB

Spherical coordinates are very practical for navigation but unfortunately have their disadvantages due to their curved nature.

3 Likes
7

question for you prisoner849 - I was trying to split out the frag and vert shader to their own file, I saw that you had this function here, what’s that doing? Sorry I’m a beginner :slight_smile:

    onBeforeCompile: (shader) => {
      shader.vertexShader = `
      	varying vec3 vPos;
        ${shader.vertexShader}
      `.replace(
        `#include <begin_vertex>`,
        `#include <begin_vertex>
        	vPos = position;
        `
      );
8

The answer is here: three.js docs
And something related: Could Someone help me out with implementing custom shaders? - #2 by Oxyn

1 Like