solved Bad quality rendering

[igargi]

Hi,

I'm using BabylonJS with angular and a file of about 35Mb. If I test it on the BabylonJS' sandbox, the quality is perfect and the optimization is the best.

If I open the file with my page (the one with white background), the render quality is much lower, to the point that the lines are a bunch of small rectangles.

I've seen this post (http://www.html5gamedevs.com/topic/30844-low-quality-rendering-in-chrome/) but both canvas are really similar in size, so I really don't know what I'm missing in order to get a correct rendering.

Thanks for your time.

 

Quote

 ngAfterViewInit(): void {
    if (this.babylonSupported) {
        this.canvas = this.el.nativeElement;
        this.engine = new BABYLON.Engine(this.canvas, false);
        this.engine.loadingUIBackgroundColor = '#03528f';  
        
        // Resize
        window.addEventListener('resize', () => {
            this.engine.resize();
        });

        // Find the default scene
        this.devices.forEach(element => {
          element.children.forEach(child => {
            if (child.default) {
              this.defaultScene = child.file;
            }
          });
        });

        // Call the default scene
        this.createScene(this.defaultScene); 

       
    }
 }

  createScene(Model: any): void{
    this.isLoading = true;
      console.log('createScene called');
        // Scene, light and camera
        const scene = new BABYLON.Scene(this.engine);
        scene.clearColor = new BABYLON.Color4(1, 1, 1, 1);
        const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
        const camera = new BABYLON.ArcRotateCamera('Camera', Math.PI / 2, Math.PI / 2, 50, new BABYLON.Vector3(0, 0, 0), scene);
        camera.attachControl(this.canvas);
        camera.inertia = 0.2;


        // Assets manager
        const assetsManager = new BABYLON.AssetsManager(scene);
        const meshTask = assetsManager.addMeshTask('sceneTask', '', '', Model);
     

        // Different materials
        const MaterialRojo = new BABYLON.StandardMaterial('MaterialRojo', scene);
        MaterialRojo.diffuseColor = BABYLON.Color3.Red();
        const MaterialVerde = new BABYLON.StandardMaterial('true', scene);
        MaterialVerde.diffuseColor = BABYLON.Color3.Green();

        // Initialization of GUI
        const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI('UI');
        const button1 = BABYLON.GUI.Button.CreateSimpleButton('but1', '? Resetear cámara');
        button1.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
        button1.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
        button1.width = '200px';
        button1.height = '40px';
        button1.color = 'white';
        button1.background = '#01579b';
        button1.onPointerUpObservable.add(function() {
          camera.alpha = Math.PI / 2;
          camera.beta = Math.PI / 2;
          camera.radius = 50;
          camera.target = new BABYLON.Vector3(0, 0, 0);
        });
        advancedTexture.addControl(button1);  

        // Handle success & error
        meshTask.onSuccess = function (task) {
          console.log('asset task on success');
            for (let i = 0; i < task.loadedMeshes.length; i++){
              task.loadedMeshes[i].isPickable = true;
            }
        };
    
        meshTask.onError = function (task) {
          this.errorLoading = true;
        };

        // Handle clicks
        scene.onPointerDown = function (evt, pick) {
          if (pick.hit){
            console.log(pick.pickedMesh.name);
          }
        };
        
        assetsManager.onProgress = (remainingCount, totalCount) => {
          console.log(remainingCount, totalCount);
        };

        assetsManager.onFinish = (tasks) => {
          this.isLoading = false;
          scene.debugLayer.show();
          scene.debugLayer.hide();
          this.engine.resize();


          console.log('finished loading asset');
    
          this.engine.runRenderLoop(function () {
                scene.render();
            });
        };

        assetsManager.load();
  }

 emitResize() {
  this.engine.resize();
 }

 

 

[vlad.b]

I'm not the expert, but as far as I know the second param on the Engine constructor is WebGL antialiasing (please correct me if I'm wrong). I'd try setting it to true and see if that changes anything.

Reference: http://doc.babylonjs.com/api/classes/babylon.engine#constructor

[Guest]

Thanks @vlad.b