Transition between 2 cameras

Questions
1

Hi,
I am trying to achieve some transition between 2 cameras on click, I came across this site: https://gl-transitions.com/, and couldn’t understand hot to implement it in babylon, any suggestions to examples?

2

A transition between the alpha of two cameras could be implemented in this way:

Camera Transition | Babylon.js Playground (babylonjs-playground.com)

But if you want to a transition between two images, I think there is no way but to use shaders because of the performance alone.

The code would look like this:

// Create Babylon.js scene and engine
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);

// Create a plane
var plane = BABYLON.MeshBuilder.CreatePlane("plane", { width: 10, height: 10 }, scene);

// Create a custom shader material
var customMaterial = new BABYLON.RawShaderMaterial("customMaterial", scene, {
  vertex: "attribute vec3 position;\n" +
          "attribute vec2 uv;\n" +
          "uniform mat4 worldViewProjection;\n" +
          "varying vec2 vUV;\n" +
          "void main(void) {\n" +
          "    gl_Position = worldViewProjection * vec4(position, 1.0);\n" +
          "    vUV = uv;\n" +
          "}",
  fragment: "precision highp float;\n" +
            "varying vec2 vUV;\n" +
            "uniform sampler2D texture1;\n" +
            "uniform sampler2D texture2;\n" +
            "void main(void) {\n" +
            "    vec4 color1 = texture2D(texture1, vUV);\n" +
            "    vec4 color2 = texture2D(texture2, vUV);\n" +
            "    vec4 mixedColor = mix(color1, color2, 0.5);\n" + // Adjust the mix factor (0.0 - 1.0) to control the blending
            "    gl_FragColor = mixedColor;\n" +
            "}"
});

// Set the textures for blending
var texture1 = new BABYLON.Texture("path_to_image1.jpg", scene);
var texture2 = new BABYLON.Texture("path_to_image2.jpg", scene);
customMaterial.setTexture("texture1", texture1);
customMaterial.setTexture("texture2", texture2);

// Assign the custom material to the plane
plane.material = customMaterial;

// Render loop
engine.runRenderLoop(function () {
  scene.render();
});

// Handle window resizing
window.addEventListener("resize", function () {
  engine.resize();
});
1 Like
3

thank you for the reply man.
that’s useful, but I am trying to achieve this kind of transition between two cameras, not textures.
found this example: https://www.babylonjs-playground.com/#Z6ILEC#6, but can’t get it to work in ts

4

Be careful with this example, it creates too much textures but doesn’t dispose them so gradually all memory will be eaten :frowning:
image

Basically, you can make the transition between 2 camera screenshots (or RTT) using GLSL shader code from gl-transitions/transitions at master · gl-transitions/gl-transitions · GitHub as post-process.

2 Likes
5

Do you have some code example for this?

6

If you are asking about this screenshot - this is from Inspector. One can open the Inspector in any Playground with Inspector button.

image
image1920×1080 169 KB

7

thanks, but no I meant for using GLSL shader and with 2 camera views

8

By “camera views”, you mean you want to interpolate between two different sets of camera properties, or do you want the images rendered by the cameras themselves to be interpolated? If it’s the former, then you can look into Babylon animations. If it’s the latter, like the site you linked, you have to implement shaders, one such way could be with the Node Material Editor. Here’s a quick example of how such an effect could be implemented: Babylon.js Node Material Editor (babylonjs.com)