[Materials] How Anti-Aliasing .png

Questions
11

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.

: )

EXAMPLE:

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.position.copyFrom({x:0,y:-500,z:0});
    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.position.copyFrom({x:0,y:-500,z:-5});
    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.position.copyFrom({x:0,y:-500,z:-10});
    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.position.copyFrom({x:0,y:-500,z:-15});
    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.position.copyFrom({x:0,y:-500,z:-20});
    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. : )