Post processing does not seem to work correctly when order independent transparency is enabled

Bugs
1

I am running the latest master branch from github, in Ubuntu 20.04, and I am trying to test order independent transparency and post processing effects, but I am getting weird results.

This is the code that I am trying to test:

<body>

    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->

    <script>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        // Add your code here matching the playground format
        var createScene = function() {
            // This creates a basic Babylon Scene object (non-mesh)
            var scene = new BABYLON.Scene(engine);
            scene.useOrderIndependentTransparency = true;

            // This creates and positions a free camera (non-mesh)
            var camera = new BABYLON.ArcRotateCamera("camera1", 0, 1, 15, new BABYLON.Vector3(0, 0, 0), scene);
	        camera.maxZ = 100;
            // This attaches the camera to the canvas
            camera.attachControl(canvas, true);

            // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            // Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;

	        var ground = BABYLON.Mesh.CreatePlane('ground', 100, scene);
	        ground.position.y = -7;
	        ground.rotation.x = Math.PI/2;

	        var material_stairs = new BABYLON.StandardMaterial('stairsmat', scene);
	        material_stairs.diffuseColor = BABYLON.Color3.Blue();
	        material_stairs.emissiveColor = new BABYLON.Color3(0.1,0.1,0.1);
	        material_stairs.alpha = 0.5;

	        // create sphere base
	        for(var i=0; i<5; i++) {
	        	var cube = BABYLON.Mesh.CreateBox('cube', 0.3, scene);
	        	cube.position.y = -(i+1)*0.5;
	        	cube.scaling.x = 10*(i+1);
	        	cube.scaling.z = cube.scaling.x;
	        	cube.material = material_stairs;
	        }
        
	        var material_columns = new BABYLON.StandardMaterial('columnsmat', scene);
	        material_columns.diffuseColor = BABYLON.Color3.Yellow();
            material_columns.alpha = 0.7;
        
	        // create cube arrays
	        var angle;
	        for(var i=1; i<5; i++) {
	        	for(var j=0; j<4; j++) {
	        		angle = Math.PI * 0.5 * (j+0.5);
	        		var cube = BABYLON.Mesh.CreateBox('cube', 0.75, scene);
	        		cube.position.y = -3;
	        		cube.position.x = Math.cos(angle)*(i)*2.5;
	        		cube.position.z = Math.sin(angle)*(i)*2.5;
	        		cube.scaling.y = 1.8 * (i+1);
	        		cube.position.y += cube.scaling.y / 2.5;
	        		cube.material = material_columns;
	        	}
	        }
            
            var kernel = 2.0;	
            var postProcess0 = new BABYLON.BlurPostProcess("Horizontal blur", new BABYLON.Vector2(1.0, 0), kernel, 1.0, camera);
            var postProcess1 = new BABYLON.BlurPostProcess("Vertical blur", new BABYLON.Vector2(0, 1.0), kernel, 1.0, camera);


            return scene;
        };

        const scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
    </script>

   </body>

and it gives this result:

OIT
OIT1669×1271 47.1 KB

while if I remove the post processing effects the result is correct.

If I remove scene.useOrderIndependentTransparency = true
then post processing works correctly, but transparency is messed up.

Is this expected?

2

Hi @Kwstanths and welcome to the forum

let me ping rendering extraordinaire @Evgeni_Popov

3

OIT is in its first iteration and for the time being it only works for the standard rendering of the scene when no features like glow, post processes, etc are used (see the doc for more info).

OIT will support more options in the future, that’s only a matter of time!

3 Likes