Release PhaseMoon

Hi to everyone! It is a pleasure for me to announce the first project I made through Playcanvas.

This is the Primary Build:
an here the same build under my own domain:

In the second link I added a few lines to the index file to correctly add the favicon and meta tags for social networks.

I would like to take advantage of this space forum.playcanvas offers to tell my experience when facing this first project, in addition to thank both the documentation offered by the platform and the users of the forum for their doubts and their answers.

This project required about 6 weeks of work, being able to work in its development on the weekends and the little free time that the daily work offers during the week. If it is not too much trouble I would like to review the entire construction process highlighting the difficulties encountered and the gratifying successes.

Chapter 1


Everything begins one night in which accidentally my girlfriend and I ended up watching the official video of NASA in which you could see the earthrise from the lunar surface recorded from the apollo 10 … and the doubts arose … as it was that possible? She and I theorized that if it were possible, it would have taken many hours of recording to see the whole process and we wanted to know mathematically how many hours would have been necessary. Since it was too late and I did not feel like doing trigonometric calculations, I thought the best way was to do a simulation with an application that I found on the net, playcanvas. Collect all the necessary information, exact size of earth and moon, elliptical distances, angles of rotation and inclination … everything. And finally we discovered that … that video was impossible. From the lunar surface the earth is always in the same position because its speed of translation and rotation are almost equal, you could only record an earthrise orbiting the moon, never from the surface. Shortly after I found a report from a NASA engineer claiming this event and claiming that … well … we witnessed an unusual event. Days later, I thought that the best way to use all that material I had compiled was to do something with it, why not a real-time lunar phase viewer?. And there began my climb in playcanvas.

Chapter 2


I already had the whole model built to scale rotating but needed two very important things:

  1. Something to tell me in a friendly way the current phase, as for example Waning Gibbous.
  2. A user interface in which to place text and use future functionalities.

For point 1. after an incipient search I found a software called SunCalc written in JavaScript. I came from studying C/C++/Java and in JavaScript I found something new to learn. To make move/rotate the whole model documentation offered by playcanvas was very helpful but understanding the operation of SunCalc took me much more time.

For point 2. I have to say that I came from Unity, I already knew WebGl and the incredible potential that it represents. Previously I had done few projects on Unity under the WebGl platform and initially the Unity canvas system was almost my home. I left Unity because of the deficiency it presents when it comes to compiling WebGl. When I started in playcanvas and inquiring about the user interface system Mr. Max recommended the use of DOM (Modifying the file font_renderer.js for UI elements). Initially I had some very basic html ideas, but I had no idea what DOM was, much less the DOM involvement it had with JS. From that moment became my new home. To this day, I still use DOM for user interfaces instead of the new UI system recently implemented by playcanvas, and I will continue to do so because of the enormous flexibility it brings me and above all because I will never get to understand and use correctly the Anchors system :smiley:

Post-data: Impatiently await the new functionality to manage animations :wink:

Chapter 3


It really makes me very gratifying to see everything working, that all the effort, the passion and the dedication has had a purpose, a motive. Appreciate having a constant learning, make mistakes 20 times and rethink everything to try again. Propose small goals every day, small bricks that make strong walls. And once completed a project have the illusion of starting a new one, better and different, learn from mistakes to commit new ones. And above all to know that there is a community that right now, at this very moment is doing all this. That is the success.


I am currently working on my fourth project under playcanvas, it is the next of many more that will come. If I have the necessary time I would like to present them to the community, although I hope to do so in a not so extensive way :slight_smile:

Huge.prototype.Strong = function (to_all) {};

Now there’s a great reason to start a project! Love it…

This is a really nice simulator too, had a lot of fun playing with the settings. Got to say I’d never have managed the math!

I agree that for this kind of project you probably are better off with standard HTML UI, just bear in mind that it’s burning a lot of CPU. Personally I’m glad I’ve got a UI system for full on games, but yeah, I’ll still be using HTML for the day job which tends to have lots of text, formatting and graphics in overlays. I would recommend one of the virtual dom libraries though, I use mithril and most recently Svelte though this latter really requires a build process to use easily.

1 Like

Nice one!! The interface is truly sci-fi.

I have been doing a similar playcanvas project of mine, as a hobby, building an approximation of the solar system, from the orbital elements nasa is releasing. And I’ve got to say it is an eye-opener finding out how our big world rotates around.

1 Like

Thanks for your answer! It makes me happy that you liked the simulator :slight_smile:
I already knew the existence of frameworks although I had not dared to immerse myself in them. I thought that before it was necessary to learn and experiment with using html / css / js raw and you’re right, maybe it’s time to start with it!.
Now I am reading the documentation of mithril and Svelte and my mind is blowing up, I’m swimming in a sea of confusion…
Do you think I should start directly with Svelte or start with mithril first? considering the learning curve for a brave new rooky… And finally another question that it comes to mind is… mithril or svelte has any server hosting requirement? I mean like to support node.js or something like that?
Thanks again for your answer and your recomendations, I have been very helpful!

Thanks a lot for your answer! :smiley:
The picture of your project looks awsome! do you have any link to see it running? I would love to flood with that strange feeling of millions of tons of mass spinning in a vast empty space :smiley:

Here you go, size and position ratios are accurate based on the NASA numbers. I scaled them up/down in relation to the camera to achieve a scene that makes sense when viewing.

Thanks to @whydoidoit for the mesh combiner script, makes the procedurally generated orbit meshes possible.

Yes you need to understand raw HTML first, but the discipline of creating user interface from logic and data can also be a relief! - I know I feel more in control using that approach… :slight_smile:

mithril requires no server side or build system, just include it in your page. It’s tiny and fast.

Svelte requires building - so you’d use something like Rollup or WebPack to build your code before running it, those are super powerful systems but they do take learning. There is no need for a specific server - just a transformation of the code you write into pure Javascript. Systems like mithril and Svelte help your organise the way you think about code and UI structure and because of that enable you to create things that would be very difficult with vanilla code.

WOW! it looks great! The way in which the objects are scaled is quite comfortable for the user-scene relationship, and you can also click on each orb to position yourself on it, I like it!
The procedural models is something that in future I would like to cover, but for now my immediate path is solid and effective user interfaces… but everything will come :slight_smile:
Congratulations on your solar system, clearly there is an effort rewarded by the result!

1 Like

ok, I think I understood everything well, I get a rough idea of the differences between both frameworks and I suppose that natural growth would start with mithril. I am currently in the middle of a project for self-learning to alternate between animations and modify parameters of a material through user interface. As soon as I finish it, mithril will be my next horizon to try to adapt everything learned so far to him.
Once again thank you for the tremendous help and spiritual guidance. Often thanks for a good kick in the ass that says: “Get out of your comfort zone!” :smiley:

It’d be good to know what makes this difficult to understand as the point for this stuff is to make them easy for everyone to use :slight_smile: There is a developer guide that talks about anchors here but if this doesn’t make sense maybe we can help.