Jump to content

Why the sky box of the sun (the sun's light) does not affect the object


Recommended Posts

I do not understand why the ground in the scene is not affected by the solar light of the sky box. demo:http://www.babylonjs-playground.com/#E6OZX#6.  

I will describe it in more detail:

When I removed the light(The HemisphericLight)  in the scene.The ground turned black  .I think there is a sun in the sky box, why the sun's light  does not affect the ground.

please help me!!

Link to comment
Share on other sites

Hi an welcome to the forum. I will try to give a simple explanation.


Here is a picture of the sun. Print it out. Take the printout into a dark room. The room will not light up because it is an image of the sun not the sun.

A skybox is just an image it is not a light object. You need a light object to light a scene.

Read about the basic things you need in a scene here http://babylonjsguide.github.io/begins/Introducing_Babylonjs

Link to comment
Share on other sites

8 hours ago, JohnK said:

Thank you for your help, I understand what you mean, the demo(http://www.babylonjs.com/cyos/#14WKFU#1) of the sun is just a photo?If so, how do I manually add the light (position, color, brightness) that matches the sunlight in the sky box? thank you very much!In the end, I want to achieve the effect is like this:https://map.harvard.edu/map3d.htm


Link to comment
Share on other sites



A shader is more like a painting, Hyperrealism.

And as always you can achieve a great result in many ways.I depends on your skills, you posted a shader example. So i assume you have a basic understanding of (at least) reading through the code.
you will notice:
float hTime = time*0.2;
uSunPos.x += sin(hTime);
uSunPos.z -= cos(hTime);
uSunPos.y += cos(hTime)+1.;

What you can do is to copy these lines and do the math in babylonjs on Hemilamp turn on the Shadows and here you go. For Lensflare/Sundisc in the camera you can 
place a Sphere with good portion of the mesh.material.emissiveColor with a Blur Postprocess
place a box in-front of the camera (lens) and flip the Faces, make it simi-transparent so the light will travel through the first face flipped in sundirection, hit the surface on the second also flipped to sundirection you will see a spot, works best with spotlights. old school. 

Simple you babylonjs Lensflare

Notice you can improve this shader, i think you kind of copy paste it right away from shadertoy and they render it on a two triangles, on the GPU side Pixel (fragmend) shader cycles through all pixels on a screen, a vertex shader per vertices of your mesh - skybox 3x4x6=72 vertices(with in mind that only one Plane is in in viewing frustum ~4cycles) vs 1080p (many many many many m... cycles), i highly recommend to do some calculations in the vertex shader. 

I got some friends in Harvard, they land in Germany in two days, and i can't visit them, mostly becourse i spend to much time in this forum :)

good luck.

Edited by Nabroski
two triangles
Link to comment
Share on other sites

13 hours ago, yaoge said:

If so, how do I manually add the light (position, color, brightness) that matches the sunlight in the sky box?

Sorry but matching a light to the sunlight in the sky box  is way beyond anything I have attempted. Other experts will perhaps join Nabroski in giving you an answer. You will find an introduction to lights here http://doc.babylonjs.com/tutorials/lights

Link to comment
Share on other sites

  1. Sorry, I'm late. Thank you very much for your help, I have a little clue. like this http://www.babylonjs-playground.com/#E6OZX#77. My skill is too weak. I can only change the position of the lights by this code:
    light.position = skyboxMaterial.sunPosition;
    2.And I did not get the time to convert the sun position. I do not understand the code :
    vec3 uSunPos = vec3(0.5,0.0,0.0);
    uniform float time;//What is the format of the variable time? like this 12:20:55 or 12.2055?
    void main(void) {
    //original formel to set sunposition from your shader
    float hTime = time*0.2;
    uSunPos.x += sin(hTime);
    uSunPos.z -= cos(hTime);
    uSunPos.y += cos(hTime)+1.;
    If the variable time represents the current time, then after the above operation uSunPos is the current sun position? I understand it correctly?
    3.I tried gradient lighting diffuse to achieve similar to the effect of Harvard University 3Dmap, but I failed, when the use of diffuse can not control the intensity of light the whole scene is very bad.       Do I have to use a shader? I do not know...:(                                                 @Nabroski,Very touched you pay for the  forum  !
Link to comment
Share on other sites

Sorry, I'm late.  - no worries.

My skill is too weak. - we will get this. over time. dont haste

 Do I have to use a shader? No

is the format of the variable time?  ms since the shader has started


Just keep on exploring and asking questions

If i look at your playground, it looks a bit chaotic. That's good! you try different things and see how they works, so create little playgrounds on a specific topic,
what is your project goal.

  • load a mesh
  • get shadows
  • get global world time to sun position 

and for every task create a little minimal playground in a week or something and then put everything together. 

Very touched you pay for the  forum   i also wondering

Keep us posted! 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...