Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Overview

Babylon.js

Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it.

npm version Build Status Average time to resolve an issue Percentage of issues still open Build Size Twitter Discourse users

Any questions? Here is our official forum.

CDN

Additional references can be found on https://cdn.babylonjs.com/xxx where xxx is the folder structure you can find in the /dist folder like https://cdn.babylonjs.com/gui/babylon.gui.min.js

For the preview release, use the following URLs:

Additional references can be found on https://preview.babylonjs.com/xxx where xxx is the folder structure you can find in the /dist/preview release folder like https://preview.babylonjs.com/gui/babylon.gui.min.js

npm

BabylonJS and its modules are published on npm with full typing support. To install, use:

npm install babylonjs --save

This will allow you to import BabylonJS entirely using:

import * as BABYLON from 'babylonjs';

or individual classes using:

import { Scene, Engine } from 'babylonjs';

If using TypeScript, don't forget to add 'babylonjs' to 'types' in tsconfig.json:

    ...
    "types": [
        "babylonjs",
        "anotherAwesomeDependency"
    ],
    ...

To add a module, install the respective package. A list of extra packages and their installation instructions can be found on the babylonjs user on npm.

Usage

See Getting Started:

// Get the canvas DOM element
var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
// CreateScene function that creates and return the scene
var createScene = function(){
    // Create a basic BJS Scene object
    var scene = new BABYLON.Scene(engine);
    // Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
    // Target the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());
    // Attach the camera to the canvas
    camera.attachControl(canvas, false);
    // Create a basic light, aiming 0, 1, 0 - meaning, to the sky
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
    // Create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
    var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE);
    // Move the sphere upward 1/2 of its height
    sphere.position.y = 1;
    // Create a built-in "ground" shape; its constructor takes 6 params : name, width, height, subdivision, scene, updatable
    var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false);
    // Return the created scene
    return scene;
}
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function(){
    scene.render();
});
// the canvas/window resize event handler
window.addEventListener('resize', function(){
    engine.resize();
});

Preview release

Preview version of 5.0 can be found here. If you want to contribute, please read our contribution guidelines first.

Documentation

Contributing

Please see the Contributing Guidelines.

Useful links

  • Official web site: www.babylonjs.com
  • Online playground to learn by experimentating
  • Online sandbox where you can test your .babylon and glTF scenes with a simple drag'n'drop
  • Online shader creation tool where you can learn how to create GLSL shaders
  • 3DS Max exporter can be used to generate a .babylon file from 3DS Max
  • Maya exporter can be used to generate a .babylon file from Maya
  • Blender exporter can be used to generate a .babylon file from Blender 3d
  • Unity 5 (deprecated) exporter can be used to export your geometries from Unity 5 scene editor(animations are supported)
  • glTF Tools by KhronosGroup

Features

To get a complete list of supported features, please visit our website.

Build

Babylon.js is automatically built using Gulp. Further instructions can be found in the documentation or in the readme at /Tools/Gulp.

Comments
  • Build Accessibility Tree from scene

    Build Accessibility Tree from scene

    (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

    image image

    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;
    }
    
    opened by mysunnytime 87
  • Making the base material shader customizable

    Making the base material shader customizable

    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.
    opened by brunobg 76
  • Port to asm.js/webassembly, is it worth?

    Port to asm.js/webassembly, is it worth?

    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,

    enhancement investigation 
    opened by innerground 68
  • StructuredTextBlock (GUI 2D)

    StructuredTextBlock (GUI 2D)

    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 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.

    opened by cronvel 64
  • Skeleton Viewer Updates

    Skeleton Viewer Updates

    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
    enhancement in progress 
    opened by thomlucc 61
  • Use FirefoxHeadless instead of the obsolete PhantomJs in tests.

    Use FirefoxHeadless instead of the obsolete PhantomJs in tests.

    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.

    opened by mrdunk 61
  • Basis transcoder update

    Basis transcoder update

    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.

    new feature 
    opened by vinhui 56
  • Creation of InputTextArea component

    Creation of InputTextArea component

    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.

    opened by Valerian-Perez-Wanadev 55
  • WebGPU Support

    WebGPU Support

    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 ;-)

    enhancement rendering engine in progress WebGPU 
    opened by sebavan 53
  • Baked vertex animation textures

    Baked vertex animation textures

    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.
    opened by brunobg 50
  • Moving on local coordinates

    Moving on local coordinates

    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)?

    enhancement 
    opened by maahirsnehasis 50
  • `instanceof` will return false if element is created from a different window object than the global one

    `instanceof` will return false if element is created from a different window object than the global one

    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.

    investigation texture 
    opened by nerocui 1
  • Add a fade out delay to FadeInOutBehavior

    Add a fade out delay to FadeInOutBehavior

    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.

    opened by ericwood73 0
  • Release 5.39.0 Has IPhysicsEnginePLugin Errors

    Release 5.39.0 Has IPhysicsEnginePLugin Errors

    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
    
    opened by MackeyK24 1
  • EXT_texture_avif implementation

    EXT_texture_avif implementation

    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.

    loaders glTF new feature 
    opened by leon 3
  • Fixed issue when setting ViewPort multiple times per frame in Native

    Fixed issue when setting ViewPort multiple times per frame in Native

    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

    native 
    opened by SergioRZMasson 0
Releases(5.40.0)
  • 5.40.0(Dec 29, 2022)

    Changes:

    • #13386: Hold shift when resizing to lock aspect ratio in GUI Editor
    • #13384: Add a parameter to CreateScreenshotUsingRenderTarget(Async) to allow …
    • #13383: Add some comments on docs reinforcing that it's only possible to upda…
    • #13382: More defensive handling of name property in Inspector
    • #13380: Change GUI Editor default image URL
    • #13379: Don't serialize internal shader materials
    • #13377: Fix crash when calling getGlowLayerByName when no effects have been created yet
    • #13376: Fix doc comment for audio listener rotation provider
    • #13373: Fix audio offset issues
    • #13375: Add audioListenerRotationProvider
    See More
    • #13371: Material plugins: Allow custom flags when injecting code with regexp
    • #13374: Workaround Tabs css name conflict
    • #13372: [GUI] If a new control is added on root, call the camera update function to…
    • #13369: Allow accessing private fields and methods of SPS

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(39.00 MB)
  • 5.39.0(Dec 22, 2022)

    Changes:

    • #13368: Add Transpose and Determinant matrix blocks
    • #13366: Fix #13364
    • #13364: Mesh indices are not passed into trianglePredicate
    • #13363: LineMesh: Fix the signature of dispose
    • #13362: Fix PBR Emissive with lightmap
    • #13358: LineMesh: Add an option to not dispose the material
    • #13360: docs: ES6 packages installation note in README.md
    • #13359: RenderTargetTexture: Add forceLayerMaskCheck property
    • #13356: Fix bug in glTF animation export
    • #13340: Fix rtt option default
    See More
    • #13355: VolumetricLightScattering: Add support for included only meshes
    • #13353: Rework Scene and GUI Editor connection
    • #13351: Some examples for matrices
    • #13349: DepthRenderer: Allow passing the sampling mode to the scene depth renderer
    • #13350: [Build] Move since-tag changes to the version update process
    • #13348: Allow adding a dynamic @since tag that adjusts automatically
    • #13209: Allow adding a dynamic @since tag that adjusts automatically

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(38.99 MB)
  • 5.38.0(Dec 15, 2022)

    Changes:

    • #13346: Update dependencies
    • #13347: NME: Allow 3 textures for the TriPlanar block
    • #13344: Output linting errors and warning to pipelines
    • #13343: EffectLayer: Allows to set the type of the main texture
    • #13342: NME: Add a CSS class to all graph nodes
    • #13339: NME: Fix of input types allowed for some blocks
    • #13341: [Playground] Update 4.2.1 to host from CDN

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(38.97 MB)
  • 5.37.0(Dec 9, 2022)

    Changes:

    • #13325: Add Fullscreen ADT to HTMLTwinRenderer
    • #13335: NME: Fix reusing the same temporary variable name in TextureBlock
    • #13334: fix missing plugin when enabling physics
    • #13317: The STL loader flips the faces
    • #13333: Make sure BONETEXTURE is always set with a value when supported
    • #13328: NME: Add a rgb output to the ImageProcessing block
    • #13331: allow independent video sources in VideoTexture
    • #13324: Feature request: add an option to VideoTexture to prevent video element state modification
    • #13332: VirtualJoystick - Stop iterating when canvas is released
    • #13330: ArcRotateCamera: Fix lower and upper beta limit type

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(39.71 MB)
  • 5.36.0(Dec 8, 2022)

    Changes:

    • #13327: Fix: ACE always opening with the first targeted animation selected
    • #13326: NME: fixed slowdowns when working in the editor
    • #13320: When rendering in a multi-canvas setup, always render the input view …
    • #13322: Mirror: Fix rendering when cullBackFaces is false
    • #13323: [PG] clear metadata when a new pg is created
    • #13279: PhysicsPlugin refactor
    • #13321: InputManager: Update logic for detecting when to pick
    • #13318: Particle System: Add a parameter to also clone textures when cloning a particle system
    • #13319: Fix bad uniform scale check for rotation gizmo
    • #13303: Support KHR_materials_emissive_stength in glTF export
    See More
    • #13291: Add a Fluid Renderer component
    • #13307: Fix: Animation Groups not showing the correct current frame value in …
    • #13305: Call the KHR_texture_transform exporter when exporting a GLTF file
    • #13311: Scene: Make sure dispose cleans up everything even if running custom code raises an exception
    • #13312: Add playback rate getter
    • #13314: [Test] update image from snapshot
    • #13309: Bump decode-uri-component from 0.2.0 to 0.2.2
    • #13310: typedoc update for POV methods

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(39.70 MB)
  • 5.35.1(Dec 3, 2022)

  • 5.35.0(Dec 1, 2022)

    Changes:

    • #13302: Fix #13301
    • #13301: Enabling gizmo when NME is open renders gizmo in NME preview panel instead of scene
    • #13300: Preserve camera control settings when reattaching camera controls
    • #13299: Fix Texture rebuild on context lost
    • #13298: [XR] Fix teleportation bug When changing controllers
    • #13297: [XR] clear as default when in layers multiview
    • #13295: InputManager: Fix Order and Execution of onPrePointerObservable
    • #13284: KTXDecoder: Update and add new universal transcoders
    • #13293: Cameras: Modified cameras to work under onPointerObservable
    • #13280: [Build] remove prepublish step, fix node.js issue on windows
    See More
    • #13281: Add static Reflect function to Vector3
    • #13290: Test the PickingInfo class
    • #13289: RTT: Make sure we increment scene frameId even in "check readiness" mode
    • #13288: PBRBaseMaterial fix getAnimatables JSDoc
    • #13287: Bump: Fix black spots in bump when no uv gradients
    • #13286: Ensure bloom blur size is consistent across hardware scaling levels
    • #13285: Test babylon scene materials
    • #13282: Mesh: Add forceWorldMatrixInstancedBufferUpdate property
    • #13283: Observable: Do not include deleted observers in hasObservers result

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(39.41 MB)
  • 5.34.0(Nov 24, 2022)

  • 5.33.2(Nov 22, 2022)

    Changes:

    • #13269: Ray picking: Fix flipping of the normal when calling getNormal
    • #13271: [Playground] Add accessibility package to playground
    • #13270: Addressing export issue
    • #13268: Test babylon pbrmaterial
    • #13266: adding integration tests for loaders and serializers

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(39.07 MB)
  • 5.33.1(Nov 18, 2022)

    Changes:

    • #13267: Fix prepareDefinesForClipPlanes returning true too often
    • #13265: fixing billboardMode mode for instanced meshes
    • #13264: Add confirmation message in PG when switching version
    • #13263: Fix glTF export texture dedupe code
    • #13214: glTF export root node removal fix
    • #13260: Add warning dialog when switching WebGL version in playground
    • #13262: Matrix: Update the doc for the LookAt functions
    • #13261: PBR material: Add missing test for the emissive texture in hasTexture
    • #13259: Add Sprite Manager Metadata

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(39.06 MB)
  • 5.33.0(Nov 17, 2022)

    Changes:

    • #13258: FreeCameraMouseInput: Fix for PointerLock Movement
    • #13257: Fix IKController with leaf node
    • #13256: PostProcess: Add hooks to alter shader code used by post processes
    • #13251: Fix dump tools premultiplied alpha.
    • #13249: Support ClipPlanes in Materials
    • #13254: WebGPU: Improve copy video to texture
    • #13253: Bump loader-utils from 2.0.3 to 2.0.4
    • #13255: import types to fix d.ts for inspector

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(39.06 MB)
  • 5.32.2(Nov 16, 2022)

    Changes:

    • #13252: Better handling of shader code that does not have a main function
    • #13250: InputManager: Fixed up/down picking on callback
    • #13233: Fix for FreeCameraMouseInput fluxuating input on multi-touch
    • #13246: array flat polyfill for Chakra
    • #13242: Fix #13239 Playground Warning
    • #13239: [PG] No warning dialog when changing engine versions
    • #13245: Extend dragPlanePoint doc on onDrag*Observables
    • #13237: Fix Gizmo Release Drag
    • #13240: Rotation gizmos with non uniform scaling
    • #13241: Support matrix in reciproqual block
    See More
    • #13229: Improve glTF material export code
    • #13232: [NME] New inverseMatrix block
    • #13234: Test babylon mesh lod 2
    • #13236: ShadowDepthWrapper: Fix shadows when wrapping a material using custom material plugins
    • #13235: 3d slider - dispose textures correctly
    • #13223: Graph Overhaul in VSM
    • #13231: Fix memory leaks
    • #13145: InputManager: Modify Picking to only happen with necessary scenarios
    • #13228: Fix redirects in code doc

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(39.03 MB)
  • 5.32.1(Nov 10, 2022)

  • 5.32.0(Nov 10, 2022)

    Changes:

    • #13225: STL file loader isBinary update
    • #13222: Texture: Add new copy texture to texture class
    • #13224: accessibility package not following the same version as core
    • #13220: Support correct spelling on center
    • #13218: Properly clear a selected line container component after it is seen
    • #13219: MeshExploder bugfix
    • #13217: Fix aliasing issue in webxr multiview
    • #13216: Bump loader-utils from 2.0.2 to 2.0.3
    • #13215: Change doc to match code
    • #13194: Remake OptionsLineComponent with custom options
    See More
    • #13213: WebGPU: Fixes errors in the console log
    • #13206: Test babylon mesh baking
    • #13212: Fix camera selection in sandbox for cameras with duplicated names

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(39.01 MB)
  • 5.31.2(Nov 7, 2022)

  • 5.31.1(Nov 7, 2022)

    Changes:

    • #13208: [Build] include assets when packaging shared ui components
    • #13201: Test babylon octree block
    • #13202: Test babylon mesh lod screen coverage
    • #13204: fix: switch back to the main scene using multiple canvases, and rende…
    • #13205: Cube textures: Fix updating data with engine.updateTextureData
    • #13190: Xr camera
    • #13200: Motion blur: Fix motion blur when not in the "object based" mode
    • #13199: AssetContainer: Fix crash when calling moveAllFromScene if environmentTexture is present
    • #13198: Add missing samplers to motion blur post process
    • #13196: Fix animatable loop
    See More
    • #13197: Shadows: Fix transparent shadows with ALPHABLEND transparency mode

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(38.99 MB)
  • 5.31.0(Nov 3, 2022)

    Changes:

    • #13195: WebGPU: Update TWGSL package
    • #13193: Reduce memory usage in bakeTransformIntoVertices
    • #13186: NME: fix wrong perturbed normals when using pre-existing tangents
    • #13192: Add information to Matrix API
    • #13188: Test babylon camera inputs manager
    • #13191: WebGPU: Add support for GLES3 to WebGPU GLSL processing
    • #13189: Test babylon octree block
    • #13184: Test babylon mesh lod
    • #13183: NME: fix wrong lighting for some of the preview meshes
    • #13187: NME: Fix preview not updated when changing the clamp settings in the Texture block
    See More
    • #13181: Test babylon transform node
    • #13177: Lights: Add support for multiple shadow generators
    • #13179: Fix bug rendering transparent meshes using their own materials in effect layer
    • #13178: fix nightly for BN
    • #13176: UniformBuffer: Improve error message in updateUniformArray

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(38.99 MB)
  • 5.30.0(Oct 27, 2022)

    Changes:

    • #13175: ADT: Added check to attachToMesh to prevent potential memory leak
    • #13172: [XR] Small fix for types in the webxr typing
    • #13173: Revert "Use the latest CDN nightly version and not unpkg"
    • #13171: NME: Fix and improve the HeightToNormal block
    • #13170: fixing screen coverage LOD for ortho camera
    • #13168: WIP VSM Initial definitions of Actions, Triggers and States
    • #13169: Use the latest CDN nightly version and not unpkg
    • #13167: Update glTF-Validator to 2.0.0-dev.3.9
    • #13166: Different ports for our hosted tools
    • #13160: Support relative urls in KTX2 configuration
    See More
    • #13165: (Local only) Fix ktx and loaders local-dev references
    • #13124: Vsm state view wip
    • #13162: Fix Camera Order Back Compat
    • #13157: Fix loading the gltf loaders and validations twice
    • #13156: ParticleSystem: Add BILLBOARDMODE_STRETCHED_LOCAL mode
    • #13154: WebGPU: Fix PGs errors / warnings
    • #13151: OIT fix : clearing front render target when no transparent mesh are rendered
    • #13152: quaternion PG examples
    • #13155: Attempting to fix missing renderingManager() typescript definition
    • #13146: Update Pressure Observer to latest version of the WICG spec
    • #13148: InputManager: Reset Swipe Status if we skip the next Observable notify
    • #12074: Build Accessibility Tree from scene
    • #13144: Take into account adaptWidth/HeightToChildren in the StackPanel
    • #13137: remove new methods
    • #13128: Flip normal if picking ray is in the same direction
    • #13143: InputManager: Fix for onPointerMove
    • #13141: Add Vector2 type to custom inspector properties
    • #13138: Move the viewer to the /viewer/ directory

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(38.95 MB)
  • 5.29.0(Oct 20, 2022)

    Changes:

    • #13129: Fix loading of GUIs with custom fonts and add font controls to InputText and InputPassword
    • #13136: InputManager: Fix for POINTERTAP firing when cursor is moved
    • #13131: Fix infinite sprites draw in frozen scenes
    • #13134: Fix usage of useReverseDepthBuffer with orthographic cameras
    • #13127: Workaround Firefox Leak
    • #13126: Fix Doc
    • #13122: Add correct placeholders to dropup button on sandbox.
    • #13123: Increase the maximum bloom threshold value on the inspector slider
    • #13120: Fix GUI json load.
    • #13121: Add API to enable/disable auto-build of the DefaultRenderingPipeline.
    See More
    • #13044: Implement Lazy Picking for POINTERMOVE
    • #13118: update dependencies and an audit-fix
    • #13076: Normalized return values and made vector classes use extendable types
    • #13116: Fix crash when using a custom material for LineMesh with an effect layer
    • #13106: First iteration of flexible grid layout for VSM
    • #13113: Publish @babylonjs/shared-ui-components package
    • #13114: forceSharedVertices with skinmesh support
    • #13111: Decals: Add support for rigged meshes + optimization for speed
    • #13110: Depth of field optimizations and cleanup
    • #13107: Encode and decode GUI Editor snippet as JSON when needed.
    • #13108: [XR] fix the samples returned when using multiview in WebXR
    • #13109: Fix glTF extension links and fix lint warnings
    • #13071: GLB header length check from exception to warning

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(36.39 MB)
  • 5.28.0(Oct 13, 2022)

    Changes:

    • #13105: WebGPU fix PCF shadows
    • #13104: [XR] update the webxr typings to match current state
    • #13101: Texture: Make some setters protected for properties not meant to be changed by end user
    • #11920: Implement IAnimatable on GUI controls
    • #13099: Fix #11920
    • #13102: A little fix: links referenced in sceneLoader.ts are not found
    • #12101: Adding a parameter for setParent() method that takes into account the pivot change
    • #13098: Fix #12101
    • #13097: Add extension support to assetsManager
    • #13095: PostProcessRenderPipeline: Made _renderEffects protected to allow subclassing
    See More
    • #13090: Texture inspector in Sandbox does not function correctly
    • #13088: Fix #13082 Shadow generator on NullEngine
    • #13082: NullEngine Cannot use a ShadowGenerator
    • #13089: Hide change for billboard hierarchy with a static flag
    • #13069: Texture inspector in Sandbox does not function correctly

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(36.32 MB)
  • 5.27.1(Oct 10, 2022)

    Changes:

    • #13086: Set target to ES2018
    • #13079: Fixed transform gizmos screen size
    • #13085: Fix declaration generation when "as" is used
    • #13083: Add epsilon to Quaternion.AreClose
    • #13077: Update waterMaterial.ts
    • #13060: Handle CSP violation errors when loading images.
    • #13078: remove in Place from conjugate comments
    • #13080: change CustomProceduralTexture constructor size type
    • #13081: prepass reflectivity channel support unlit materials
    • #13074: Material block-dirty mechanism
    See More
    • #13072: Fix blur kernel size in glow layer second try
    • #13070: Depth peeling renderer: Add excluded mesh support

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(36.29 MB)
  • 5.27.0(Oct 6, 2022)

    Changes:

    • #13062: [GLTF Serializer] Allow GLTF Exporter to export WebP images
    • #13064: [GUI] deal with dead codes correctly
    • #13068: fix glow layer kernel set
    • #13067: PBR: Reset all defines when enabling/disabling pbr components
    • #12989: Create mrtkv3 button [Contnued]
    • #13061: fix undefined self
    • #13057: Fix Texture Cache
    • #13056: Fix pipelineContext deletion in releaseEffect
    • #13054: InputManager: add a property to disable mesh checking in the onPointerOver event
    • #13055: Fix negative scaling issue with instances
    See More
    • #13053: Fix TmpVectors usage in Polar/Spherical toVector methods
    • #13052: Inspector: Raise the limit of samples in SSAO
    • #13051: Optional camera for all post processes
    • #13050: Provide Example PGs for Vector2s, for new Vector3s and a couple of Quaternions
    • #13040: Don't alter the scene's active cameras in the middle of taking a scre…
    • #13046: Inspector Doc Link Fix
    • #13045: Change the artboard color on VSM
    • #13042: Fix billboard scale in hierarchy
    • #13043: Fix wrong plugin name check for babylon serialization

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(36.28 MB)
  • 5.26.1(Sep 29, 2022)

  • 5.26.0(Sep 29, 2022)

    Changes:

    • #13036: Add applyPostProcess flag on ADV to optionally draw it after the post…
    • #13035: Remove unneeded prefixes and unused code
    • #13034: Initial VSM Design
    • #13038: Fix creation of cube textures from URL
    • #13039: [GUI] add picking for fullscreen ADTs
    • #13031: correction
    • #13033: Update Storybook to 7
    • #13029: Improve heap-testing memory leak results
    • #13032: Fix fallback value
    • #13012: Add function to get angles between two vectors (Vector3.GetAnglesBetweenVectorsForDirectionChange)
    See More
    • #13019: Restore wasDispatched to false when MaintainStateBetweenFrames is set to false
    • #13006: Add smoothing for freeCameraDeviceOrientationInputs
    • #13028: Fix default initialization.
    • #13026: Some fixes to OptionLineComponent related to wrong parent info showin…
    • #13022: Test babylon octree scene component active meshes
    • #13004: Add rotation from one vector3 to another
    • #13021: Fix instance buffer
    • #13023: Fix SSAO2 sample generation
    • #13016: [Build] Adding memory leak tests using heap snapshots
    • #13018: Fix particle system support for logarithmic depth
    • #13017: Nit
    • #13014: More features for the aggressive performance mode
    • #13015: Fix fast
    • #13011: Tiny perf fix
    • #13013: Fix some more lint warnings
    • #13000: Clean up implementation of KHR_animation_pointer
    • #13005: Add Logarithmic Depth Support on ParticleSystem
    • #13010: Fix #13005
    • #13009: Bump scss-tokenizer from 0.3.0 to 0.4.3

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(36.19 MB)
  • 5.25.0(Sep 22, 2022)

    Changes:

    • #13008: Fix cache issue
    • #12999: Move from @hidden to @internal
    • #13007: Fix effects onError notifications
    • #13001: Fix nme drop
    • #12998: [XR] Fix XR picking in utility laters
    • #12958: Add camera refresh rate support in XR enableSpectatorMode().
    • #12997: Update tubeBuilder docs.
    • #12990: Add operator functions to Polar and Spherical
    • #12996: Test babylon vertex buffer instance divisor
    • #12987: Texture UV animation performance
    See More
    • #12995: Fix #12987
    • #12992: test(particles.cloudPoint): add tests for intersectsMesh function
    • #12991: WebGPU: Fix geometry buffer renderer in WebGPU
    • #12994: [XR] Fix typings for the options passed
    • #12988: PrePass renderer: Fix engine current render pass id set too early
    • #12962: Issue158
    • #7: FPS Drops from 60 FPS to 30 FPS
    • #12920: Font Family Drowpdown
    • #12986: distance and normal in collision callback for ammojs
    • #6: Apply animation and animation curves on texture
    • #5: Where are the samples source code?
    • #4: Enable High DPI display support.
    • #3: Add Color tint support to Sprite and Layer
    • #2: trying to run babylon.js from jsfiddle results in error
    • #1: Object has no method 'createSphere'

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(36.18 MB)
  • 5.24.0(Sep 15, 2022)

    Changes:

    • #12978: Some fixes for NME CSS
    • #12985: Add maths polar export
    • #12983: GeometryBufferRenderer: Allow setting the depth texture format
    • #12984: Fix billboard translation with parenting
    • #12982: Fix Array Observers
    • #12942: Add polar and spherical coordinate system support
    • #12980: Fix Typos in Physics
    • #12979: If blob or data load the image directly, as no caching is needed.
    • #12975: Add teleportationCircleMaterial to WebXR teleportation options
    • #12976: Add createRadialGradient to ICanvas
    See More
    • #12974: test(math.vector): add tests for GetAngleBetweenVectorsOnPlane function
    • #12970: Babylon eslint plugin
    • #12973: Fix WebGPU for mobile support.
    • #12916: OIT aliasing fixes
    • #12972: [Build] ts config for tests (older syntax) for older node.js
    • #12869: 404 error trying to load “config.json” when using custom procedural texture with ShadersStore
    • #12971: Fix #12869
    • #12969: Giz misc
    • #12966: Freeze instance storage
    • #12964: Better support for freeze in aggressive mode
    • #12952: Minimize code in effect and pipeline context
    • #12963: new options for aggressive mode
    • #12960: Introduce autoFixFaceOrientation feature to solidParticleSystem

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(36.18 MB)
  • 5.23.0(Sep 8, 2022)

    Changes:

    • #12945: Optimize animation interpolate function
    • #12948: Use CSS Modules in Graph System
    • #12954: Performance mode
    • #12961: Fix Rendering Pipeline cameras
    • #12959: Stop vis test in puppeteer if debug enabled
    • #12957: Fix stl loader right handed
    • #12956: Update default linter
    • #12955: Fix quaternion blending math
    • #12865: DeviceInputSystem: Pull browser specific code into WebDeviceInputSystem
    • #12953: Use the right function when reaching limits
    See More
    • #12951: Fix some NME bugs.
    • #12949: Sprite double pick
    • #12947: Fix Basis Loader
    • #12944: Animation perf improvments
    • #12950: Improve optimize docstring.
    • #12946: Clear some values used during loading at the end of the load
    • #12943: Added AudioBuffer as parameter for Sound

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(36.16 MB)
  • 5.22.1(Sep 2, 2022)

    Changes:

    • #12941: switch to new PG
    • #12940: Fix reflection block empty output
    • #12937: Fix loading of base64 svgs
    • #12939: Empty array, no reassign
    • #12936: Reducing amount of code in Observable and Logger
    • #12933: Add Link offset properties to Gui Editor
    • #12931: ADT clone method needs special version
    • #12935: Fix #12931
    • #12932: Add dithering effect to image processing.
    • #12934: Time Factor for crowd agents update
    See More
    • #12905: Fix scene not clearing in some Default Rendering Pipeline with multicamera cases

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(36.14 MB)
  • 5.22.0(Sep 1, 2022)

    Changes:

    • #12925: Add support of clipplanes in GlowLayer
    • #12929: Revert "Fixed a bug from opening editor from PG"
    • #12928: Tiny fixes
    • #12899: Fixed a bug from opening editor from PG
    • #12927: Cameras: Add noPreventDefault as argument to attachControl call
    • #12926: Fix broken link in contributing.md to what's new.md
    • #12924: Fix Loading Cube Texture from basis file
    • #12923: Enforce parent blocks being empty in octree
    • #12148: [NME] Shortcuts for search and placement
    • #12921: Associated with #12148
    See More
    • #12919: Associated with #12148
    • #12918: Two small fixes
    • #12915: Fix wording found by @Popov72
    • #12913: Generate sampler name in buildBlock
    • #12912: Add type on blob creation
    • #12914: Clamp negative rgb values to zero to avoid parse errors in native
    • #12907: Fixing oit + derivatives branching
    • #12911: Add "metadata" support to "ReflectionProbe" class
    • #12910: TouchButton3D's getPressDepth(position) call has depth discrepancy
    • #12109: TouchButton3D's getPressDepth(position) call has depth discrepancy
    • #12901: Document the ranges of FromHSV's parameters
    • #12908: Fix drawing a rounded rectangle
    • #12909: Fix null error in late animation bindings
    • #12900: Bump trim-newlines from 1.0.0 to 3.0.1
    • #12904: InstancedMesh should be cloned with the new source mesh
    • #12897: [Build] Remove tslib reference in es6 packages (First step towards esm)
    • #12784: [Build] Remove tslib reference in es6 packages (First step towards esm)
    • #12902: Fix picking on ADV to account for texture coordinates

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(36.12 MB)
  • 5.21.0(Aug 25, 2022)

    Changes:

    • #12883: Testing: Update Safari Interactions test to point to BrowserStack
    • #12896: Store which pointerIds have been captured by the ADV so those are the…
    • #12891: Use LoadFile when loading images so that WebRequest custom headers ar…
    • #12893: [Build] Allow package name in local packages
    • #12894: [Build] make a PR a breaking change and document how to do it
    • #12890: [GE] Fix a bug where deleting a row/column with a control inside wouldn't …
    • #12887: Fix Drag/Release Behavior in GUI and Photo Dome
    • #12886: [Build] Allow package name in local files.
    • #12888: Create a separate callback for the FileButton
    • #1: Object has no method 'createSphere'
    See More
    • #12885: [Build] run the babylon server in visual test mode
    • #12847: Shared message dialog
    • #12884: Enable use of Tools.LoadScript in a WebWorker
    • #12880: Fix is ready in a few scenari (light dirty, rendering pass id, material changes outside render loop)
    • #12881: Improve MergeMeshes documentation.

    This list of changes was auto generated.

    Source code(tar.gz)
    Source code(zip)
    cdnSnapshot.zip(36.14 MB)
Simple yet powerful JavaScript Charting library built using d3.js

uvCharts Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of

Imaginea 267 May 20, 2021
An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API.

Bézier Curves An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API. How does it work? Bézier curves can be simply

nethe550 1 Apr 13, 2022
Canvas rendering library, Sprite manipulation of canvas

el-canvas Canvas rendering library, Sprite manipulation of canvas hello world <div id="app"><div></div></div> yarn add elem-canvas or npm i

null 15 Apr 13, 2022
Visualize your tech stack and database with a simple, beautiful, and interactive web app.

Stacify Visualize your tech stack and database with a simple, beautiful, and interactive web app. Why Stacify Why would you want to use Stacify? Well,

Isaiah Hamilton 1 Jan 20, 2022
A javascript library that extends D3.js to enable fast and beautiful visualizations.

d3plus D3plus is a JavaScript re-usable chart library that extends the popular D3.js to enable the easy creation of beautiful visualizations. Installi

D3plus 1.6k Dec 2, 2022
Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

adesso SE 85 Aug 23, 2022
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6.1k Jan 8, 2023
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Create PowerPoint presentations with a powerful, concise JavaScript API.

This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

Brent Ely 1.8k Dec 30, 2022
Simple tiny dependency graph engine, MobX inspired

?? Quarx Simple tiny dependency graph engine, MobX inspired Introduction In less than 200 lines of code and zero dependencies Quarx supports most of M

Dmitry Maevsky 22 Nov 2, 2022
The friendly, pragmatic and functional ID system

pika Combine Stripe IDs with Snowflake IDs and you get... pika! - the last ID system you'll ever need, combining pragmatism with functionality. Exampl

Hop 89 Jan 3, 2023
A friendly reusable charts DSL for D3

D4 D4 is a friendly charting DSL for D3. The goal of D4 is to allow developers to quickly build data-driven charts with little knowledge of the intern

Mark Daggett 429 Dec 5, 2022
Beautiful React SVG maps with d3-geo and topojson using a declarative api.

react-simple-maps Create beautiful SVG maps in react with d3-geo and topojson using a declarative api. Read the docs, or check out the examples. Why R

z creative labs 2.7k Dec 29, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 6, 2023
Beautiful charts for Angular based on Chart.js

ng2-charts slack Beautiful charts for Angular based on Chart.js Usage & Demo Samples using ng2-charts https://valor-software.com/ng2-charts/ Installat

Valor Software 2.2k Jan 4, 2023