Spark AR x Webpack
If you’ve spent some time scripting in Spark AR, you’ve probably come across the limitation of one script file per project. This limitation creates a walled environment away from using all the great JavaScript packages that already exist. Using Webpack, we can get around this limitation.
Webpack to the rescue
If you haven’t come across it before, Webpack is a module bundler primarily for JavaScript, but you can also use it for CSS, images and a whole bunch of things.
The part we’re interested in is bundling multiple JavaScript modules into one file. This gets you around the one file limit in Spark AR.
If you want to find out more about Webpack, you can check that out here
Getting started
To help get you started with Webpack I’ve created a boilerplate template for you to use from the start. It has all the config required and is set up with a hello world example.
How to use
Before you get started you’ll need Node.js and Spark AR.
Once installed, run this from the terminal in the directory of the project:
npm iThis installs the dependencies to run Webpack.
Then run either of these two commands:
npm run dev
// OR
npm run buildDev uses the “watch” flag to look for changes in your code and automatically compile the code into the script.js file. Use this during development to save manually compiling the code every time. The build command just runs the compiler once.
Once you have Webpack running, you can make changes and import all the files you want, and the Spark AR project should automatically pick up the changes.
Webpack config explained
All the magic for making Webpack work for Spark AR is in the webpack.config.js file.
Output is where we specify where the bundled JS is going to go. For us, this needs to be the script.js file that Spark AR looks for in the scripts folder.
Externals tell Webpack to ignore require statements. Ignoring require statements is vital because Spark has modules to require but doesn’t actually have the modules locally, they get added later on out of our scope. If we didn’t have them set as externals, Webpack would try and bundle those files and fail.
Here’s one I made earlier
As an experiment, I made an effect using the simplex-noise module. The effect visualizes Simplex noise to generate a voxel map procedurally. Using Webpack made creating this effect much more straightforward by being able to pull in amazing packages to help with the heavy lifting.
Try the effect on Instagram here: https://www.instagram.com/a/r/?effect_id=411882919538540
The code for the effect is here:
Hopefully, this helps you create more advanced and amazing effects more efficiently.
For more information about Byte’s use of AR, visit our website bytemissioncontrol.com.
And for any questions contact hi@bytelondon.com.
