Today I’m delighted to announce a brand new SDK to join our Universal AR suite of libraries - Universal AR for React + three.js.
It’s the next step in our mission to unlock new and exciting ways to build WebAR content and deploy it directly to the web browsers already installed on your users' phones.
With Universal AR for React + three.js you can create AR content featuring Zappar’s comprehensive suite of computer vision algorithms, including face, image and instant world tracking, using the power of the React JavaScript library, and the 3D rendering platform three.js.
Why React?
In its own words, React is a JavaScript library for building user interfaces. It provides a fantastic paradigm for creating the modern, single-page web applications that have transformed the way we use the Internet. There are a host of reasons why React is the go-to library for many web developers embarking on their next project, but I’d like to highlight three:
Composability
React structures a web page as a hierarchy of components - self-contained fragments of user interface. Components have a strict yet highly expressive format, encapsulating both properties and state. This means that React components are highly shareable between projects, and reusable throughout a project.
Fantastic Tooling
There are some great tools out there for building pages with React, including browser extensions to help with debugging, hot-reloading pages as they’re written, and many more.
Huge Ecosystem
There are a large number of components and libraries built for React that can be leveraged when creating content, including tools like Redux that help manage application state in large projects.
What does this mean for AR?
With our new SDK and React, you can craft your 3D world and AR trackers directly in JSX, just as you would with HTML if you were building a traditional web page. You can form components from the elements of your AR experience, to encapsulate content or even user experience mechanics.
Here’s an example of just how simple an AR component can be, in this case a face-tracked 3D helmet:
const { nodes, materials } = useGLTF('helmet_model.gltf')
return (
<FaceTracker>
<mesh geometry={nodes.Helmet.geometry} material={materials.base} />
</FaceTracker>
);
}
Getting Started
To get started straight away with Universal AR for React + three.js head on over to our brand new Downloads & SDKs hub in your Zapworks account.
Our documentation site shows how to get up and running, with the various tracking types and technologies available in the SDK.
We’ve prepared a set of bootstrap projects that you can use as the foundation of your next WebAR experience.
Check out our repository of examples over on GitHub:
https://github.com/zappar-xr/zappar-react-three-fiber-examples
And finally be sure to investigate the fantastic React, react-three-fiber, and three.js communities and resources.
Onwards
While it’s only been six months since we announced and released our first set of Universal AR SDKs, we’re honoured to see the fantastic response from the AR community and the stunning content that’s been produced so far. Universal AR for React + three.js offers a modern and expressive paradigm for building AR content for the web and we couldn’t be more excited to see what you build with it! :-)
Connell GauldCo-founder and CTO, Zappar
