BabylonJS - Mesh BlendModes

You can create a blend mode by modifying the alphamode of the materials.

Following modes are available and the same are applied on the boxes as shown in the output −

BABYLON.Engine.ALPHA_COMBINE
BABYLON.Engine.ALPHA_ADD
BABYLON.Engine.ALPHA_SUBTRACT
BABYLON.Engine.ALPHA_MULTIPLY
BABYLON.Engine.ALPHA_MAXIMIZED

This is how the blend mode is applied −

mat = material_base.clone(null);
mat.alphaMode  = blendmode;

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);

            scene.ambientColor = new BABYLON.Color3(0.05, 0.2,0.05 );

            //Create a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene);

            //Create an Arc Rotate Camera - aimed negative z this time
            var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.0, 110, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            //Creation of a plane
            var plane = BABYLON.Mesh.CreatePlane("plane", 250, scene);
            plane.position.y = -8;
            plane.rotation.x = Math.PI / 2;

            //Creation of a repeated textured material
            var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
            materialPlane.diffuseTexture = new BABYLON.Texture("images/board.jpg", scene);
            materialPlane.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes
            materialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes
            materialPlane.backFaceCulling = false;//Allways show the front and the back of an element

            plane.material = materialPlane;

            // materials
            var material_base = new BABYLON.StandardMaterial("mat", scene);
            material_base.diffuseTexture = new BABYLON.Texture("images/glitter.jpg", scene);
            material_base.alpha = 0.9999;		// artificially set the material as alpha blended
            material_base.ambientColor = BABYLON.Color3.White();

            var alphamodes = [
               BABYLON.Engine.ALPHA_COMBINE,
               BABYLON.Engine.ALPHA_ADD,
               BABYLON.Engine.ALPHA_SUBTRACT,
               BABYLON.Engine.ALPHA_MULTIPLY,
               BABYLON.Engine.ALPHA_MAXIMIZED
            ];

            var count = 5;
            var mesh;
            var mat;
            var angle;
            for (var i = 0; i < count; i++) {
               mesh = BABYLON.Mesh.CreateBox("cube" + i, 12, scene);
               mesh.position.x = 17 * (i +0.5 - count/2);
               mat = material_base.clone(null);
               mat.alphaMode = alphamodes[i];
               mesh.material = mat;
            }
            return scene
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

The above line of code generates the following output −

In this demo, we have used images glitter.jpg, board.jpg. The images are stored in the images/ folder locally and are also pasted below for reference. You can download any image of your choice and use in the demo link.

images/glitter.jpg

images/board.jpg

babylonjs_mesh.htm