8th Wall Blog
8th Wall developers get new superpowers with powerful new cloud editor features
Get started with the Cloud Editor’s new Code Search, Asset Property Panel and Debug Mode to supercharge your WebAR development
Today we are giving our developers new superpowers with powerful new features for the 8th Wall Cloud Editor designed to save you time, empower you with more information, and enable you with even more tools to make augmented reality for everyone. Developers with Pro or Enterprise workspaces can now make use of Code Search, an Asset Property Panel and an on-device Debug Mode when developing WebAR experiences using the Cloud Editor.
The 8th Wall Cloud Editor was built from the ground up for browser-based reality content (AR/VR) development. The new features launched today enhance our cloud-based IDE which offers integrated source control, commit history, live previewing, wireless remote debugging, push-button hosting on a global CDN and a library of cloneable example projects and templates to start from. Together with our AR Engine, the Cloud Editor equips developers with a complete set of tools to create, collaborate and publish web-based augmented reality content that works across iOS and Android devices with no app required.
Access stats and tools on device with Debug Mode
One of the game-changing features of the 8th Wall Cloud Editor is our wireless debugging which streams console logs from connected devices to help developers troubleshoot and optimize their experiences without the need to connect smartphones and tablets to their computer.
Today we are taking debugging to the next level with the introduction of an on-device Debug Mode exclusive to projects created with the Cloud Editor. Debug Mode equips developers with real-time information about their WebAR experience directly on the device it is being tested on. This new feature is designed to make testing and troubleshooting 8th Wall projects more efficient and equip you with both information and tools to optimize the overall experience.
To access Debug Mode on a smartphone or tablet, toggle “Debug Mode” on when clicking on the “Preview” option in the top bar of the Cloud Editor. Then scan the QR code with your device’s camera. Once scanned, you will be taken to the development build of your project in your device’s web browser and will see that Debug Mode is enabled. Alternatively, if your device is already connected to the console, you can toggle “Debug Mode” on/off from the console as well.
With Debug Mode on, not only will you have access to the console logs right on the device via the Tools Panel, you will also be provided with data from the Stats Panel related to the performance of your experience, such as the frame rate and number of draw calls and important details about your scene including entities, triangles, textures and shaders. The data available in the Stats Panel depends on the rendering framework you choose to develop your project with.
For Cloud Editor projects developed using A-Frame, Debug Mode also provides information to help you better understand and manage the AR Engine aspects of your experience including resetting the XR camera, displaying the XR camera position and rotation, showing detected surfaces and reporting the number of active image targets in the scene.
We have also made it easy to access the A-Frame Inspector as an action in the Tools Panel. Here you can make adjustments to your WebAR scene and see these changes in real-time on the device. In leveraging this feature, you can quickly prototype changes to your WebAR experience on the device and take this information back to update your code in the Cloud Editor, significantly reducing the iteration process.
See more asset details with the Asset Property Panel
Assets are a fundamental part of any 8th Wall project. The Cloud Editor already makes it easy to drag and drop, organize and even preview assets in your project. Today, we have updated the Cloud Editor to introduce a new Assets Property Panel to provide you with more detail about the assets you have added to an 8th Wall Cloud Editor project.
Now, when you click on an image, video, audio file, asset bundle or 3D model under the Assets folder in the sidebar of the Cloud Editor you will be presented with the Asset Property Panel which displays information on the file size, dimensions, duration and triangles depending on the type of asset selected.
Exposing asset information within the Cloud Editor not only helps you understand if your asset has properly been uploaded to the project but it is also helpful information you can use to best optimize your WebAR experience.
Search across files in your project with Code Search
The 8th Wall Cloud Editor now allows you to quickly search for code across files in your project. To bring up the search bar, click on the magnifying glass icon in the sidebar or use a keyboard shortcut (CTRL+SHIFT+F on Windows or ⌘⇧F on a Mac) while in a Cloud Editor project. Enter your search term and click on a result to be taken directly to the file and location of what you are looking for in the editor.
Using incremental search, this new Cloud Editor feature presents real-time results to help you find code quickly and save you time in the process. Code Search joins the existing code navigation and powerful key binding features already in the Cloud Editor in making 8th Wall development more efficient for our developers.
On-device Debug Mode, Asset Property Panel and Code Search are available today in the Cloud Editor for all developers with an active Pro and Enterprise workspace. Don’t have a workspace? Get full access to all of our tools including the 8th Wall Cloud Editor for 14-days by signing up for our Free Trial.
Watch a demo of these new features on our latest Live Learning session on YouTube.
🙌 A big thank you to our developer community for consistently providing us with helpful feedback on our product. We’re continuing to develop and iterate using the valuable input that you provide us.