ShaderMaterial + Skybox mapping coordinates

Questions
, ,
1

Hi,

I am using Babylon.js to build a space scene, and have been successful so far in using a pre-rendered skybox texture full of stars, nebulae, etc. I am interested in generating this dynamically using a shader, if possible.

As an experiment in Create Your Own Shader (CYOS), I have rendered a basic shader onto a cube mesh. However, I am using what appear to be the global coordinates of gl_FragCoord, which means that no matter how I turn the cube (or rotate the camera, not sure which is happening), the shader remains static to the perspective of the camera and does not transform with the cube, if that makes sense.

With my ultimate goal in mind, what coordinates should I be using to transform the shader as the perspective changes? Happy to provide the CYOS zip file or share via another means if you’d like.

Thanks for your help!

2

Update: I kind of half got it to work using vPosition (from the default CYOS vertex shader). Fragment shader code is below. This results in a fine texture on two faces of the cube, but stretched out on the others (no z value?).

varying vec4 vPosition;
varying vec3 vNormal;

uniform sampler2D textureSampler;
uniform sampler2D refSampler;

vec2 resolution = vec2(512, 512);

void main(void) {

const float ncircle = 20.0;
const float orbit_radius = 0.4;
const float circle_radius = 0.01;

const float scale = 100.;

vec2 coord = vPosition.xy * scale;

vec2 pos = (coord - .5 * resolution) / min(resolution.x, resolution.y);
vec3 color = vec3(0);

for(float angle = 0.0; angle < 2.0 * 3.14; angle += 2.0 * 3.14 / ncircle) {
 	float x = orbit_radius * cos(angle);
 	float y = orbit_radius * sin(angle);
 	color += circle_radius / length(pos - vec2(x, y)) * vec3(1);
}
 	
gl_FragColor = vec4(color, 5);

}

3

You can try to use the derivatives to switch to the z coordinate when appropriate:

https://cyos.babylonjs.com/#GHUXHH

4

Wow, thank you! This gives me some new stuff to learn. Appreciate the help.