Controlling the Render Pipeline with Typescript

Questions
1

Firstly Thanks to the Babylon team & contributors for the work you do.
I recently switched to a Webpack development approach using es6 Typescript. To reduce/control the size of my project.

  1. I’m having trouble including the render pipeline in my index.ts file? I hope it’s not a case of incorrect dependencies. I tried every example I could from docs to Playground. Typescripts so argumentative!!

  2. How do I control the AutoRotationBehavior speed?

  3. Any performance advice using Webpack? My production builds main.js file is 1.2meg. Any extra savings welcome.

Feel free to comment if my code just needs help. I’m lost in this Typescript world.
Thanks

Index.ts
import { Engine } from “@babylonjs/core/Engines/engine”;
import { Scene } from “@babylonjs/core/scene”;
import { Vector3, Color4 } from “@babylonjs/core/Maths/math”;
import { ArcRotateCamera } from “@babylonjs/core/Cameras/arcRotateCamera”;
import { HemisphericLight } from “@babylonjs/core/Lights/hemisphericLight”;
import “@babylonjs/loaders/glTF”;
import { SceneLoader } from “@babylonjs/core/Loading/sceneLoader”;
import { FxaaPostProcess } from “@babylonjs/core/PostProcesses/fxaaPostProcess”;

// Get the canvas element from the DOM.
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;

// Associate a Babylon Engine to it.
const engine = new Engine(canvas);

// Create our first scene.
var scene = new Scene(engine);

var camera = new ArcRotateCamera("Camera", 0, 0.8, 0, new Vector3(0, 50, 0), scene);
camera.useAutoRotationBehavior = true;
camera.speed =100;
camera.useFramingBehavior = true;

// Positions the camera overwriting alpha, beta, radius
camera.setPosition(new Vector3(0, -200, 0));

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

var light = new HemisphericLight("light1", new Vector3(0, 1, 10), scene);

// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
scene.clearColor = new Color4(0.1, 0.5, 0.7);

var postProcess = new FxaaPostProcess("fxaa", 1.5, camera);

SceneLoader.ImportMesh("", "src/scene/", "drnearly5.gltf", scene, function () {          
     //..          
});

window.onresize = function() {
    engine.resize();
};
// Render every frame
engine.runRenderLoop(() => {
    scene.render();
});
1 Like
2

Hi

  1. Take a look at the playground index.html and how modules are included (ammo.js for example)

  2. In the documentation Apply Camera Behaviors - Babylon.js Documentation there are some parameters you can tweak for speed: idleRotationSpeed, idleRotationWaitTime, idleRotationSpinupTime …

  3. @Deltakosh did a blog post on size optimization for Babylon.js. Maybe you’ll find some tips relevant to your needs Size matters - Babylon.js - Medium

1 Like
3

Hi Cedric
Thanks for your reply.

  1. I’m still lost with this one I tried every way possible. Do I need to add a particular import for the render pipeline or use engine. or scene. to call the pipeline namespace? Typescript doesn’t like the word ‘pipeline’ tried to use these commands Typescript didn’t like them.

pipeline.fxaaEnabled = true;
pipeline.bloomEnabled = true;

  1. Sorted thanks had a look at this page many times I couldn’t get any of these parameters to work. idleRotationSpeed, idleRotationWaitTime , idleRotationSpinupTime eventually got them to work by adding autoRotationBehavior.

    camera.autoRotationBehavior.idleRotationSpeed = 2;
    camera.autoRotationBehavior.idleRotationWaitTime = 1;
    camera.autoRotationBehavior.idleRotationSpinupTime = 3000;

  2. Good article been all over medium somehow I missed that one.

4

The viewer project may have some interesting bits for you.
Like this for enabling FXAA:

Bloom is enabled the same way.
Don’t forget to enable postprocess :slight_smile:

5

Hi Cedric

I had a look at the link you sent me. I had one problem I couldn’t find the URL for the SceneManger Import.

import { SceneManager } from '../../managers/sceneManager';

I tried using:

import { SceneManager } from '@babylonjs/core/managers/sceneManager';

Unfortunately, nothing worked I then searched the core folder I still couldn’t find the SceneManager import. Please Help :sleepy:

6

Eventually got it to work :grin: with the following code below I believe it was the wrong dependencies in the package.json file. Added the babylonjs dependencies somewhere in the scramble. :sweat:

These are the Imports I used:

import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent'
import { DefaultRenderingPipeline } from "@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline";
import "@babylonjs/core/Materials/standardMaterial";

Code Used:

var pipeline = new DefaultRenderingPipeline(
"pipeline", // The name of the pipeline
false, // Do you want HDR textures ?
scene, // The scene instance
[camera] // The list of cameras to be attached to
);

pipeline.fxaaEnabled = true;
pipeline.bloomEnabled = true;
1 Like