Web_Designer_Issue_262_2017

Tutorials
Code augmented reality markers
Make the model
In this project the model
was created in Cinema 4D,
but most 3D modelling
applications will be able
to create the model. The
main point you should look
for is that you can export
to Three.js, which does
support a wide range of 3D
model formats. One of the
most popular is the Collada
model format, which is
XML based and has the file
extension of DAE standing
for Digital Asset Exchange.
When the models are
named in the modelling
application, this ties up
directly with the name
of the models in steps
4 to 7 by using the
getModeByName
command. Once these
are stored in a variable
it’s easy to get access to
them and computationally
animate these in the
browser window.
cameraParametersUrl: ‘data/camera_para.
dat’,
detectionMode: ‘mono’,
maxDetectionRate: 30,
canvasWidth: 80 * 3,
canvasHeight: 60 * 3,
});
15. Get the camera data
The AR toolkit is initialised now and the camera in the
WebGL scene gets the same projection matrix as the
input camera from the AR toolkit. The AR toolkit is
pushed into the render queue so that it can be displayed
on the screen every frame.
arToolkitContext.init(function onCompleted()
{
camera.projectionMatrix.
copy(arToolkitContext.
getProjectionMatrix());
});
onRenderFcts.push(function() {
if (arToolkitSource.ready === false)
return
arToolkitContext.update(arToolkitSource.
domElement)
});
16. Match the marker
The markerRoot is a group that will be used to match the
shape in augmented reality. It’s first added to the scene,
then this is used along with the AR toolkit to detect the
pattern, which is also located in the data folder.
markerRoot = new THREE.Group
scene.add(markerRoot)
artoolkitMarker = new THREEx.ArMarkerControl
s(arToolkitContext, markerRoot, {
type: ‘pattern’,
patternUrl: ‘data/patt.hiro’
});
17. Add the model
Back in the early steps a model was loaded and stored
in the variable of the model. This is added to the
markerRoot group from the previous frame. The model
had some specific elements within it that are going to be
animated every frame. They are also pushed into the
render queue.
markerRoot.add(model);
onRenderFcts.push(function() {
tube1.rotation.y -= 0.01;
tube2.rotation.y += 0.005;
mid.rotation.y -= 0.008;
details.position.y = (5 + 3 * Math.
sin(1.2 * pulse));
});
18. Finish the init function
The renderer is told to render the scene with the camera
every frame by adding it into the render queue, which is
the array set up in step 9. The animate function is called,
and this will render every frame to display content. The
closing bracket finishes and closes the init function.
onRenderFcts.push(function() {
renderer.render(scene, camera)
});
lastTimeMsec = null;
animate();
}
19. Just keep going
The animate function is created now and uses the
browser’s requestAnimationFrame, which is a call to
repaint before the screen is drawn. This continues to call
itself, and the browser attempts to call this function at 60
frames per second.
function animate(nowMsec) {
// keep looping
requestAnimationFrame(animate);
20. Timing issues
Mobile browsers sometimes find it dificult to reach 60
frames per second with diferent apps running. Here
timing is worked out so that the screen is updated
based on timing. This means if frames drop, it looks
much smoother.
lastTimeMsec = lastTimeMsec || nowMsec -
1000 / 60;
var deltaMsec = Math.min(200, nowMsec -
lastTimeMsec);
lastTimeMsec = nowMsec;
pulse = Date.now() * 0.0009;
21. Finish it up
Finally each of the elements in the render queue are
now rendered to the screen. Save the page and view
this from a https server on mobile or a regular http
server on desktop, print the supplied marker and hold
it in front of the camera to see the augmented content.
onRenderFcts.forEach(function(onRenderFct) {
onRenderFct(deltaMsec / 1000, nowMsec /
1000);
});
}
57