[Materials] How Anti-Aliasing .png

[nedcrow]

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

[nasimiasl]

hi

https://www.babylonjs-playground.com/#EF9X5R#21

[nedcrow]

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

[nasimiasl]

i think you right but anyway
you can use One channel too
https://www.babylonjs-playground.com/#EF9X5R#26
and about your Question in ping @sebavan @Deltakosh

[aFalcon]

always read what Nas writes because always learn something : )

[nasimiasl]

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

[Deltakosh]

@nasimiasl

I am proud because I have a lot of friends here

We all love you!

[nedcrow]

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?

---

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

PG :
[https://www.babylonjs-playground.com/#EF9X5R#27]
[https://www.babylonjs-playground.com/#EF9X5R#28]

[aFalcon]

Hi @nedcrow

links:

API / customMaterial
https://doc.babylonjs.com/api/classes/babylon.custommaterial

Docs / emissiveTexture
https://doc.babylonjs.com/how_to/how_to_create_a_material_for_materialslibrary

PG search emissiveTexture
https://doc.babylonjs.com/playground/?code=emissiveTexture

Google: emissiveTexture
https://www.google.com/search?q=babylonjs+emissiveTexture&rlz=1C1CHBF_enUS865US865&oq=babylonjs+emissiveTexture&aqs=chrome.0.69i59j0j69i57j69i60l2.5105j1j4&sourceid=chrome&ie=UTF-8

Path to “mastery”

: )

[nedcrow]

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.

[aFalcon]

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?

Node Materials Examples

https://nme.babylonjs.com/#12YPTW#4 [image] Made a shader that can take a mix map, three textures and use the red green and blue values of the mix map to determine the texture that is shown! This is similar to the TerrainMaterial (Terrain - Babylon.js Documentation). I just did it to learn more about the Node Material Editor… (The principle here was to take the red green and blue outputs of the mix map separately, and multiply each of those by the rgb output of the 3 different textures befor…

endless. : )

[nedcrow]

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?