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
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 32 results

  1. QUESTION: How to animate all the 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: - Wingnut wants a backhoe first thing? Ok.... um. : ) - eyes to look at stuff - mesh.lookAt() - a generic low-poly arm to grab stuff: bone animation - scene.beginAnimation() - a generic IK arm - constraints - a morphing eyebrow - morph targets - 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. So needed: an all of the above approach. Where a review of each, generates QUESTION's and methodology. Highlighting the tricky spots, referencing solutions, and... the great docs and playgrounds that already exist. Please supply tips or improvements ... Thanks!
  2. QUESTION: What are the minimum steps required to get a bone to export from blender and to be visualized with Debug.SkeletonViewer? Having trouble making a cube add a bone and then export to babylon. After a bunch of variations I see why... there are many steps: Applied: Object->Apply->Location & Rotation & Scale. And ensured Camera Icon is on Armiture (exporting). Weight Painted. Or setParent-> Auto Weights. And added Armiture modifier... still no bones. Tried two different loading types, two different export types (Tower of Babel), and then... #3 glTF. Fabulous! I'll leave the tips that I find below. GOAL: open blender > add 1 bone inside a cube or tube and > export to .babylon > then see bone with Debug.SkeletonViewer. PURPOSE: to run a bunch of test animations on bones (at runtime). CONTEXT: Blender version (2.78) and updated the exporter (babylon.js ver 5.4.2). Also Tower of Babel, and glTF exporter 1.0. UPDATE: glTF animations look promising. I'll provide answer here for minimum steps to animate GLTF Blender Export. Any tips of things to try in this experiment? Thx.
  3. gltf/glb issue

    can somebody check why we cannot load the attach glb file. If I drag and drop this into our sandbox at I get "Cannot set property '0' of undefined" error I am able to load this in other gltf viewers or vincent2.glb
  4. 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; });
  5. 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.
  6. The project "Polly" seems to have been created to introduce all new features of glTF 2.0. However, I tried project_polly.gltf displayed in Babylon.js + glTF Loader, skinning animation seems not to be displayed correctly. Babylon.js + glTF Loader + project_polly.gltf result:
  7. Shadeless Image Display

    What is the proper method for displaying images as textures without regard for lighting? I am using a picture as the texture for a mesh and I want it to display at its full brightness. I have seen the Playground examples for setting skybox cube textures to have this effect but that seems overly complex if all I want to do is disable lighting/shadow effects. I am using the glTF exporter from Blender and importing the glTF into my Babylon scene so some data is encoded into the glTF file already (it is basically a JSON file). It would be nice to be able to set the parameter in the glTF file. Or if it would make more sense to switch over to the Babylon exporter, I could do that. I am just trying to learn glTF.
  8. I tried displaying interleaved model BoxInterleaved.gltf. However, this format does not seem to be supported yet. Babylong.js 3.1 + glTF Loader BoxInterleaved.gltf result:
  9. Is there any glTF loader sendbox for to test exported glTF file online. Like Sandbox for .babylon files ? Greetings Ian
  10. I tried to display NormalTangentTest.gltf and TextureSettingsTest.gltf with Babylon.js 3.1 + glTF Loader. However, it seems that some of the tests that were successful at 3.0 failed in 3.1. Babylon.js 3.1 + glTF Loader result: Babylon.js 3.0 + glTF Loader result:
  11. Hello, I'd like to import a blender animation (a simple plane skinned to a single bone) via glTF into BJS-sandbox, but it looks weird, I get a black animated triangle. To keep it simplest as possible, I removed the texture in the attached GLTF-file. Please can someone help or provide a functional sample (gltf or ideally in blender format) Thanks in advance armature.gltf
  12. GLTF Normal Maps Not showing up

    Normal Maps are not working in gLTF! Maya 2014 x64 Plugin For Export from Maya to Collada COLLADA-MAYA-PC-2014 v1.6.58 [Link]( Collada2Gltf Version COLLADA2GLTF-2.0-windows-Release-x64 Just to be Clear, this is not a error on Babylon JS side as this is the case for Other Engines too! Maybe this happens due to complex conversion pipeline from fbx to gLTF! Download Files Here
  13. GLTF Loader

    Hello, my first steps with babylon. So far all good, however I'm struggeling with importing a gltf file (the official Duck.gltf example) in my Angular app whereas it works fine in a simple sample app. This works: I've included <script src="js/vendor/babylon.js"></script> <script src="js/vendor/babylon.glTFFileLoader.js"></script> and my main looks like this: // Get the canvas element from our HTML below var canvas = document.querySelector("#renderCanvas"); // Load the BABYLON 3D engine var engine = new BABYLON.Engine(canvas, true); // ------------------------------------------------------------- var createScene = function () { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); // glTF Files use right handed system scene.useRightHandedSystem = true; // Configuring camera var camera = new BABYLON.ArcRotateCamera("camera", 4.712, 1.571, 0.05, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, true); camera.wheelPrecision = 100.0; camera.minZ = 0.01; camera.maxZ = 1000; // This creates a light, aiming 0,1,0 - to the sky (non-mesh) var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Default intensity is 1. Let's dim the light a small amount light.intensity = 0.7; // Append sample glTF model to scene BABYLON.SceneLoader.Append("/BabylonTest/data/", "Duck.gltf", scene, function (scene) { }, null, function (scene) { alert("error"); }); // camera.zoomOn(scene.meshes); return scene; }; // ------------------------------------------------------------- // Now, call the createScene function that you just finished creating var scene = createScene(); // Register a render loop to repeatedly render the scene engine.runRenderLoop(function () { scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () { engine.resize(); }); This doesn't work: I'm constructing this class in the ngOnit() function and calling the addGltf() function on a button click. Creating a sphere this way works. I've tried npm install 3.1 alpha and 3.0 (which seems to install 3.0.7) import * as babylon from "babylonjs"; export class BabylonViewer { private canvas: HTMLCanvasElement; private engine: babylon.Engine; constructor(canvasId: string) { this.canvas = <HTMLCanvasElement>document.getElementById(canvasId); this.engine = new babylon.Engine(this.canvas, true); } addGltf() { const root = "/api/file/"; const file = "Duck.gltf"; const scene = new babylon.Scene(this.engine); scene.useRightHandedSystem = true; const camera = new babylon.ArcRotateCamera("camera", 4.712, 1.571, 0.05, babylon.Vector3.Zero(), scene); camera.attachControl(this.canvas, true); camera.wheelPrecision = 100.0; camera.minZ = 0.01; camera.maxZ = 1000; // This creates a light, aiming 0,1,0 - to the sky (non-mesh) const light = new babylon.HemisphericLight("light1", new babylon.Vector3(0, 1, 0), scene); // Default intensity is 1. Let's dim the light a small amount light.intensity = 0.7; // Append sample glTF model to scene babylon.SceneLoader.Append(root, file, scene, function (scene) { }, null, function (scene) { alert("error"); }); this.engine.runRenderLoop(() => { scene.render(); }); window.addEventListener("resize", () => { this.engine.resize(); }); } } The output in Chrome is core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode. babylon.max.js:6006 BJS - [20:27:16]: Babylon.js engine (v3.0) launched babylon.max.js:6006 BJS - [20:27:21]: importScene of unknown core.es5.js:1020 ERROR TypeError: Cannot read property '0' of undefined at Function.webpackJsonp.../../../../babylonjs/dist/preview release/babylon.max.js.Color4.FromArray (babylon.max.js:578) at Object.load (babylon.max.js:46606) at loadSceneFromData (babylon.max.js:46322) at XMLHttpRequest.request.onreadystatechange (babylon.max.js:5557) at XMLHttpRequest.wrapFn (zone.js:1075) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191) at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498) While debugging I've seen that in the load function some checks for undefined are missing, e.g.: scene.clearColor = BABYLON.Color4.FromArray(parsedData.clearColor); scene.ambientColor = BABYLON.Color3.FromArray(parsedData.ambientColor); if (parsedData.gravity) { scene.gravity = BABYLON.Vector3.FromArray(parsedData.gravity); } I fixed those but later in crashed loading the meshes. So, I suspect there's something else wrong. May it be that the GLTF loader is not loaded properly by using npm? Cheers and thanks, Jan
  14. GLTF 2 loader doesn't handle alpha properly when only supplied as a factor. Attached is a model (glb and a zipped non-binary) to test. The globes and the filament inside should show up as semi transparent to simulate glass but come out fully reflective (see screenshot). This was tested with 3.0 and 3.1 preview. brys8801_v6_lod1.glb
  15. This Issue has been separated from KhronosGroup/glTF-Sample-Models#83 (comment) I also tried Blender 2.78c and glTF 2.0 Explorter. First I tried to display EmaSimpleSkin.dae on Blender. Next, I tried to display the glTF 2.0 file exported from Blender in Babylon.js. Babylon.js + EmaSimpleSkin.gltf result I thought it was a problem with the exporter, but because it will be displayed in the Vulkan Renderer, there is a possibility of glTF 2.0 Loader problem in Babylon.js.
  16. I exported a gltf model from blender but it's not showing, the debuglayer showed that the model is there, i scaled it but it's still not showing: here's a PG
  17. Animation workflow and fbx

    I'll be participating in a game jam in a month or so, and was hoping to use Babylon.js. However, I'm finding the workflow... less than optimal. I'd like to able to use models and animations both from online resources and created my 3D artists on the day. The most common format appears to be fbx, which sadly is not supported by Babylon. So additional steps are required to convert to the .babylon format (with the use of yet another program, be it Blender or Unity). This is just too time consuming, arduous and error prone. A specific example: model appears inside-out and no way to switch facing between back, front and front_and_back. I know Babylon is planning to support glTF, but the standard for glTF 2.0 has only just been finalised and is not presently supported widely. I would strongly recommend the support of .fbx if for nothing more than access to the existing library of assets. So, questions: Is there a way of streamlining the workflow? There are many great looking demos available. What pipeline did they use? What format were the assets?
  18. I am using the GLTFLoader to load a scene which contains lots of meshes with textures that have alpha transparency. The meshes seem to be in the correct place in space but when panning around it seems that order that the transparent objects are rendered is backwards -- the transparent texture which should be rendered first is rendered last (that is, the one in the front is behind and the one in the back is in front). I don't find a lot of documentation of how to update the depth buffer for alpha texture rendering. Is there a call I should make to recompute the scene to get depths correct? Is this just a bug in the GLTFLoader?
  19. Hello Babylon.js Community, I am new to Babylon.js but very impressed by the framework so far. Nevertheless I would like to stay as much JS-framework agnostic as possible. Therefore I wish to use glTF as the data format so that I can (if required) switch to other frameworks and also take advantage of the many tools currently popping up ( regarding this new format specially created for WebGL. So first I wanted to create a custom build including the glTF-Loader and stable 2.5 version using the “Babylon.js Generator” ( But for some reason this doesn’t work. Anyone can give me a hand? Any help is appreciated.
  20. I added a sample of glTF Materials Common to the sample list below. However, it was all displayed in gray. Is Babylon.js + glTF Loader unsupported by glTF-MaterialsCommon? glTF-MaterialsCommon/Duck.gltf glTF-MaterialsCommon/Box.gltf
  21. I tried the glTF 1.1 sample with some glTF Loader. Related: I would like each library to be all green.
  22. Hi I'd like to use the latest version of gltf File Loader. However, JS version loader could not be found. I attempted the "gulp loaders" command but I was not sure how to use gulp, and I could not create a JS version. Could someone kindly offer compiled Babylon.js glTF File Loader? or It will be helpful if you tell me how to compile. Thanks.
  23. Hello I am unable to apply material to objects loaded in .gltf/.glb format but am able to do so for objects loaded in .obj formal. I have attached chair_gltf.png, chair_obj.png and relevant code below. I would like to create a demonstration in the babylon playground but cant since I dont know how to add assets to the playground. Questions 1) Can someone help me figure out how to apply materials to models loaded via gltf? 2) How does one add static assets to babylon playground? function addObject(scene, model){ var scale = model.scale; var pos = function(t) { t.loadedMeshes.forEach(function(m) { console.log(m.material) m.scaling = new BABYLON.Vector3(scale,scale,scale); let materialSphere1 = new BABYLON.StandardMaterial("texture1", scene); materialSphere1.alpha = 0.5; materialSphere1.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7); m.material = materialSphere1; console.log(m.material) }); }; var loader = new BABYLON.AssetsManager(scene); let file_dir = dirname(model.gltf_url).substring(1) + '/' let file_name = basename(model.gltf_url) var object = loader.addMeshTask(model.title, "", file_dir, file_name); object.onSuccess = pos loader.load(); }
  24. Hello! I am trying glTF Loader now. VC.gltf (Virtual City) sample contains 15 cameras. I understood how to switch cameras using Three.js + glTF Loader. However, I do not know how to switch it with Babylon.js + glTF Loader. Three.js + glTF Loader + VC.gltf (working) -> Babylon.js + glTF Loader + VC.gltf (not work) -> Can anyone tell me how to switch embedded cameras with Babylon.js + glTF Loader? Thanks.