Babylon.js Viewer
Sanny Olafeso
I am using the BabylonJS viewer to show a 3D (gltf) model on a website. However, since I have no prior experience using it, and I only need it to show this model, I am using the generic viewer (and I followed this tutorial).
i have been trying to make a viewer scene without the box that serounds the model but keep the toolbar in tact. And enable the vr option aswell. i have spend countless hours bu with no succsess unforuntate, so i was wondering if this was even still getting updated
but somehow once i try do the same, the canvas somehow horizontally shrinks, this happens in all browsers, to make things worse, in Google chrome the boombox modle turns pitch black, above the problem i already have
So thinking that the viewer is meant to be the ease of entry to babylon usage , i mean this is a perfect example, where a client got someone to use it to embed a model on a word press site, its sad you dont provide the same out of the box visual fidelity as the sandbox?
Anyway , since this is the situation , i need to help them to make it look something like the sandbox but using the viewer and i dug through all the documentation and there is little to no information as to how to achieve this.
If this turns out to require some arcane solution with all sorts of template injections or whatever and it then seems better I do it via setting up a custom scene , then really, what is the point of the viewer?
I fully understand easy to use and agree that is its purpose , which is why i question why it does not look good out the gate. You cant use the argument you presented about varying opinions on what that means because I pointed to your very own sandbox as the example of a good out of the gate experience.
its great you can configure it, but that should not be an excuse for not providing a better default rendering. Did you look at the screenshots? having metal render as black will be the preference of - Nobody. Lets be realistic here.
ah ok so that is why it didnt work when i tried it. I tested your solution and it does work. Anyway doing it via scripting also then gave me access to set properties of the environment like environmentIntensity = 0.7 as shown above.
The GLTF file uploaded to gltf-viewer shows up completely black without enabling add lights option in the viewer even though the glTF file has internally reference KHR_lights_punctual
Viewing the model in -viewer.donmccurdy.com/, the point light is there, but its values do not look physically-based. It has an intensity of 0.2 candela (a candle is roughly 1 candela), and is attempting to illuminate a 2000m-wide model. I think that is the problem.
Controller is optional. You can use this controller for run Javascript code, go back, get current url, change url and many others that WebView Flutter can allow.Functions is optional. You can use this parameter for add javascript code to your viewer.Examples can be found at bottom of this document
I solved the issue of being able to open a *.glb file on a local drive. Placing Babylon.viewer.js and part.glb within the same folder and referencing directly as shown below in the snippet (i.e. with no folder path specification) it works.
Holy moly. Let's talk about how amazing GL rendering for the web can be. If you are anything like me, both you and your clients like flashing lights, pretty pictures, etc. So if this video doesn't arch an eyebrow, feel free to skip to the next post.?
Especially since Babylon 4.2 was just released at the time of this post, the answer here is the same as it is with pretty much any NPM package, framework or what-have you. With the docs, laddie, with the docs.
First off, I'm going to point out that their tutorials and documents section is phenomenal (now). Although there have been complaints in the past about inconsistencies within the documentation, I can safely say you can make it all the way through the entry tutorials and get yourself some babyl-action on the screen with pretty much zero guff. If it's your first time using Js to render GL scenes (like me), you'll feel like an animation/game dev's Pinocchio. ???
You can take your 'hello world' tutorial and shove it, the entry-level docs on Babylon's site have you create your 'hello world', as a scene and show you how to put it into a website right away. They even recently added support for React native, for all you mobile devs who're wondering.
The docs first suggest using the playground to familiarize yourself with the turf. There is a huge amount of customization, import, export, etc. involved in the playground, and it can be daunting, but I promise it's simpler than it looks to get started.
So you built yourself a 3d model of an object? Or someone did it for you already? You just want to put it on a page? They took care of that too. The Babylon Viewer (a customizable prefabbed viewing module) is as easy to drop in as a CDN link. After that you can add a Babylon element with a model attribute as seen below.
Each object to be rendered in the scene has to be first imported or created as a mesh, which is done asynchronously. That means to do any basic editing of the scene in the playground, we'll have to await the import. Say I want to move a house model 'up' the y axis, to put it on an eventual hill..
This code first imports all the individual object meshes from the scene folder in question, then we begin the mathing! That will come later (as there are legions of helpful documents on the actual code one can use to take full advantage of Babylon).
After learning the absolute basics, I would still highly recommend the following tutorial about building a village, which is of course the next chapter in the docs. I normally dive into a heinously over-scoped project for immersion value and skim the docs as I go for what I need, but for a whole new library, I would definitely say dig into those docs first. They are only slightly intimidating, but after some careful poking and prodding...
I started playing with laying foundations with the CreateGround() and CreateGroundFromHeightMap(), meshing some water, and ended up with a platform and a nice little lake. They also have prebuilt skyboxes for a true scene feel, or you can construct and wrap your own if you're feeling frisky! I'll make a few I thought of later, but for now let's use a preset.
I liked the idea of creating my own textures, which I began with GIMP (my favorite open source image editor). Let's face it, without being paid to do graphic design, I don't have time for Adobe's ceaseless background processes, forceful system occupation, or monthly fee.
You see, each object you render into field with Babylon can be given a material and texture, and since their playground examples used separately hosted photos (available as part of their free library of stuff-to-use), I Immediately thought of Flickr and Imgur for my personal textures. Spoiler alert - Flickr's tendency to force the jpeg file format leads to problems if you want to skin with any transparency.
Say you want to 'skin' an object with different faces? You can do that with a single image by designating the used portion of your 'master texture' photo with a bit of multi-dimensional array love and passing a faceUV array to your created object on construction. Think of U and V as X and Y on your texture image so Babylon knows which part goes where. (Dive deeper here) (Ev's example texture available here)
sigh of relief - we are working with JavaScript! and as this is JavaScript, we can do fun stuff like making a 2d array of important box-position-ish information entries and iterate over the whole thing, creating a copy of a single crenellation (that word is weird to me now) for each position set. Let's do that now. After some fiddling with positions (I am a stickler for collisions)...
There's a playground for each basic shape, for camera manipulation, light setting, animation, tons of them! That means understanding how it works can happen in real time without too much debugging if you understand JS basics.
A few more finishing touches and we'll be ready to show off. Let's deal with making sure our poor camera doesn't sink below the lava-layer and confound the viewer by showing them a bunch of empty back-rendered nonsense. There are a few ways to go about this, actually, but let's focus on the camera for now.
You get all sorts of neat tooltip info by hovering over any of the constructors or methods in the Babylon playground, including of course various arguments you can pass directly on creation of your camera to adjust it. There are also cool features like auto-rotation behavior for a neat panning effect.
Using the easy mode for dropping in a scene as mentioned above is great for most static pages, but as this blog has a seriously layered hosting solution I elected a more thorough way to build the script directly into this page project. Note that CORS can affect your successful load of the scene, but as long as you fix 'yer headers on the hosting origin, or better yet, just host your scenes wherever you plan on putting them up as additional assets, you'll be fine!
If the above demo didn't load on your browser, or if you just want to poke around, Here's a link to the playground as I finished it! If you click on the above embed, you can do all sorts of keyboard camera controls like ctrl + arrows, alt + arrows, etc, as I haven't wired the keypresses to any individual animations for this demo.
This is a viewer for several of the asset file types used for game development with theBabylon.js engine. Typically such files are formatted for parsing bysoftware rather than humans, so opening them in VS Code isn't very helpful.
With this extension, opening one of these files presents a digest that summarizes the file contentand metadata. With a button click, the asset renders in a dedicated viewer panel powered by theBabylon.js engine. The viewer supports the same functionality as theBabylon.js Sandbox, including fullInspector support.
64591212e2