User testing in India begins next week via the British Council so this week is my last chance to tweak the two demonstration files I’ll be submitting, one designed for iPhones and PCs without cameras and one designed for Android phones and Laptops with cameras.
On a Google Pixel phone the Mountain component isn’t particularly speedy, so I started by duplicating the component and trying to edit it to reduce it’s resolution. I also created a new pug file for the faster component and added it to my mainForRelease.js file so that Browserify would bundle it properly.
After a chat with the author of the component, Kevin Ngo, on the A-Frame Slack, he advised me to submit a pull request with the changes I required, and he would fold them into the main branch. He also supplied me with a tutorial on how to submit a pull request. I removed all my previous work and started by forking Kevin’s K-Frame repository by clicking the fork button on it’s GitHub. A new fork now existed on my GitHub. I then cloned it to my local machine:
git clone https://github.com/JGL/kframe.git
Then I moved into the folder itself, and created a new branch called mountain-variable-size:
cd kframe git branch mountain-variable-size git checkout mountain-variable-size
I then ran:
npm install
To install dependencies locally, then:
npm run dev
To ensure I had a local working copy. I ran:
git config --global core.editor "nano"
To make sure I was using the simple nano editor for any git editing that might happen. I then edited kframe/components/mountain/index.js to the changes that I wanted, which were all to do with reducing the number of width and height segment in it’s internal PlaneBuffer. I then added it to my branch, ignored the generated kframe.js and kframe.min.js files, committed my changes and pushed the changes to my fork on GitHub.
git add components/mountain/index.js git checkout dist/kframe.js git checkout dist/kframe.min.js git commit -m "Added world-depth and world-width to Mountain component" git push --set-upstream origin mountain-variable-size
Kevin then merged the changes into his Master, and pushed the changes to npm, which meant I could just run:
npm update aframe-mountain-component
To get all the changes in my project. Creating a lower resolution mountain with the following pug code made everything run on the Pixel far faster:
a-mountain(id='mountain' color='rgb(128,0,128)' shadowColor='rgb(255,165,0)' world-depth='128' world-width='128' position='0 2000 0' material-side-modifier-mountain)
You can try the faster demo, and compare it to the slower version. I also added these changes to the release AR and the release static panorama demos.