How to make a semi-transparent glass ball with a through hole with albedoTexture?

[newbee]

I am trying to make a glass ball with a through hole using CSG. For transparent glass not using albedoTexture it works fine as shown in this playground: https://playground.babylonjs.com/#KJ2GLK#4

However, when I try to apply albedoTexture (uncomment line 23 in the above playground) to make it a semi-transparent ball, I also had to enable linkRefractionWithTransparency (uncomment line 26) for the albedoTexture to take effect, but when I do that, the hole will be completely invisible which is not realistic. I tried to use opacityTexture as well (uncomment line 28 and 29) but it still did not produce the desired effect. I am new to BabylonJS and 3d modeling in general so trying to get some help from the experts here on how to properly do this.

Thank you for your help in advance!

[roland]

Hey welcome aboard!

Something like this?

Babylon.js Playground

added:

    pbr.backFaceCulling = false

changed:

    var sphere_with_hole = sphereCSG.toMesh("sphere_with_hole", pbr, scene, false);
    pbr.alpha = 0.4;    

r.

[newbee]

Thank you very much, turning off backFaceCulling may help a little however I feel it looks more realistic if refraction is enabled, when refraction is disabled it does not look like a solid glass ball.

But the biggest question I have is, how can I apply albedoTexture to the ball and still be able to see the hole, even partially. Any thoughts?

[roland]

Do you have a picture of what you would like to achieve?

[newbee]

Something like this, glass ball with texture but also able to see the hole if there is one. Thank you!

[roland]

Look at this small demo I created half year ago. I think we can use the node material I created for the diamonds in your project as well:
https://babylonjs.nascor.tech/diamond-sphere/#/

I believe we just need to tweak the values for the node material to get a glass effect instead of a diamond and add the texture of yours. Are you familiar with the node material already?

Here is the original topic:

Diamonds part 6 - Getting serious - Diamond Sphere Demo

So guys, another demo is ready. This was not an easy day, working and making the demo in paralell and I created the model myself, so had to do some Blender as well. I’ve learned a lot today. I’m sure I’m developing carpal tunnel syndrome with BabylonJS, but damned, I just can’t stop. I want to know everything! This is so awesome what can we do by practically just a few lines of code! Hopefully you’re gonna like it! EDIT: best viewed in FullHD (hard …

[newbee]

Wow that looks so cool, brilliant! No but I will definitely look into the node materials. So you don’t think this is doable using some straightforward PBR settings like albedo and opacity texture?

[roland]

Thank you!

I don’t know, I am quite new to BabylonJS as well and didn’t have time to try all the PBR settings. I am playing with your PG just right now to try them out. So I’ll learn something new and help a BabylonJS fella at the same time

If you export your NM from NME to js code you will see that the resulting code will contain lines setting these values.

Let me play with your PG for a while and I’ll get back to you asap. I am helping another lost soul just right now so it might take a while.

[newbee]

No problem, really appreciate your help!

[roland]

And maybe someone more experienced will jump in meanwhile and propose a solution. I suggest you to watch the BabylonJS videos about NME. You will need it sooner or later tho.

[newbee]

Got it, will do and thanks!

[roland]

One more question here. Did you try to use the albedoTexture to simulate the cracks or it’s just a surface texture?

[newbee]

Yeah, was trying to use that to simulate or approximate the cracks as they are really inside the ball, it does not have to be super realistic so cheating is OK if it produces acceptable results

[roland]

Ok, got it In 3D we need to use various cheat techniques to fool the eye and get good FPS.

[roland]

Finally back on this. I did already a few tries and I think we don’t need the node material, it can be done using the PBR material. We’ll see at the end tho

[newbee]

You rock! Looking forward to seeing the end effect.

[roland]

Actually I don’t rock I’m failing and failing to achieve what I want, but I am curious how to do this as you are so I will not give up… I hope so The glass and the surface cracks are easy but the cracks inside will need geometry inside the sphere. So I am trying to model something in Blender or I am thinking about creating the cracks dynamically in code. If I fail (I am not a Blender dude at all) I will code it and eventually I will fail in Blender I coded some lightning effects before so I could use and modify the existing algorithm to create the cracks.

[newbee]

First thanks again for spending time helping out, so if we don’t have to worry about the inner cracks yet, curious how we could do surface cracks but still be able to see the hole?

[roland]

Hey!

Babylon.js Playground

The graining is in the texture, so feel free to swap to another one. You might want to assign another material with a different texture to the cylinder to make it more distinct.

[newbee]

Thank you, one key difference between this and the photo is that the ball in the photo does not really have any bumps. I tried earlier using opacityTexture instead of bumpTexture and this is as good as I could get: https://playground.babylonjs.com/#KJ2GLK#6

However as you can see the apparent issue is the albedoTexture is ignored in this case, if I link Refraction with Transparency by uncomment line 25, albedoTexture comes to effect but the hole becomes invisible. Any remedy at all to make both the albedoTexture and the hole visible at the same time?