Projected Ground Skybox

I would like to be able to create something like this.

https://threejs.org/examples/?q=env#webgl_materials_envmaps_groundprojected

I tried to convert the three shader to babylon, but only ended up with it projecting the top half of the isosphere.

Has anyone else tried doing this and succeeded?

2 Likes

@sebavan if I recall you were talking about something like this recently?

I want this as a feature as well in Babylon :slight_smile:

Could you share a playground with where you are at and let s try to make it a community developed feature ?

1 Like

I created a lab for it :slight_smile:

Here is the scene
https://labs.leon.id/2023-05-ground-skybox

and the source code:

and the original source code:

All my labs are self contained, so if you checkout my code, cd into the 2023-04-ground-skybox and run the usual with your package manager of choice:

pnpm install
pnpm start

I’m not 100% that my code is converted correctly, but I hope someone smarter than me can figure out where I went wrong :slight_smile:

3 Likes

Sry, I have no faen clue but just wanted to say ‘let me know when it’s ready’ :yum: :smiley:
This will become a great addition. I luv it already :smiling_face_with_three_hearts:

@sebavan Have you had time to have a look at my code, where you able to get it up and running?

Kind regards
Leon

Not yet, planning to do it this week. I have got it assigned to me to be sure I never forget :slight_smile:

1 Like

Did not find where you were wrong this weekend but it looks like a nice base so I ll carry on next weekend @Leon :slight_smile:

1 Like

I took a crack at it this morning, is there a particular part of the fragment or vertex shader that is not correctly converted?

It looks like something is not working with just the ground part of the icosphere, when i change the height and radius, it does affect the ground, but like its got incorrect UVs or something

I also took another stab at it last night.

I checked the code, and to my knowledge it is converted correctly, so there must be some aspect that I’m missing.

The class it is based on is this one, so it is a good reference point.

A few things that I’m not sure how they impact the function of the shader is:

I cannot find any references to them in the shader code, but they might be used in one of the imports

If you change the code to output projectedWorldPosition to the outcolor, you can see what it is trying to map.

And I think this could be the problem.
All the ground pixels are black, which when we try to get them from the cube map, they will get the same sand colored pixel.

If we can’t figure it out, I will try to replicate the setup using three, and then we can play around with the shader to debug what the projection should look like.

I also tried out a equirectangular image to rule out that the CubeTexture.CreateFromPrefilteredData was a problem, but it looked the same.

I will give it a go this weekend, I am way too curious now :slight_smile:

I think the cameraPosition uniform is not updated

The point is to add the cameraPosition to the uniform array, otherwise it will not be updated automatically.


Give me more likes!!!

F4E6(J20GEUCLKF_BC6%W

6 Likes

Perfect Ship It !!!

Explanation of the problematic phenomenon:

This shader uses several algorithms in ray casting to determine the poisition of the ground and sky spheres.
Since the algorithm calculates the distance from the camera to the ground (or the sky sphere), it will cause an error if the camera position is not updated.
The reason why the ground is a strange color is because the shader has eliminated the illegal positions (below the ground and outside the sphere), so that all illegal positions are reset to (0,1,0).

So the color of all illegal positions is the same color.

(from translation software, hope you can read it)

Translated with DeepL

1 Like

Damn so easy to fix :joy:
but great work finding the bug :muscle:

1 Like

@sebavan I can create a PR for adding this as a thing in babylon.

it can either be a material as now, or we tie it to a mesh.

I personally like understanding the building blocks to connect a material to a mesh and so on, instead of having too much magic.

even though it is meant to help out newbies, it can also hurt them because they think its harder than it really is

what should we name the material?

1 Like

@Leon I love the material way :slight_smile: and we could put a helper function in sceneHelper for instance to create the mesh and mat for us similar to createDefaultEnvironment ?

About namimg… I am the worst to ask but something like GroundProjectionMaterial sounds descriptive enough ?

@bghgary, please help with naming :slight_smile:

1 Like

I’m not sure I understand the feature well enough to help with the naming. I haven’t looked at the code. What does this material do exactly?