Hi,
I’m wondering how to retrieve the current “color” of the sun light at any given setting for the three.js sky.js library. Example
I’m also looking to resize/replace the sun disk.
How can I get those glsl “variables?” To JavaScript variables then back in?
Setting additional uniforms for them? I’m learning about glsl and would like to know how.
I see where the “sun disc” and some “color” floats at the bottom of the glsl code are. Here
I’ve got the sun vector3 being used for a directional light properly. Now I want to change the light’s color and intensity according to the shader’s sun light.
Also resize/replace the disc with an optional moon, and retrieve ambient color to feed into the sky arg of my hemisphere light.
Hey there, I realise this post is very old but I’m trying to do the same thing at the moment, to get colour for directional and hemispheric lights. Any chance you ever solved this?
I think I have worked out how to get the values from pixels on-screen using this example: three.js webgl - read float pixels but I specifically want to get values for colours that aren’t showing on-screen.
Thinking out loud here, but my best guess is to use .readRenderTargetPixels() on a new renderer and assign renderer.render() the same canvas but different cameras to those being displayed to the user - one that is pointed at the sun and one that is pointed upwards at the sky perhaps. But I’m not sure if this would work as from what I can glean, the canvas element "knows” its renderer and I’m not sure if it can have two or more, and where these would display.
That sounds like a worthwhile project. And, yes, I don’t see any external variables you could use to change the size of the sun.
To me, the sun does appear a bit small. And it would seem that the size of the sun should increase as it nears the horizon. (The moon would do the same thing.)
Regarding colors, it seems that, with the default settings, the sky turns entirely white and the sun disappears as you increase the elevation. I prefer the colors in the variation that Attila Schroeder has written here. That is written in WebGPU, but the principles should be the same.
The sky program was written a long time ago and could use some enhancements.
Or, if you just want a quick fix, you should be able to slap a sprite with a sun texture in front of the sun. You could vary the size and color of this sprite. The challenge may be matching the position of the sprite with the position of the sun in the sky program. You would use a separate texture for the moon which would follow it’s own orbit.
Here is a simple program I wrote awhile ago that shows how to position things in the sky. If you select the “1 Day” view, you can watch the sun and moon and everything else arc over the sky over the course of a single day.
And that seemed to help a bit with the sun showing up, at least closer to the horizon, and with the sky colours. I’m guessing the results are realistic (if you look at the comments in the code on github it sounds like it’s quite physically-based) but the renderer can’t / doesn’t automatically adjust for lighting levels like the human eye does.
I suspect it’s similar for the size of the sun - the sun’s angular size in the sky is actually quite small but it appears bigger to us in real life because of how we process vision - just a guess though, and that doesn’t mean we wouldn’t want to make it look bigger for our purposes.
I prefer the colors in the variation that Attila Schroeder has written here. That is written in WebGPU, but the principles should be the same.
This looks really nice, but the GUI doesn’t seem to be working?