brianzinn

Members
  • Content Count

    795
  • Joined

  • Last visited

  • Days Won

    6

brianzinn last won the day on September 29

brianzinn had the most liked content!

3 Followers

About brianzinn

  • Rank
    Advanced Member

Profile Information

  • Location
    Vancouver, BC

Recent Profile Visitors

1,886 profile views
  1. brianzinn

    Remix3D mesh mashup

    As the last planned declarative vs non-declarative example, I have made a mesh mashup from Remix3D. It is something like 80% complete and I'm going to leave it like this as it is primarily serving as an example and thought experiment. The buttons with "*" have animations and are more interesting (ie: bee/fish). I was imagining a VR portal for Remix3D as opposed to how it is now, which only allows downloading and not directly viewing in VR. Also, even if they added that (which they could easily) - I wanted also to be able to search for meshes without leaving the VR experience. I wanted to inspect (teleport) and search remix3D models in VR. PG: https://www.babylonjs-playground.com/#BL921E Declarative: https://brianzinn.github.io/create-react-app-babylonjs/meshMashup The advantages of the declarative markup is that some implementation details can be shield from the developer (ie: linkToTransformNode() only works AFTER Gui3dManager.addControl) and other nuances related to ordering of adding GUI and also the automatically calling dispose(), so auto-cleanup of resources. Additionally, reusable logic can be in components. I prefer to build the GUI declaratively as it is much more intuitive. Having said that, it did not really have as much advantage as I had hoped. You can compare the declarative source here, if interested (https://github.com/brianzinn/create-react-app-babylonjs/blob/master/src/remixMeshMashup/index.js). One more advantage was the HMR (Hot Module Reloading), but due to the nature of React, it was rebuilding the entire scene. Although HMR is convenient, you need to replay state and maintain that state and have the state external to the components. In other words, for typical game development the HMR aspect may not be so useful, but for a layout with 3D models and GUI at least it will reload in the webpage automatically with the updated changes and provides a nice developer experience.
  2. It's not the Engine or BabylonJS watching, just our dev server, which answers the next question that there is no HMR in production Possibly that is a good way to do it. Definitely the textures at least are cached at engine level, although that presents a difficulty, it also means hopefully that we can hot swap easier scene wide generically. I am still trying to figure out how some logic will be able to participate in HMR. One good example is the "size" parameter of MeshBuilder.CreateBox() these factory methods create objects that have no concept of their constructor parameters. Box is easy if you look at the position indices, we can edit them directly, but that's why I have been experimenting for a few weeks already on intermediate "proxy" classes. I have no trouble setting "size" directly when recreating Animations is interesting as well, because if you change an animation then it could change the entire state you were in - or even make the current state invalid. So, I think it's good for me to start with assets and work outwards.
  3. brianzinn

    Can we customize the look of BabylonJS.GUI?

    oh - yes. The StackPanel can be very frustrating to work with and the whole hierarchy of the addControl(), etc. Unity is pretty amazing - I agree I am very busy the next 5 weeks and traveling, but if you want to work on that boilerplate then I'm happy to help out. I did find a few different threads about why HMR would only work once on accept. I'll see about a PR. Cheers.
  4. brianzinn

    Can we customize the look of BabylonJS.GUI?

    OK - I was just making sure you weren't porting from a JavaScript 2D library, since it was maybe possible to harvest the menus by running the other code on the same canvas (ie: look in Demos and Projects for topic "Combine Babylon.js with Pixi.js").
  5. brianzinn

    BabylonJs with Angular 6

    hi @ghostman - didn't realize you were new to the forum, so welcome! For sure there are people who have succeeded with Babylon and Angular, but I can't point you to any examples. I am definitely not suggesting that you choose React, but can point out some examples that I have created: https://brianzinn.github.io/create-react-app-babylonjs/ (JavaScript) https://brianzinn.github.io/create-react-app-typescript-babylonjs/ (TypeScript) https://brianzinn.github.io/react-redux-babylonjs-starter-kit/ (JavaScript and deprecated, but has a working game) I'm absolutely certain you could get all of those examples working in Angular and vue.js. I just don't know any other examples. Hopefully somebody can chime in with some Angular examples for you!
  6. In case anybody is wondering what hot reloading textures looks like, I have made a screen capture. This saves you the trouble of downloading @Nodragem's repo, adding that one line patch and running it yourself, even though that only takes a few minutes Chrome on top, Edge on the bottom - on the right dragging a different image up into our webserver /assets/ directory and having it hot reloaded into WebGL + BabylonJS. The huge advantage with this technique (over the HMR you see in my screen capture above) is that we are replacing a running instance (not reloading cameras, lights, other assets, etc.) and this is where you want to be if you are ie: making a game, whereas my first screen capture (while it does use HMR) is rebuilding the entire scene. Some advantages of scene rebuilding is that I can add/remove to scene, replay state (in my game, I can fully restore from state on startup) and change things like constructor variables and have them take effect, etc. @Deltakosh - Reporting back. I am about to start digging through the engine cache texturing to see if that is how we could/should be replacing textures for entire scene.
  7. brianzinn

    Toggling in scenes in VR mode

    OK, you may want to look at grid container, if you go with 2D panel: https://doc.babylonjs.com/how_to/gui#grid
  8. brianzinn

    BabylonJs with Angular 6

    I haven't use Angular since V1, so I think we can all agree that I can't help much there! I think the general idea is to use NPM and load scene in ngAfterContentInit(). All the relevant docs are here for NPM. Note that import 'babylonjs-loaders' is only for side effects: https://doc.babylonjs.com/features/npm_support
  9. brianzinn

    Toggling in scenes in VR mode

    Not with 3D panel, but with regular 2D panel, you can do things like this: https://www.babylonjs-playground.com/#Q81PBV#5 You can check plane intersection manually and move when needed.
  10. brianzinn

    Toggling in scenes in VR mode

    I would not use a cylinder panel like you were, because it's too difficult to position when you are close to a wall. I would go with how the WinMR works and pop up a flat panel in front of the user, but away from walls/ground. My preferences I don't want to affect your design - I am not a good designer just pointing out what may be easier. Every unit is 1 meter in VR. Use that as a baseline everywhere. Toggling scenes in VR mode - use asset container: https://doc.babylonjs.com/how_to/how_to_use_assetcontainer
  11. brianzinn

    Bring 3D panel in front of camera.

    Here is one way to move something in front of a camera: http://playground.babylonjs.com/#7M7BYY Whenever you click on the canvas, the sphere will be in front of you. If you are using the VR Experience Helper then you need to use the active camera from the helper. Also, if you are using the "anchor" from the other PG then you will want to make sure that you get the rotation right and you can rotate the anchor, which is in the middle of the CylinderPanel (hint: cylinder panel has a radius).
  12. I use TS and Webpack and also HMR every day. Except for some battles with webpack, I mostly let them magically do things behind the scenes. I regularly use module.hot.accept for maintaining state and changing data processing logic, so it's really cool to see this working in WebGL in running code (my screen example above rebuilds entire scene with HMR)! I can confirm that my first suggestion of adding a cache buster that the texture image is swapped!! https://github.com/Nodragem/babylonjs-webpack-boilerplate/blob/master/src/game.ts#L30 change to: let imageSource = "assets/2D/dungeons_and_flagons3.jpg?" + Date.now(); material.diffuseTexture = new BABYLON.Texture(imageSource, this._scene); I see it's only being swapped once and then the acceptChange() isn't called the second time. I will try to investigate more, but am really busy these days. Great project idea. I'll definitely make some time here as this is an area of interest for me and a crucial part of my workflow. Next step for me is to look at texture internals of BabylonJS and see if we can swap there without using sledgehammers like "engine.clearInternalTexturesCache()" - maybe some PRs for engine are needed for this access. Also, the base example should have two meshes to ensure the texture swap is scene wide. Cheers.
  13. haha - now I have to download the github repo. I expected an image with the same path would be cache optimized by either the browser or BabylonJS.
  14. brianzinn

    mesh rendered black on android models

    That bottom one looks like a lot of screen glare! So, the top picture is Samsung with the desired rendering and the bottom picture is an LG tablet? Samsung worked with no changes, while changing highPrecisionShaderSupported had no effect on LG? I'm just asking to get more info for the next person, but actually I am completely unable to help here, sorry! Good luck
  15. brianzinn

    Can we customize the look of BabylonJS.GUI?

    What are you porting the game from?