Search the Community
Showing results for tags 'glTF'.
-
Hi. I glad to introduce you a new game that was created by our team - it's called Arcade Race and it's a simple racing game where you need to go from checkpoint to checkpoint trying to do it in short time. It's a 3d game but made in old pixel game style like Interstate76 or first Carmagedon . Please don't judge it seriously it's just a fan art inspired by old games. It works directly in browser and mobile devices with friendly controlls. Enjoy. It was made using Verge3D engine in Blender with help of Inkscape and Gimp. Here's a link to the game And some screenshots
-
Howdy friends! I'm proud to share my first production WebGL project: https://cash.me/reps (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
-
When I downloaded the "SceneLoader.Append" demo code into my computer, then changed to my own .gltf file and run it on the chrome browser, but nothing was happened. I would be very grateful if someone could help me. By the way, I attached my test code below. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Babylon.js sample code</title> <!-- Babylon.js --> <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script> <script src="https://preview.babylonjs.com/ammo.js"></script> <script src="https://preview.babylonjs.com/cannon.js"></script> <script src="https://preview.babylonjs.com/Oimo.js"></script> <script src="https://preview.babylonjs.com/gltf_validator.js"></script> <script src="https://preview.babylonjs.com/earcut.min.js"></script> <script src="https://preview.babylonjs.com/babylon.js"></script> <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script> <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script> <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script> <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script> <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script> <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script> <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script> var canvas = document.getElementById("renderCanvas"); var delayCreateScene = function () { // Create a scene. var scene = new BABYLON.Scene(engine); // Create a default skybox with an environment. var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene); var currentSkybox = scene.createDefaultSkybox(hdrTexture, true); // Append glTF model to scene. BABYLON.SceneLoader.Append("./", "test.gltf", scene, function (scene) { // 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; }); return scene; }; var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); var scene = delayCreateScene(); engine.runRenderLoop(function () { if (scene) { scene.render(); } }); // Resize window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html>
-
Hi there I downloaded Blender 2.8 with the new GLTF exporter. Now i'm stuck and my babylon.js script won't open the 3d model anymore. If i drop the model in the three.js viewer it looks fine, an old model made with blender 2.79 works fine also in babylon.js but the new GLTF (separate) does not. Here's the console of the chrome browser: Thank you
-
Hi everybody! I am a newbie in Babylon; please excuse me for minor mistakes. I am trying to import multiple objects in .glb format defining their position,rotation and scale. On the inspector, it seems like I am able to do that. I can see the meshes on scene explorer but in the scene I am not able to see although I set the camera position close to the mesh position. In addition, I realized another problem. While the root module has the correct rotation values; submeshes don't. They are assigned also quaternion rotation value. You can find my piece of code attached. I would appreciate if you could tell me where I am doing wrong. Thank you! gltfimport.zip
-
I am trying to import in my Three.js project a gltf model exported from Blender. The problem is that, in Three.js, all models materials are black (color: Color {r: 1, g: 1, b: 1}) while originally the mesh is green. I find this topic (http://www.html5gamedevs.com/topic/41196-object-always-exports-black-3dsmax-gltf-export/) that show how to solve the problem in 3dsmax, but how to solve for blender? Here my code in Three.js: var loader= new THREE.GLTFLoader(); loader.load( 'http://localhost/planegeometryeditor/meshes/map/firstterrain.gltf', function(gltf) { scene.add(gltf.scene); }, undefined, function (error) { console.error(error); } );
-
Hi, I have noticed that there is a difference in displaying .glb files between desktop and mobiles e.g. on Facebook. The files exported from babylonjs.serializers using GLTF2Export.GLBAsync() or 3DS max + Babylon JS plugin has strange reflection despite of specular=0, roughness=1, metallic=0 etc. I have tried many combination with Std and PBR materials and I always have this strange reflection on mobiles. I decided to try Modo and the effect is much better. So probably you have a bug in babylonjs.serializers and 3DS max plugin. I have noticed that in attached file called "babylonJS.glb" which was exported from 3DS max "roughnessFactor" is 0.9 and should be 1.0 if I use standard material with specular = 0. GLB files: babylonJS.glb Modo.glb Screenshot from the smartphone (Android/iOS, the effect is the same), 3DS max + Babylon JS plugin and the same effect after using babylonjs.serializers.js GLTF2Export.GLBAsync() method: Screenshot from the smartphone when Modo was used (on smartphone the box is totally black - so the effect is actually perfect). And the effect which we can see on the desktop web browser (as you can see the file exported from Babylon JS is not totally black, but it should be. However the worst thing is this reflection on mobiles):
-
Hi, Please provide export Environment Map feature to Maya to GLTF exporter plugin. For my requirements, this feature is a must. (I designed my client side app so generic that it cannot have set environment map per model basis) Are there any plans to provide this?
-
Hello, recently i met a problem and it really troubles me. I use BABYLON.SceneLoader.Append() to load the .glb file(export from Max2babylon plugin) and it failed. The browser said: "Unable to load from ../BIM/incremental/helin.glb: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse". then i load the .gltf file, The browser said: "Unable to load from ../BIM/incremental/helin.gltf: loadAssts of unknown". It's really wired, huh? After that i use the same project load .babylon file(also export from Max2babylon plugin) correctly to make sure it's not the problem with project. And i test to load the .gltf file in a plain html file and it works, so i think it's no the problem with the file and the peoject. So i think it's a bug.(no offense) -
hi guys. Im new-comer babylon world! I have a question, I have load glb file, then use Oimo physics. so this glb-loaded Cube starting Let's dancing. why?? plz look this! https://playground.babylonjs.com/#6UZ7BJ#1
-
I think I spot an issue when importing a gltf file containing instanced meshes. It simply seems to not instanciate meshes, but make copies instead. Here the gltf json showing meshes are correctly exported: and the result (playground link, check the console) same scene exported as .babylon is OK (playground link)
-
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 https://github.com/KhronosGroup/glTF-Blender-Exporter/issues/15 Thanks!!
-
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: http://www.babylonjs-playground.com/#1GXSPK#17 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) -
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: http://www.babylonjs-playground.com/#1GXSPK#16 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 https://sandbox.babylonjs.com, 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.
-
I tried to display the following DRACO format glb model with Babylon JS Sandbox. https://github.com/mrdoob/three.js/blob/dev/examples/models/gltf/LittlestTokyo.glb 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. https://sketchfab.com/models/94b24a60dc1b48248de50bf087c0f042
-
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: http://www.babylonjs-playground.com/#A2W7U6 (model https://pycz.github.io/test.babylon ) GLB: http://www.babylonjs-playground.com/#PF7MH0 (model https://pycz.github.io/test.glb) MAX: (model https://pycz.github.io/test.max) 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.? -
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 :)
-
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. -
https://www.babylonjs-playground.com/#SVHR8A 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. -
Strange flickering on a glTF mesh with DefaultEnvironment www.babylonjs-playground.com/#T7A2L7#3
-
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
-
First, animationGroup.setWeightForAllAnimatables works for the UFO file https://www.babylonjs-playground.com/#PSR2ZX#17, but not https://www.babylonjs-playground.com/#PSR2ZX#18. 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.target, [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 https://www.babylonjs-playground.com/#BCU1XR, but not with scene.animationGroups._targetedAnimations.animation.enableBlending (in both https://www.babylonjs-playground.com/#PSR2ZX#17 and https://www.babylonjs-playground.com/#PSR2ZX#18). The value of enableBlending is always undefined. BTW, Weight -1 means stop while 0 also means stop too. That's confusing.
-
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! -
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.
-
I am using Skybox in the sample below. However, it takes a considerable time to display it compared to without using Skybox. It is 4 to 5 seconds to experience. I tried it in the following two environments, but both are felt late. PC1: ThinkPad X260 + Windows 10 Version 1709 (OS Biuld 16299.371) + Intel(R) HD Graphics 520 PC2: Desktop PC + Windows 10 Version 1803 (OS Build 17133.73) + NVIDIA GeForce GTX 660 Is the usage incorrect? I will be saved if you give me advice. https://cx20.github.io/gltf-test/examples/babylonjs/index.html?model=Duck&scale=1 // Skybox var cubeTexture = new BABYLON.CubeTexture( "../../textures/cube/skybox/", scene, ["px.jpg", "py.jpg", "pz.jpg", "nx.jpg", "ny.jpg", "nz.jpg"] ); scene.createDefaultSkybox(cubeTexture, true, 10000); It seems it takes 4 to 5 seconds to display irrespective of cache with or without cache. BTW, The following is a sample of Three.js. I am using Skybox, but it takes less than 1 second to display. https://cx20.github.io/gltf-test/examples/threejs/index.html?model=Duck&scale=1
