BrainBacon

Members
  • Content count

    3
  • Joined

  • Last visited

  1. Vue integration like A-Frame

    I've been hard at work on integrating features for the plugin, and I launched the start of the example website. You can see the site here: https://beg-in.github.io/vue-babylonjs/ Additionally I'm planning on bringing this project to HackIllinois this year which has a strong commitment to contributing to open source projects, so the documentation and testing should get a quick boost! Anyway, on to the update! While developing the Camera components I noticed that the plugin was going to become too tightly coupled to the current BabylonJS API, so I came up with a way to accomidate future changes and feature additions. I present the property system: Rather than specifying every possible property in this plugin's components, this system will allow you to modify your BabylonJS objects indirectly. Several helpers are available to make defining properties easy in your template, and there are multiple ways to set them. Any changes you make in Vue will be reactive and will update the object in real-time! Unfortunately the "properties" prop for Entity components uses a deep watcher, so I will be keeping an eye on how this affects performance. My plan is to implement a method in the near future where you can access the underlying BabylonJS object directly as a v-model. Right now that is already possible from a child component extending Entity as a mixin with one of the following: A custom lifecycle hook defined specifically by this plugin: onParent({ parent }) { ... } An injected promise: let parent = await this.EntityReady; A private property: this._$_parent note: I am currently unsure If I should maintain this as a public-facing API. As always, you can see the example code in the Gitub repository. P.S. @Deltakosh I'm pretty much done with the Camera component, and I was wondering if it makes sense to have a default camera for the scene? While I was messing around in the BabylonJS Playground I noticed the scene will not function without a camera. Do you think it would confuse new developers more or less without them explicitly specifying a Camera? Right now I am not setting up a default camera if you do not specify one, but It could be do-able. A-Frame does set one up for you automatically. I see pros and cons either way, especially if someone wants to set up some sort of rig or modify camera settings. Let me know your thoughts.
  2. Vue integration like A-Frame

    Here's a little update: I've been working on materials and I started with supporting custom shaders. You will be able to define your Shader code in a multitude of ways. Here is one of the most interesting ones, inline code in a Vertex or Fragment component! You can see more examples including loading from a file or inside your component scripts in the example on the Github repository
  3. If you haven't yet seen A-Frame yet, you should check it out. The gist is that you use HTML tags to define your scene. I was working on porting A-Frame to Vue because the devtools are amazing and the components are expressive and makes your app really reactive. I prefer Vue over React since it's simpler and I don't have to work in JSX. While working on integration with A-Frame I started to notice that the overlap between A-Frame's entities and Vue's components became rather cumbersome and Three.js's API and documentation made the situation worse. I noticed the Babylon.js project shortly after and discovered how awesome it is. I then decided it would be better to make my own ECS using Babylon.js with Vue components. As of right now I have Scene, Entity, Mesh, Light, and Animation components created. Here's a sneak peek: And the code for the scene written in Pug: I'll keep this thread updated as I continue progressing on the project. Let me know if you have any ideas or feedback. You can watch me code it on my Twitch stream this Monday from 2-10pm CST. I just started this project a couple days ago, so it doesn't have documentation yet, but you can see the code on Github or grab it off of NPM as vue-babylonjs