Search the Community

Showing results for tags 'babylonjs'.

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

Found 340 results

  1. I made a lot of progress on my 3D Browsing idea built on BabylonJS, so I thought I would check in here to share and get some feedback. As of December, the U.S. patent office approved my conceptual patent for 3D Browsing! It is being issued. I define 3D Browsing as a combination of a 3D Game and browsing the Internet; 3D Buildings are websites Ability to walk between websites with continuous animation. Connected on a grid (mapped) - 3D Community Distributed system - ability to be hosted everywhere on the Internet. I fetch and load 3D Objects as you Walk near and remove them as you Walk away. (I hot-swap what it loaded) My implementation on has a BabylonJS foundation. I created a web based 3D CMS ( that uses the building blocks (meshes and csg) to easily build: 3D Buildings - can be a building, bridge, or any rendered 3D assembly, 3D Communities - represents the 3D Scene and everything between the buildings; This is also the map placement of 3D Objects., and 3D Things - The smaller items that you build once and use many times like tables, chairs, trees, etc. I set it up where a 3D Building can be browsed separately, maintained in one place, and yet added to many 3D Communities. I added Action Zones to trigger animation such as opening a sliding or swinging door when you walk near. I have Load Zones that trigger fetching data to render a 3D Building or part of a 3D Building. (Same for 3D Communities and 3D Things). I did some tutorials and videos My latest addition.... WordPress is used by about a third of the websites on the Internet now and WooCommerce has about a third of the Shopping Carts. So I created a WordPress Plugin called WalkTheWeb that lets someone with a WordPress/WooCommerce website add a 3D Store, to show and sell their products, in about 5 minutes. It allows the user to pick a 3D Store Building and 3D Community from templates, name the store, pick a URL, add a walk the web user account, add WooCommerce API keys, and create the site! Check it out.. All Free - with option paid premium upgrades like using your own domain name . I also trademarked http://3d and https://3d to easily identify 3D Browsing websites. All of this using BabylonJS behind it. My plans... as I get time to finish preparing it, I plan to go open source with the WalkTheWeb 3D CMS host. So that everyone can create, maintain, and host their own 3D Websites (3D Buildings, 3D Communities, and 3D Things) in a way that they can be interconnected throughout the Internet. The host program (PHP, MySQL, JavaScript) I created already works between different servers. I just need to globalize some more settings and variables and finishing cleaning the code. One thing that would help make it work smoother, would be if there was a Babylonjs object loader that would clearly separate the user movement from the mesh loading. So that when I need to queue up many meshes on the fly it doesn't cause a lag. (Note, I also turned off my avatars for the moment since they were causing lag. I'll get that functionality back in there soon.) Let me know what you think... all feedback appreciated. Thanks in advance.
  2. hi i am new to babylonjs,this is the first post i made. my problem is that i make a camera,no matter the ArcRotate Camera ,FollowCamera or ArcFollowCamera the target mesh just fixed the position in the center of the screen that is very good for lots of game however i just want to make my game the target mesh a little offset at the center of screen like :at the middle bottom left screen. or any other position i want is there a simply way or a api to make it ? thanks
  3. Hello guys I have one issue . I unable to import meshes when i using Class () but everything works except for importing meshes. You can see my code here : class Player { constructor(scene) { this.scene = scene; this._skeleton; BABYLON.SceneLoader.ImportMesh("", "", "skull.babylon", this.scene, function (newMeshes, particleSystems, skeletons) { skull = newMeshes[0]; this._skeleton = skeletons[0]; skull.rotation.y= Math.PI; scene.beginAnimation(skeletons[0], 0, 501, true, 1) this.collider = BABYLON.Mesh.CreateBox("collider_box", .32, scene, false); this.collider.position.y = .151; this.collider.rotation.y = 0; this.collider.ellipsoid = new BABYLON.Vector3(0.155, 1.14, 0.155); this.collider.ellipsoidOffset = new BABYLON.Vector3(0, 1.0, 0); this.collider.isVisible = false; skull.parent= this.collider; }); } get mesh (){ return this.collider; } } Why is this didn't work ? It is becouse babylon-loaders doesn't support Class () or do I do something wrong ? Thank you in advance for your answers
  4. @endel has just updated his BabylonJS + Colyseus Multiplayer Boilerplate repository to support the latest BabylonJS, Colyseus, Node.js, TypeScript, Webpack and related dependencies. It's a great starting point for anyone interested in developing multiplayer games or multiuser applications with BabylonJS. Here's more information: BabylonJS + Colyseus Multiplayer Boilerplate Colyseus website Colyseus documentation Support Endel via his Patreon campaign
  5. new addition level 42
  6. Hi, I'm looking for the same feature as I've already asked for the editor: an "onChange" event, but in DebugLayer. Here is the editor github issue for more details: Is it already possible to do that ? (I can't find how) And if it's not, is it possible to add it ? Thank you !!
  7. Hey all, I have babylonjs used to creating android mobile games. this error not getting crash. but i need how to solve? my game slowly working in small devices
  8. There are two buttons in my page for switching to ArcRotate camera and to Universal camera. When I click the button for Universal camera, it immediately switches to the same. But it always takes too many clicks on the ArcRotate camera button in order to switch to it. Why is it so? var cameraType = { FREE: 0, ARCROTATE: 1, WALKTHROUGH: 2, UNIVERSAL: 3 }; var cameraMode = { PERSPECTIVE: 0, ORTHOGRAPHIC: 1 }; this.setCameraAsArcRotate = function () { _cameraType = cameraType.ARCROTATE; }; this.setCameraAsUniversal = function () { _cameraType = cameraType.UNIVERSAL; };
  9. Black outline

    Hi, I'm new here and fairly new to Babylon. I am drawing a circle on a billboard but I can't get rid of the black outline, any suggestions? thanks
  10. Hey all, good afternoon. I don't understand collision. Please anyone teach me. how to identify object collision in rendering time.
  11. VR camera height

    Hi, How about an option in vrHelper to force the height of the camera, even if isInVRMode is true ? I'm testing my scene seated, but I want to be in a stanted view inside my VR. So it will be nice if we have a forceDefaultHeight option in webVROptions, to always be standing Thank you !!
  12. Hi Guys & Gals, I just wanted to let you know I'm learning 3D browser game programming in my spare time by developing something like a Model Train Simulator in BabylonJS. Thanks to the great and easy access framework of BabylonJS I've been able to develop much faster than with C++ / Direct3D 15 years ago. This project is in early stage but progressing though. I'm having some math-computations challenges on the track turnout points, but hope to have them fixed soon so that you can drive trains on more complex routes. The app supports keyboard, mouse, touch, gamepad input and also VR-headset device. Multiplayer support currently only on same device (e.g. connect 2 gamepads). Anyway, here's a teaser-screenshot of what can be called a level inspired by the "Sponza" demo. :-) Kind regards, Quintus
  13. Hey all, i have try to creating shooting game. i need camera with gun. i have try this code. but it's not working. camera child object does not showing in scene. how it's working...
  14. VR teleportation mesh

    Hi, First, great job for the VR's implementation !! It's incrediblely simple and it works perfectly !! I would like to customize the mesh created in the "_createTeleportationCircles" function. Is it possible to have an option to do it ? (Or can I already do it ?) Many thanks !!
  15. Hey, I have using Free camera for my hunting game. var arrow = [ ]; var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 2, -25), game_scene); camera.attachControl(canvas, true); BABYLON.SceneLoader.ImportMesh("", "", meshPath, game_scene, function (newMeshes, particleSystems, skeletons){ for(var i = 0; i < newMeshes.length;i++){ arrow[i] = newMeshes[i]; arrow[i].position = new BABYLON.Vector3(0,1.3,-24); arrow[i].rotation.z = Math.PI/2; } }); scene.onPointerMove = function (evt,pickResult){ if(arrow != null){ for(var i = 0; i< arrow.length;i++){ arrow[i].rotation.x = camera.rotation.x; arrow[i].rotation.y = camera.rotation.y; arrow[i].position.z = camera.position.z; } bow.rotation.x = camera.rotation.x; bow.rotation.y = camera.rotation.y; bow.position.z = camera.position.z+2; hunt_arrow(); } } i have added my code in pick to Move case? it's working in browser fast and flexible but in android device it's working too slowly... please give me any solution for this
  16. Hey, i have creating android hybrid games. i have babylonJS javascript framework for game. The skybox object textures does not loading properly. other object are loading normally in my game. var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:100.0}, game_scene); skybox.position = new BABYLON.Vector3(0, 0, 0); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", game_scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/hills", game_scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skybox.material = skyboxMaterial;
  17. function getDeltaTime() { return scene.getLastFrameDuration() / 1000; } How can I get same function with EngineInstrumentation? I am playing around instrumentation. Can any body help me getDeltaTime? getLastFrameDuration is not working anymore. Which counter can get me solve getDeltaTime like code above? Any help hint? function instrumentFun() { //console.log(instrumentation.gpuFrameTimeCounter.current); //console.log(instrumentation.gpuFrameTimeCounter.average); //console.log(instrumentation.gpuFrameTimeCounter.average); console.log( "current frame time (GPU): " + (instrumentation.gpuFrameTimeCounter.current * 0.000001).toFixed(2) + "ms" ); console.log( "average frame time (GPU): " + (instrumentation.gpuFrameTimeCounter.average * 0.000001).toFixed(2) + "ms" ); console.log( "total shader compilation time: " + ( + "ms" ); console.log( "average shader compilation time: " + (instrumentation.shaderCompilationTimeCounter.average).toFixed(2) + "ms" ); console.log( "compiler shaders count: " + instrumentation.shaderCompilationTimeCounter.count ); } I am useing chrome (with debian) And I get "current frame time (GPU)" and "average frame time (GPU)" 0. I always get current frame time (GPU): 0.00ms average frame time (GPU): 0.00ms Should I get also CPU time anyhow? Should I get also CPU frame time? Can anybody help me code getDeltaTime function with instrumentations counters? I test chrome with and I get WebGL 1 Platform: Linux x86_64 Browser User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36 Context Name: webgl GL Version: WebGL 1.0 (OpenGL ES 2.0 Chromium) Shading Language Version: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit Renderer: WebKit WebGL Unmasked Vendor: Intel Open Source Technology Center Unmasked Renderer: Mesa DRI Intel(R) Sandybridge Desktop Antialiasing: Available ANGLE: No Major Performance Caveat: No Vertex Shader Max Vertex Attributes: 16 Max Vertex Uniform Vectors: 4096 Max Vertex Texture Image Units: 16 Max Varying Vectors: 32 Best float precision: [-2127, 2127] (23) Transform Feedback Coming in WebGL 2 Rasterizer Aliased Line Width Range: [1, 7.375] Aliased Point Size Range: [1, 255] Fragment Shader Max Fragment Uniform Vectors: 4096 Max Texture Image Units: 16 float/int precision: highp/highp Best float precision: [-2127, 2127] (23) Framebuffer Max Color Buffers: 8 RGBA Bits: [8, 8, 8, 8] Depth / Stencil Bits: [24, 8] Max Render Buffer Size: 8192 Max Viewport Dimensions: [8192, 8192] Textures Max Texture Size: 8192 Max Cube Map Texture Size: 8192 Max Combined Texture Image Units: 48 Max Anisotropy: 16 Uniform Buffers Coming in WebGL 2 Supported Extensions:
  18. Hey , If i Multiple objects loaded time the device is hanging. i have using small objects only 3 or 5 mb file objects only. how to solve this type of problem.
  19. Hello everyone, I'd like to make drag n drop on meshes keeping the link between meshes, like in this example ( I don't know how to set the position of curve ? -> Maybe, with, and the example, but I don't understand why position table is so big, and to set from mesh position ? Thank you
  20. Hey all, I am new in babylonJS. how to get free camera target position and direction. how to handle it. i have readed the free camera properties, but no use for me.
  21. Added new level - Level 40
  22. I'm having trouble using `createInstance` when importing BabylonJS as an ES6 module. // <script src='main.js' type='module'></script> import {Engine, Scene, ArcRotateCamera, Vector3, MeshBuilder, Color3, HemisphericLight} from './node_modules/babylonjs/es6.js' document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('renderCanvas') const engine = new Engine(canvas, true) const scene = new Scene(engine) const camera = new ArcRotateCamera('camera', 1, 0.8, 10, new Vector3(0, 0, 0)) camera.setPosition(new Vector3(0, 0, -100)) scene.activeCamera.attachControl(canvas) const light = new HemisphericLight('', new Vector3(0, 1, 0)) light.diffuse = new Color3(1, 1, 1) light.groundColor = new Color3(0.2, 0.2, 0.2) let mesh = MeshBuilder.CreateSphere('', {}) mesh.createInstance('') }) If I run the previous code I get the following error: TypeError: Cannot set property renderingGroupId of [object Object] which has only a getter es6.js:17243 at InstancedMesh.AbstractMesh [as constructor] (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:17243:37) at new InstancedMesh (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:55221:33) at Mesh.createInstance (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:29095:21) at HTMLDocument.document.addEventListener (c:\Users\phil\code\sandbox\babylonjs-test\main.js:19:9) Importing the library in a script tag works fine: // <script src=""></script> // <script src='main.js'></script> document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('renderCanvas') const engine = new BABYLON.Engine(canvas, true) const scene = new BABYLON.Scene(engine) const camera = new BABYLON.ArcRotateCamera('camera', 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0)) camera.setPosition(new BABYLON.Vector3(0, 0, -100)) scene.activeCamera.attachControl(canvas) const light = new BABYLON.HemisphericLight('', new BABYLON.Vector3(0, 1, 0)) light.diffuse = new BABYLON.Color3(1, 1, 1) light.groundColor = new BABYLON.Color3(0.2, 0.2, 0.2) let mesh = BABYLON.MeshBuilder.CreateSphere('', {}) mesh.createInstance('') }) I'd like to avoid bundlers and transpilers while developing the code and just package it up later on.
  23. Hi, Does Babylon have any common Documentations/Widget_UI/Settings for switching between cameras and control panel (debug/fullscreen)? Is there any simple playground showcase how to include those widgerts like on this picture? Or should/must we hack (code) how it is made greetings
  24. Hello there! I basically just want to present my personal game project and to collect some feedback and ideas. The game is currently in the alpha phase and there might be bugs and problems but I feel confident enough to show it to the public. The game is called "Connect 3D" and it is a free to play competitive online browser game, where you have to place four tokens in a row to score. However, the game is not as easy as it sounds because the rows can be build in the three dimensional space. This GIF shows a local game session but the game can also be played online. You just have to send the link of the session to one of your friends. Currently you need a second person to play since there is no AI or computer enemy to play against. It works on mobile and on desktops, but you should try it on a modern device and with an up to date browser. There are known problems in Firefox on Windows and on Android. Therefore I recommend to try it in Chrome, Safari or Edge. You can give it a try for free on the website Connect 3D. The feedback is very important for me and the development. I really appreciate your feedback! I plan on implementing much more stuff if the feedback is positive. Possible next features: Personal Profiles and Statistics Level/Rank System (implies profiles) Public Games (join random people and play against them) Tournaments/Competitive Play Computer Opponent (AI) Different Game Modes and many more... Tell me your opinion and what you would enjoy the most in an upcoming version? Thank you for your help! iflow