Currently, I have implemented a custom shader to draw a gradient on a skydome and now I want to include a sun/moon in front of the skydome as well (from the user's perspective). The simplest solution would be to use sprites for the sun and moon, but the issue arises when the sprites appear lodged within the skydome (partially in front and partially behind it). I tried using polygonoffset to solve this problem, but it doesn't seem to work on sprite objects.
My question is, how can I position a sun/moon on top of the skydome without having to modify my custom skydome shader to incorporate the sun/moon texture with the gradient (which could be quite complex)?
Below is the code snippet for my sky shader used for the skydome:
new THREE.ShaderMaterial({
uniforms: {
glow: {
type: "t",
value: THREE.ImageUtils.loadTexture(DEFAULT_PATH+"glow2.png")
},
color: {
type: "t",
value: THREE.ImageUtils.loadTexture(DEFAULT_PATH+"sky2.png")
},
lightDir: {
type: "v3",
value: self.lightPos
}
},
vertexShader: [
"varying vec3 vWorldPosition;",
"varying vec3 vPosition;",
"void main() {",
"vec4 worldPosition = modelMatrix * vec4(position, 1.0);",
"vWorldPosition = worldPosition.xyz;",
"vPosition = position;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
"}"
].join("\n"),
fragmentShader: [
"uniform sampler2D glow;",
"uniform sampler2D color;",
"uniform vec3 lightDir;",
"varying vec3 vWorldPosition;",
"varying vec3 vPosition;",
"void main() {",
"vec3 V = normalize(vWorldPosition.xzy);",
"vec3 L = normalize(lightDir.xzy);",
"float vl = dot(V, L);",
"vec4 Kc = texture2D(color, vec2((L.y + 1.0) / 2.0, V.y));",
"vec4 Kg = texture2D(glow, vec2((L.y + 1.0) / 2.0, vl));",
"gl_FragColor = vec4(Kc.rgb + Kg.rgb * Kg.a / 2.0, Kc.a);",
"}",
].join("\n")
});