(A draft PR hoping to get early feedback.)

1. build a DOM tree for: Node that are marked as salient, and GUI Controls. In this way, the screen reader can read the page content.
2. make the DOM elements interactive for actionable nodes. So the user can use "tab" key to focus on interactive nodes or controls, and "enter" key to trigger the interactive nodes.
3. when the scene content changes (e.g. show/hide new salient mesh), the DOM tree updates too.

@RaananW @Exolun

Testing:

Testing code 1: Given a scene that has objects that cover conditions of:

• some are salient, some are not not-salient
• some objects (spheres) are interactive, and could be left and right clicked
• objects have parent-children hierarchy

let createScene = function () {
    let scene = new BABYLON.Scene(engine);
    let camera = new BABYLON.ArcRotateCamera("Camera", Math.PI/2, Math.PI/4, 10, new BABYLON.Vector3(0, 0, 0), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);
    let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;

    // add some objects

    // not salient objects
    const parent = new BABYLON.TransformNode('parent');
    parent.accessibilityTag = {
        isSalient: true,
        description: "A parent of all, of the root",
    }

    const boxDecs = new BABYLON.TransformNode('boxDecs');
    boxDecs.parent = parent;
    boxDecs.accessibilityTag = {
        isSalient: true,
        description: "A parent without salient children",
    }
    let boxDec1 = BABYLON.MeshBuilder.CreateBox("boxDec1", {size: 0.3}, scene);
    boxDec1.parent = boxDecs;
    boxDec1.position.x = -3;
    boxDec1.position.z = -4;
    let boxDec2 = BABYLON.MeshBuilder.CreateBox("boxDec2", {size: 0.3}, scene);
    boxDec2.parent = boxDecs;
    boxDec2.position.x = 3;
    boxDec2.position.z = -4;

    // salient objects, static
    let boxes = new BABYLON.TransformNode("boxes");
    boxes.parent = parent;
    boxes.accessibilityTag = {
        isSalient: true,
        description: "A group of boxes",
    }
    let box0 = BABYLON.MeshBuilder.CreateBox("box3", {size: 0.5}, scene);
    box0.parent = boxes;
    box0.position.z = -1;
    box0.position.y = 0.6;
    box0.accessibilityTag = {
        isSalient: true,
        description: "A small box in the middle of the scene",
    }
    let box1 = BABYLON.MeshBuilder.CreateBox("box1", {}, scene);
    box1.parent = boxes;
    box1.position.x = 1;
    box1.accessibilityTag = {
        isSalient: true,
        description: "A big box on the left of the small box",
    }
    let box2 = BABYLON.MeshBuilder.CreateBox("box2", {}, scene);
    box2.parent = boxes;
    box2.position.x = -1;
    box2.accessibilityTag = {
        isSalient: true,
        description: "A big box on the right of the small box",
    }

    // salient objects, interactive
    let sphereWrapper = new BABYLON.TransformNode('sphereWrapper');
    sphereWrapper.accessibilityTag = {
        isSalient: true,
        description: 'A group of spheres',
    };
    // sphereWrapper.parent = parent;
    let mat = new BABYLON.StandardMaterial("Gray", scene);
    mat.diffuseColor = BABYLON.Color3.Gray();
    let spheresCount = 6;
    let alpha = 0;
    for (let index = 0; index < spheresCount; index++) {
        const sphere = BABYLON.Mesh.CreateSphere("Sphere " + index, 32, 1, scene);
        sphere.parent = sphereWrapper;
        sphere.position.x = 3 * Math.cos(alpha);
        sphere.position.z = 3 * Math.sin(alpha);
        sphere.material = mat;
        const sphereOnClicked = () => {
            alert(`You just clicked ${sphere.name}!`)
        }
        const sphereOnLeftClicked2 = () => {
            alert(`You just LEFT clicked ${sphere.name}!`)
        }
        const sphereOnRightClicked = () => {
            alert(`You just RIGHT clicked ${sphere.name}!`)
        }
        sphere.accessibilityTag = {
            isSalient: true,
            description: sphere.name,
        };
        sphere.actionManager = new BABYLON.ActionManager(scene);
        sphere.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, sphereOnClicked));
        sphere.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnLeftPickTrigger, sphereOnLeftClicked2));
        sphere.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnRightPickTrigger, sphereOnRightClicked));
        alpha += (2 * Math.PI) / spheresCount;
    }

    console.log('Start the show!');
    AccessibilityRenderer.renderAccessibilityTree(scene);
    return scene;
};

Testing code 2:

/**
 * A simple GUI scene. Shows a card GUI for a easter event, with buttons to 'Join' event, and 'close' card.
 */
export let createScene = function ()
{
    let scene = new BABYLON.Scene(engine);
    let camera = new BABYLON.ArcRotateCamera('Camera', -Math.PI/2, Math.PI/2, 5, new BABYLON.Vector3(0, 0, 0), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);
    let light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;

    let wrapper = new BABYLON.TransformNode("Wrapper");
    wrapper.setEnabled(true);

    let egg = BABYLON.MeshBuilder.CreateSphere("Egg", {diameterX: 0.62, diameterY: 0.8, diameterZ: 0.6}, scene);
    egg.parent = wrapper;
    egg.accessibilityTag = {
        isSalient: true,
        description: "An easter egg"
    }
    egg.actionManager = new BABYLON.ActionManager(scene);
    egg.actionManager.registerAction(new BABYLON.ExecuteCodeAction(
        BABYLON.ActionManager.OnPickTrigger,
        () => {
            wrapper.setEnabled(false);
            card.setEnabled(true);
        })
    );

    let box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 0.3}, scene);
    box1.parent = wrapper;
    box1.position.x = 1;
    box1.position.z = 0.2;
    box1.accessibilityTag = {
        isSalient: true,
        description: "A small box on the left of the egg",
        isWholeObject: true,
    }
    let box2 = BABYLON.MeshBuilder.CreateBox("box2", {size: 0.3}, scene);
    box2.parent = wrapper;
    box2.position.x = -1;
    box2.position.z = 0.2;
    box2.accessibilityTag = {
        isSalient: true,
        description: "A small box on the right of the egg",
        isWholeObject: true,
    }

    let box = BABYLON.MeshBuilder.CreateBox("box", {size: 0.5}, scene);
    box.position.y = -0.65;
    box.parent = egg;

    // GUI
    let card = BABYLON.MeshBuilder.CreatePlane('card', {size: 3});
    card.setEnabled(false);
    card.accessibilityTag = {
        isSalient: true,
        description: "Easter Event Card"
    }
    card.position.z = 0.5;
    let adt = GUI.AdvancedDynamicTexture.CreateForMesh(card);

    let wrapFront = new GUI.Rectangle('TeamsCardUI_wrapFront');
    wrapFront.width = '80%';
    wrapFront.background = 'white';
    adt.addControl(wrapFront);

    let thumbnailBg = new GUI.Rectangle('TeamsCardUI_ThumbnailBg');
    thumbnailBg.width = '100%';
    thumbnailBg.height = '40%';
    thumbnailBg.background = 'gray';
    thumbnailBg.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
    thumbnailBg.top = 0;
    wrapFront.addControl(thumbnailBg);

    let url = 'https://raw.githubusercontent.com/TNyawara/EasterBunnyGroupProject/master/Assets/Easter_UI/Backgrounds/background_10.png';
    let thumbnailCustomized = new GUI.Image('TeamsCardUI_ThumbnailImage', url);
    thumbnailCustomized.alt = 'Background image';
    thumbnailCustomized.width = '100%';
    thumbnailCustomized.height = '100%';
    thumbnailBg.addControl(thumbnailCustomized);

    const titleFront = new GUI.TextBlock(
    'TeamsCardUIText_Title',
    'Event: Happy Hoppy'
    );
    titleFront.fontSize = 60;
    titleFront.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
    titleFront.textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    titleFront.paddingLeft = '7.5%';
    titleFront.top = '40%';
    titleFront.height = '10%';
    wrapFront.addControl(titleFront);

    let dateFront = new GUI.TextBlock('TeamsCardUIText_Date', 'Every day');
    wrapFront.addControl(dateFront);
    dateFront.fontSize = 40;
    dateFront.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
    dateFront.textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    dateFront.paddingLeft = '7.5%';
    dateFront.top = '50%';
    dateFront.height = '5%';
    dateFront.isEnabled = false;

    const timeFront = new GUI.TextBlock('TeamsCardUIText_Time', '00:00 - 23:59');
    wrapFront.addControl(timeFront);
    timeFront.fontSize = 40;
    timeFront.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
    timeFront.textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    timeFront.paddingLeft = '35%';
    timeFront.top = '50%';
    timeFront.height = '5%';

    const meetingDetail = new GUI.TextBlock(
    'TeamsCardUIText_GroupName',
    "Help the little bunny rabbits get ready for Easter! Look at all the different colors to decorate Easter eggs with and pick out the shapes you'd like to wear in the parade. "
    );
    wrapFront.addControl(meetingDetail);
    meetingDetail.fontSize = 40;
    meetingDetail.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
    meetingDetail.textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    meetingDetail.paddingLeft = '7.5%';
    meetingDetail.top = '55%';
    meetingDetail.height = '30%';
    meetingDetail.width = '100%';
    meetingDetail.textWrapping = GUI.TextWrapping.WordWrapEllipsis;

    let joinButton = GUI.Button.CreateSimpleButton('TeamsCardUIButton_Join', 'Join');
    joinButton.background = 'black';
    joinButton.color = 'white';
    joinButton.fontSize = 40;
    joinButton.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
    joinButton.textBlock.textHorizontalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    joinButton.top = '85%';
    joinButton.height = '10%';
    joinButton.width = '40%';
    wrapFront.addControl(joinButton);
    joinButton.onPointerClickObservable.add(() => {
        alert('💐🌼Happy Easter! 🐰🥚');
    });

    let closeButton = GUI.Button.CreateSimpleButton('TeamsCardUIButton_Close', 'X');
    closeButton.background = 'black';
    closeButton.color = 'white';
    closeButton.fontSize = 40;
    closeButton.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
    closeButton.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
    closeButton.textBlock.textHorizontalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    closeButton.top = '0';
    closeButton.height = '12%';
    closeButton.width = '15%';
    wrapFront.addControl(closeButton);
    closeButton.onPointerClickObservable.add(() => {
        card.setEnabled(false);
        wrapper.setEnabled(true);
    });

    console.log('Start the show!');
    AccessibilityRenderer.RenderAccessibilityTree(scene);
    return scene;
}

Proposal to port the CustomMaterial code into the base Material class, which would allow any material to have its shader customizable with external code fragments easily. This is proposed by https://github.com/BabylonJS/Babylon.js/issues/11334.

What is planned:

• a new ShaderCustomization class to store all the fragments and insert them into the actual shader code.
  • review special cases that rename result to a different variable. See if they are necessary and if there's a safer way to do them than a string replace.
• add ShaderCustomization as a new field in Material.
  • need to find a way to pass the vertex/fragment shader code to ShaderCustomization.
  • review customShaderNameResolve. This seems like a hack to enable CustomMaterial to work, but it seems useless now. Check if this can be removed or it'd be an unacceptable breaking change.
  • call the bind callbacks on ShaderCustomization from Material.
• review CustomMaterial and PBRCustomMaterial. These classes will be useless now that StandardMaterial and PBRMaterial will have the same functionality, but they may be kept as pure façade classes to keep old code working just the same.
• see if new code entry points on the shaders are useful.

Hello, I am currently doing some experiments with asm.js/webassembly and I have to say that the perfs potential is great! As I love babylon.js (Thanks guys!), I was thinking about porting It to asm.js/webassembly (Unity is actually generating some low level code for asm.js for optimization). I am working on a viewer to display and interact with quite big models (Via GLTF/GLB). Anyway, my question is : Do you think that It is worth the work?I am pretty sure that some of you guys thought about the same, and I am curious to know what do you think. Looking forward to reading your messages. Regards,

Following this forum post, here is the PR with the Structured Text implementation for TextBlock (GUI 2D). This is a working implementation but should be considered as a base to iterate over.

TLDR: This image was produced with a single TextBlock with word-wrapping and mixing color, bold, italic, underline and line-through.

API: instead of doing textBlock.text = "My text"... ... one would do textBlock.structuredText = [ { text: "My text " } , { text: "with bold" , fontWeight: "bold" } ]. This is the simplest structure.

Currently supported attributes:

• color (string | ICanvasGradient)
• underline (boolean)
• lineThrough (boolean)
• fontStyle (string)
• fontWeight (string)
• outlineWidth (number)
• outlineColor (string)
• shadowColor (string)
• shadowBlur (number)
• shadowOffsetX (number)
• shadowOffsetY (number)

Few notes:

1. For instance, I coded it so it doesn't change the older TextBlock code. So there is 2 codepath ATM. BTW I think the non-structured-text code should be completely removed, except for the .text API.
2. Also I noted that the TextBlock is often fully recomputed for no reason. E.g. simply opening dev-tools (which resize the screen but not the size of the TextBlock) have to compute word-wrapping again (which make a lot of context.measureText() calls). Maybe it would be better to have more level of dirtiness, e.g. have a ._innerContentIsDirty property, and only recompute lines when the text have changed (or the TextBlock bounding box size).
3. I would also advocate for some alternate properties for structured text input, e.g. bold: true would convert to fontWeight: bold, for instance I've tried to keep the API close to the existing API and internal stuff. But I think it would be better to feed the TextBlock with more intuitive attribute.
4. The current code of this PR is not perfect with the context.save() and context.restore() things.
5. Font-size and font-family are not supported, and don't know if it makes sense, and it make things more complicated (e.g.: computing line-height. It's not that hard, but I don't think it's worth the trouble, it looks like a niche use-case to me)

It's my first time writing TypeScript, so maybe there are few things off.

Looking to improve the skeleton viewer: Update the skeleton viewer with the new bone visualizer (where we can see bones size and rotation. Do all the testing you can to make it ubber robust. Integrate into inspector so when we are in debug mode we can move and rotate the bones with the inspector gizmos. Add an option to see bone weight and influences.

• [x] Skeleton Widget
• [x] Inspector Interactions
• [ ] Weight Shader
• [ ] Finalization and Demos

One additional thing that could be done here is remove PhantomJS from npm's package.json file but i don't know enough about Babylon's build environment to know if that will break anything else...

Advice welcome.

This is an update to the basis transcoder. This allows users to also take advantage of the UASTC option of the basis format.

The basis_transcoder.js and basis_transcoder.wasm are a direct copy from the Basis Universal repository.

Based on fneitzel prototype (Added prototype of InputTextArea), I improved the component to support the margin, the deletion (backspace/del.), the highlighting, deadkeys and copy/paste/cut shortcuts.

A lot of things remained to do :

• fix the CR on last line
• find why the text clip on single line during autostreching
• resolve todos
• clean/fix/update the code

My approach was highly naïve, so maybe a cleaner architecture will be necessery.

Here is the work which will happen until the release regarding our the WebGPU support:

• [x] Shader Auto Upgrade:
  • [x] Create Processor
  • [x] Auto attribs upgrade
  • [x] Auto varyings upgrade
  • [x] Auto textures upgrade
  • [x] Auto uniforms upgrade
  • [x] Auto UBOs detection
  • [x] Binding Upgrades
  • [x] Manage UBO in vertex + fragment
  • [x] Manage Array in UBOs for bones
  • [x] Manage Array in UBOs for morph targets
• [x] Manage Texture Sampling Modes
• [x] Manage Blending
• [x] Handle Canvas Resizing
• [x] Update WebGPU.d.ts
• [x] GLB support
• [x] Fix Full Build
• [x] Playground support
  • [x] Merge in Master
• [x] Dynamic Materials -> Defines Changes
• [x] Texture Support without WebGL back-end
• [x] Mapped Buffers
• [x] Render target support
• [x] Post Process support
• [x] First Cleanup and TODO WEBGPU pass
• [x] Raw Textures
• [x] Dynamic Texture Sampler Setting -> Filtering and Wrapping
• [ ] ~~Safari Preview Support (if shader choice has been made #6695)~~ (Not ready)
• [x] Compute Shader support
• [x] Support all the left over states (clear, stencil, depth, culling...)
• [x] Transform feedback and Occlusion Queries
• [x] Optimize uniform buffers and groups (dynamic buffer index)
• [x] Big Cleanup, tests, and docs
• [X] Command buffer "Reuse-Like" mechanism
• [ ] ~~Spector.js Support~~
• [x] Last Optimization phase
• [X] Optimize UBOs (like IBL/Scene and so on)
• [x] ** Release \o/**

If you are interested to contribute one of them, no problem, I am all about sharing ;-)

This PR implements Vertex Animation Textures, according to the discussion at https://forum.babylonjs.com/t/vertex-animation-texture-module-implementation/24576.

Suggestion of how to provide proper tests are welcome.

Code fragment to test this in the playground:

let baker = null, mesh = null;
    BABYLON.SceneLoader.ImportMeshAsync(
        "",
        "https://raw.githubusercontent.com/RaggarDK/Baby/baby/",
        "arr.babylon",
        scene,
        undefined
    ).then((importResult) => {
        mesh = importResult.meshes[0];
        baker = new BABYLON.VertexAnimationBaker(scene, mesh);
        return baker.bakeVertexData([{from: 1, to: 20, name: "aaa"}]);
    }).then((vertexData) => {
        const vertexTexture = baker.textureFromBakedVertexData(vertexData);
        mesh.material.bakedVertexAnimationMap.texture = vertexTexture;
        mesh.material.bakedVertexAnimationMap.animationParameters = new BABYLON.Vector4(
            0,
            20,
            0, 
            30
        );

        scene.registerBeforeRender(() => {
            mesh.material.bakedVertexAnimationMap.time += 1/60;
        });
    });

Specific points for code reviewers:

• [x] check if I implemented time correctly.
• [x] check IMaterialBakedVertexAnimationDefines. Does anybody see a define that we need? I don't see one.
• [x] IMaterialBakedVertexAnimationDefines.setAnimationParameters: I have no idea how to handle this. It's actually meant to be a set of parameters in an instanceBuffer, so I don't even think it belongs to that class. But I want to provide a helper function so it isn't an opaque call like mesh.instancedBuffers.bakedVertexAnimationSettings = new Vector4(...).
  • [x] Should it be part of Mesh?
  • [x] Is there a way to make it work for non-instance meshes as well? One may want to use this for a pure mesh.
  • [ ] Same for SPS, any way to make this work properly with SPS, or would instancedBuffers work for particles?
  • [x] same for thinInstanceSetBuffer.

Things left to implement, still open (feedback welcome):

• [x] change PBR material like StandardMaterial
• [x] Test this: Maybe this._mesh.skeleton.prepare() will work instead of doing a full this._scene.render() call.
• [x] automatic tests (suggestions here, please)
• [x] In the instanced case, the animation data will be provided by the bakedVertexAnimationSettings instance buffer of the mesh (that the user will have to create themselves - maybe with the help of the baker class). => see what the baker misc class can do to help with this.
• [x] add entries to the inspector:
  • [x] inspector/src/components/actionTabs/tabs/propertyGrids/materials/pbrMaterialPropertyGridComponent.tsx
  • [x] inspector/src/components/actionTabs/tabs/propertyGrids/materials/standardMaterialPropertyGridComponent.tsx
• [x] some way to serialize textures to files
• [x] some way to load textures from files
• [x] documentation with a playground example
• [x] credit @raggar
• [x] should I add #include<bakedVertexAnimation> and #include<bakedVertexAnimationDeclaration> in every .fx file that has #include<bonesVertex> and #include<bonesDeclaration>?

Open questions:

• [ ] should this be integrated into the animation system? Perhaps Mesh.beginAnimation() or Scene.beginAnimation() could use VATs when they are available? If so VATs should be called by the animation system. If this is the case I'll need some guidelines as to how this should be done.

Hi. I'm here with same the question again, sorry :( As you know, we've talked about that on issue 41 but I couldn't find any properties like "pivot" on the latest version. I've found applyTransform and _localTranslation but couldn't make them works. Let's say I have a box and rotated it on y axis. Then I wanna move it to local x axis. How can I do that?

Another question is that, how can I rotate the box on the local y axis (not world y axis)?

We are running into an issue where the videotexture we upload ended up drawn upside down on the canvas. After investigation, we found that the cause is this line failing.

https://github.com/BabylonJS/Babylon.js/blob/ff920e81b6b2f24d90aa64fb32f319a0727edf64/packages/dev/core/src/Materials/Textures/htmlElementTexture.ts#L101

I wonder if babylonjs has the ability to pass in the window/host object? In our case, since the element is created from a window object from another window, the global HTMLVideoElement actually refers to the one in the global window object. This causes this._isVideo = element instanceof HTMLVideoElement; to fail. I was able to verify this by

1. Checking the element in dev tool where instanceof does return false on the global HTMLVideoElement
2. Try calling instanceof host.HTMLVideoElement instead and it returns true
3. Patch the videotexture's _isVideo to be instanceof host.HTMLVideoElement and the code worked as expected.

This also means other instanceof can fail too in similar cases.

Add a fade out delay and changes to make behavior work correctly when fadeIn is triggered while the mesh is already visible/invisible or in transition.

The 5.39.0 Release introduces new bugs in the Babylon.d.ts

When type to build my lib against the new declaration file using TSC 4.6.2. It gets plenty errors now. It did not get those error before.

[17:25:24] Using gulpfile ~/Documents/Babylon/BabylonToolkit-Share/Manager/gulpfile.js
[17:25:24] Starting 'default'...
[17:25:24] Starting 'compile'...
types/babylon.d.ts(80474,9): error TS2416: Property 'executeStep' in type 'AmmoJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(delta: number, impostors: PhysicsImpostor[]) => void' is not assignable to type '{ (delta: number, impostors: PhysicsImpostor[]): void; (delta: number): void; }'.
types/babylon.d.ts(80497,9): error TS2416: Property 'applyImpulse' in type 'AmmoJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(impostor: PhysicsImpostor, force: Vector3, contactPoint: Vector3) => void' is not assignable to type '{ (impostor: PhysicsImpostor, force: Vector3, contactPoint: Vector3): void; (body: PhysicsBody, location: Vector3, impulse: Vector3): void; }'.
    Types of parameters 'impostor' and 'body' are incompatible.
      Type 'PhysicsBody' is missing the following properties from type 'PhysicsImpostor': object, type, _options, _physicsEngine, and 66 more.
types/babylon.d.ts(80577,9): error TS2416: Property 'setLinearVelocity' in type 'AmmoJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(impostor: PhysicsImpostor, velocity: Vector3) => void' is not assignable to type '{ (impostor: PhysicsImpostor, velocity: Vector3): void; (body: PhysicsBody, linVel: Vector3): void; }'.
    Types of parameters 'impostor' and 'body' are incompatible.
      Type 'PhysicsBody' is not assignable to type 'PhysicsImpostor'.
types/babylon.d.ts(80583,9): error TS2416: Property 'setAngularVelocity' in type 'AmmoJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(impostor: PhysicsImpostor, velocity: Vector3) => void' is not assignable to type '{ (impostor: PhysicsImpostor, velocity: Vector3): void; (body: PhysicsBody, angVel: Vector3): void; }'.
    Types of parameters 'impostor' and 'body' are incompatible.
      Type 'PhysicsBody' is not assignable to type 'PhysicsImpostor'.
types/babylon.d.ts(80786,9): error TS2416: Property 'executeStep' in type 'CannonJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(delta: number, impostors: PhysicsImpostor[]) => void' is not assignable to type '{ (delta: number, impostors: PhysicsImpostor[]): void; (delta: number): void; }'.
types/babylon.d.ts(80788,9): error TS2416: Property 'applyImpulse' in type 'CannonJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(impostor: PhysicsImpostor, force: Vector3, contactPoint: Vector3) => void' is not assignable to type '{ (impostor: PhysicsImpostor, force: Vector3, contactPoint: Vector3): void; (body: PhysicsBody, location: Vector3, impulse: Vector3): void; }'.
    Types of parameters 'impostor' and 'body' are incompatible.
      Type 'PhysicsBody' is not assignable to type 'PhysicsImpostor'.
types/babylon.d.ts(80808,9): error TS2416: Property 'setLinearVelocity' in type 'CannonJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(impostor: PhysicsImpostor, velocity: Vector3) => void' is not assignable to type '{ (impostor: PhysicsImpostor, velocity: Vector3): void; (body: PhysicsBody, linVel: Vector3): void; }'.
    Types of parameters 'impostor' and 'body' are incompatible.
      Type 'PhysicsBody' is not assignable to type 'PhysicsImpostor'.
types/babylon.d.ts(80809,9): error TS2416: Property 'setAngularVelocity' in type 'CannonJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(impostor: PhysicsImpostor, velocity: Vector3) => void' is not assignable to type '{ (impostor: PhysicsImpostor, velocity: Vector3): void; (body: PhysicsBody, angVel: Vector3): void; }'.
    Types of parameters 'impostor' and 'body' are incompatible.
      Type 'PhysicsBody' is not assignable to type 'PhysicsImpostor'.
types/babylon.d.ts(80865,9): error TS2416: Property 'executeStep' in type 'OimoJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(delta: number, impostors: PhysicsImpostor[]) => void' is not assignable to type '{ (delta: number, impostors: PhysicsImpostor[]): void; (delta: number): void; }'.
types/babylon.d.ts(80866,9): error TS2416: Property 'applyImpulse' in type 'OimoJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(impostor: PhysicsImpostor, force: Vector3, contactPoint: Vector3) => void' is not assignable to type '{ (impostor: PhysicsImpostor, force: Vector3, contactPoint: Vector3): void; (body: PhysicsBody, location: Vector3, impulse: Vector3): void; }'.
    Types of parameters 'impostor' and 'body' are incompatible.
      Type 'PhysicsBody' is not assignable to type 'PhysicsImpostor'.
types/babylon.d.ts(80876,9): error TS2416: Property 'setLinearVelocity' in type 'OimoJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(impostor: PhysicsImpostor, velocity: Vector3) => void' is not assignable to type '{ (impostor: PhysicsImpostor, velocity: Vector3): void; (body: PhysicsBody, linVel: Vector3): void; }'.
    Types of parameters 'impostor' and 'body' are incompatible.
      Type 'PhysicsBody' is not assignable to type 'PhysicsImpostor'.
types/babylon.d.ts(80877,9): error TS2416: Property 'setAngularVelocity' in type 'OimoJSPlugin' is not assignable to the same property in base type 'IPhysicsEnginePlugin'.
  Type '(impostor: PhysicsImpostor, velocity: Vector3) => void' is not assignable to type '{ (impostor: PhysicsImpostor, velocity: Vector3): void; (body: PhysicsBody, angVel: Vector3): void; }'.
    Types of parameters 'impostor' and 'body' are incompatible.
      Type 'PhysicsBody' is not assignable to type 'PhysicsImpostor'.
TypeScript: 12 semantic errors
TypeScript: emit succeeded (with errors)
[17:25:38] Finished 'compile' after 14 s
[17:25:38] Starting '<anonymous>'...
[17:25:41] Finished '<anonymous>' after 2.77 s
[17:25:41] Finished 'default' after 17 s

My Christmas contribution is trying to get AVIF support in GLTF, Babylon and Three.

I Did a PR for the GLTF spec which you can find here https://github.com/KhronosGroup/glTF/pull/2235

I have also done a PR for three here https://github.com/mrdoob/three.js/issues/25171

My thoughts are the following. Chrome recently gave up on jpeg xl which I personally thought was the superior replacement for gif, png, jpeg, webp.

The next best format after jpeg xl is avif, and since jpeg xl isn't happening I thought I could do a drive trying to improve the file size of gltf files by getting avif support.

Solution Add the not yet merged https://github.com/KhronosGroup/glTF/pull/2235 EXT_texture_avif as a supported extension.

Overview

This PR fixes complements this Babylon Native PR, it moves viewport update from been done immediately to be done using the command queue. The way this is currently been done on master, if multiple viewport updates are done in a single frame (like when you can more than one camera been rendered using different viewports) the viewport updates actually end up overriding each other and get lost by the time the command queue starts been processed.

Extra Information

This functionality started as a request in the forum: Forum issue Target web behaviour