Babylon.js | open game and rendering engine | Game Engine library
kandi X-RAY | Babylon.js Summary
kandi X-RAY | Babylon.js Summary
Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it. Any questions? Here is our official forum.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of Babylon.js
Babylon.js Key Features
Babylon.js Examples and Code Snippets
Lines of Code : 26License : Permissive (MIT)
Copy$ npm install --save @babylonjs/core @babylonjs/loaders babylon-vrm-loader
# or
$ yarn add @babylonjs/core @babylonjs/loaders babylon-vrm-loader
import * as BABYLON from '@babylonjs/core'
// has side-effect
// ref. https://webpack.js.org/guides/tre import * as babylon from 'babylonjs';
console.log(babylon);
npm install -S @babylonjs/core
import {Engine, HemisphericLight, Mesh, Scene} from '@babylonjs/core';
Community Discussions
Trending Discussions on Babylon.js
QUESTION
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 (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!
...ANSWER
Answered 2022-Feb-22 at 09:36So I asked the same question on the babylon forums which helped me to find a solution. All credit goes to the guy's that helped me out over there but just in case someone else comes across this question seeking an answer, here is a link to that forum question https://forum.babylonjs.com/t/showing-highlighted-silhouette-of-mesh-only-when-it-is-occluded/27783/7
Edit: Ok thought i'd include the two possible solutions here properly as well as their babylon playgrounds. All credit goes to roland & evgeni_popov who came up with these solutions on the forum linked above.
The first solution is easier to implement but slightly less performant than the second solution.
Clone Solution: https://playground.babylonjs.com/#JXYGLT%235
QUESTION
Files that are uploaded to my site have their names changed and extention change to bin. So for example a uploaded file will be dfd84848.bin, using the bin file worked fine with modelviewer but im trying to test babylon.js and it doesnt work with .bin only if i change .bin to .glb.
This code {{uploaded_asset($detailedProduct->cad_file)}} provides link like uploads/all/p1YZX9TBc7EmimFx4rXnSFKvVor8EttpOUUpylLL.bin
I want to change .bin to .glb and echo it.
i tried this
...ANSWER
Answered 2022-Feb-06 at 17:57To echo a value you should use double curly braces:
QUESTION
Hi guys i really need your help, so i just installed Blender from Steam because i want the newest Blender software (2.93.4) and i wanna import it to Babylon.js, so, i just want to import simple cube for test like this cube image
as u can see i already downloaded the zip file https://github.com/BabylonJS/BlenderExporter i am using the newest version, also when i trying to import it to babylon file i got this error
...ANSWER
Answered 2021-Oct-25 at 19:46It's not what you asked for, but another way to get blender content into babylon is to export to a .glb (GLTF Binary) format.
GLTF is widely supported and will work great in babylon.
I have created a simple starter based on vite (super fast bundler) which contains the minimal code to load a .glb file.
https://github.com/leon/starter-babylonjs
If this is not what you are looking for, maybe someone else will find it useful :)
QUESTION
I am trying to embed 3D models in the browser with Babylon.JS. The code that runs perfectly on the babylon playground will not run on my local machine. I am using this example: https://playground.babylonjs.com/#JUKXQD
I then downloaded the file as a zip and ran index.html in my browser. It shows me a blank purple screen. I have been trying this for a while and it seems to be unable to import code from my local machine. When I build 3D models with the script that displays fine in the browser on my laptop.
...ANSWER
Answered 2021-Oct-19 at 10:33Bablyon must download the skull asset into the view however when running a local file you'll run into the CORS request issue:
QUESTION
My problem concerns server with Windows Server and Plesk.
I upload to my FTP files concerning Babylon.js model. If i go to path where i upload file i see something like this:
When i click to first file (JPG File - 141_light parquet texture-seamless_hr.jpg), third file (manifest file - untitled.babylon.manifest) and fourth file its normally open in the browser. But when i click in .babylon file i got error:
I suppose somewhere in Plesk it should specify the type of file that I can open, unfortunately I have no idea where. Or maybe adding a .htacces file could fix the problem?
What i do:
- In all file and directiory i got it correct permissions
- In plesk -> IIS Server Setiings I set enable Directory Browsing
ANSWER
Answered 2021-Mar-20 at 18:16I found answer for 5 hour, but when i ask this question i found answer in 2 minutes :)
- In plesk go to Websites & Domains -> example.com -> Hosting & DNS IIS Settings
- In MIME types window I add
application/babylon .babylon
QUESTION
I'm building my website with Nextjs and importing Bablyonjs was throwing up the following error.
...ANSWER
Answered 2020-Nov-15 at 18:06After a not so insignificant amount of time searching i finally learned the following.
@babylon (es6) is not compiled into javascript and is instead nicely defined (es6) typescript friendly library of source code. (helps when wanting to treeshake)
Nextjs out of the box isn't configured to compile anything in node_modules. It expects precompiled javascript ready to consume.
Point 2. is why i received the error, nextjs was expecting compiled js and it was getting uncompiled source.
To fix this you need to add a next.config.js and configure it with next-transpile-modules and next-compose-plugins.
QUESTION
I am using fabricJS and have few random drawings (e.g circle, square, polygon shape) on plane canvas sized rectangle object (Base).
I want to preview all these drawings engraved on main rectangle object in 3D.
Is their any library available for this? i google a bit and found three.js and Babylon.js but of them have no examples available similar to my requirement, even i don't know if this is possible with these libraries or not.
Now want to convert it in 3D preview using JS library in browser.
Please guide me.
...ANSWER
Answered 2020-Jul-19 at 21:30I think instead of BabylonJs, you should got for Three.JS its more easy to handle and small it size as well.
Here is an example code maybe you are looking similar to this.
All you have to do is extract SVG from your FabricJS put it in ThreeJS.
QUESTION
i want to show text behind a babylon.js scene. I've made the background transparent but i can't see the text behind it. I've also tried z-index:-1 for the text.
I've only been learning Babylon since last night so I'm really not too sure whats going on. I'm also not good at java Script so any help would be greatly appreciated :)
...ANSWER
Answered 2020-Apr-07 at 10:05The main issue here is setting background color to '*' elements, which prevents the image to be shown. When removing it (and adding it only to body), the h1s (with the negative z index) are shown behind the babylon scene:
Note that I didn't use your model, but the default babylon scene, as i have no access to it.
There is no need to set the canvas' background color to be transparent, the scene.clearColor parameter is doing it for you.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install Babylon.js
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
