Hello, I’m hoping someone can tell me what I might be missing in trying to get Babylonjs set up in Visual Studio. A quick background, the manufacturing company I work for is looking to add 3D drawings to our existing 2D layouts. We evaluated five different options and decided that Babylonjs was the best choice. Even though it’s a gaming engine, we think it will work just fine for engineering drawings.
I’m new to Angular 9, Typescript, and Babylonjs, and I’ve been working on setting up a simple proof of concept. Before I start working with the loader plugins, I just want to get some of the playground code displaying in our solution. Everything looks good if I just open the HTML file in Chrome. But when I run my solution in Visual Studio 2019, I just see blank white space where my drawing should be. The same thing happens if I build using ng serve and open my browser to localhost:7474.
I’ve done an npm install in my workspace folder, I’ve updated all my packages, and I’ve done an npm install for babylonjs, babylonjs-gui, and babylonjs-loaders. It wasn’t clear to me if I needed any of the other Babylonjs packages to start out. I also added all three to the types list in tsconfig.json, and I have them included in my HTML as a script. Our solution uses Typescript, so I need to make sure I have everything set up to enable Babylonjs with Typescript. I’ve spent days going through documentation and I can’t seem to figure out what what else I might be missing that would allow a simple playground Typescript example to display when running the solution through Visual Studio. Does anyone know what I may have missed in installing the packages and setting up my environment? Thanks.
Welcome to Babylon! I’ve actually never heard of a setup using Visual Studio 2019; most of the setups I’m familiar with use VS Code. Is there a particular facet of your process that requires you to use Visual Studio proper?
If not, I’d recommend trying a setup with VS Code instead. There’s some information on getting started with such a setup in the docs and in the repo, which you may have already seen. Also, Trevor Baron also wrote a blog post last year about his personal setup for creating new Babylon.js projects.
Thanks. We have a team of about 20 developers with MSDN licenses, all of whom primarily use Visual Studio for their development work. In researching this, I see lots of people mentioning VS Code but almost no one working in Visual Studio. I have to be able to make this work in our existing IDE, otherwise we’re going to get a lot of pushback to drop Babylonjs in favor of another tool.
Paging @bghgary, our foremost expert on Visual Studio and debugging in general.
Can you clarify what you mean when you say you want to make it work in Visual Studio? Specifically, can you describe the development path you want to enable? You should, for example, already be able to use Visual Studio to edit JavaScript/TypeScript files, and though I’ve never personally tried it I think there are existing approaches to using Visual Studio with Chrome debugging. Is there a specific workflow you’re trying to enable in particular?
As something of a side-note, if using Visual Studio is a strong priority, you might consider using Babylon Native, at least as a development environment. Babylon Native uses CMake to create its development environments, and on Windows, CMake will generate a self-contained Visual Studio 2019 solution by default. Within that solution, you should have access to the Visual Studio goodness you’re used to, including the debugger for both C++ and JavaScript, and you won’t need any additional utilities like Node.js or even a local server; your project will be a typical, standalone, press-F5-to-run Visual Studio .sln. Babylon Native is still being developed, but the objective is that you should be able to run the exact same JavaScript code in Babylon Native as on the Web, so even if your target is for Web deployment, you could still theoretically develop the preponderance of your JavaScript code in a Babylon Native environment, then copy that over and deploy it to the Web. It’s a bit of a departure from how we’ve seen Babylon Native used so far, but I think it might be suitable for your requirements. Thoughts?
Our development and debugging setup involves running two instances of Visual Studio on our local machines. One of them runs the server-side code, written in C#. The other runs the client, which has always been written in Javascript and HTML. Javascript debugging works reasonably well for us in Visual Studio 2017 and 2019.
We’re on a very outdated version of Angular, so we’ve started a project to move to the latest version and rewrite everything in Typescript. Once our user base found out about this project, we started receiving everyone’s wish list for new features. We don’t develop commercial software, our tools are used internally within a large manufacturing company to help our sales force configure and sell complex electrical products. One thing that came up over and over again is that all of our competitors offer 3D modeling tools within their configuration software, which is how I ended up looking into Babylonjs.
Everything in our client-side solution compiles and runs without issue in Visual Studio 2019 with the Babylonjs packages installed, it’s just that the same HTML file that renders properly when I open it directly in Chrome does not render anything when we run the entire solution in Chrome. Let me put together some screenshots to show what’s happening.
It looks like I’m limited to only one picture per post. This is what I see when I run the project in Visual Studio with both the server and client solutions. The white space on the right 2/3 of the screen is where a 3D example from the playground should be showing up. If I right-click the HTML file for this screen and open it with Chrome, I see the 3D drawing as expected. For some reason, it just doesn’t render when we run locally in debug mode.
Hey, sorry this fell off the radar. Am I interpreting correctly that, when you launch in the way you’re trying to launch, the execution that’s malfunctioning isn’t happening in Chrome? Are there any error log outputs that might shed light on what’s trying to do the rendering and where it’s falling short? Also, have you tried using the Visual Studio graphics debugger to analyze this problem? If nothing else, that might tell you if the GPU is even being invoked to try to render your scene. (Sorry I don’t have any more helpful suggestions, but without knowing the full tech stack or understanding why the workflow has to work this exact way, I’m really just guessing in the dark. )
Thanks for following up. Yes, your interpretation is correct. When I right-click the HTML file in Windows explorer and open with Chrome, I see this image. This is what I’m expecting to see in the right 2/3 of the screen in the image above, and instead I just see blank space. I’ve used the debugging tools in both Visual Studio and Chrome and I’m not seeing any errors or anything unexpected. I have not tried the Visual Studio graphics debugger, thanks for the tip. I will try that and see if it turns up anything.
)