Usage

• Getting Started
• Three.js
• Universal AR

You can integrate the Zappar library with the existing requestAnimationFrame loop of your three.js project, as seen in the project example below. The rest of our UniversalAR three.js documentation goes into more detail about each of the component elements of present in the example.

// Set up three.js in the usual way
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

// The Zappar library needs the WebGL context to process camera images
// Use this function to set your context
ZapparThree.glContextSet(renderer.getContext());

// Create a camera and set the scene background to the camera's backgroundTexture
let camera = new ZapparThree.Camera();
scene.background = camera.backgroundTexture;

// Request camera permissions and start the camera
ZapparThree.permissionRequestUI().then(granted => {
    if (granted) camera.start();
    else ZapparThree.permissionDeniedUI();
});

// Set up a tracker, in this case an image tracker
let imageTracker = new ZapparThree.ImageTrackerLoader().load(targetFile);
let trackerGroup = new ZapparThree.ImageAnchorGroup(camera, imageTracker);
scene.add(trackerGroup);

// Place any 3D content you'd like tracked from the image into the trackerGroup

function animate() {
    // Ask the browser to call this function again next frame
    requestAnimationFrame(animate);

    // The Zappar camera should have updateFrame called every frame
    camera.updateFrame(renderer);

    renderer.render(scene, camera);
}

// Start things off
animate();

Caveats

Texture Encoding

When changing outputEncoding on your renderer, ensure you apply the same encoder to the background texture of the camera.

const renderer = new THREE.WebGLRenderer();
renderer.outputEncoding = THREE.sRGBEncoding;

const camera = new ZapparThree.Camera();
// Add the below line for consistency
camera.backgroundTexture.encoding = THREE.sRGBEncoding;
scene.background = camera.backgroundTexture;

The same applies to renderTarget.texture.encoding when using EffectComposer.