Export PNG to Babylon Material help

Questions
1

I am trying to update a PNG in GIMP, for use on a sphere.

However, I can’t seem to get the png correct and was hoping for some help. sadly I can’t link to the file.

Hoping for some guidance.

What I have is a PNG of the world in black and white. I want to make the oceans (white) 50% opacity, of the color #010403

so what I did in GIMP, was I selected the white using the Select By Color tool.
i pressed delete to clear.

while still selected I picked the Bucket Fill tool, which was set to FG color of 010403, opacity 50.0. i filled it in.

exported to PNG with default options, which is:

Save background color
Save resolution
Save color values from transparent pixels.
“automatic pixelformat”

I’ve tried changing automatic pixelformat to 8bpc RGBA, this does not change anything.

the file i’m working with has htis in the image properties:
Color space: RGB color
Precision: 8-bit gamma integer

in BABYLON, when I apply the material to the sphere, using diffuseTexture does not show any opacity.

so I use the opacityTexture. This gets me opacity, however, it is like 0.1, not 50%.

Here’s my BABYLON code.

let tex = new BABYLON.Texture(“images/grid_8.png”, _scene, false, false);
tex.coordinatesMode = 1;
tex.uOffset = .4671;
tex.vOffset = .017;
tex.hasAlpha = true;
//tex.getAlphaFromRGB = true; // uncommenting this makes the skin like, bright white?
//tex.opacityFresnel = false; // doens’t seem to help
spheremat.opacityTexture = tex;

any pointers on how to get the alpha percentage recognized in babylon?

EDIT

I thought about this, and I wonder if babylon has something to help that is more flexible.

Ultimately I have 3 colors in the final png: white, black, and blue (0000FF). I’d like to programmatically assign those to different values in the texture, such as white for the alpha 010403, black to a soft green color, and maybe leave the blue, or change it from 0000FF to a different shade. It would be easier to do this without having to re-generate a PNG every time.

I know this can be done directly in a shader, but I have zero experience with those, and was wondering if there’s a babylon helper for this? the tutorial on materials mentioned Blending, but that seems specific to Alpha channels.

thanks

2

Hello, it would be FAR easier to help with a repro in the PG. No need to share the real image but a dummy one will suffice as long as you can repro the problem

3

ok i spent yesterday messing around with transparent effects, shaders, and all sorts of things. I was eventually able to get a shader working…but…

I keep running into a situation though. I created a playground.

So basically what I am attempting to do is create a translucent sphere, of a color.

I keep running into an issue, where when I do this, and I tilt the camera up/down (y axis i guess by default?) i see a shimmer on the surface. in fact, from what i can tell, the surface closest to the camera is being 100% see through, and not showing what is on the surface.

I’ve created a playground (hi Deltakosh! :slight_smile: ) to show this. simply rotate camera up/down and you should see lines drawing.

I played with setting alpha blend modes to fix this, but the color never looks like i want it. I even tried using emissiveColor or ambientColor (with scene ambient light set), and it still happens.

playground 1

how do I make a translucent blue sphere that doesn’t do that weird shimmer?

Thanks

4

You could simply disable the lighting to prevent the specular effect: https://www.babylonjs-playground.com/#ZTKKYA#2

5

wow. had no idea i could disable lighting on a material. missed that in the docs.

this almost works. My final plans are to have an emissive texture on top of the sphere. the entire sphere is at the same transparency, but i want to put the countries of the world on it, emitting light.

I tried your change with an emissiveTexture, and the problem returns. you have to look closely, the image I found is clouds, so its a little faint. but you shoul dbe able to see it with a north/south tilt.

playground 3

6

You should have a look at the doc for transparency:

https://www.babylonjs-playground.com/#ZTKKYA#4

Basically you want to do a depth pre pass Transparency and How Meshes Are Rendered - Babylon.js Documentation

7

thank you sir!

I read that article previously like a week ago, and i didn’t quite understand it. but now that i spent yesterday building a shader and png images and wondering how to render some translucent pixels vs opaque ones…

well now it makes more sense. Is this something that i can also set on a ShaderMaterial? I built a color swap shader for my PNG, and I’d like to use it because i can keep my image simple, and change the colors dynamically from babylon. I would love to pass in a color4 for the value in case we wanted to tweak the translucency.

8

You should try and see :slight_smile: I dunno on the top of my head. if not I ll check to add support.

9

i tried it, unsure if it works? shader and transperency are doing something odd.

basically in order to work i have to set the material alpha value, and alphamode. this is despite telling it to read the alpha values from the RGB, and use a pre pass. i’m not 100% sure if this is right/wrong. under the hood this may be what happens when you set the emissiveTexture property of a StandardMaterial.

in the shader, I set 3 levels of alpha. .4 for the country, .2 for the “ocean” and 1.0 for the rest, which is pips. i translate oceans to red, countries to gray, and leave pips alone now to help highlight.

right now its not 100% perfect on the swap, the color values must have changed a little when i hosted it.

but when you rotate, you can tell that the transparency kinda works, in that the white spheres are visible through it, but the countries on the other side do not draw.

playground

10

The answer is still on the transparency doc.

If you want to see behind but not have triangle order issues you need to replace the depthPrePass by a separate Culling Pass:

https://www.babylonjs-playground.com/#V4JCRR#3

1 Like