8th Wall Sky Effects gives developers tools to augment the sky and create new worlds with WebAR. To help you get started, we’ve compiled a few tips for creating engaging and seamless WebAR experiences.

Tip 1: Have a focal point

Sky Effects without a focal point can be overwhelming and cause users to quickly pan around, making the transition between the real world and the virtual world more noticeable. Keep users focused on a specific area or entity, and further blend the worlds by applying a shader to the camera feed.

Tip 2: Use remote authoring

The A-Frame Inspector is a powerful tool that helps to precisely position content in the sky. Quickly find precise position values using A-Frame Inspector's visual transform tools and scene viewer, instead of iterative coding and testing.

To get started, add the sky-remote-authoring component to the <a-scene> after xrlayers, or manually remove all xr components from the scene (xrweb, xrextras-loading, etc). 

Open the inspector (<ctrl> + <alt> + i) and click play. Position an entity and copy the transformations (position, rotation, etc) to the entity in your 8th Wall project code.

Tip 3: Use pivot entities

To rotate an entity around the camera, make it a child of an empty pivot entity:

<a-entity id=”santa-pivot”>

  <a-plane id=”santa” position=”0 10 -10”></a-plane>

</a-entity>

[pivot entity is visualized with the green box]

Applying rotation to the pivot entity will rotate the children around the user at a fixed distance. Pivot entities can also be helpful for positioning planes which always face the user.

More tips and resources

Use these tips in your next project to create memorable experiences that users will love. To learn more about using 8th Wall and Sky Effects, read through the documentation and check out the sample project. 

We can’t wait to see what you create!