Spark AR x Webpack

ashley fletcher
Jun 17 · 3 min read

https://gph.is/2xjnab9

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.


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.

npm i
npm run dev
// OR
npm run build

Webpack config explained

All the magic for making Webpack work for Spark AR is in the webpack.config.js file.


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.


Byte

We are a marketing technology agency. We combine technology and creativity to solve brands’ problems.

ashley fletcher

Written by

Developer at Byte working on Augmented Reality and Creative Tech

Byte

Byte

We are a marketing technology agency. We combine technology and creativity to solve brands’ problems.