🤔 Anti-aliasing doesn't seem to work in my project

Hi :wave:

I’m working on a project with Angular and I have troubles with aliasing!
I’ve read a lot of articles but can’t seem to get it to work…

You can have a look at my screenshot and below is my code for Babylon Engine.
I’ve tried to use var postProcess = new BABYLON.FxaaPostProcess("fxaa", 1.0, this.camera);

3D Model is created in 3Dsmax and exported as a .babylon file using exporter plugin
It’s a mesh with Multi-Material applied (and 4 materials in it)

May someone help me? :innocent:

import { ElementRef, Injectable, NgZone } from '@angular/core';
import * as BABYLON from 'babylonjs';
import 'babylonjs-materials';
import 'babylonjs-loaders';
import { gsap } from 'gsap';
import { Power4 } from 'gsap/all';


@Injectable({
  providedIn: 'root'
})
export class BabylonEngineService {
  private canvas: HTMLCanvasElement;
  private engine: BABYLON.Engine;
  private camera: BABYLON.ArcRotateCamera;
  private scene: BABYLON.Scene;
  private light: BABYLON.Light;
  private assetsManager: BABYLON.AssetsManager;
  private sceneLoader:BABYLON.SceneLoader;

  sceneIsReady = false;

  public constructor(private ngZone: NgZone) {}

  createScene(canvas: ElementRef<HTMLCanvasElement>): void {
    // The first step is to get the reference of the canvas element from our HTML document
    this.canvas = canvas.nativeElement;

    // Then, load the Babylon 3D engine:
    this.engine = new BABYLON.Engine(this.canvas,  false);

    // create a basic BJS Scene object
    this.scene = new BABYLON.Scene(this.engine);
    this.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

    //camera
    this.camera = new BABYLON.ArcRotateCamera("cam",-2,1, 15, new BABYLON.Vector3(0,0,5), this.scene );
    this.camera.attachControl(this.canvas, false);
    this.camera.lowerRadiusLimit = 9;
    this.camera.upperRadiusLimit = 15;
    // this.camera.lowerAlphaLimit = (0 - Math.PI) / 2;
    // this.camera.upperAlphaLimit = Math.PI / 2;
    // this.camera.lowerBetaLimit = (0 - Math.PI) / 2;
    // this.camera.upperBetaLimit = Math.PI / 2;


    // light
    this.light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), this.scene);
    this.light.intensity = 1.5;


      //  Create a default skybox with an environment.
       var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("../assets/textures/environment.dds", this.scene);
       var currentSkybox = this.scene.createDefaultSkybox(hdrTexture, true);
       currentSkybox.renderingGroupId = -1;

       var that = this;
    this.sceneLoader = BABYLON.SceneLoader.ImportMesh("", "../assets/scenes/", "plvbroker.babylon", this.scene, function (newMeshes) {
  //  console.log("newMeshes", newMeshes[0]);
      // that.body = newMeshes[0];
      // newMeshes.forEach(element =>
      //   element.visibility = 0
      //  )


   });

   setTimeout(() => {
     this.initScene();
   }, 500);



  }

  initScene(){


    this.camera.setTarget(new BABYLON.Vector3(0,3.5,0.3093));
    this.scene.getMeshByName("btn-prev").isPickable = true;
    this.scene.getMeshByName("btn-prev").actionManager = new BABYLON.ActionManager(this.scene);
    this.scene.getMeshByName("btn-prev").actionManager.registerAction(new BABYLON.ExecuteCodeAction(
      {
          trigger: BABYLON.ActionManager.OnPickTrigger,
          parameter: {}
      }, (evt) => {
          console.log("Got Pick Action");
      }
  ));

   var postProcess = new BABYLON.FxaaPostProcess("fxaa", 1.0, this.camera);
  }

 changeTarget(){


 gsap.to (
   this.camera.target,
   1,
   {
     x:this.scene.getMeshByName("display").position.x,
     y:this.scene.getMeshByName("display").position.y,
     z:this.scene.getMeshByName("display").position.z,
     ease:Power4.easeOut
  });

  }



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


  animate(): void {
    // We have to run this outside angular zones,
    // because it could trigger heavy changeDetection cycles.
    this.ngZone.runOutsideAngular(() => {
      window.addEventListener('DOMContentLoaded', () => {
        this.engine.runRenderLoop(() => {
          this.scene.render();
        });
      });

      window.addEventListener('resize', () => {
        this.resizeEngine();
      });
    });
  }



  changeColor(rgb:string){

    // rgbToHex function for BABYLON.Color3.FromHexString()
    var rgbToHex = (function () {
      var rx = /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;

      function pad(num) {
          if (num.length === 1) {
              num = "0" + num;
          }

          return num;
      }

      return function (rgb, uppercase) {
          var rxArray = rgb.match(rx),
              hex;

          if (rxArray !== null) {
              hex = pad(parseInt(rxArray[1], 10).toString(16)) + pad(parseInt(rxArray[2], 10).toString(16)) + pad(parseInt(rxArray[3], 10).toString(16));

              if (uppercase === true) {
                  hex = hex.toUpperCase();
              }

              return hex;
          }

          return;
      };
    }());


    // apply color to multimaterial body
    var sheridanMaterial:any = this.scene.getMeshByName('sheridan').material;
    sheridanMaterial.subMaterials[0].baseColor = BABYLON.Color3.FromHexString(rgb);

  }


  /**
   * creates the world axes
   *
   * Source: https://doc.babylonjs.com/snippets/world_axes
   *
   * @param size number
   */
  showWorldAxis (size: number) {

    const makeTextPlane = (text: string, color: string, textSize: number) => {
      const dynamicTexture = new BABYLON.DynamicTexture('DynamicTexture', 50, this.scene, true);
      dynamicTexture.hasAlpha = true;
      dynamicTexture.drawText(text, 5, 40, 'bold 36px Arial', color , 'transparent', true);
      const plane = BABYLON.Mesh.CreatePlane('TextPlane', textSize, this.scene, true);
      const material = new BABYLON.StandardMaterial('TextPlaneMaterial', this.scene);
      material.backFaceCulling = false;
      material.specularColor = new BABYLON.Color3(0, 0, 0);
      material.diffuseTexture = dynamicTexture;
      plane.material = material;

      return plane;
    };




  }

  toggleMesh(name:string, status:boolean){

    let mesh:any = this.scene.getMeshByName(name);
    let tVisibility:number;

    if ( status ){
      tVisibility = 1;
    }
    else{
      tVisibility = 0;
    }
    gsap.to (  mesh, .4,  { visibility:tVisibility, ease:Power4.easeOut});

  }




}

For your scene, default webGL antialiasing isn’t enough?

Anyway, once your FXAA is created, you can simply access to its samples property:

https://www.babylonjs-playground.com/#4AJ16M#193

https://doc.babylonjs.com/api/classes/babylon.fxaapostprocess#samples

Update
ignore my comment, I did more reading.

I hate to be the guy to say it… but can you reproduce it in a PG for us?

yes good idea but I already tried this, I have a button on my scene to manually try and do :

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

but even when I fire it, it doesn’t optimise either… :disappointed_relieved:

sorry but what is a ‘PG’ ??!

https://playground.babylonjs.com/ “PG” in bjs world means playground

ok, now everyone knows i’m a n00b !!!

1 Like

We are all noobs in our own special way Mr. Bams…

2 Likes

oops… my posts are flagged…
due to dropbox screenshots links I guess?

anyway, I’ve tested in the sandbox and here my model is perfect.
but I can’t find yet how to import my .babylon in the playground for you to try

https://doc.babylonjs.com/resources/external_pg_assets
raw git. 1 sec ill find the url string.

1 Like

Works like a charm in PG :
https://playground.babylonjs.com/#2M8034

So then change your version of BJS on your local to the preview version and see if that fixes it.

OK I’ll try this.

For now, i’m on 4.0.3

“babylonjs”: “^4.0.3”,
“babylonjs-gui”: “^4.0.3”,
“babylonjs-loaders”: “^4.0.3”,
“babylonjs-materials”: “^4.0.3”,

Try 4.1

I have a bunch of errors after installing 4.1 :man_shrugging:

ERROR in node_modules/babylonjs-loaders/babylonjs.loaders.module.d.ts:1322:14 - error TS2305: Module ‘“babylonjs/Misc/tools”’ has no exported member ‘IAnimatable’.

1322 import { IAnimatable } from “babylonjs/Misc/tools”;
~~~~~~~~~~~
node_modules/babylonjs-materials/babylonjs.materials.module.d.ts:40:14 - error TS2305: Module ‘“babylonjs/Misc/tools”’ has no exported member ‘IAnimatable’.

40 import { IAnimatable } from “babylonjs/Misc/tools”;
~~~~~~~~~~~
node_modules/babylonjs-materials/babylonjs.materials.module.d.ts:234:14 - error TS2305: Module ‘“babylonjs/Misc/tools”’ has no exported member ‘IAnimatable’.

234 import { IAnimatable } from “babylonjs/Misc/tools”;
~~~~~~~~~~~
node_modules/babylonjs-materials/babylonjs.materials.module.d.ts:313:14 - error TS2305: Module ‘“babylonjs/Misc/tools”’ has no exported member ‘IAnimatable’.

313 import { IAnimatable } from “babylonjs/Misc/tools”;

a problem with TS typings, right?

Now this is something Id have to call the troops in for. I’m a TS noob.

@sebavan maybe?

1 Like

I found a post speaking about a conflict with @angular/animations but it didn’t do the trick

You should not import * as BABYLON from … as it will create namespaces naming conflicts.

Try renaming BABYLON to anything else ???

this way?

import BJS as BABYLON from ‘babylonjs’;

import * as BJS from ‘babylonjs’;