Sun-sky needs tweak to work with modern aframe

[kylebakerio]

1. Old style animation
2. Using componentchanged for rotation, which the docs now advise against
3. also, maybe add sun-position-setter to the component itself?
4. using getComputedAttribute instead of getAttribute (I assume the former is a deprecated version of the latter)
5. I don't know what all is wrong with the actual dist file, this is stuff noticed in the part I had to copy/paste out f the demo, in sun-position-setter. I guess the actual sun-sky itself component is likewise broken.
6. No logs, things just don't work when trying to use this with modern aframe. Which is a shame, because it's pretty cool.

[kylebakerio]

Found this issue which was the source of my problem and enabled a work-around.

I have not yet been able to get sun-position-setter to work, unfortunately.

It is worth exploring this library, but it is not yet performant (quite heavy, I hear my fan kick on in the examples, but they are beautiful): https://github.com/Dante83/SkyForge

Would love to see a working example of sun-position-setter in modern aframe.

[Dante83]

The position of the sun is mostly just the (normalized?) x-y-z location of the sun, and is set with sunPosition in the material attribute of a-sun-sky.

https://jsfiddle.net/Dante83/t2bgn7y0/1/

Remember that y is up for this. A-Sun-Sky doesn't come with a moving sun by default, but it's really just a uniform in the shader: https://github.com/supermedium/superframe/blob/master/components/sun-sky/shaders/fragment.glsl

uniform vec3 sunPosition;

In version 0.1.0 of A-Sky-Forge, I was able to extend this material by registering a component with a tick method internally. This gave me per-frame control, so I could then update the sky as I wanted, as I had access to the uniforms in the element via,

this.el.components.material.material.uniforms

In this case, you would want,

this.el.components.material.material.uniforms.sunPosition.value.set(x, y, z);

The only awkward thing about all this is this line in the shader,

float sunfade = 1.0-clamp(1.0-exp((sunPosition.y/450000.0)),0.0,1.0);

You want to normalize your sun position so that this value comes out right, though I don't see any real descriptions for how that should work correctly. This is actually all based on the sky example from THREE.js, I believe, which has been updated so most of these things are done in the vertex shader. Should actually be a little faster, I've read about that.

https://github.com/mrdoob/three.js/blob/70ea4fdbf39a41ee3b0c3be16f3232c7fee53763/examples/jsm/objects/Sky.js

But unfortunately, that still doesn't tell me why they used 450000.0. From,

https://github.com/mrdoob/three.js/blob/d783da4013a9738df00ed069c2a04078344c4ec7/examples/webgl_shaders_ocean.html

however, I see that they're using standard conversion between phi and theta to x, y, and z coordinates with a radius of 1.0, so that implies the authors felt it should always be normalized. So, just use the normalized sun position in there, I suppose?

[kylebakerio]

Just wanted to share that I got this working with up to A-Frame 1.2.0 after all and added my own component to enable rotation as shown in the demo here, as well as to integrate showing stars at night (currently stars only work to aframe 1.1.0), and some faux-shadows with 'fog', in case anyone goes through th effort of digging through this.

[Dante83]

Great job :D.

[kylebakerio]

Just realized I didn't share the link to the component... derp.

https://github.com/kylebakerio/a-super-sky/

just had a big overhaul, spent last two days tweaking it. cleaning up demos and documentation again tomorrow.

[vincentfretin]

#319 was merged a new release made. I guess we can close this issue?