Thoughts about approach to documenting this project
I have made a resolution to myself that I am going to be constantly writing about this project every day as I continue to work on it. Some posts will probably be similar to my last one (Germs.AR Update 2) which was basically just a dump of some code snippets and some quick screen captures that I took while working on the project. Hopefully many will be more similar to this one where I can talk a bit more about my thought process, and discoveries that happen as I work.
Building off my progress yesterday, I spent some time today creating a rotation component for my germs. The code for the rotation component looks like this:
I had originally approached this component the exact same way as I had the random movement component from my last post, by creating a randomized vector and then using the values from that vector to
setAttribute("position") but after digging around a bit in the A-frame docs and the THREE.JS docs I stumbled upon this article on github which provided some more info about the specifics of the implementation of the rotation component in A-Frame, and how that interfaces with the underlying three.js. For reasons I don't entirely understand, using
setAttribute() here just seems to be the 'wrong way.'
As in it wasn't working at all when I tried. Who am I to argue with that?
Still, I think it's strange that you'd be able to update the position property one way, and the rotation property another - guessing here that it's something to do with converting back and forth between radians/degrees each time.
Anyways, having messed with the code a bit and seen that this was the way it was going to have to be, it didn't seem like there was a point anymore of creating and using a vector, so I was able to streamlined the code a bit. It took a bit more fiddling with values to get an effect where it looked like it was rotating in a a less jittery way.
Here's a short demo vid showcasing the germs moving and rotating randomly (and me looking really unhappy again - I like doing this stuff, I promise!):
Note: this is still really slow to load, doesn't work on Chrome for iOS, and will need to be pointed at a hiro marker to display the germs! Here's a marker, for your viewing pleasure:
I spent some additional time looking up other A-Frame projects and thinking about where to take this next, and in the process came across a great article on Medium about using a raycaster for interaction and taking webAR demos outdoors without a need for a marker to anchor the AR content to. I'm planning to follow along a similar path soon in order to get some greater interactivity between my germs and the real world soon - having the interaction tied to a marker doesn't really create the kind of 'organic' experience that I had hoped for. I really like the ability to create an instance of an AR object in a way that relates naturally to the real environment.
Only problem: at least for now, it looks like the only way to really get doing some of this stuff is to build a specialized browser called WebARonARCore (for Android users) or WebARonARKit (iOS users). The iOS version requires an Apple developer account to build (which I don't have!) that costs $99 a year. Considering that I'm not necessarily planning on creating any iOS apps in the near future, I'm not that psyched about making a mandatory donation to Apple at this time. That said, I have been starting to take a look at some of the OpenFrameworks docs, in which case this might come in handy. Meanwhile I'll be doing some more research to look into other workarounds.
Other issues/questions/ideas looming on the horizon
- How small can I get these germs before they stop displaying in the browser?
- How many germ objects can I have floating around before it stops being performant?
- Thinking about creating better underlying logic for germ behavior - random rotation and movement are too easy. I'm planning on looking into cellular automata and trying to make these guys a bit more "realistic"
- Same goes for color - soon to be curating a color palette that makes this whole look a bit less "party" and a bit more visually cohesive.
- Might have to look into learning how to do some basic 3D modeling in order to create some low-poly (fast loading!) germ geometries
That's all for now!