[Materials] How Anti-Aliasing .png

How Anti-Aliasing this .png file.

How can i find target material or options?

PG : https://www.babylonjs-playground.com/#EF9X5R#20

Please & thank you :pray:




Thank you!
But more question happened.

Different opacityTexture’s depth and diffuseTexture’s depth (or z)?
Why Difference of two case that on/off opacityTexture (line 28).

PG : https://www.babylonjs-playground.com/#EF9X5R#25

i think you right but anyway :slight_smile:
you can use One channel too
and about your Question in ping @sebavan @Deltakosh


always read what Nas writes because always learn something : )


I am proud because I have a lot of friends here, especially you. You always look at my work with non-criticism and objection if they have a lot of problems. Thankful

1 Like

We all love you!


Thank you, nice answer!

But, i dont found customMaterial.
My babylonjs is 4.03 version.
And now, version up 4.1.0-alpha.25

How use & where is customMaterial? :pray:

This cleared. I’m installed ‘babylonjs-material’ for that.
Thank you!
By the way, can able this how with emissiveTexture?

alpha = texture2D(emissiveSampler,vEmissiveUV).a;

Like this?

And ‘material.alpha=0.999’ is effected to mesh(or material) order.

Plz help me, master :pray:

PG :

1 Like

Hi @nedcrow


API / customMaterial

Docs / emissiveTexture

PG search emissiveTexture

Google: emissiveTexture

Path to “mastery”

: )

Maybe, if i got how from this link, i would not have asked.
Sorry. hard to searching point in my PG’s?

  1. Multi Meshes.
  2. Material should have alpha.
  3. Hide at other meshes’s back when farer then other meshes from camera.

Sorry for too much hard quest.
But i believe your force.
& you.
& you.
& you. :heart:

1 Like

I answer question: “Please help me MASTER BABYLONJS.”

Your quest: Multi-Mesh, Alpha, Z-Index.

Read many LINKS. Try many things.

Someday read source code.

That is how.

: )


Here is SIMILAR 2DPlane with Alpha, separate on ZIndex, for a galaxy effect:

nx.createGalaxy1 = function(){
    nx.galaxyMaster1 = BABYLON.Mesh.CreateSphere("editNode", 20, 20, nx.scene);
    nx.gmasterMat1 = new BABYLON.StandardMaterial("gMat", nx.scene);
    nx.galaxyMaster1.material = nx.gmasterMat1;
    nx.galaxyMaster1.scaling = new BABYLON.Vector3(1.4,1.4,1.4)
    nx.galaxyMaster1.position.copyFrom( {x: -2800, y: 6300, z: -1000})
    nx.galaxyMaster1.rotation.copyFrom({x: -1.8, y: 1.8, z: -1.4})
    nx.galaxyMaster1.visibility = 1;
    nx.gMatsga1 = new BABYLON.StandardMaterial("gMat", nx.scene);
    //todo put these inline so that no var creation necessary
    var txtursga1 = new BABYLON.Texture("./img/space/g2/twistedGalaxy1.png", nx.scene);
    nx.gMatsga1.diffuseTexture = txtursga1;
    nx.gMatsga1.diffuseTexture.hasAlpha = true;
    nx.gMatsga1.emissiveColor = new BABYLON.Color3(1,0,0)
    nx.gMatsga1.diffuseColor = new BABYLON.Color3(1,1,1)
    nx.gMatsga1.alphaMode = BABYLON.Engine.ALPHA_MAXIMIZED;
    nx.gMatsga1.alpha = 0.9;
    nx.gMatsga1.backFaceCulling = false;
    nx.gMatsga1.emissiveColor = new BABYLON.Color3(0.2,0.2,1)
    nx.galaxyframe1 = BABYLON.Mesh.CreatePlane("plane",1000, nx.scene);
    nx.galaxyframe1.rotation.y = -0.8;
    nx.galaxyframe1.visibility = 1;
    nx.galaxyframe1.material = nx.gMatsga1;
    nx.galaxyframe1.parent = nx.galaxyMaster1;
    nx.gMatsga2 = new BABYLON.StandardMaterial("gMat", nx.scene);
    var txtursga2 = new BABYLON.Texture("./img/space/g2/twistedGalaxy1.png", nx.scene);
    nx.gMatsga2.diffuseTexture = txtursga2;
    nx.gMatsga2.diffuseTexture.hasAlpha = true;
    nx.gMatsga2.diffuseColor = new BABYLON.Color3(1,1,1)
    nx.gMatsga2.emissiveColor = new BABYLON.Color3(0,0,0.5)
    nx.gMatsga2.alphaMode = BABYLON.Engine.ALPHA_ONEONE;
    nx.gMatsga2.alpha = 0.1;
    nx.gMatsga2.backFaceCulling = false;
    nx.galaxyframe2 = BABYLON.Mesh.CreatePlane("plane",1000, nx.scene);
    nx.galaxyframe2.rotation.y = -0.8;
    nx.galaxyframe2.visibility = 1;
    nx.galaxyframe2.material = nx.gMatsga2;
    nx.galaxyframe2.parent = nx.galaxyMaster1;
    nx.gMatsga3 = new BABYLON.StandardMaterial("gMat", nx.scene);
    var txtursga3 = new BABYLON.Texture("./img/space/g2/twistedGalaxy1.png", nx.scene);
    nx.gMatsga3.diffuseTexture = txtursga3;
    nx.gMatsga3.diffuseTexture.hasAlpha = true;
    nx.gMatsga3.diffuseColor = new BABYLON.Color3(1,1,1)
    nx.gMatsga3.emissiveColor = new BABYLON.Color3(0,1,0)
    nx.gMatsga3.alphaMode = BABYLON.Engine.ALPHA_ONEONE;
    nx.gMatsga3.alpha = 0.1;
    nx.gMatsga3.backFaceCulling = false;
    nx.galaxyframe3 = BABYLON.Mesh.CreatePlane("plane",1000, nx.scene);
    nx.galaxyframe3.rotation.y = -0.8;
    nx.galaxyframe3.visibility = 1;
    nx.galaxyframe3.material = nx.gMatsga3;
    nx.galaxyframe3.parent = nx.galaxyMaster1;
    nx.gMatsga4 = new BABYLON.StandardMaterial("gMat", nx.scene);
    var txtursga4 = new BABYLON.Texture("./img/space/g2/twistedGalaxy1.png", nx.scene);
    nx.gMatsga4.diffuseTexture = txtursga4;
    nx.gMatsga4.diffuseTexture.hasAlpha = true;
    nx.gMatsga4.emissiveColor = new BABYLON.Color3(1,0,0)
    nx.gMatsga4.alphaMode = BABYLON.Engine.ALPHA_ONEONE;
    nx.gMatsga4.alpha = 0.2;
    nx.gMatsga4.backFaceCulling = false;
    nx.galaxyframe4 = BABYLON.Mesh.CreatePlane("plane",1000, nx.scene);
    nx.galaxyframe4.rotation.y = -0.8;
    nx.galaxyframe4.visibility = 1;
    nx.galaxyframe4.material = nx.gMatsga4;
    nx.galaxyframe4.parent = nx.galaxyMaster1;
    nx.gMatsga5 = new BABYLON.StandardMaterial("gMat", nx.scene);
    var txtursga5 = new BABYLON.Texture("./img/space/g2/twistedGalaxy1.png", nx.scene);
    nx.gMatsga5.diffuseTexture = txtursga5;
    nx.gMatsga5.diffuseTexture.hasAlpha = true;
    nx.gMatsga5.emissiveColor = new BABYLON.Color3(1,1,0)
    nx.gMatsga5.alphaMode = BABYLON.Engine.ALPHA_MAXIMIZED;
    nx.gMatsga5.alpha = 0.2;
    nx.gMatsga5.backFaceCulling = false;
    nx.galaxyframe5 = BABYLON.Mesh.CreatePlane("plane",1000, nx.scene);
    nx.galaxyframe5.rotation.y = -0.8;
    nx.galaxyframe5.visibility = 1;
    nx.galaxyframe5.material = nx.gMatsga5;
    nx.galaxyframe5.parent = nx.galaxyMaster1;

But I like Nas soution better!

Using opacityTexture

I used BLEND MODES, alphaMode, with different emissive colors (above).

Does opacityTexture give better effect? I dont know.

You can compare. : )

Also, MIX MAP Shader?

endless. : )

Okey, saw your kind full answer.
Now full enough transparencies material’s information.
Problem was rendering order.

This material’s rendering order was always later than others
(about spine skeletonMesh except 3D meshes).
(even, spine’s mesh was rendering per 0.01sec.)

How can faster render than other materials?

Or how can view rendered order?