Question about transparency

Questions
1

Hey guys,

Sorry this is my first time using this software so its probably something straight forward I’ve missed. I have a scene with background set to transparent using:

scene.clearColor = new BABYLON.Color4(0,0,0,0.0000000000000001);

Which works however my sphere mesh object which is using a JPG texture has become semi transparent also? Please see below for full coding:

let canvas = document.getElementById("renderCanvas");

let createScene = function () {
    let scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color4(0,0,0,0.0000000000000001);

    let globeMat = new BABYLON.StandardMaterial("globeMat", scene);
    globeMat.diffuseTexture = new BABYLON.Texture("img/textures/earth.jpg", scene);

    globeMat.diffuseColor = new BABYLON.Color3(255, 255, 255);
    globeMat.specularColor = new BABYLON.Color3(255, 255, 255);
    globeMat.emissiveColor = new BABYLON.Color3(255, 255, 255);
    globeMat.ambientColor = new BABYLON.Color3(255, 255, 255);


    let sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
    sphere.material = globeMat;


    let arcCamera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2,  Math.PI / 4, 5, BABYLON.Vector3.Zero(), scene);
    arcCamera.setPosition(new BABYLON.Vector3(0, 0, 5));
    arcCamera.target = new BABYLON.Vector3(0, 0, 0);

    scene.activeCamera = arcCamera;

    scene.beforeRender = function () {
        arcCamera.alpha += .01;
    };



    return scene;
};

let engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
let scene = createScene();


engine.runRenderLoop(function () {
    if (scene) {
        scene.render();
    }
});

// Resize
window.addEventListener("resize", function () {
    engine.resize();
});
2

Is the canvas itself having some kind of opacity setup ?

1 Like
3

By the way, WELCOME TO THE FORUM !!!

1 Like
4

Well I tested everything in your code and it should work fine. So like sebevan said, maybe you set some opacity on the canvas itself which is causing the issue.

I just want to add that you should use values in range between 0-1 inside Color3.

In your case it is not that big of a deal, because you have diffuseTexture on the mesh so basically only specularColor can cause some problems, but you should fix that probably.

5

Cheers for the welcome !

You guys are correct. Seems the containing div had an opacity set to it via another JS file.

Thank you very much !

1 Like
6

Thanks for the info. I was thinking they were RGB format however that said I don’t have any colours set on the actual material in the live JS. Was messing around with values prior to posting here and forgot to remove.