# data[].attributes.body
2. Beispiel

# data[].attributes.attachment_link.title
WebAR Areeka Studio - Create your own experience

# data[].attributes.attachment_link.description
With Areeka Studio you can create your own WebAR Campaigns without any additional skills. Use our image tracking, marker tracking, location based WebAR and object recognition and create your reality.

# data[].attributes.body
Meine erste Areeka-Szene. Interaktiv (Einstein anklicken und dann Virus anklicken).
Tutorial-Video folgt in Kürze...

# data[].attributes.attachment_link.title
WebAR Areeka Studio - Create your own experience

# data[].attributes.attachment_link.description
With Areeka Studio you can create your own WebAR Campaigns without any additional skills. Use our image tracking, marker tracking, location based WebAR and object recognition and create your reality.

# data[].attributes.body
Quell-Code-Programmierung

# data[].attributes.attachment_link.readable_text
Here is a .gif (jiff?) of the final game, click here to play the game. It uses the WebXR DOM Overlay API, and the WebXR Hit Test API. So right now the best way to play it is in Mobile Chrome or Samsung Internet Beta.

A virtual ball being shot into a virtual basketball hoop.

If you want to watch all four-plus hours of the live stream the URLs are here:

If you want to just look through the source code here it is:

This was my first time live streaming a whole project from start to finish. It was fun I think I would do it again for small projects like this. In this blog post I will talk about what tools I used to make it and some of the tricks that went into it.

Setting up AFrame

First thing first is to create a new HTML file. index.html and put in some HTML boilerplate. I do this in VSCode using the Emmet Abbreviation ! to auto-fill some basic HTML.

Next to add the AFrame script I copy and paste the script tag from the AFrame docs.

And paste the AFrame hello world into the body:

Testing

To test it I start a local http server to let me display it on my computer. I use the node http-server module. If you don't have node environment to hand a couple of other options are the Chrome Web Server extension or building it on a website like glitch.com

WebXR requires a secure origin to run. Secure origins usually begin with https:// a special secure origin is http://localhost which lets you access local a http server.

If you are using Glitch you can just open the URL on the your phone to test it.

Unfortunately the requirement for a secure origin makes things tricky for testing a local server on external devices. Normally I would access the server on my development computer via IP address like so: http://192.168.0.10:8080 but since it's not a secure origin it can't be used for WebXR.

To test it on my phone there are two options which work well, the most convenient option is to plug in my phone using USB and use Chrome's remote debugging to forward the port of the http server. Open chrome://inspect in Chrome to access this feature:

Once that is set up you can then open up http://localhost:8080 (replace 8080 with whatever port you are using) on your phone and test like you would on your computer.

During my live streams I couldn't get this working since I was using my phone's USB-C port to capture the HDMI. So I used https://ngrok.com/ to get a real https: enabled URL for my local server.

Enabling AR features

The first thing to notice when you try AR in our AFRame scene is that you'll see through the device camera briefly before it gets obscured when the scene gets shown. This is because the <a-sky> element covers the whole scene.

To solve this we'll add a new AFrame component to hide objects when the scene goes into AR. This code is from work done by Klaus Weidner in one of the AFrame demos:

AFRAME.registerComponent('hide-in-ar-mode', {
 init: function () {
 this.el.sceneEl.addEventListener('enter-vr', (ev) => {
 if (this.el.sceneEl.is('ar-mode')) {
 this.el.setAttribute('visible', false);
 }
 });
 this.el.sceneEl.addEventListener('exit-vr', (ev) => {
 this.el.setAttribute('visible', true);
 });
 }
})

I included this snippet in a little library of useful components I copy from project to project. As well as some other useful parts so I will just add that script to the page:

This adds a hide-in-ar-mode component and an ar-hit-test we can use in Aframe. We add the hide-in-ar-mode component to HTML elements I want to hide in AR such as the <a-sky> so it now looks like this:

The other issue is the scale. The AFrame hello world example is designed for VR. In VR where physically large scenes work well because you can take advantage of the unlimited space. In the AFrame Hello World Example the content is placed 5 meters from the user and is 2.5m tall. This is very large and looks impressive in VR but in AR is much too big to fit in many people's real environment.

When designing AR scenes, try to avoid having the content larger than 0.5m to enable people to fit it in their environment.

When designing AR scenes, try to avoid having the content larger than 0.5m to enable people to fit it in their environment. I say this as someone who lives in a small apartment.

The times when you want to break this rule is when the AR scene is designed to only be used outside where space is more available or when the virtual object is a stand in for a real object which has specific dimensions. Such as if they are buying a particular piece of furniture and want to see how well it fits in their house.

To update the scene I made all the objects in the scene 10% of their original size. All of the units in WebXR and AFrame are in meters so I turned 1.25m into 0.125m (12.5cm or about 6 inches.)

Adding hit testing

Hit testing allows you cast rays from the virtual content into the real world. So you can place virtual objects inline with real world objects such as the floor, tables and walls.

It will get you both the position and normal of where it hits letting objects be placed on services both vertical and horizontal.

The hit-test feature is one which is not available by default in WebXR because it lets you get additional information about a user's environment.

But you can request it when the XR session is started in AFrame you add it to your <a-scene> element using the webxr component like so:

To assist in how it's used I made a component to help with it in the library I mentioned earlier:

The ar-hit-test component will continuously do hit-testing using the most relevant user input available assisting you to build something which works on a variety of hardware. Such as it will default from using the headset position but will use a VR controller or hand tracking if it is available.

Wherever the hit lands it will place the object. This makes it handy for being a targeting reticle in AR.

We'll make a 20cm square to use for the guiding reticle:

Like <div> is for HTML for AFrame it is <a-entity>. This is a plain element with no additional properties such as 3D models. We will make a new <a-entity> which uses the ar-hit-test component to be positioned by hit-testing.

We've also made it invisible since the ar-hit-test component will make it visible again when it's able to do hit-testing.

Creating the Basketball Hoop

Now we have some way of getting the position of real world objects we want to create the hoop to go on the wall.

Objects placed on surfaces using hit testing have their y-axis (the up and down axis) aligned with the normal of the surface they are being placed on. This means that objects placed on the floor should appear pretty normal but on surfaces like walls or ceilings they will get rotated. The objects are usually also rotated around this normal to face the hit-test source but this behaviour is not in the spec and so may vary.

Since an object placed on the wall will be rotated 90 degrees we will start it off with some initial rotation as we design it. So the encapsulating entity #hoop will have rotation="90 0 0" which is similar to an object placed on a wall. If we were placing it on the floor a rotation of 0 0 0 would suffice. This rotation will be reset when we place the object against the wall to what ever the orientation of the normal of the wall is.

The hoop will be made of 3 simple shapes, a plane for the back board a torus for the hoop and an open ended cone for the net:

The end result is simple but should be clear what is.

The basketball hoop created by the code earlier

Positioning the hoop

We want the player to be able to position the hoop on their wall. We can get their chosen position by copying the location from the reticle:

const reticle = document.querySelector("[ar-hit-test]"); function positionHoop() {     hoop.setAttribute("visible", true);reticle.addEventListener('select', function (e) {
 hoop.setAttribute("position", reticle.getAttribute("position"));
 hoop.setAttribute("rotation", reticle.getAttribute("rotation"));
 positionHoop();
});
}

This very simple function will make the hoop visible and position the hoop at the same position and rotation as the reticle when a select is made. This naive function will often make the hoop a bit crooked though as it will be tilted to face the hit-test origin but lining it up is hard. So we will need to do some Vector Math to ensure the z direction of the hoop lines up with the y-axis.

const upVector = new THREE.Vector3(0, 1, 0);                          const tempVector = new THREE.Vector3();                          const tempQuaternion = new THREE.Quaternion(); function positionHoop() {     hoop.setAttribute("position", reticle.getAttribute("position"));    tempVector.set(0, 0 ,-1);
 hoop.setAttribute("visible", true);
 tempVector.applyQuaternion(reticle.object3D.quaternion);
 tempQuaternion.setFromUnitVectors(tempVector, upVector);
 hoop.object3D.quaternion.multiplyQuaternions(tempQuaternion, reticle.object3D.quaternion);
};

This slightly more complicated function will work out the Quaternion rotation needed to rotate the reticle into an upright position. It will then set the quaternion rotation of the hoop to multiplication of that rotation with the reticle's rotation. Resulting in a hoop that is facing the right way but twisted slightly so that it points up.

Adding physics to the scene

Physics is handled by the very useful aframe-physics-system this allows you to make the objects in the scene behave in physically realistic ways.

There are two types of physics objects:

1. Static Bodies, these do not move or react to being hit by other objects they effectively have infinite mass and are unaffected by gravity. They are cheap to use but cannot move. Anything that should not move should be a static body such as Floors and Walls and in our case the basketball hoop.

2. Dynamic Bodies, these have mass and will fall with constant acceleration under gravity. They can bounce off static bodies or collide with other dynamic bodies. The only dynamic body in the scene is the ball itself.

To set up the physics system we will include the script after the A-Frame script and add the physics component to our scene element:

To help setting up your scene it can be worth while to set debug to true so that you can see the shapes it has made outlined in red.

Next we add a sphere with the dynamic-body component to be the ball:

If we reload the page the ball should fall indefinitely.

The next step is to add static-body to the floor plane so that something can stop the ball, I also made it much larger as the ball will roll when it hits it.

When we play the game we want to interact with the hoop. So next we will add static-body to the backboard plane.

What do we do about the hoop? This is a lot more complicated. The hoop is a convex object it has a pretty complex topology and the 3D model has many vertices which makes the physics very expensive.

The trick here is to have an invisible torus with as few polygons as we can manage, we make it a static body but make it invisible and place it on top of the high resolution model. This is a common trick in video games to have the physics objects with much simpler geometry than the visible objects.

By having the static objects of the hoop inside the hoop entity they will be kept inline with the visible objects.

AFrame Physics System also has a JavaScript API for detecting when two objects collide or setting velocities of objects. It is available on the body property of the entity we want to control as long it is a static or dynamic body.

If we want to set the position and velocity of an object such as the ball we use this method. Here is how we launch the ball from the currently active controller:

const ball = document.getElementById('ball');   reticle.addEventListener('select', function (e) {   // Set the ball location to the controller position  // Have an initial velocity vector of 5ms into the screen  // Set our velocity vector direction to the controller orientation  // set the velocity of the ball to our velocity vector
 const pose = e.detail.pose;
 ball.body.position.copy(pose.transform.position); // {x, y, z}
 tempVector.set(0, 0 ,-5);
 // {x, y, z, w}
 tempVector.applyQuaternion(pose.transform.orientation);
 ball.body.velocity.copy(tempVector);
});

Dom Overlay

The last thing we need is to make some UI so that the user can say when they have set the hoop position and are ready to play. We can build a normal HTML interface for this:

Then you can use it by declaring it on the WebXR component on the scene object:

Using real HTML buttons and text has many benefits for the user such as working with accessibility tools, being more readable. It can be styled with regular CSS and can be coded with normal JavaScript.

Something to bear in mind though is that when the user taps on DOM Overlay Elements they will fire input events such as 'click' 'mousedown' and 'touchstart' events as usual but in addition will fire WebXR 'select' events first!

So you may need to use something like a setTimeout in your 'select' events to ensure that a button has not been pushed if you are waiting for input from the HTML buttons.

You can detect support for DOM Overlay by looking for xrsession.domOverlayState.type . If domOverlayState is not set then domOverlay is not present in the browser. If type is not set then the current hardware/browser configuration does not support DOM Overlay so you can use the following function to detect it:

function hasDomOverlay(xrsession) {  if (!xrsession.domOverlayState.type) {  return true;
 if (!xrsession.domOverlayState) {
 // DOM Overlay is not in use
}
 return false;
 }
 // DOM Overlay is not supported
 return false;
 }

If you are using DOM Overlay for essential paths through the code then you can use this to detect availability and provide fall back behaviors.

Read the source code to the finished demo

Here is the source code to the demo, I hope this guide helps you make sense of it and some of the decisions that were made. If you have further questions feel free to reach out to me through Twitter.

Thank you so much for reading!

# data[].attributes.attachment_link.description
Here is a .gif (jiff?) of the final game, click here to play the game. It uses the WebXR DOM Overlay API, and the WebXR Hit Test API. So right now the best way to play it is in Mobile Chrome or...

# data[].attributes.body
WebAR-Viewer

# data[].attributes.body
Hase auf Wiese

# data[].attributes.body
Hase auf Wiese

# data[].attributes.attachment_link.description
To try this effect, log in or sign up for Facebook today.

# data[].attributes.body
Hase 3D-Objekt

# data[].attributes.attachment_link.description
To try this effect, log in or sign up for Facebook today.

# data[].attributes.body
AR-Studio im MPZ

# data[].attributes.body
Einstieg in die AR

# data[].attributes.attachment_link.description
Simple Einstiegsprojekte, um eigene Augmented-Reality im Browser zu gestalten. 🎏 A collection of apps by @eBildungslabor

# data[].attributes.body
AR für Alle!

# data[].attributes.attachment_link.readable_text
Ich beschäftige mich schon seit einiger Zeit mit den Möglichkeiten von Augmented Reality im Bildungsbereich. Neu entdeckt habe ich mit AR.JS nun eine ausgezeichnete Möglichkeit, um eigene AR-Inhalte zum Lehren und Lernen zu gestalten. Folgendes gefällt mir daran besonders gut:

1. Die Software ist Open Source und kann gebührenfrei benutzt werden.

2. Benötigt wird lediglich ein Browser. Es muss keine zusätzliche App installiert werden.

3. Die Software ist vielfältig nutzbar und befindet sich in aktiver Weiterentwicklung.

4. Eine eigene Gestaltung von AR-Inhalten ist einfach und niedrigschwellig möglich. In nicht mal 10 Minuten ist der erste Inhalt erstellt!

Klingt interessant? Dann solltest Du weiterlesen!

Was ist AR.JS?

AR im Bildungskontext kann unter anderem folgendermaßen aussehen:

Auf einem Arbeitsblatt werden Farben oder Formen oder chemische Moleküle oder Vokabeln oder ... erklärt. Für die Schülerinnen und Schüler gibt es zum Scannen mit dem Smartphone jeweils ein Beispiel dazu, das direkt als AR-Inhalt dargestellt wird.

An einer Wandzeitung im Klassenzimmer befinden sich QR-Codes mit integriertem Marker. Wer mag, kann den QR-Code scannen und gleich darauf den Marker. Daraufhin wird die Wandzeitung lebendig, d.h. es tauchen weitere Inhalte als AR direkt darauf auf. Schülerinnen und Schüler haben die Marker und die Inhalte selbst erstellt.

Unter einer Klassenarbeit finden Schülerinnen und Schüler einen QR-Code mit integriertem Marker. Wenn sie ihn scannen, erscheint eine animierte Rückmeldung, z.B. als Gif.

All das lässt sich mit AR.JS einfach realisieren. Das letzte Beispiel, d.h. einen QR-Code mit Marker zum Scannen woraufhin ein Gif erscheint, findest Du hier (Entweder Du scannst direkt mit einem mobilen Gerät vom Bildschirm - oder Du druckst Dir zunächst das pdf samt Anleitung aus und scannst den doppelten QR Code von dort. Erster Schritt ist, den Link des QR-Codes zu öffnen. Der zweite Schritt ist, die Kamera im Browser freizugeben und erneut zu scannen. Dann erscheint der AR-Inhalt.)

Bitte beachten: Bei iOS funktioniert AR.JS laut Beschreibung erst ab Version 11 richtig. Da ich Android nutze, kann ich das selbst nicht testen.

Zwischenfazit: AR-Codes = QR Code + Augmented Reality = Augmented Reality für zeitgemäße Bildung

Als Zwischenfazit können wir somit festhalten: Mit AR.JS lassen sich AR-Codes gestalten. Sie bringen QR-Codes und Augmented Reality zusammen - und sorgen damit für eine wunderbar einfache Weise, um AR in der Bildung zum Einsatz zu bringen.

Anders als bei einem QR Code wird nicht nur zu einer Website geleitet bzw. lediglich ein einfacher Text angezeigt, sondern es wird ein AR-Inhalt direkt auf dem gescannten Objekt gezeigt.

Anders als bei klassischen AR-Anwendungen braucht es keine Installation einer App und Festlegung von Berechtigungen. Alles kann direkt mit dem Browser aufgerufen werden.

Auch Schülerinnen und Schüler können eigene AR-Inhalte ohne die Notwendigkeit zusätzlicher Apps erstellen. Wenn man nichts dauerhaft speichern will, ist nicht einmal eine Registrierung nötig. Auf diese Weise wird Technik als gestaltbar erlebt.

Wie erstelle und veröffentliche ich eigene AR-Inhalte?

Um die eigene Erstellung von Augmented Reality mit AR.JS möglichst einfach zu machen, habe ich ein ganz simples Beispiel (roter Würfel) erstellt. Du kannst es Dir hier ansehen. Lass uns nun Schritt für Schritt lernen, wie dieses Beispiel entsteht:

Das Beispiel basiert auf einer HTML-Datei. Du findest diese auf Glitch.

1. Als erstes klickst Du auf 'Remix this'und öffnest dann die index.html Datei. (Du musst dazu nicht angemeldet sein. Das ist nur nötig, wenn Du den Inhalt dauerhaft speichern willst. Ohne Anmeldung bleibt er für eine Woche online. Eine Anmeldung bei Glitch ist kostenfrei.)

2. Keine Sorge: Man muss nicht programmieren können, um sich mithilfe dieser index.html Datei einen eigenen AR-Inhalt zu erstellen. Versuche z.B. durch ausprobieren, statt einer roten Box, einen grünen Ring erscheinen zu lassen. Ändere den Inhalt so, wie Du ihn haben willst.

3. Um Dir das Beispiel anzusehen und zu schauen, ob es funktioniert, öffnest Du die URL, die sich mit dem Button 'Show' öffnet in einem mobilen Gerät. Besonders einfach kannst Du es Dir machen, wenn Du diesen Link auf der AR-Marker Seite eingibst und auf diese Weise direkt Deinen AR-Code (mit Link und Marker) generierst.

Fertig :-)

Wenn Du noch mehr mit Farben und Formen selber gestalten willst, dann kann dieses Tool sehr hilfreich sein. Du wählst hier die Elemente aus und legst ihre Eigenschaften fest, die erscheinen sollen. Anschließend kannst Du über den Button 'Save AR' ein fertiges HTML-Dokument hinunterladen und z.B. bei Glitch wieder hochladen (oder das obige Beispiel damit ersetzen). Wenn Dir Fehlermeldungen angezeigt werden, dann liegt das meist daran, dass die einfachen Anführungszeichen ' in normale Anführungszeichen " umgeändert werden müssen. Die nächsten Schritte (auf Show klicken, URL kopieren, daraus einen AR-Marker gestalten) sind dann wie oben. Genutzt werden standardmäßig Hiro oder Kanji-Marker, die auf der Website verlinkt sind. Wenn Du lieber den AR-Marker aus dem obigen eispiel verwenden willst, musst Du das im Code anpassen.

Und wie erstelle ich coolere AR-Inhalte?

Die Inhaltserstellung bei AR.JS basiert auf A-Frame. Das Schöne an dieser Software ist, dass sich damit auch komplexe Modelle einbinden lassen. Diese musst Du nicht selbst erstellen, sondern kannst sie z.B. im Internet recherchieren und dann einbetten. Das funktioniert z.B. mit GLTF Dateien. Noch einfacher wird es, wenn Du Gifs (z.B. bei Giphy nach 3D suchen) einbettest. Und auch Text ist möglich. Alle diese Varianten findest Du gesammelt auf Glitch. Suche Dir auch, was Du remixen möchtest.

In diesem kurzen Screencast-Tutorial zeige ich Dir das Vorgehen nochmals Schritt für Schritt:

Kann ich auch einen eigenen Marker erstellen?

Ja, das geht. Ich habe versucht, mit dem AR-Zeichen einen möglichst vielseitig nutzbaren Marker zu gestalten. Eigene Marker können aber jederzeit erstellt und dann genutzt werden. Dabei hilft diese Website. Wichtig dabei ist:

Die Hintergrundfarbe des Bildes, das hochgeladen wird, muss #f0f0f0 sein.

Es sollte ein möglichst einfach erkennbares Bild/ Text sein.

Der heruntergeladene Marker (eine .patt Datei) muss irgendwo online hochgeladen werden (z.B. bei Github). Die URL wird dann in den Code eingefügt.

Perspektive: ein H5P-Inhaltstyp für AR

Bereits bei den #OERcamp18 hatte ich Sessions angeboten, um gemeinsam über die Möglichkeiten eines AR-Inhaltstyp für H5P zu diskutieren. Das Fazit war dort im Wesentlichen: total gute Idee, aber kaum umsetzbar. Denn dazu bräuchte es ja nicht nur einen Inhaltstyp, sondern zusätzlich noch eine H5P-App zum Scannen ... Mit AR.JS könnte die Entwicklung nun einfacher werden. Denn man benötigt - so wie bei den anderen H5P-Inhalten auch - lediglich eine Datei. Darin wäre dann sowohl der Marker, als auch der gewünschte Inhalt definiert. Bis genug Geld und Expertise für die Entwicklung eines solchen Inhaltstyps zusammen gekommen ist, musst Du mit der Erstellung von webbasierten AR-Inhalten aber nicht warten. Ich wünsche viel Spaß beim Remix und Ausprobieren mit der obigen Anleitung!

Das Wichtigste zum Schluss!

AR.JS wird maßgeblich entwickelt von Jerome Etienne. Danke! Du kannst Dir die vollständige Software in seinem Github Account ansehen und ihm hier auf Twitter folgen.

Beitrag merken & teilen

Hier kannst Du dir den Link zum Beitrag kopieren - beispielsweise um ihn für Dich zu speichern oder mit anderen zu teilen. Wenn Du den Link in den Suchschlitz im Fediverse einfügst, kannst Du den Beitrag von dort aus kommentieren. Die Kommentare erscheinen dann nach Freigabe hier auf der Website.

Vorheriger Beitrag: Edumail #27 Nächster Beitrag: Edumail #28

# data[].attributes.attachment_link.title
Augmented Reality für alle: einfach, Open Source & webbasiert | eBildungslabor

# data[].attributes.attachment_link.description
Ich beschäftige mich schon seit einiger Zeit mit den Möglichkeiten von Augmented Reality im Bildungsbereich. Neu entdeckt habe ich mit AR.JS nun eine ausgezeichnete Möglichkeit, um eigene AR-Inhalte zum Lehren und Lernen zu gestalten. Folgendes gefällt mir daran besonders gut: Die Software ist Open Source und kann gebührenfrei benutzt werden.

# data[].attributes.body
Liste von youtube-Tutorials

# data[].attributes.attachment_link.description
Unofficial Spark AR video tutorial collections

# data[].attributes.body
was-ist-das-facebook-spark-ar-studio

# data[].attributes.attachment_link.provider_name
David Weicht - Projektmanager für digitales Marketing aus Düsseldorf

# data[].attributes.attachment_link.readable_text
Mittlerweile sind sie überall zu sehen: Hundenasen, Clownsgesichter, Comic Superhelden oder fliegende Herzen in unserem Facebook Feed oder unseren Instagram Stories. Damit sind die interaktiven Augmented Reality Effekte gemeint, die wir mit unserer Smartphone Kamera nutzen können. Dabei werden täglich neue Filter freigeschaltet, die wir dann mit unseren Freunden teilen können. Doch wie gelangen diese Effekte in unser Facebook und Instagram? Und wie kann ich einen Augmented Reality Filter programmieren? Hierbei kommt uns das Facebook Spark AR Studio zugute.

Spark AR Studio ist ein Programm, das von Facebook entwickelt worden ist und mit dem interaktive Augmented Reality Erlebnisse programmiert werden können. Diese AR Erlebnisse können dann bei Facebook oder Instagram genutzt werden. Dabei handelt es sich zum Beispiel um die erwähnten Masken, die über das Gesicht des Nutzers gelegt werden oder um Animationen, die in der realen Umgebung innerhalb unserer Smartphones lebendig werden. Hierbei können physische Materialien wie zum Beispiel Werbeposter oder Produktverpackungen mit Markern versehen werden, die beim Scannen per Smartphone eine AR Animation auf dem Poster oder auf der Verpackung abspielen. Spark AR, damals noch unter Camera Effects Platform bekannt, bietet einfache Möglichkeiten um solche AR Experiences zu programmieren und bereitzustellen.

Features und Funktionen des Spark AR Studio von Facebook

Dabei ähnelt das Spark AR Studio vielen Erstellungsprogrammen wie Adobe Photoshop, Ableton Live oder Final Cut. Innerhalb des Programms können in verschiedenen Ebenen 3D-Elemente oder 2D-Elemente wie Modelle, Texturen, Schriften oder Musik überlagert werden. Es genügt zum Beispiel, ein 3D-Modell herunterzuladen und in das Studio zu importieren. Das Modell ist dann direkt in AR verfügbar. Hinzu kommen zahlreiche Funktionen, um Lichter innerhalb Ihrer AR Experience zu simulieren. Innerhalb des Programms wird mit Modulbausteinen und Scripts gearbeitet. Die Modulbausteine können ohne Programmierkenntnisse genutzt werden. Innerhalb der Scripts wird JavaScript verwendet. Dank vorgefertigter Videomodelle können Sie Ihre Erlebnisse in Echtzeit testen. So sehen Sie, wie Ihr Effekt auf diversen Gesichtern und Hautfarben wirkt. Zudem können Sie Ihr Smartphone anschließen und den AR Effekt direkt auf Ihrem Gerät testen.

Fertige Erlebnisse können dann einfach exportiert werden. Dabei erstellt Spark AR Studio Dateipakete, die direkt bei Facebook hochgeladen werden können. Der Upload und die Verwaltung Ihrer Effekte findet im Spark AR Hub statt. Dort werden alle AR Erlebnisse aufgelistet, die Sie hochgeladen haben. Hier können Sie Ihre Effekte einfach per Klick aktivieren, pausieren oder löschen. Zudem haben Sie Zugriff auf Nutzungsstatistiken. Das ist besonders wichtig, wenn die Erfolge von AR Experiences innerhalb von Marketingkampagnen ausgewertet werden müssen. Damit Ihre Zielgruppe auf Ihre Erlebnisse und Effekte aufmerksam wird, macht Facebook es auch einfach AR Erlebnisse mit Werbung anzufeuern. Ohnehin sehen viele Experten große Chancen, AR Experiences als wirksamen Werbekanal zu nutzen.

Tutorials und Lernmaterial für Facebook Spark AR Studio

Es ist einfach Augmented Reality Erlebnisse für Facebook oder Instagram zu erstellen. Bis zu einer gewissen Stufe werden keine Programmierkenntnisse benötigt. Facebook bietet hierbei gute Tutorials für Einsteiger an. Diese Tutorials werden samt Videos und Elementen geliefert. Die Tutorials decken alle wichtigen Funktionen der Plattform ab. Um aber das Beste aus dem Spark AR Studio zu ziehen, werden Javascript Kenntnisse benötigt. Dabei zapfen Programmierer innerhalb des Spark AR Studios eine API an, die innerhalb von eigenen Skripten genutzt werden kann. Dank der Baukastenmodule werden die gängigen Interaktionsbefehle seitens des Nutzers schnell verstanden. Hierzu gehören beispielsweise das Öffnen und Schließen von Augen, die Vergrößerung von Mündern oder ein Kopfnicken.

Und sollte es mal zäh werden, gibt es zum Glück eine große Community auf Facebook, die Ihnen helfen wird, AR Erlebnisse zu programmieren. Bei Fehlern und Fragen kann das gemeinsame Wissen der Facebook Gruppe genutzt werden. Da es sich um eine relativ neue Technologie handelt, befinden sich die meisten Nutzer (Programmierer als auch Normalverbraucher) auf dem gleichen Stand. Es gilt, zu probieren, Fehler zu machen und daraus zu lernen. Innerhalb der Spark AR Facebook Gruppe ist dies sehr einfach und hilfreich für alle, die sich für Augmented Reality Experiences interessieren. Testen Sie jetzt das Facebook Spark AR Studio.

Photo by Patrick Schneider on Unsplash

# data[].attributes.attachment_link.title
Was ist das Facebook Spark AR Studio? | David Weicht - Projektmanager für digitales Marketing aus Düsseldorf

# data[].attributes.attachment_link.description
Mittlerweile sind sie überall zu sehen: Hundenasen, Clownsgesichter, Comic Superhelden oder fliegende Herzen in unserem Facebook Feed oder unseren Instagram Stories. Damit sind die interaktiven Augmented Reality Effekte gemeint, die wir mit unserer Smartphone Kamera nutzen können. Dabei werden täglich neue Filter freigeschaltet, die wir dann mit unseren Freunden teilen können.

# data[].attributes.body
Deutsches Tutorial zu Face-Filter

# data[].attributes.attachment_link.readable_text
Adrian Steckeweh zeigt, wie man in wenigen Schritten einen interaktiven Gesichtsfilter in Spark AR Studio baut

●Adrian Steckeweh alias omega.c ist im realen Leben Architekt. Schon früher entwickelte er gerenderte Face-Filter in Cinema 4D, seit Anfang des Jahres experimentiert er mit Spark AR Studio. Er sieht dies als "neue Leinwand", auf der sich gerade viele Künstler austoben und dabei neue Konzepte und Ideen entwickeln. Ihn interessieren dabei vor allem Materialien und deren physikalische Eigenschaften wie weich, hart, kalt und warm - oder nass, wie der Instagram-Regenfilter, dessen Erstellung er hier Schritt für Schritt erklärt.

Schritt für Schritt zum Face Filter für Instagram mit Spark AR

In der Funktionsweise erinnert Spark AR Studio an Gestaltungstools wie Cinema 4D oder Photoshop, bei denen man verschiedene Ebenen überlagern kann. Dank der visuellen Entwicklungsoberfläche, dem sogenannten Patch Editor, in dem bereits fertige Interaktionsmodule zur Verfügung stehen, lassen sich User-Interaktionen und Animationen hinzufügen, ohne dass der Anwender diese selbst coden muss.
Übersicht: Tutorial zum Erstellen von Instagram-Face-Filter
Die Texturen zum Nachbauen des Rain-Face-Filters kannst Du hier runterladen.

1. Face-Filter-Material vorbereiten

Durch Rechtsklick auf das Kamera-Icon im "Scene"-Menü oben links in Spark AR Studio füge ich ein Face Mesh ein. Dieses kommt direkt in einem Face Tracker, der dem Gesicht und seinen Bewegungen folgt. Über den +-Button neben "Assets" erstelle ich ein neues Material und nenne es "Rain".

Dann wähle ich im "Scene"-Menü das Face Mesh aus und im rechten Menü (der Inspector) als Material das gerade erzeugte "Rain".

2. Reflexion hinzufügen

Weil das Material wie Wasser reflektieren soll, aktiviere ich im "Assets"-Menü "Rain" und stelle im Inspector als "Shader Tape" "Physically-Based" ein.

Ich ändere die Farbe des Materials zu Schwarz, um die stärkste Reflexion zu erzeugen. Um sie zu aktivieren, setze ich den Haken neben "Environment" und wähle im Drop-down-Menü "Skylit Garage" als Reflexions-Map, die nun automatisch dem "Assets"-Menü hinzugefügt wird.
Achtung: In der neuen Version von Spark AR muss man zunächst über + eine "Environment Texture" erzeugen und kann diese anschließend im Environment Tab auswählen und modifizieren.

3. Vorgefertigte Texturen importieren

Per Rechtsklick ins "Assets"-Menü importiere ich die Texturen, die ich vorher schon in Photoshop angelegt habe. Die Normaltextur gibt der Reflexion ein Relief, das die Form der Tropfen beschreibt. Die Alphatextur kontrolliert, dass die Tropfen mehr reflektieren als der Hintergrund.

In der Menüleiste gehe ich unter "Project" auf "Edit Properties..." und stelle im erscheinenden Fenster unter "Compression" die Qualität der Texturen auf 100 Prozent, weil Spark AR Studio sie sonst stark herunterrechnet.

4. Face Assets laden

Spark AR stellt im "Help"-Menü sogenannte Face Reference Assets zur Verfügung, die ich per "Get Face Reference Assets ..." im Projektordner speichere. Dann importiere ich aus dem "Textures"-Ordner die Textur "faceMeshMask.png". Diese ist an das Face Mesh angepasst und hat zu einem späteren Zeitpunkt die Funktion, dessen Rand weichzuzeichnen.

5. Texturen im Patch Editor bearbeiten

Zunächst setze ich im "Material"-Menü den Haken neben "Normal" und klicke direkt auf "Texture". Das öffnet den Patch Editor und erzeugt den Patch, der die Normaltextur repräsentiert. Aus dem "Assets"-Menü ziehe ich die "Rain"-Normaltextur in den Patch Editor und verbinde den RGBA-Punkt mit dem Normal-Patch des Materials. Die Veränderung des Materials lässt sich direkt im Simulator sehen.

6. Transparenz einstellen

Um die Transparenz des Materials zu ändern, klicke ich im "Material"-Menü unter "Shader Properties" auf "Texture". Den im Patch Editor erzeugten Patch verbinde ich mit der Alphatextur, nachdem ich diese in den Editor gezogen habe. Die Tropfen sind jetzt schwarz und weniger transparent, der Hintergrund gräulich und damit mehr transparent. Ich ändere den "Blend Mode" zu "Add", um den schwarzen Teil der Textur auszublenden und nur die hellen Reflexionen zu sehen.

7. Patches generieren

Jetzt fällt die harte Kante des Face Mesh auf. Durch Rechtsklick in den Patch Editor kann ich verschiedene Patches erzeugen. Ich wähle den "Multiply"-Patch um die "faceMeshMask" mit der Alphatextur zu multiplizieren.

In diesem Fall bedeutet das, dass sich die beiden Texturen zu einer verbinden. Weil ich will, dass die Tropfen das Gesicht herunterlaufen, hole ich mir über Rechtsklick zweimal den "Texture Transform"-Patch und schalte jeweils einen zwischen den Input und Output der Alpha- sowie der Normaltextur.

8. Animation und Bewegungen erzeugen

Für die Transformation sorgt der "2D Transform Pack"-Patch, die Animation kommt vom "Loop Animation"-Patch und die eigentliche Bewegung vom "Transition"-Patch. Diesen muss ich per Rechtsklick von einem Typ "Point 3D" auf "Point 2D" umstellen. Den Wert für "Duration" setze ich auf 3 Sekunden, und im "Transition"-Patch ändere ich den y-Endwert auf 1, was die Bewegung nach unten ausdrückt. Das Material sieht fehlerhaft aus, weil die Texturen sich nicht wiederholen. Das ändere ich, indem ich auf diese klicke und alle "Tiling Modes" auf "Repeat" setze.

9. Interaktion hinzufügen: Screen Tap

Der Regen rinnt jetzt das Gesicht herunter. Ich finde es spannend, wenn er auch aufwärts fließen kann. Dies soll der User per Screen Tap steuern können. Dazu erzeuge ich einen "Screen Tap"-Patch und verbinde diesen mit einem "Counter". Da ich nur zwei Optionen haben will, sage ich, dass der "Maximum Count" bei 2 liegt und "Jump to Number" 1 ist. Wenn der User nun den Screen tippt, wechselt der Counter von 1 auf 2 und zurück.

An den Patch hänge ich zwei "Option Picker", von dem der eine den Wert der Rotation erhält und der andere den Wert für die Richtung, in die sich die Textur bewegen soll - diesen muss ich dafür per Rechtsklick in einen Typ "Point 2D" ändern. Die erste Option im Patch liegt bei einem y-Wert von 1 ohne Rotation. Bei der zweiten Option ist die Textur um 180 Grad gedreht und bewegt sich um einen y-Wert von -1. Die beiden "Option Picker"-Patches verbinde ich einmal mit dem Endwert im "Transition"-Patch und dem Rotationswert im "2D Transform Pack". Die Fließrichtung des Regens wechselt jetzt pro Tap auf den Screen.
nach oben

10. Interaktion hinzufügen: Screen Pinch

Ich möchte als weitere Möglichkeit hinzufügen, dass der User durch Pinchen mit zwei Fingern auf dem Screen die Größe der Tropfen ändern kann. Dazu erstelle ich einen "Screen Pinch"-Patch und packe den Wert in einen "Pack"-Patch, damit der Output wiederum ein x/y-Wert ist. Diesen verbinde ich einmal direkt mit dem "Scale"-Wert im "2D Transform Pack", um die Textur zu skalieren, und schalte einen "Multiply"-Patch dazwischen, der den Wert aus dem "Transition"-Patch anpasst. Wenn ich das nicht tue, verspringt die Textur während der Animation.

Wenn man jetzt pincht, wird die Textur zwar größer, aber sie scheint aus der unteren rechten Ecke zu wachsen. Damit sie aus der Mitte herauskommt, ändere ich im "2D Transform Pack" den Pivot-Wert auf 0,5. Die großskalierten Tropfen fließen jetzt sehr schnell, weshalb ich den Wert aus dem "Screen Pinch" mit der Zeit der "Loop Animation" multipliziere. Vorher beschränke ich ihn jedoch durch den "Clamp"-Patch auf ein Minimum von 1 und ein Maximum von 3. Das tue ich, damit die kleinen Tropfen nicht unnatürlich schnell fließen.
nach oben

11. AR-Effekt am Smartphone testen und exportieren

Um meinen Filter zu testen, lade ich den Spark AR Player aus dem App Store auf mein Smartphone und verbinde ihn per USB-Kabel mit dem Computer. Wenn die App gestartet ist, bekomme ich den derzeitigen Stand des Filters durch Klick auf "Mirror" in Spark AR Studio auf dem Handy angezeigt und kann ihn ausprobieren . Mit dem "Export"-Button oben rechts, exportiere ich eine Datei, die ich anschließend auf Facebook oder Instagram hochladen kann.

nach oben

Adrian Steckeweh, der in Tokio lebt und arbeitet, ist offen für Anfragen, macht die AR-Effekte aber in erster Linie für sich selbst und aus reiner Freude. Auf Instagram ist er als @omega.c - dem Namen des Sternhaufens entsprechend - unterwegs.

[10288]

Schlagworte: Augmented Reality, Social Media

# data[].attributes.attachment_link.title
Tutorial: Face-Filter für Instagram erstellen

# data[].attributes.attachment_link.description
Adrian Steckeweh zeigt, wie man in wenigen Schritten einen interaktiven Gesichtsfilter in Spark AR Studio baut Adrian Steckeweh alias omega.c ist im realen Leben Architekt. Schon früher entwickelte er gerenderte Face-­Filter in Cinema 4D, seit Anfang des Jahres experimentiert er mit Spark AR Studio. Er sieht dies als "neue Lein­wand", auf der sich gerade...

# data[].attributes.body
Deutsches Tutorial

# data[].attributes.attachment_link.provider_name
Petit Chapeau: Dein Reiseblog für die Seele

# data[].attributes.attachment_link.title
Tutorial: Wie erstelle ich meinen eigenen AR Filter für Instagram | Petit Chapeau

# data[].attributes.attachment_link.description
Bestimmt hast du schon von dem AR Filter Trend auf Instagram mitbekommen. Aber wusstest du, dass auch du selbst deinen eigenen Filter kreieren kannst? Seit August 2019 haben nicht nur ausgewählte Content Creator die Möglichkeit einen eigenen Filter zu erstellen, sondern jeder Instagram Nutzer, der Lust darauf hat.

# data[].attributes.body
Einführung (englisch)

# data[].attributes.attachment_link.readable_text
Today, we're excited to release new AR capabilities on Instagram that help creators build new types of AR experiences, including target tracking, which allows AR effects to be anchored to specific images or objects in the real word, and Native Slider, a new optional controller that can be called up directly in the Instagram app that lets users pick and make fine adjustments to an effect.

Additionally, we're releasing an update to Spark AR Studio (v76) that introduces a variety of new features that help simplify and streamline the creation of AR effects. This update includes templates, a new feature that helps jumpstart the creation of popular AR effects, as well as actions, which provide time-saving shortcuts for common, repetitive steps in the AR creation process.

Here's an overview of the new features and capabilities available in today's Spark AR Studio update:

Expanding AR Capabilities

Today's Spark AR Studio update is opening up new possibilities for AR experiences on Instagram, with capabilities including:

Easing AR Creation

With today's update to Spark AR Studio, we're making it easier for creators, at any skill level, to make AR experiences, faster:

Today's Spark AR Studio (v76) update is available now for download on all macOS and Windows compatible computers. To keep up on all the latest Spark AR updates, sign up for our emails, and follow us on Facebook, Instagram and YouTube.

Subscribe to the Spark AR Blog

# data[].attributes.attachment_link.title
Introducing New Spark AR Studio Features and AR Capabilities for Instagram | Spark AR

# data[].attributes.attachment_link.description
Today, we're excited to release new AR capabilities on Instagram that help creators build new types of AR experiences, including target tracking, which allows AR effects to be anchored to specific images or objects in the real word, and Native Slider, a new optional controller that can be called up directly in the Instagram app that lets users pick and make fine adjustments to an effect.

# data[].attributes.body
Sonnensystem

# data[].attributes.body
AR-Arbeitsblatt

# data[].attributes.body
Computertisch dragable

# data[].attributes.body
Image-Tracker