| Guided reading | Google has always attached great importance to the VR/AR experience on the web side, relying on the Daydream VR platform, and Google supports VR effects on the Chrome browser. Now, Lei Feng.com has learned that after a period of development and exploration, Google has begun to officially show the AR effect on Chrome. |
Google has always attached great importance to the VR/AR experience on the web side, relying on the Daydream VR platform, and Google supports VR effects on the Chrome browser. Now, Lei Feng.com has learned that after a period of development and exploration, Google has begun to officially show the AR effect on Chrome.
Google said on its blog: "In the next few months, there will be hundreds of millions of devices Android and iOS devices that support AR experiences, that is, through your phone, you can place virtual objects in the real world. In order to maximize As many people as possible can experience this product, we have been exploring how to achieve virtual reality effects on the web, and then everyone can have a magical AR experience through the browser.”
In the blog post, Google showed its 3D prototype viewer, Article, and how to use AR in the browser, and elaborated on the details of the technical implementation. There are many dry goods. Lei Feng.com edited the original text without changing its willingness. Let's take a look at how Web AR is implemented.
How Prototypes Work
Article is a 3D model viewer that runs in all browsers. On the desktop side, when viewing a 3D model, users can drag the model to rotate or scroll to zoom in and out. On the mobile side, the experience is similar, with the user clicking or dragging to rotate the model, or using two fingers to zoom in and out.
In order to show that the model is not a static image, but is 3D and interactive, the model rotates slightly when the user flips the page.
With AR, models can be more lifelike. The unique power of AR lies in its ability to merge virtual and reality. So we can, while browsing the web, find a model and place it in the room to see its actual size and walk around it.
When the Article is loaded on AR-enabled devices and browsers, an AR button will appear at the bottom of the browser. Pressing the AR button activates the device's camera and displays a reticle on the ground in front of the user. When the user taps the screen, the 3D model will appear on the reticle and will appear on the ground in full size. The user can move around the object to get the image and a sense of volume and immediacy that cannot be given.
Users can also click-drag to reposition models. Some subtle features like shadows and lighting can help models blend into the environment.
From user testing, we learned that clear interface interaction cues are key to helping users understand how AR works. For example, while the user waits for the system to identify a surface on which the model can be placed, a circle appears on the ground that tilts based on the user's movements. This can help introduce AR interaction - the interaction between virtual objects and the physical environment.
Low-level technical details
We used Three.js to create the Adaptive Model Viewer Article. Three.js makes it easier for developers to access the underlying technology of Web GL, and Three.js has a large number of cases, documents and a large number of answers to reduce the learning cost of developers.
To ensure smooth interaction and dynamics, we optimized these factors that contribute to the effect:
- A low polygon count model is used;
- The amount of lighting in the scene was carefully controlled;
- Reduced shadow effects on mobile;
- When rendering the simulator UI, efficiently render effects at unlimited resolutions by applying a shader that points to a distance function.
To speed up iteration time, we created a desktop AR simulator that allows us to detect UX changes. This allows preview changes to happen simultaneously. Before the emulator, changes, no matter how small, had to be reloaded to the mobile device, and each create-push-load cycle took more than 10 seconds. With the simulator, we can preview the adjustments on the desktop and push them to the mobile device when we are done.
The emulator is built on the desktop AR polyfill and Three.js. If a line of code is left uncommented in the index.js file, it will render a gray grid environment and add keyboard and mouse controls to replace physical movement in the real world. Simulators are included in Article's project library.
The spacesuit model comes from Poly (Google's 3D Warehouse). Many of the models in Poly are licensed through the Creative Commons Attribution, which allows users to copy or redesign them as long as the creator gives permission.
The 2D part of Article is available through ready-made libraries and web tools. To accommodate the layout and typography, as well as the overall theme, we used Bootstrap (which makes it easy for developers to create great websites that are responsive to different device screen sizes). In honor of Wikipedia and Medium, we've adopted Bootswatch's Paper theme. To manage dependencies, classes and build steps, we use NPM, ES6, Babel and Webpack.
Looking to the future
In Leifeng.com's view, web AR has great potential, it can be used for shopping, education and entertainment, etc. Article is just one of a series of prototyping tools, and there is much more to explore: how to use lighting estimation to fuse virtual 3D objects with the real world, and how to add narrative UI annotations to place in the right place on the model. Mobile AR on the web is very interesting right now, because there is so much more to explore. If you want to learn more about Google's experimental browser and start building your own prototypes, head over to Google's developer page.
Provide the latest Linux technology tutorial books for free, and strive to do more and better for open source technology enthusiasts: http://www.linuxprobe.com/