Search the Community

Showing results for tags 'gltf'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 65 results

  1. I'm trying to create a simple (at least in my mind) scene where I have a ball rolling within the confines of a single mesh "room" I built in blender and exported as .gltf. However, no matter what I do, the ball seems to always go through the imported mesh and hit the ground below (which I kept to make sure the ball doesn't fall forever). Am I doing something wrong? In the playground there isn't a physics engine but locally I've tried cannon.js after reading that it supports MeshImpostors but I get the same result with or without a physics engine.
  2. Strange flickering on a glTF mesh with DefaultEnvironment
  3. mikhluz

    Farmer's Journey

    This is a simple runner (walker exactly:) ) made with Verge3D engine and runs directly in the browser. All was modelled in Blender, even texturing in 90% made in Blender: I just set up shaders and light and baked it to texture. In my pipeline I've also used 3ds Max, Krita, Webflow, Gimp and Audacity. The game was made without coding in two weeks by only one artist. Character and most of the assets based on concepts of Vihn Nguyen . Thanks to Forget the Whale for the soundtrack. Link to the game: DIRECT LINK You can also download all source files with mesh, textures and sounds HERE Some art related to the game can be found here on my ARTSTATION PAGE
  4. hummerbaendiger

    glTF import with custom extensions

    Hi everyone, I'm quite new to babylon JS and need a small bump into the right direction đŸ˜… Hoping not to fall for the XY Problem here's what I want to do: Going from a model created for Unity, that use special shaders, I want to export these to a WebGL solution. That way I can display these models on any supported browser (even mobile since Unity WebGL is not supported by most) My Approach: Create model in Unity3D with custom Shaders - done Export model to glTF, adding a custom extension to the material that holds all relevant information (specular maps, UV mappings, custom material properties that exceed the standard shaders) - done, made a special extension for the Unity exporter that handles my materials Import glTF to babylon and read out the custom material properties stored in the material extension - this is where I'm stuck Adapt the special Unity shader to work with the WebGL environment of babylon JS Display the model with custom shader and settings stored in glTF file Can someone tell me how to read custom extensions from GLTF within babylon JS? From the documentation I know that for now only the standard extensions are supported (KHR_Materials, draco compression, MSFT_lod, ...). Where do I have to start if I want to add a custom plugin or behavior for the glTF importer that understands my custom material extension? Thanks for your help :)
  5. Doug

    Hi Rich.  @rgk mentioned that you might be able to please add a "patron" badge to my forum profile?  Thanks very much!

  6. First, animationGroup.setWeightForAllAnimatables works for the UFO file, but not Is it because of the skeleton animation? /** * Start all animations on given targets * @param loop defines if animations must loop * @param speedRatio defines the ratio to apply to animation speed (1 by default) * @param from defines the from key (optional) * @param to defines the to key (optional) * @returns the current animation group */ public start(loop = false, speedRatio = 1, from?: number, to?: number): AnimationGroup { if (this._isStarted || this._targetedAnimations.length === 0) { return this; } for (const targetedAnimation of this._targetedAnimations) { this._animatables.push(this._scene.beginDirectAnimation(, [targetedAnimation.animation], from !== undefined ? from : this._from, to !== undefined ? to : this._to, loop, speedRatio, () => { this.onAnimationEndObservable.notifyObservers(targetedAnimation); })); } this._speedRatio = speedRatio; this._isStarted = true; return this; } In AnimationGroup, beginDirectAnimation was used. Will beginWeightedAnimation make weight and blending working? Second (I guess is't a different issue), scene.animationPropertiesOverride = new BABYLON.AnimationPropertiesOverride(); scene.animationPropertiesOverride.enableBlending = true; scene.animationPropertiesOverride.blendingSpeed = 0.02; That works with, but not with scene.animationGroups._targetedAnimations.animation.enableBlending (in both and The value of enableBlending is always undefined. BTW, Weight -1 means stop while 0 also means stop too. That's confusing.
  7. Hi! I'm doing a custom exporter from a source to get nice and structured glTF models as binary-glTF for my use case in BabylonJS. I modified it so that it comes equipped with the tags for MSFT_lod in place. I found I got it working to an extent with 3.1.1 version and I finally figured out that it's just simulating the loading of higher detail levels. So I checked out the latest as well. Trouble I'm seeing now after modifying the lod scheme in the loader for MSFT_lod, so that it would in fact use the addLODLevel function, is that the meshes that are part of the logical tree don't seem to hide away and I'm wondering why. I did also figure out a potential getaway card with the idea, that since I have put the submeshes to contain anything that belongs to a leaf of a node into the same subbranch of the tree, I can pretty much flip the mechanism around and just reconstruct the tree form branches and would-be-boundingboxes to form a makeshift LODding scheme. It's not what I wanted per say, as I would love to control the scheme in the exporter side. Now I am still thinking if even that will work if I cannot even make the branches disappear with addLODLevel(distance, null) calls. Help, please? Cheers!
  8. QUESTION: How to animate many things? GOAL: review ALL types of Animation Options available. Reduce various animations into Patterns or Templates or MINIMUMS. There are great docs on this... what follows are the practices of each. RESULT: Animation-Type-Templates Examples: - eyes to look at stuff - mesh.lookAt() - a generic low-poly arm to grab stuff: bone animation - scene.beginAnimation() import from blender. - a generic IK arm - constraints - a morphing eyebrow - morph targets (minimum). - interpolate - random attributes like color, or opacity - a motion path - Blender Animation Ranges like: idle, jump, attack, die, win ADDITIONS: - Bone Animations - Review from docs - mesh.spinTo(), moveTo(), scaleTo() - Dynamic Animation (powerful?) - BABYLON.Animation.createAndStartAnimation() There are a ton a great resources on all of these. Point is: They are all different Animation Types. Highlighting the tricky spots, referencing solutions, and... the great docs and playgrounds that already exist. UPDATE: a long list of successful blender animation export examples below.
  9. Howdy friends! I'm proud to share my first production WebGL project: (Scroll down to enter the game mode) Uses: GLTF assets Metallic Roughness Physics Camera Movements Force Touch on compatible devices Screenshots: Huge thanks to the community for helping answer my questions as I got up to speed! Especially @Deltakosh @bghgary @donmccurdy and @Wingnut
  10. Hi guys! I'm relatively new to both Babylon JS and 3D world and I'm trying to understand how things work in order to use Babylon JS in my current project. So please forgive me if I'll say nonsense. What I would like to do is import assets in my scene from external files, for example from a glTF or obj file, manipulate objects and then save the final 3D scene in .babylon format in order to read it back later. I'm getting problems when I import objects from glTF files and in particular for the textures. First of all, when I import the glTF file, for each texture a new blob in memory is created and the temporary object url (created with URL.createObjectURL()) is set to the texture url, losing the original file name. Secondly and more problematic, the UV mappings does not seem to work anymore when reading the serialized babylon json file. To explain better I created a playground sample. The sample loads objects from two files: the original avocado.gltf file (shown on the left in the scene) and the serialized baylon file (on the right). To get the babylon js file I just serialized the scene with the object obtained from the glTF file and I replaced in the resulting json the blob object urls with the file names of the textures, saved to the same path as the babylon file. As you can see, in the object on the right the texture coordinates are not mapped well anymore to the mesh vertices. However, if you look at the console, you can see that the uv data seem to be there and are the same in both cases. So what could be the problem? Am I doing something wrong? I hope I've explained myself well, Thanks, Matteo
  11. We are glad to present a maintenance release of the Blender version of Verge3D – yet it contains quite a large set of new functionality. Among the most exciting features are the optimized Facebook export, support for custom fonts, extremely efficient asset compression using the LZMA algorithm, lamp energy animation and almost 3 dozen of new puzzles! Read the full article here!
  12. Howdy, I seem to be having some bit of difficulty in getting the vertex data from an imported gltf asset via the asset manager. The loadedMeshes don't seem to expose the underlying meshes in a way that allows me to grab the vertices. Am I doing something wrong? Any playgrounds out there that might be of use here? JPS
  13. Live demo HERE! We are excited to announce the first significant update since the 3ds Max version of Verge3D was originally released last month. This update includes important graphics developments, such as the reworked physical material system, the support for edited normals and smoothing groups, shadows and transparency, adds even more puzzles to help your code-less scripting workflow, and fixes many issues reported by early adopters. Read the full list of new features in this acticle!
  14. Hi there, I started jesting around a few days ago on babylonJS and was wondering if it was possible to get the GLTF Loader with npm to import it as it is not in the babylonjs npm package. Thanks in advance for your help. Dos.
  15. Howdy, Is there any way to customize how the blobs from textures in the GLTFLoader are treated? I'm running into an issue where the blobs are violating our content security policy because they are appended to our base url instead of the approved CDN the assets/textures are coming from. Let's say I'm pulling a GLTF asset via: let myAsset = assetsManager.addMeshTask("", "", "", "my-asset.gltf"); So instead of: blob: We get:
  16. Howdy. I don't see to be able to access the materials associated with meshes in a gltf file while using the addMeshTask method. This was working as recently as yesterday. Has something changed in the last day?
  17. I getting this annoying error when loading GLTF 3D models on my Apache web server on Linux system. babylon.glTFFileLoader.js:2571 Uncaught TypeError: this._errorCallback is not a function at GLTFLoader._onError (babylon.glTFFileLoader.js:2571) at babylon.glTFFileLoader.js:3265 at e.callback (babylon.glTFFileLoader.js:3168) at e.notifyObservers (babylon.js:3) at babylon.glTFFileLoader.js:3180 at XMLHttpRequest.e.onreadystatechange (babylon.js:3) The code runs like a charm locally. I mean if I have the .gltf, .bin and the textures. When uploaded to the web server connected to a back-end Omeka (a digital asset management system) where we are storing our 3D models files with metadata. The following JS code is the one used, it loads Objs and gltf. Apparently the .gltf and .bin are fetched but not the textures. Although the JSON images field in the gltf contain the right names and paths. <script> function RenderLocal(RelativePath, MeshName) { console.log("I entered RenderLocal(RelativePath, MeshName) "); console.log("RelativePath: " + RelativePath + " MeshName: " + MeshName); //Making sure there is no trailing spaces var RelativePathTrimmed = RelativePath.trim(); var MeshNameTrimmed = MeshName.trim(); //Retrieving form Canvas var canvas = document.getElementById('renderCanvas'); //Creating an instance from the Engine and assigning it to the Canvas var engine = new BABYLON.Engine(canvas, true); //Loading text is controlled using loadingUIText : engine.loadingUIText = "Please wait for the Model to load..."; var createScene = function () { console.log("NEW - Trimmed RelativePath: " + RelativePathTrimmed + " MeshName: " + MeshNameTrimmed); //Creating a BABYLON scene var scene = new BABYLON.Scene(engine); //Clear the background scene as black scene.clearColor = new BABYLON.Color3(0, 0, 0); //Adding a light //var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene); var light = new BABYLON.HemisphericLight("Omni", new BABYLON.Vector3(0, 1, 0), scene); light.intensity = 1; //var loader = new BABYLON.AssetsManager(scene); // This creates and positions a free camera (non-mesh) var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); //Adding an Arc Rotate Camera // var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene); //camera.attachControl(canvas, false); //Adding an Arc Rotate Camera // var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene); // camera.attachControl(canvas, false); var assetsManager = new BABYLON.AssetsManager(scene); var meshTask = assetsManager.addMeshTask("skull task", "", RelativePathTrimmed, MeshNameTrimmed); //BABYLON.SceneLoader.ImportMesh("", RelativePath, MeshName, scene, ready); meshTask.onSuccess = function (task) { var myMesh = task.loadedMeshes[0]; task.loadedMeshes[0].position = BABYLON.Vector3.Zero(); // Create a default arc rotate camera and light. scene.createDefaultCameraOrLight(true, true, true); // The default camera looks at the back of the asset. // Rotate the camera by 180 degrees to the front of the asset. scene.activeCamera.alpha += Math.PI; // myMesh.computeWorldMatrix(true); // myMesh.refreshBoundingInfo(); // var meshCamera = new BABYLON.ArcRotateCamera("ArcRotateCamera", -Math.PI / 2, 1.2, 140, new BABYLON.Vector3(0, 0, -10), scene); // meshCamera.attachControl(canvas, false); // scene.activeCamera = meshCamera; }; meshTask.onError = function (task, message, exception) { console.log(message, exception); }; // Move the light with the camera scene.registerBeforeRender(function () { light.position = camera.position; }); assetsManager.onProgress = function (remainingCount, totalCount, lastFinishedTask) { engine.loadingUIText = 'We are loading the scene. ' + remainingCount + ' out of ' + totalCount + ' items still need to be loaded.'; }; assetsManager.onFinish = function (tasks) { engine.runRenderLoop(function () { scene.render(); }); }; assetsManager.load(); return scene; }; var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); //$("#renderCanvas").resizeCanvas(width = "800", height = "600"); // Resize window.addEventListener("resize", function () { engine.resize(); }); } var htmlInput_PHP = <?php echo json_encode( $item ); ?>; console.log("List in htmlInput_PHP: " + htmlInput_PHP ); var htmlInput_PHP_length = htmlInput_PHP.length; var OBJRegExp = '.obj'; var GLTFRegExp = '.gltf'; var ObjFileToLoad = ''; for (var i in htmlInput_PHP) { if (htmlInput_PHP[i].endsWith(OBJRegExp)|| htmlInput_PHP[i].endsWith(GLTFRegExp)) { console.log("htmlInput_PHP[i] is: "); console.log(htmlInput_PHP[i]); ObjFileToLoad = htmlInput_PHP[i]; } } var filename = ObjFileToLoad.replace(/^.*[\\\/]/, '') console.log("FileName Extracted: " + filename); var relativePath = ObjFileToLoad.replace(filename, ""); console.log("Relative Path Extracted is: "); console.log(relativePath); RenderLocal(relativePath, filename); </script> The following injection of PHP code in JS var htmlInput_PHP = <?php echo json_encode( $item ); ?>; Attached 2 images (console of Google Chrome + an image on the Network Inspector of Google Chrome) this is to fetch a PHP array from Omeka back-end and transforming it to JS so that we have the full paths of the gltf file, .bin binary file and all textures pertaining to the item chosen by the user as you can see in the images attached the list of paths are correct so what is the problem? Actually this code worked fine with other items in the .obj format. Is it possible the .manifest thing that keeps showing in the console or Network inspector or I reckon maybe the gltf JSON 'images' field should contain some relative path I am not sure so that Apache can go and fetch the textures? I am extremely confused Please any help is appreciated...
  18. Anyone tested Maya exporter for gltf format on macOs ? I don't understant how install it, Need it to be compiled ? thanks
  19. FreakTheMighty

    Export as gltf

    Is there any way to export a babylonjs scene as a gltf rather than the ".babylon" format?
  20. Hi, I've experienced weird problem when I try to rotate an imported gltf mesh. It turns super fast and seems not logic at all. Someone has any idea why? Or is it a bug? Here is the playground example to show this problem. Thank you.
  21. My gltf model looks transparent, the material is fine..what could have been wrong?
  22. Hello. I have this Seat.gltf model in my scene that I exported it from 3ds Max. Anyways, how do I change the diffuse texture on it? The seat imports with a black texture (SeatBlack_baseColorTexture.png). I'd like to change it to this (SeatLime_baseColorTexture.png). My goal eventually is to let the user pick from a variety of seat colors. Any pointers in the right direction would be appreciated. Thanks. var mySeat = BABYLON.SceneLoader.Append("./models/", "Seat.gltf", scene, function (scene) { }, null, function (scene) { var LimeTexture = new BABYLON.PBRMaterial("", scene); LimeTexture.baseColorTexture = new BABYLON.Texture("models/SeatLime_baseColorTexture.png", scene); mySeat.material = LimeTexture; });
  23. Hey Guys, I tried all things with glTF model, I can't texture it in live programmatically, I don't see examples or documentation anywhere. The issue is that when I try to re-texture (for example change albedo) with new BABYLON.DynamicTexture I have black texture. When I try to recreate a PBR Material, the texture doesn't stick on the UVs model. Its crazy ! The only way I see is to change the JSON glTF and reload the whole glTF with the mesh model ! If anyone can show me the syntax to do texturing on a mesh with glTF PBR syntax, it's welcome. thanks
  24. Hello community We have an object ( 2 meshes ) with multi material exported with 3dsmax to GLTF format. In inspector, we saw that the exporter splitted our object to 13 meshes. One mesh for each material. Is it possible to keep the same object but with a multi material option instead ? Thanks in advance. Have a nice day .
  25. Pierre Glibert

    [solved] 3DsMax to GLTF : inversed normals

    Hello community We catch a bug with the last exporter version of 3dsMax ( 0.36.0 ) In fact, the normals are inversed with the stable version of babylon.js and not with alpha 3.2.0-alpha7. You can see here the result of a mesh we export today : It working on Sandbox because it run with alpha version of Babylon. @Deltakosh, about that, is it possible to add to the Sandbox an option like playground to choose the stable or latest version ? Can you fixe the exporter for the stable version ? Thanks in advance, Have a nice day