Search the Community

I'm very happy to announce a stable version of my game 3Dchan made in BabylonJs. It's a mix between a Chan board (like 4chan) and a FPS in a universe based on Dante's hell. The game is completely multiplayer, although it is browser based you can see other players in real time and chat with them. There are several floors, they have more or less a different theme and some possible actions. During the development I was really amazed by the fluidity of such a browser game. I hope you'll like it, because I still have a lot of ideas for the future The game is available here : game or you can first visit the website https://3dchan.org

Hi I have just created a beginner's course on babylonJs on udemy named "Single & Multiplayer Game Development in Webgl's BabylonJs" I took permission from @Deltakosh to post the link on the forums Here you go ! https://www.udemy.com/single-multiplayer-game-development-in-webgls-babylonjs/?couponCode=BONUS10 Any comments are much appreciated, Thanks ! Ahmed

Here's a fun re-imagining of the 1978 hit Space Invaders. Play in the traditional 2D mode - much faster and smoother than the original - or in 3D. The 3D mode is the same game from a different perspective. There is also a third mode which attempts to emulate a CRT television straight from the 1980s. This mode uses an orthographic camera, limits rotations to the Z axis for a purely 2D experience, adds a glow layer and a layer of scanlines. This project was built over a few weeks using the BabylonJS framework. ViteJS is used as a build tool. The Github repository includes all code, blender models and images. Have fun and use them as you like. Sound effects are free creative commons from "The Essential Retro Video Game Sound Effects Collection (512 sounds)" by Juhani Junkala. Play it here: https://spaceinvaders.viperfish.com.au/ Github repo: https://github.com/johnpitchers/Space-Invaders

Hi everybody, so i'm trying to create an online game using Babylon.js but have run into a problem thats got me a little stumped so hoping someone here would be willing to help me out. Please bear with me on this one, i'm a complete newbie with babylon as i've only every worked with THREE.js. Right now my game consists of a scene compromising of multiple meshes with multiple users represented as avatars (created from basic circle geometry for the moment) loaded into an environment. What I want to do is highlight the outline of these avatars ONLY when they are occluded by any other object, meaning that when they are not occluded they look normal with no highlight but when behind an object their highlighted silhouette can be seen by others (including yourself as you can see your own avatar). This is very akin to effects used in many other video games (see example below). ) Thus far, based on some googling and forum browsing (https://stackoverflow.com/questions/59807160/babylonjs-outline-through-walls & https://forum.babylonjs.com/t/highlight-through-objects/8002/4) I've figured out how to highlight the outline of objects using Babylon.HighlighLayer and I know that i can render objects above others via RenderingGroups but I can't seem to figure out how to use them in conjunction to create the effect I want. The best i've managed to do is get the highlighted avatar render above everything but I need just the silhouette not the entire mesh. I'm also constrained by the fact that my scene has many meshes in it that are loaded dynamically and i'm also trying to keep things as optimal as possible. Can't afford to use very computationally expensive procedures. Anybody know of the best way to approach this? Would greatly appreciate any advice or assistance you can provide.Thanks!

Hello everyone, I'm pretty new in babylonjs, also in webdev. I tried to import my model with incremental.babylon file to optimize the performance, cause I have quite large model... I'm working with importMesh function, but when I run in my dev environment on localhost, get console error with 404 server responde (file not found) on every single geometrydata file =( although it runs with append function, but the control and every other part of the software aren't working, just show the model exactly the same position as I converted in the sandbox (from glb to babylonjs file). I use webpacker, but I dont have any problem if I run the program with the simple glb or babylon file extension (except that its pretty slow and lagging). Do you have any idea, why the geometrydata files not be found (its in the folder of the incrementel.babylon file as the quite short document of the topic propose) ? Many thanks for any idea, Im suffering with this for days now...

Hello everyone ! I'm learning babylonjs with reactjs and I stuck in some trouble. I want to texture not to repeat and just cover the cup. I see some people talk about the uv and I want to know more specific how to do that. The code import React, { useEffect, Suspense } from "react"; import * as BABYLON from "babylonjs"; import "babylonjs-loaders"; type SceneEventArgs = { engine: BABYLON.Engine; scene: BABYLON.Scene; canvas: HTMLCanvasElement; }; type SceneProps = { engineOptions?: BABYLON.EngineOptions; adaptToDeviceRatio?: boolean; onSceneMount?: (args: SceneEventArgs) => void; width?: number; height?: number; }; const Scene: React.FC<SceneProps & React.HTMLAttributes<HTMLCanvasElement>> = ( props ) => { var scene: BABYLON.Scene; var engine: BABYLON.Engine; var canvas: HTMLCanvasElement; const onResizeWindow = () => { if (engine) { engine.resize(); } }; useEffect(() => { engine = new BABYLON.Engine( canvas, true, props.engineOptions, props.adaptToDeviceRatio ); let sceneD = new BABYLON.Scene(engine); scene = sceneD; // scene.clearColor = new BABYLON.Color3.Black; BABYLON.SceneLoader.ImportMesh( "", "./", "chavena.glb", scene, function (meshes) { scene.createDefaultCameraOrLight(true, true, true); scene.createDefaultEnvironment(); const myTexture = new BABYLON.Texture( "./texture1.jpg", scene ); myTexture.uScale = -0.5; myTexture.vScale = 0.2; const materialForCup = new BABYLON.StandardMaterial("city", scene); materialForCup.diffuseTexture = myTexture; myTexture.wAng = -Math.PI / 6; meshes[1].material = materialForCup; } ); if (typeof props.onSceneMount === "function") { props.onSceneMount({ scene: sceneD, engine: engine, canvas: canvas, }); } else { console.error("onSceneMount function not available"); } // Resize the babylon engine when the window is resized window.addEventListener("resize", onResizeWindow); return () => { window.removeEventListener("resize", onResizeWindow); }; }, []); const onCanvasLoaded = (c: HTMLCanvasElement) => { if (c !== null) { canvas = c; } }; // 'rest' can contain additional properties that you can flow through to canvas: // (id, className, etc.) let { width, height, ...rest } = props; let opts: any = {}; if (width !== undefined && height !== undefined) { opts.width = width; opts.height = height; } return ( <canvas style={{ width: "100%", height: "100vh" }} {...opts} ref={onCanvasLoaded} /> ); }; export default Scene; That's my result now ! That's that I want to get Thanks in advance !

Hello folks, I've a requirement, where I need to create a custom mesh and I should be able to control the co ordinates so that I can get curvatures, folds and crumples on it. Can some one help me. Thanks in Advance.

Hi, I'm new to babylon environment, and stuck with a problem were i have to save/download latest scene from the render loop. i am using a custom 3D model exported from blender, the customization and texture implementations are works fine, but while saving/downloading the scene i can't find any texture or color which i added to the scene (i can see it in canvas but not in the serialized file). I'm using SceneSerializer.Serialize(scene); method for saving the scene, please help me to fix this issue. PS: I'm using babylon version 4.2.0 (npm package)

Hey all, Has anyone integrated web midi with BabylonJS? I'd like to trigger events in Babylonjs with WebMIDI. I'd also like to explore OSC but WebMIDI is more important. Unfortunately a google search turned up next to nothing. If anyone can point me to some libraries or pass me any tips i'd much appreciate it!

i don't know how to rotate my character when i drag the joystick environment_model.html

from this playground file https://www.babylonjs-playground.com/#W2DP7F#3 i managed to add 'click to play' poster frame and made a toggle bit: scene.onPointerUp = function() { if (videoTexture.video.paused === true){ videoTexture.video.play(); } else { videoTexture.video.pause(); } but now i wonder how to add the eventListener("onended") and set currentTime to 0 again AND show the posterFrame. Any ideas?

Hello everyone, here's my current project, https://laserbots.io You can protect the base from zombies in coop mode or go head to head in a deathmatch against players. Keyboard & Mouse: Move mouse to aim, click to shoot. WASD to move. Mobile/Tablet: Tap to shoot, double tap to move. (This is still a little clunky, improvements to come). Gamepad: Any button to shoot, right stick to aim, left stick to move. Tech stack: babylon.js for graphics, inferno.js for website and UI, colyseus.js for server, Agones for server orchestration. Most of the core features are done, I marked it as WIP because I'll likely add more stuff in the future. I am desperately seeking feedback for this, so please let me know what you think. I also have the itch.io page here: https://scarybanana.itch.io/laserbots. Thank you

Hello people, I am able to play a video on Plane but unfortunately the video seems to be mirrored, as in flipped. What am I doing wrong in my script? Also, how do I make sure that the video starts playing once the page loads? var ANote0 = BABYLON.MeshBuilder.CreateBox("ANote0", { width: 140, height: 90, depth: 0.100000 }, scene); ANote0.position = new BABYLON.Vector3(180, 30, -425); var mat = new BABYLON.StandardMaterial("ANote0Mat", scene); mat.diffuseColor = new BABYLON.Color4(0, 0, 0, 1); ANote0.material = mat; var planeOpts = { height: 90, width: 140, sideOrientation: BABYLON.Mesh.BACKSIDE }; var ANote0Video = BABYLON.MeshBuilder.CreatePlane("plane", planeOpts, scene); var vidPos = (new BABYLON.Vector3(0, 0, 0.1)).addInPlace(ANote0.position); ANote0Video.position = vidPos; var ANote0VideoMat = new BABYLON.StandardMaterial("m", scene); var ANote0VideoVidTex = new BABYLON.VideoTexture("vidtex", "videos/screencast.mp4", scene); ANote0VideoMat.diffuseTexture = ANote0VideoVidTex; ANote0VideoMat.roughness = 1; ANote0VideoMat.emissiveColor = new BABYLON.Color3.White(); ANote0Video.material = ANote0VideoMat; ANote0VideoVidTex.video.play(); scene.onPointerUp = function () { ANote0VideoVidTex.video.play(); }

So I have 2 files: 1. shirt.obj 2. shirt.mtl I want to load this via babylon.js: BABYLON.SceneLoader.Load(folder, fileName, $scope.engine, function (loadedScene) {...} What should I do to optimized the file loader? I have read the cache optimization from the babylon.js documentation, but none are working. Babylon Caching Docs I keep getting the model file from cache, I already put the updated model into the resources folder. How to load the new model file? What should I name my manifest file? I tried shirt.obj.manifest and shirt.babylon.manifest, both of them did not work. And what code should I insert in my script?

Hi all! I built a little demo which combines the p2.js 2D physics library with 3D rendering via Babylon.js, to create a 2.5D unicycle game demo: https://tomwhall.github.io/p2BabylonUnicycle/ The code is on GitHub.

Hello, I'm pretty new to BabylonJs. I have created a few simple applications with it. What I want to do in this current project is be able to integrate babylonjs and flask microframework. I am much more familiar with python, flask and sqlalchemy etc. than I am similar javascript frameworks. I had set up some babylonjs code for visualizing a 3D model on a webpage using html, css, and javascipt only. I use ImportMesh to load the gltf (or glb) model into the scene. This works fine as I want. I have been problems migrating this to a flask app format. I tried three different ways and each time I have hit problems. I will describe each below. 1. Use ImportMesh just like I did for the 'plain' html, css and javascript: I tried to incorporate my existing html, css, and javasript files in a simple flask directory structure / simple app i.e. where my html, css, and javascript are in subdirectories to a main app.py file - exactly how I would set up any flask app. Every time I do that I get a notification saying that the model file (.gltf or .glb) can't be found and it throws a 404 error in the console. I've tried multiple different ways to define the path to the model file but it continues to throw this error. 2. Use babylon and model html tags instead: I then got rid of the javascript file altogether and I simply used the babylon and model html tags in my html to define the model rather than trying to import the model using ImportMesh. This works fine. The issue here is when i tried to control the css and add some actions to the css (or similar in javascript) like repositioning the container when I click a button it doesn't seem to work like the tutorial showed in the documentation. 3. I then tried to define my gltf as a text string. The thinking here was if I remove the reference to an external model file it could resolve my first issue. First I converted my 0.bin file to a base 64 encoded string and included it directly in my gltf file. I then took the entire gltf file as a text string into my javascript file and essentially called the model as a text string from there rather than as an external file. I checked the file worked in the babylonjs sandbox before I did this and it was fine but when I try to run my flask app it continues to throw an error saying it can't find the 0.bin file. The issue is here that this file is no longer needed (it was orphaned in my previous step as I have described when I converted it to base64). Overall, can someone help with what I need to do to get the ImportMesh function working in my original method. I'd much prefer to use the javascript ImportMesh way to do it as I feel (rightly or wrongly) I have much more control over the scene and control over the meshes etc. when I am coding in the javascript. Thanks.

Hi, I am new to babylonjs (and physics libraries in general). I have made a demo to illustrate my problem https://playground.babylonjs.com/#1XWKCR#1 I am trying to model a square grid that behaves like there is space in the middle, as in, if an object happens to be in the middle of it, the grid should be hanging onto it. Following the example here https://playground.babylonjs.com/#66PS52, I have created 4 boxes, positioned 90deg to each other, added a PhysicsImpostor.BoxImpostor, and parented them under a physicsRoot with PhysicsImpostor.NoImpostor. The grid behaves like there is only one collider, right in the center of the grid. Can someone please explain what is going on there? Thank you, vinz

I have water shader script which was developed using Three.js and I want to convert shader as Babylon.js Who can help me, Please let me know water-material.js

Hey guys, here's another random babylonjs newbie hoping to get some help :-) So i have been playing around with babylonjs for a while and i get better at it everyday but i just hit this stumbling block that i can't seem to figure out I have created a sample box for a demonstration of this frustration, get it ? // Create sample box const sampleBox = BABYLON.MeshBuilder.CreateBox('sampleBox', { size: 10, updatable: true }, scene, true); sampleBox.isPickable = true; sampleBox.position = new Vector3(0, 0, 0); let verticesCount = sampleBox.getTotalVertices(); Then i used multimaterial to assign image textures to four of the faces of the sample box // Create four standard materials let material0 = new StandardMaterial('material0', scene); material0.diffuseTexture = new Texture('/some0_image.jpg', scene); material0.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material0.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material0.specularColor = new Color3.Black(); let material1 = new StandardMaterial('material2', scene); material1.diffuseTexture = new Texture('/some1_image.jpg', scene); material1.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material1.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material1.specularColor = new Color3.Black(); let material2 = new StandardMaterial('material2', scene); material2.diffuseTexture = new Texture('/some2_image.jpg', scene); material2.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material2.diffuseTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE; material2.specularColor = new Color3.Black(); let material3 = new StandardMaterial('material3', scene); material3.diffuseTexture = new Texture('/some3_image.jpg', scene); material3.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material3.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material3.specularColor = new Color3.Black(); // Define the multimaterial let maltimat = new MultiMaterial('multi', scene); maltimat.subMaterials.push(material0); maltimat.subMaterials.push(material1); maltimat.subMaterials.push(material2); maltimat.subMaterials.push(material3); // Assign mesh material to the mesh sampleBox.material = maltimat; // Define the subMeshes for the sample box new BABYLON.SubMesh(2, 0, verticesCount, 0, 6, sampleBox); new BABYLON.SubMesh(1, 0, verticesCount, 6, 6, sampleBox); new BABYLON.SubMesh(3, 0, verticesCount, 12, 6, sampleBox); new BABYLON.SubMesh(0, 0, verticesCount, 16, 6, sampleBox); So this is where the problem that has been bumming me for days comes in. I would like to change the texture of one of the faces when it is clicked, so one of the solutions i came up with to this problem was to change the submeshes material index to one of the four materials like below and it works partially. So in solution one, when a pick event happens i would access pickedMesh.subMeshes[some_index] and it would change the submeshes texture material to another one, the problem i encountered with this was Getting the correct index from the pickInfo to select the submesh from the submeshes array and change it, tried using faceId, bad idea and submeshId keeps returning the value 0 when i select any of all the faces The other problem with this approach was, i wanted to assign material to a face that has not been covered by the BABYLON.Submesh by getting the startIndex and indexCount automatically with the pickInfo and pushing the new data to the sampleBoxe's submesh array, In this case if the submeshId is not available, Yes i declared 4 subMeshes for a reason. scene.onPointerPick = (event, pickInfo) => { if (pickInfo.hit) { let indices = pickInfo.pickedMesh.getIndices(); let faceId = pickInfo.faceId; let index0 = indices[pickInfo.faceId * 3]; let index1 = indices[pickInfo.faceId * 3 + 1]; let index2 = indices[pickInfo.faceId * 3 + 2]; let submeshId = pickInfo.submeshId; let positions = pickInfo.pickedMesh.getVerticesData(VertexBuffer.PositionKind); sampleBox.submeshes[faceId].materialIndex = 0; // or using submeshId, which just returns 0 for some reson uuuuurrrrgh if (!submeshId) { // How do i get the indexStart and the indexCount from the pick info new BABYLON.subMesh(0,0,verticesCount, indexStart, indexCount, sampleBox) } else { sampleBox.submeshes[submeshId].materialIndex = 0; } // or hard coding it but whats the essence it would just change a face material that's // not even facing the screen and that's not my intent sampleBox.submeshes[2].materialIndex = 0; } } The other way to go about this was to use vertexData but i couldn't get this to work with images only manipulating the colors of the facets on pick event and used updateVertexData to update the colorKind and it worked like a charm. If there is a way to use vertexData to change a face material, i would appreciate and even buy you a soda and give you a hug if you were near me ? let positions = [-5, 2, -3, -7, -2, -3, -3, -2, -3, 5, 2, 3, 7, -2, 3, 3, -2, 3]; let indices = [0, 1, 2, 3, 4, 5]; let colors = [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1]; let vertexData = new BABYLON.VertexData(); vertexData.positions = positions; vertexData.indices = indices; vertexData.colors = colors; vertexData.applyToMesh(sampleBox);

My Problem: I want to select a GUI-Element with scene.pickWithRay or would like to be able to use a ray to select a GUI-Element on an object somewhere inside a Scene. Example: Person in VR goes to a Panel inside a game/ scene and wants to interact with it. In a VR-HMD he would be able to select it with his controllers. If he doesn't have controllers a fallback to pick with your head-ray and interact with a press of a button would be nice. If no controllers or buttons (like on simple Cell Phone), fall back to select when holding the ray on the GUI-Element is the plan. Current Solution: public getInteractiveButton (mesh:any) { var button = undefined; // get one of different button types if (mesh) { if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but0')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but0') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but1')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but1') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but2')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but2') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but3')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but3') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but4')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but4') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName(name + '-playbutton')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName(name + '-playbutton') } else { console.log('no button'); } } return button; } public vrinteract () { var pickInfo = scene.pickWithRay(Ray); if (pickInfo && pickInfo.hit && pickInfo.pickedMesh.name.includes('uiplane')) { if ((this.vrMouseOverMesh === undefined || this.vrMouseOverMesh === null) || (pickInfo.pickedMesh.uniqueId !== this.vrMouseOverMesh.uniqueId)) { if (this.vrMouseOverMesh) { let button2 = this.getInteractiveButton(this.vrMouseOverMesh); if(button2){ button2.onPointerOutObservable.notifyObservers(); } } let button = this.getInteractiveButton(pickInfo.pickedMesh); if(button){ button.onPointerEnterObservable.notifyObservers(); } this.vrMouseOverMesh = pickInfo.pickedMesh as BABYLON.Mesh; } } else if (this.vrMouseOverMesh) { let button2 = this.getInteractiveButton(this.vrMouseOverMesh); if(button2){ button2.onPointerOutObservable.notifyObservers(); } this.vrMouseOverMesh = null; } else { console.log('no but'); } } What I would Like to know is, if there would be a better option.

Hey everyone. I am building a web based 3D interactive showcase of a spacecraft's journey. Most of the users are expected to be accessing it via low to mid range androids, so for performance I've decided upon three.js, rather than babylon.js. Correct me if I'm wrong in this. I've worked as a web developer and dabbled with game development with Phaser and Godot, but haven't built anything with three.js or babylon. So I wanted your advice on best practices and resources; things that my future self would wish I had known before starting. Here's some more information: The showcase will be separated into scenes, which can be navigated via a timeline, which also highlights the current date, if it's in range. In addition to the animated view of spacecraft's trajectory and position, it will have some cinematic scenes of the rocket exiting the atmosphere and a lander landing on the target body as well. I might even consider making the rover user controllable. Here's one inspiration from NatGeo. Any help is appreciated.

Hello guys, I really like to use BabylonJs in my projects, is so useful. However I'm having a problem with a model exporting it from 3dsMax 2016 to .babylon format with the plugin of the last push in babylonjs repository. The log responses with "Exportation cancelled: Object reference not set to an instance of an object". I read some answers from different post in this forum talking about objects that not are in the scene, It's the problem? Ok, I read in github that I have to use the exporter till 3dsMax2015, however I use the exporten in a cube, directional light and a free camera ,so I believed that it may work in the current in the version I'm using of 3dsMax. Expecting your help, thanks in advance.

I wanted to create a static world axes for my application using babylon js. The static axes should be like in Blender 3d editor application, their is a world axes at bottom left. The exact behavior I am looking for. Please help

Hi everyone! https://vtange.github.io/boxgun/ This is Boxgun, my first game with BabylonJs! It’s a projectile game. You have 10 seconds to drag and shake the crystal you see on-screen to charge the box cannon, with which you try to fire a box as far as you can! The game stops when it detects your box is done moving. Controls: (in menu) Z or Enter: ‘OK’ in menu up, down: move up and down the current menu. (in game) Spacebar: fire P: pause, unpause …or you can just use your fingers or a mouse Note: Babylonjs only powers the 3d picture parts. The UI is actually an HTML5 DOM overlay. Enjoy!

Hi, I was doing some tests with BabylonJS and while checking out the lights I found that the spotlight goes through some objects but not others? Is this a bug of babylonjs or something I've done? Example can be seen here, the spotlight hits the top cube/box/rectangle and passes through to the floor and smaller cubes/boxes/rectrangles. http://dev.aftc.co.uk/WebGL/BabylonJS/06_Lights2 Ideas? Thanks D