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
    • Facebook Instant Games
    • 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 72 results

  1. JTerry

    GLTF Extras

    It looks like the gltf format allows for "extra" attributes to be included in the file. Below is a link to the gltf issue that talks about it and a screen shot of the gltf file after export with an extra. Does the babylonjs gltf loader pull that info in? I don't see it the mesh anywhere. Link to comment Thanks!!
  2. Hello Babylon community, When using the BABYLON.GLTF2Export feature, I noticed that textures I mirror horizontally (via diffuseTexture.vScale = -1) do not change the glTF export as desired. Is this a known / accepted limitation or is there a misunderstanding from my side? Also any workaround is appreciated (so far I mirror the texture again manually after exporting them). Here a playground example to illustrate the problem: Uncomment line #11 ( = // oStandardMaterialHightlighter.diffuseTexture.vScale = -1;) and compare the export results. Any help is appreciated (pinning @kcoley as you helped me so greatly last time)
  3. Hello Babylon community, I have been working with the BABYLON.GLTF2Export feature (which is by the way great to have!!!), and noticed an odd behavior of which I am not sure if it is intended. Check out this playground: It will create a simple scene with a texture and download the following 3 files to your computer: MyFile.gltf MyFile.bin _textures_BJS-logo_v3.png.png So texture image files are renamed during export by their folder path and file extension (in our example from "./textures/BJS-logo_v3.png" to _textures_BJS-logo_v3.png.png ") If I then try to open / drag and drop these in the sandbox, I get the following error message: #/images/0/uri: Failed to load './textures/BJS-logo_v3.png.png': 0 Changing line 169 in the file "MyFile.gltf" From: "uri": "./textures/BJS-logo_v3.png.png" To: "uri": "_textures_BJS-logo_v3.png.png" makes it work again in the sandbox and other software. Maybe the intention here is to indicate with "_textures_" that the image texture was originally in the sub-folder texture, but you cannot open the gltf-file any more like that. In my opinion the BABYLON.GLTF2Export should either Leave the texture file names as is (e.g. "./textures/BJS-logo_v3.png") so that as a user I have to save the gltf in the correct folder (typically relative to the Babylon HTML-app) and NOT include them in the export (i.e. only two files are downloaded), or Include the textures in the export but fix the uri to the correct relative value. Just a proposal to save others the time I spent figuring this out.
  4. I tried to display the following DRACO format glb model with Babylon JS Sandbox. However, the following error occurred and the model was not displayed. babylonjs.loaders.min.js:1 Uncaught (in promise) Error: #/meshes/38/primitives/0: undefined at babylonjs.loaders.min.js:1 (anonymous) @ babylonjs.loaders.min.js:1 Promise.then (async) (anonymous) @ babylonjs.loaders.min.js:1 Promise.then (async) p._loadAsync @ babylonjs.loaders.min.js:1 (anonymous) @ babylonjs.loaders.min.js:1 Promise.then (async) p.loadAsync @ babylonjs.loaders.min.js:1 (anonymous) @ babylonjs.loaders.min.js:1 Promise.then (async) l.loadAsync @ babylonjs.loaders.min.js:1 (anonymous) @ babylon.js:1 f @ babylon.js:1 n.onload @ babylon.js:1 load (async) m.ReadFile @ babylon.js:1 P._loadData @ babylon.js:1 P.Append @ babylon.js:1 P.Load @ babylon.js:1 (anonymous) @ babylon.js:1 P.LoadAsync @ babylon.js:1 n.reload @ babylon.js:1 n._processReload @ babylon.js:1 n.loadFiles @ babylon.js:1 n.drop @ babylon.js:1 e._dropHandler @ babylon.js:1 I confirmed that it can be displayed with BabylonJS Sandbox if it is a normal glb file which is not DRACO format.
  5. I converted one simple model in 3DMax 2018 to .babylon and .glb format using standart settings for babylon.js exporter. Then I tried to use it on my webpage, but the same exported .babylon and .glb models looked different, although they were represented by the same code. Babylon format looks predictable, as I imagined it, but the same glb model looks too dark for some reason, even light in scene don't make any difference. Babylon: (model ) GLB: (model MAX: (model Just don't understand, why glb looks different and what to do to make it looks like babylone one. Maybe it is obvious, but I really don't see it.😬
  6. 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 :)
  7. mikhluz

    Verge3D 2.5 for 3ds Max

    We are finally releasing Verge3D 2.5 for 3ds Max – it took longer than we thought, yet the amount of new features that we delivered this time was definitely worth waiting for. In this release are reworked physical materials, support for bipeds and character rigs, animation of material parameters, support for more texture settings, anisotropic filtering and various new puzzles to help creating even more engaging interactive scenarios without coding. Link to the Full Article Link to the Realtime Application Youtube Video
  8. I tried exporting glTF file using Inspector of Babylon.js Sandbox. However, it seems that the polygon is inverted and displayed. The version of Babylon.js is v3.3.0-alpha.11. I think that it is because FRONT_FACE is not CCW but CW.
  9. 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.
  10. Strange flickering on a glTF mesh with DefaultEnvironment
  11. 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
  12. Doug

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

  13. 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.
  14. 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!
  15. 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.
  16. 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
  17. 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
  18. 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!
  19. 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
  20. 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!
  21. 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.
  22. 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:
  23. 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?
  24. 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...
  25. Anyone tested Maya exporter for gltf format on macOs ? I don't understant how install it, Need it to be compiled ? thanks