Magnifying Glass Effect

Tutorials and tips
,
1

Hey guys , had to implement a magnifying glass for a project I’m working on and had a bit of struggle until I remixed a playground I found to make this. Enjoy.
Edit:Forgot to mention that in order to play with the “zoom” of the magnifying glass play around with refractionTexture.depth in the negatives so -1 to -10 has some cool looks

var CreateScene = function () {
    var scene = new BABYLON.Scene(engine);

   
      camera = new BABYLON.FreeCamera(
        "UniversalCamera",
        new BABYLON.Vector3(0, 0, 20),
        scene
      );
      camera.panningSensibility = 0;

      // camera.attachControl(canvas, true);

      camera.setTarget(new BABYLON.Vector3(0, 0, 0));

    camera.upperBetaLimit = Math.PI / 2;
    camera.lowerRadiusLimit = 4;



      //Directional Light
      var light = new BABYLON.HemisphericLight(
        "DirectionalLight",
        new BABYLON.Vector3(0, -1, 0),
        scene
      );
      light.diffuse = new BABYLON.Color3(1, 1, 1);
      light.specular = new BABYLON.Color3(0, 1, 0);

      light.intensity = 1.5;


	var disc = BABYLON.Mesh.CreateDisc("disc", .25, 64, scene);
	
     disc.scaling = new BABYLON.Vector3(3.8, 3.8, 1);
          disc.rotation = new BABYLON.Vector3(3.141, 0, 0);
          disc.position.z = 15;
 

    // Ground
    var ground = BABYLON.Mesh.CreatePlane("Mirror", 1.0, scene);
    ground.material = new BABYLON.StandardMaterial("ground", scene);
    ground.material.diffuseTexture = new BABYLON.Texture("textures/amiga.jpg", scene);
    ground.material.diffuseTexture.uScale = 25;
    ground.material.diffuseTexture.vScale = 25;
 
      ground.position = new BABYLON.Vector3(0, 0, 0);
      ground.scaling = new BABYLON.Vector3(38, 38, 38);
      ground.rotation = new BABYLON.Vector3(3.141, 0, 0);

    // Main material	
   var mainMaterial = new BABYLON.PBRMaterial("pbr", scene);
          disc.material = mainMaterial;

         mainMaterial.metallic = 0.0;
          mainMaterial.roughness = 0;
	
	var refractionTexture = new BABYLON.RefractionTexture("th", 1024, scene);
    
    refractionTexture.renderList.push(ground);
	refractionTexture.refractionPlane = new BABYLON.Plane(0, 0, -1, -1);
    refractionTexture.depth =-1;
	
    mainMaterial.diffuseColor = new BABYLON.Color3(1, 1, 1);
	mainMaterial.refractionTexture = refractionTexture;
	mainMaterial.indexOfRefraction = 5;
	

    return scene;
};
2 Likes
2

I put it into PG since it seems more convenient - Babylon.js Playground

5 Likes
4

Thank You

1 Like
5

HI Guys,
I want magnifying on picked mesh please give me any solution

Thanks in Advance!

6

You probably need to create your own post process or use a rendertarget texture a special lens mesh