Hi 
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? 
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});
}
}
