CODEWITHSUNDEEP
javascriptthree.jswebgl
Cory Evans
Cory Evans

Reputation: 193

How to make a star with three.js like Chrome Experiments 100,000 stars

I hope this is the right place this time, but I am trying to figure out how to use three.js to create a star the way the chrome experiments 100,000 stars was done. I tried looking into the source code but it is extremely difficult to decipher, it seems to be many parts, I have tried using textures, and I don't know how to get the glow or the halo around the sun, I would appreciate any assistance from someone with knowledge on how this was done.

Upvotes: 15

Views: 7036

Answers (2)

Stemkoski
Stemkoski

Reputation: 9045

Here is an example of a halo-style glow effect using shaders:

http://stemkoski.github.io/Three.js/Shader-Halo.html

It is still a work in progress -- panning or zooming will change the appearance of the glow, but perhaps it will be enough to be of assistance.

Hope it helps!

Upvotes: 3

mahercbeaucoup
mahercbeaucoup

Reputation: 597

Did you see this article?

The section on the sun gives a high-level overview of how to achieve the effects. You'll probably want to look into GLSL shaders, which is an entire field in itself. For now it might be best to find the shaders in the source and tweak them to see what effect your changes have.

Also consider checking out this tutorial for an example of glow and bloom shaders.

For learning more about OpenGL in general, the latest edition of The Red Book supposedly does a good job of explaining OpenGL while avoiding the failings of the previous edition.

Upvotes: 5

Related Questions