Facebook Patent | Visual Editor For Designing Augmented-Reality Effects

Patent:

Publication Number: 20180268615

Publication Date: 20180920

Applicants: Facebook

Abstract

In one embodiment, a method for designing an augmented-reality effect may include receiving a model definition of a virtual object. The virtual object may be rendered in a 3D space based on the model definition. The system may display the virtual object in the 3D space from a first perspective in a first display area of a user interface. The system may display the virtual object in the 3D space from a second perspective, different from the first, in a second display area of the user interface. The system may receive a user command input by a user through the first display area for adjusting the virtual object. The virtual object may be adjusted according to the user command. The system may display the adjusted virtual object in the 3D space from the first perspective in the first display area and from the second perspective in the second display area.

PRIORITY

[0001] This application is a continuation-in-part under 35 U.S.C. .sctn. 120 of U.S. patent application Ser. No. 15/460,121, filed 15 Mar. 2017. This application is a continuation-in-part under 35 U.S.C. .sctn. 120 of U.S. patent application Ser. No. 15/460,087, filed 15 Mar. 2017. This application is a continuation-in-part under 35 U.S.C. .sctn. 120 of U.S. patent application Ser. No. 15/460,104, filed 15 Mar. 2017. The aforementioned applications are all hereby expressly incorporated by reference.

TECHNICAL FIELD

[0002] This disclosure generally relates to an editor for designing computer-generated effects.

BACKGROUND

[0003] Augmented reality provides a view of the real or physical world with added computer-generated sensory inputs (e.g., visual, audible). In other words, computer-generated or virtual effects augment or supplement the real-world view. For example, a mobile phone with a camera may capture a real-world scene and display a composite of the captured scene with computer-generated objects. The visual objects may be, for example, two-dimensional and/or three-dimensional objects.

[0004] The conventional process for designing an augmented reality effect may be time consuming and labor-intensive. An augmented reality design, at a high level, comprises art work to be displayed (e.g., drawings or computer-rendered objects) and software instructions for controlling how the art work would appear in the augmented-reality scene. The design process for an augmented-reality effect typically requires several iterations of designing and modifying the art work and the software instructions in order to fine tune the desired effect. The process may be further complicated since the artist and programmer are usually different persons. Thus, a typical design flow may require, e.g., designing an art work by an artist, integrating the art work into an effect by a programmer, assessing the result, having the artist and/or the programmer refine the art work and/or the software instructions, and repeating until the desired augmented-reality effect is achieved.

[0005] In operation, after an augmented-reality effect has been designed, objects appearing in the effect may be rendered by end-user devices (e.g., smart phone, tablet, laptop, desktop, etc.). The objects, which may be defined in three-dimensional space, may be processed or rendered one by one. Typically, the rendering order may be based on the objects’ distance from the viewer or the display region. For example, if a scene on Mars includes a red filter, smoke, and an astronaut placed in that order in three-dimensional space from the viewer, the three objects may be rendered in that same sequence (e.g., closer objects may be rendered first).

[0006] Augmented-reality effects may be displayed through a variety of devices. For example, augmented-reality effects may be displayed on a user’s mobile phone, tablet, laptop, computer monitor, television, or any other display devices. However, different display devices may have different aspect ratios, resolution, display orientations, and/or other display features. Even if an augmented-reality effect is displayed as desired on one device in a particular viewing mode, it may not display as desired on a different device or in a different viewing mode.

SUMMARY OF PARTICULAR EMBODIMENTS

[0007] Particular embodiments of the subject matter disclosed herein relates to an augmented-reality design editor (hereinafter “Editor”) that provides an environment where composition of art work and effects may be designed and displayed dynamically in real-time, thereby enabling a designer to quickly fine tune, adjust, and test augmented-reality effects. For example, the Editor may provide various features allowing a designer to import an artistic object, incorporate the object into an augmented-reality effect, and make adjustments to the object and/or augmented-reality effect. In particular embodiments, the Editor may provide the designer with real-time visual feedback of the current state of the design during the design process.

[0008] In particular embodiments, the Editor may provide an intuitive yet powerful user interface for allowing a designer to specify how object scaling should occur when dimensions of the display canvas change (e.g., such as when a device switches from portrait view to landscape view). For example, the designer may specify scaling parameters for objects, such as designating a reference point (e.g., an anchor, a pivot point, and a scaling point) for scaling operations (e.g., positioning, rotation, and scaling). As another example, the designer may also designate certain scaling parameters as being responsive for fixed. For instance, responsive dimensions of an object may adjust based on the dimensions of the display region, and fixed dimensions may remain the same regardless of the dimensions of the display region.

[0009] In particular embodiments, the Editor may provide configuration options for designers to control how objects are to be rendered in operation. In particular embodiments, the relative rendering order of each object may be individually specified, regardless of the positions of the objects relative to each other in the three-dimensional space. In particular embodiments, the Editor may provide a user interface allowing designers to specify whether an object is: opaque, transparent/translucent, an overlay, or a cutout. Based on the selected property, the Editor may automatically specify how the corresponding object should be rendered in operation with respect to depth-buffer access.

[0010] Further, since AR effects are designed to be displayed in the real world, AR effects are typically defined in 3D space. In particular embodiments, the Editor may provide features that help designers visualize and simulate how augmented reality (“AR”) effects appear to users and how they are positioned in three-dimensional (“3D”) space. In particular embodiments, the Editor may provide designers simultaneous views of an AR effect from different perspectives, such as through separate windows or display regions. In particular embodiments, the user may update the AR effect through any of the windows and the updates would be reflected in each of the other windows. In particular embodiments, the Editor may be configured to receive gyroscope data from a real mobile device communicatively coupled to the system on which the Editor is being executed, and adjust the orientation and focal plane of the virtual mobile device accordingly. In particular embodiments, an AR effect may be tested using a photo/video sphere overlaid with a video of a person. Moreover, in particular embodiments each AR object in an AR effect may be individually associated with either the display plane of the camera or the 3D space. In particular embodiments, each AR object may be individually configured to be shown with a scene captured by the front camera and/or back camera.

[0011] The embodiments disclosed herein only examples, and the scope of this disclosure is not limited to them. Particular embodiments may include all, some, or none of the components, elements, features, functions, operations, or steps of the embodiments disclosed above. Embodiments according to the invention are in particular disclosed in the attached claims directed to a method, a storage medium, a system and a computer program product, wherein any feature mentioned in one claim category, e.g. method, can be claimed in another claim category, e.g. system, as well. The dependencies or references back in the attached claims are chosen for formal reasons only. However any subject matter resulting from a deliberate reference back to any previous claims (in particular multiple dependencies) can be claimed as well, so that any combination of claims and the features thereof are disclosed and can be claimed regardless of the dependencies chosen in the attached claims. The subject-matter which can be claimed comprises not only the combinations of features as set out in the attached claims but also any other combination of features in the claims, wherein each feature mentioned in the claims can be combined with any other feature or combination of other features in the claims. Furthermore, any of the embodiments and features described or depicted herein can be claimed in a separate claim and/or in any combination with any embodiment or feature described or depicted herein or with any of the features of the attached claims.

BRIEF DESCRIPTION OF THE DRAWINGS

[0012] FIGS. 1A-1B illustrate an example user interface of an augmented-reality design editor.

[0013] FIG. 2 illustrates an example method for designing an augmented-reality effect using an augmented-reality design editor.

[0014] FIGS. 3A-3D illustrate example scaling configurations for an object.

[0015] FIG. 4 illustrates an example method for specifying scaling configurations for an object using an augmented-reality design editor.

[0016] FIG. 5A illustrates an example of a conceptual relationship between a display region, a three-dimensional space displayed through the display region, and a viewer.

[0017] FIGS. 5B and 5C illustrate example user interfaces for concurrently showing how objects may appear in three-dimensional space and in a two-dimensional display region.

[0018] FIG. 6 illustrates an example user interface for controlling the rendering order of objects.

[0019] FIGS. 7A-7B illustrate an example of an object having an opaque property.

[0020] FIGS. 8A-8B illustrate an example of an object having a transparent/translucent property.

[0021] FIGS. 9A-9B illustrate an example of an object having an overlay property.

[0022] FIGS. 10A-10B illustrate an example of an object having a cutout property.

[0023] FIG. 11 illustrates an example method for controlling how objects are rendered using an augmented-reality design editor.

[0024] FIG. 12 illustrates an example network environment associated with a social-networking system.

[0025] FIG. 13 illustrates an example computer system.

[0026] FIG. 14 illustrates an embodiment of an editor providing simultaneous views of an augmented reality effect from different perspectives, with the front camera of a virtual mobile device enabled.

[0027] FIG. 15 illustrates an embodiment of an editor providing simultaneous views of an augmented reality effect from different perspectives, with the back camera of a virtual mobile device enabled.

[0028] FIG. 16 illustrates examples of various configuration options of an editor.

[0029] FIG. 17 illustrates an example scenario where an AR object is associated with both the front camera and back camera.

[0030] FIG. 18 illustrates an example scenario where an AR object is associated with the back camera and not the front camera and when only the front camera is active.

[0031] FIG. 19 illustrates an example scenario where an AR object is associated with the back camera and not the front camera and when only the back camera is active.

[0032] FIG. 20 illustrates an example method for simultaneously presenting multiple perspectives or views of an AR design using an augmented-reality design editor.

DESCRIPTION OF EXAMPLE EMBODIMENTS

[0033] Particular embodiments disclosed herein provide an augmented-reality design editor (hereinafter “Editor”) for designing augmented-reality effects. In particular embodiments, the Editor may be a composition and integration tool through which objects may be visually incorporated into an augmented-reality effect and modified based on real-time feedback of the current state of the design. In particular embodiments, the Editor provides a graphical user interface that allows visual editing of the objects and effects in the design.

[0034] In particular embodiments, trackers may be added to an augmented-reality design using the Editor. In particular embodiments, a tracker may be a software-implemented tool that may be used in an augmented-reality design to track particular objects and/or motions appearing in a video scene. The Editor may support different types of trackers, such as trackers for a person’s face, body, head, hand, expression, and gestures, as well as trackers for other types of animals (e.g., dogs, cats) and objects (e.g., cars, background, wall). The example shown in FIG. 1A utilizes a face tracker 120.

[0035] In particular embodiments, the user may add a tracker to an augmented-reality design by, e.g., selecting the desired type of tracker, dragging-and-dropping a tracker onto an object (e.g., a person’s face 110) shown in the video 100, or through any other suitable user-input interface. In particular embodiments, based on the type of tracker selected, the Editor may monitor the video for the type of object that the tracker is configured to track (e.g., face, hand, etc.). For example, a 64-point facial rig may be used to detect and track a person’s face. In particular embodiments, for each tracker added to the design, the Editor may monitor the entire video display or a region of the video display for the target object. In particular embodiments, upon detecting such an object, the Editor may associate the appropriate tracker with the object to track that object’s movements. In particular embodiments, a tracker may tracker any feature(s) of an object, such as movement, position, orientation, color, shape, pattern, etc. In particular embodiments, a tracker may have a fixed position within the video display (e.g., at particular x-y coordinates). As another example, a tracker’s position and/or orientation within the video display may be defined relative to the tracked object. For instance, the tracker’s position may overlap or coincide with the tracked object and its orientation may mimic that of the tracked object. As another example, a tracker may be positioned n pixels (or other distance measures) from the center of the tracked object and its instantaneous position and/or orientation may depend on the orientation of the tracked object (e.g., if the user is looking up, the tracker may be positioned n pixels above the user’s face; if the user is looking forward, the tracker may be positioned n pixels in front of the user’s face). This relative position may be maintained as the object moves (e.g., changes position and/or orientation). In particular embodiments, the relative position of a tracker may be defined by the user through a drag-and-drop mechanism using the object shown in the video as the reference point. In particular embodiments, a tracker may also be associated with another tracker. For example, a first face tracker may be positioned n pixels to the left of a person’s face, and a second tracker may be positioned m pixels above the first tracker. In particular embodiments, any number of trackers may be added to an augmented-reality design, any number of trackers may be associated with an object, and any number of trackers may be associated with another tracker.

[0036] In particular embodiments, a tracker may be displayed in the video to provide visual cues as to the position and orientation of the tracker. For example, a tracker may be displayed as a facial mesh or mask, a three-dimensional Cartesian axis (e.g., the tracker 120 shown in FIGS. 1A and 1B), or any other suitable visual representations. The displayed tracker may move according to movements of the tracked object. For example, as the tracked object changes position and/or orientation, the displayed tracker may change position and/or orientation accordingly (e.g., following the user’s face or maintaining a defined relative position; rotating to reflect the orientation of the tracked object, etc.). In the illustrated examples in FIGS. 1A and 1B, the tracker 120 changes its position and orientation according to the changed position/orientation of the person’s face 110. In particular embodiments, a display of the tracker may be added to the video in real-time while the video is being displayed. In particular embodiments, the displayed tracker may also be a user interface for changing the position, orientation, and other properties of the tracker and/or any associated objects. For example, the user may drag-and-drop a tracker (e.g., displayed as a three-dimensional Cartesian axis) to adjust the position and/or orientation of the tracker or any associated objects that are defined relative to the tracker.

[0037] In particular embodiments, the user may also add any number of objects to the augmented-reality design in real-time while the video is being displayed. In the illustrated examples shown in FIGS. 1A and 1B, the object 130 is a three-dimensional cube. In particular embodiments, the user may import an object definition (e.g., an image file, a 3D object model, etc.) into the Editor (e.g., from a file, server, another application, etc.). For example, an object may be a 2D image, a 3D object, a mask, a mesh, a plane, a line, a null object (e.g., only displayed during the design but not in the final product), or any other visual artifacts. While certain objects may be predefined, others may be dynamically generated based on detected features of the video. For example, a facial mask or mesh may be dynamically generated based on information from a 64-point facial rig so that its size, shape, and/or contour may match that of the detected face. In particular embodiments, the user may select any available object and add it to the augmented-reality design using any suitable user-input interface (e.g., through a menu selection, dragging-and-dropping, etc.). In particular embodiments, the selected object may be rendered and displayed in the video in real-time as the video is being played.

[0038] In particular embodiments, the user may associate any number of objects with one or more trackers. For example, in FIGS. 1A and 1B, the object 130 is associated with the tracker 120. In particular embodiments, the Editor may display the selected object in the video in real-time while the video is being displayed. In particular embodiments, the object may move within the video according to the movements of the associated tracker. For example, as the tracker changes position and/or orientation (as a result of movements by the tracked object), the associated object may change position and/or orientation accordingly. In particular embodiments, an object may be attached to a tracker such that the object’s position and/or orientation coincides with that of the tracker. For example, a facial mask may follow a user’s face based on a facial tracker so that the facial mask appears to be worn by the user. In particular embodiments, an object may have a defined position and/or orientation relative to the associated tracker. For example, FIGS. 1A and 1B show the object 130 maintaining a distance and orientation relative to the tracker 120. In particular embodiments, an object may also be an animation, which may be triggered by certain triggering events detected by an associated tracker. For example, a facial mask object may blink and open its mouth upon the tracker detecting corresponding facial movements by the tracked faced. As another example, augmented tears may be shown flowing out of the user’s eyes upon detection of the user making a sad face (e.g., based on detection of a frown or downwardly-curled lips). As yet another example, an object may have a defined movement pattern, such as a ball orbiting around the associated tracker.

[0039] In particular embodiments, the Editor may provide various options for editing the augmented-reality design in real time. In particular embodiments, an object may be adjusted directly through the Editor’s user interface while it is being displayed in the video. For example, the Editor may allow an object’s size, aspect ratio, orientation, position, behavior and other features to be viewed and adjusted. For instance, the user may use a drag-and-drop mechanism to visually adjust an object’s size, position, or orientation. Since the object is being displayed while adjustments are made, the designer is provided with constant real-time feedback of how the object appears. In particular embodiments, the Editor may also provide designers the option to edit code associated with behaviors of augmented-reality effects. For example, the Editor may provide a panel through which code (e.g., JavaScript) governing the behavior of effects may be edited. In particular embodiments, code may be edited while the video and associated trackers and objects are being displayed. Once the code has been updated, the user may apply the changes and immediately see how the augmented-reality behaves as a result. In particular embodiments, the Editor may also provide various predefined effect options, such as different types of transition between frames, tracker templates with predetermined positions (e.g., two face trackers with preconfigured positions), interactivity between objects and trackers (e.g., certain predefined facial expressions may trigger certain effects), among others.

[0040] Particular embodiments of the Editor described above provide several benefits. For example, by decoupling the definition and functionality of trackers and objects, the Editor provides an intuitive and flexible design methodology that allows augmented-reality effects to be visually designed separately (if desired) from the art work used in the effects. This in turn simplifies the design process and allows a designer (e.g., a programmer or artist) to independently refine the augmented-reality design. Further, by providing real-time feedback of any modifications, the Editor streamlines the design process since the designer can see and adjust the augmented-reality effect as it is being designed, rather than having to predict how a change would affect the design and separately perform tests to determine whether the modifications have the desired result.

[0041] FIG. 2 illustrates an example method 200 for designing an augmented-reality effect using an augmented-reality design editor. In particular embodiments, the method may begin at step 210, where the editor may display a video within a user interface. The video may comprise an object, such as a person’s face or head. The video may be displayed in real-time as it is being captured by an optical device. At step 220, a tracker may be associated with the object in response to a first instruction from a user. For example, the user may drag-and-drop an icon designating a tracker onto the object (e.g., a person’s face) to instruct the editor to associate a face tracker with the object. As another example, the user may instruct the editor to add a particular type of tracker (e.g., face tracker, hand tracker, etc.) into the augmented reality design. Upon detection of a particular object (e.g., a person’s face) in the video, the editor may associate the tracker with that detected object. In particular embodiments, another tracker may be added and associated with the same object. In particular embodiments another tracker may be added and associated with the tracker (e.g., in other words, a tracker that tracks the position/orientation of another tracker). At step 230, the tracker may be displayed in the video. For example, the tracker may provide visual orientation and/or position guidance to reflect the orientation and/or position of the associated object. For instance, the tracker may be displayed as a rendered three-dimensional Cartesian axis, a facial mesh (which may be generated based on a multi-point facial rig of the object), or any other suitable display indicators. In particular embodiments, the tracker may be positioned with the object being tracked. In particular embodiments, the tracker may be positioned separate from the object being tracked. The editor may maintain a relative position and/or orientation of the tracker to the tracked object as the tracked object changes position and/or orientation. In particular embodiments, the user may adjust the position and/or orientation of a tracker relative to the object, which may cause corresponding adjustments to a position/orientation of the associated augmented-reality object relative to the tracked object.

[0042] At step 240, an augmented-reality object may be associated with the tracker in response to a second instruction from the user. For example, the user may import from file or select an augmented-reality object (e.g., a three-dimensional or two-dimensional object) and add it to the augmented-reality design. The augmented-reality object may be imported in real-time while the video is being displayed. The augmented-reality object may be associated with the desired tracker so that the object moves dynamically according to data provided by the tracker. The user may specify an association through any conventional means, such as by dragging-and-dropping the augmented-reality object onto the tracker or selecting the desired tracker through a menu interface. Any number of augmented-reality objects may be associated with the same tracker. At step 250, the augmented-reality object may be displayed in the video. For example, the editor may create a composite scene of the video and the augmented-reality object. The augmented-reality object may be configured to move according to movements of the tracker, which in turn may move according to movements of the tracked object. The editor may maintain a relative position and/or orientation of the augmented-reality object to the tracker as the tracker changes position and/or orientation. In particular embodiments, an aspect ratio, a size, a position, or an orientation of the displayed augmented-reality object may be adjustable by the user as the augmented-reality object is being displayed in the video. In particular embodiments, the augmented-reality object may be configured to have certain behaviors (e.g., animation, movement, changes in position, orientation, or color, etc.). In particular embodiments, the behavior may be controlled by programming code (e.g., JavaScript) and may be changed by editing the programming code. In particular embodiments, the code may be edited in real-time while the augmented-reality object is being displayed.

[0043] At step 260, one or more defined relationships between the tracker and the augmented reality object may be stored in one or more files. For example, once the design is complete, the designer may save or export the design into a file, which may then be used to cause the augmented-reality effect to be displayed on an end-user’s device in operation. In particular embodiments, design instructions from the user (e.g., adding/associating a tracker or augmented-reality object) may be received by the editor in real-time while the video is being displayed, and the tracker and/or augmented-reality object may be added to the video in real-time while the video is being displayed. Thus, the Editor may provide real-time feedback as the designer is designing. Particular embodiments may repeat one or more steps of the method of FIG. 2, where appropriate. Although this disclosure describes and illustrates particular steps of the method of FIG. 2 as occurring in a particular order, this disclosure contemplates any suitable steps of the method of FIG. 2 occurring in any suitable order. Moreover, although this disclosure describes and illustrates an example method for designing an augmented-reality effect using an augmented-reality design editor, including the particular steps of the method of FIG. 2, this disclosure contemplates any suitable method for designing an augmented-reality effect using an augmented-reality design editor, including any suitable steps, which may include all, some, or none of the steps of the method of FIG. 2, where appropriate. Furthermore, although this disclosure describes and illustrates particular components, devices, or systems carrying out particular steps of the method of FIG. 2, this disclosure contemplates any suitable combination of any suitable components, devices, or systems carrying out any suitable steps of the method of FIG. 2.

[0044] In particular embodiments, the Editor may define rules and systems to ensure that virtual objects scale to the form factors and aspect ratios of different display devices, and making those rules and systems part of the design/creation process, rather than an afterthought. The embodiments described herein provide systems and user interfaces for specifying various scaling configurations that are intuitive, comprehensive, and flexible. For example, at a high level, the Editor may provide a user interface that allows designers to choose where to anchor an object and specify how its position, orientation, and/or size should respond to different display specifications.

[0045] FIG. 3A illustrates example configuration options for an object (e.g., an image) that govern how the object may be positioned in an augmented-reality scene. In particular embodiments, the Editor may display a selectable interface that allows a designer to select an anchor for an object. In particular embodiments, an anchor may define (1) a relative point in the associated object from which distance is measured, and (2) a relative point in the display canvas to which the object is anchored. For example, if a designer selects the lower-left corner as the anchor for an object, the lower-left corner of the 2D canvas used for displaying the object and the lower-left corner of the object may be used as the points from which distance is measured (e.g., for calculating position offsets). In particular embodiments, the user interface for anchor selection may be a polygon (e.g., square) with selectable corners, sides, and/or center. An example of such a user interface is shown in, e.g., FIG. 3A at labels 301, 306, 311, and 316. In the example shown, the lower-left corner is selected to be the object’s anchor.

[0046] In particular embodiments, the Editor may allow the designer to define a position offset for the object relative to its anchor. In particular embodiments, the position offsets may be specified as an x value and a y value in the display canvas’ Cartesian plane (e.g., positive values for upwards and to the right; negative values for downwards and to the left). In particular embodiments, the position offset may be measured from the object’s anchor point in the canvas (e.g., bottom-left corner of the canvas) to the anchor point in the object (e.g., bottom-left corner of the image). For example, referring to one example configuration 300 in FIG. 3, where the anchor point 301 is specified to be the bottom-left corner and offset values set to x and y 302, the associated object (the square) is positioned in the canvas (the rectangle) such that the bottom-left corner of the object and the bottom-left corner of the canvas are some distance apart (see, e.g., 303). In this example, the position of the object’s bottom-left corner is determined based on the position of the bottom-left corner of the canvas, offset by the specified x and y values. If instead the anchor is defined to be, e.g., the center, the center point of the object would be determined based on the center point of the canvas, offset by x and y. This general principal applies to other anchor selections as well.

[0047] In particular embodiments, position offsets may be fixed or responsive. In this context, fixed position offsets means that the position offset does not depend on display region’s dimensions. For example, configuration 315 shown in FIG. 3 provides an example where the x and y offsets 317 are both fixed (indicated by “off” in this example), with the anchor 316 being set as the bottom-left corner. Since the position offsets are fixed, the object (square) is positioned in equal distance from the bottom-left corner of the canvas (rectangle) regardless of whether the canvas is in portrait mode 318 (e.g., height is longer than width) or landscape mode 319 (e.g., height is shorter than width). In particular embodiments, fixed position offsets may be specified in units of length, such as density-independent pixel, pixel, and metric units. In particular embodiments, instead of entering the specific x and y offsets, the designer may use a visual design interface to drag-and-drop the object to a desired location, and the Editor would automatically determine the corresponding position offset from the specified anchor.

[0048] In particular embodiments, position offsets may be responsive, thus making them dependent on the display region’s dimensions. In particular embodiments, responsive position offsets may be specified in percentages, ratios, proportions, and any other measurements of relative length. In particular embodiments, rather than manually inputting the responsive position offset, the designer may use a visual design interface to place the object at a desired position, and the Editor would automatically determine the corresponding position offset based on the specified anchor and the dimensions of the display region. In particular embodiments, the x responsive position offset may be the ratio of (1) the distance in the x-axis between the object’s anchor point and the display region’s anchor point, to (2) the display region’s x-axis length (e.g., the width). For example, if the width of the display region is 100 density-independent pixels (dp) in length and the x-axis responsive position offset is 10%, the bottom-left point of the object (the anchor position) would be located 10 dp (i.e., 10% of 100 dp) to the right of the bottom-left corner of the display region. When the width of the display region is increased to, e.g., 200 dp (e.g., when the device switches from portrait to landscape mode), the bottom-left point of the object would then be located 20 dp (i.e., 10% of 200 dp) to the right of the bottom-left corner of the display region.

[0049] Similarly, the y responsive position offset may be the ratio of (1) the distance in the y-axis between the object’s anchor point and the display region’s anchor point, to (2) the display region’s y-axis length (e.g., the height). Configuration 310 shown in FIG. 3 provides an example where the x and y offsets 312 are both responsive (indicated by “on” in this example), with the anchor 311 being set as the bottom-left corner. When the display region is in portrait mode as shown in 313, the x and y distances between bottom-left corner of the object and the bottom-left corner of the display region appears roughly equal. However, in landscape mode 314 the x-axis distance between the bottom-left corners of the object and display region is greater than the corresponding x-axis distance in portrait mode 313, because the width of the display region increased in landscape mode while the x-axis responsive position offset remained at the same percentage (e.g., 10%). Similarly, in landscape mode 314 the y-axis distance between the bottom-left corners of the object and display region is less than the corresponding y-axis distance in portrait mode 313, because the height of the display region decreased in landscape mode while the y-axis responsive position offset remained at the same percentage (e.g., 10%). In particular embodiments, the x and y responsive position offsets need not both be the same type. For example, configuration 300 shows the x-axis offset being responsive (“on”) and the y-axis offset being fixed (“off”), and configuration 305 shows the x-axis offset being fixed (“off”) and the y-axis offset being responsive (“on”). In particular embodiments, the designer may toggle a position offset between fixed and responsive. In response, the Editor may perform automatic unit conversions based on the current dimensions of the display region.

[0050] FIG. 3B illustrates example configuration options for an object that may govern how the object may be sized in an augmented-reality scene. In particular embodiments, the aspect ratio of the object may not be fixed, as shown by the example configurations 320, 325, 330, 335. Because the aspect ratio is not fixed, the height and width of the objects may be independently altered, which may result in changes to the overall shape of the object (e.g., the objects shown in 324, 329, and 334 became rectangles). In particular embodiments, the size of the object may be adjusted relative to an anchor point 321, 326, 331, 336, which may be specified as described above. For example, if the anchor point is set to be the bottom-left corner, the other three corners in the rectangle may be computed from that corner using the specified height and width values 322, 327, 332, 337.

[0051] In particular embodiments, the height and width of the object may be independently set as either fixed or responsive. In the configuration 335 where both the height and width are 337 are fixed (indicated by “off”), the height and width may not be dependent upon the dimensions of the display region in particular embodiments. For example, the objects (square) are the same in the portrait view 338 and landscape view 339. However, in the configuration 330 where both the height and width 332 are responsive (indicated by “on”), these values may represent a proportion of the object’s height and width to the height and width of the display region, respectively. For example, the actual height of the object may be computed by multiply the responsive height proportion (e.g., 33% or 1/3) with the current height of the display region. For instance, if the height of the display region in portrait mode 333 is 100 dp, then the height of the object may be 33 dp (i.e., 1/3.times.100 dp). When the display region switches from portrait mode 333 to landscape mode 334, its height may decrease (e.g., to 60 dp), which may in turn cause the object’s height to decrease to 20 dp (i.e., 1/3.times.60 dp). Similarly, the actual width of the object may be computed by multiplying the responsive width proportion (e.g., 50% or 1/2) with the current width of the display region. For instance, if the width of the display region in portrait mode 333 is 60 dp, then the width of the object may be 30 dp (i.e., 1/2.times.60 dp). When the display region switches from portrait mode 333 to landscape mode 334, its width may increase (e.g., to 100 dp), which may in turn cause the object’s width to increase to 50 dp (i.e., 1/2.times.100 dp).

[0052] In particular embodiments, the height and width of the object may be individually set as fixed or responsive. For example, configuration 320 shown an example where the width is responsive and the height is fixed, and configuration 325 shows an example where the width if fixed and the height is responsive. In particular embodiments, when the width or height is toggled from one type to another (e.g., fixed to responsive or vice versa), the Editor may automatically convert a specified measurement unit to the other measurement unit using the current dimensions of the display region (e.g., from fixed measurements of length to responsive proportion, or vice versa).

[0053] In particular embodiments, the aspect ratio of the objects may be locked, as shown by the example configurations 340, 345, 380. Because the aspect ratio is fixed, the overall shape of the object would remain the same even when the height and/or width of the object changes due to changes in the dimensions of the display region (e.g., the object remains a square in 344, 349, 353, 354, 355). In particular embodiments, the dimensions of the object with locked aspect ratio may be governed by width, height, or both. For example, in the configuration 340 where the object’s size is dictated by responsive scaling of its width 342, when the width of the display region increases (e.g., from 60 dp to 100 dp), the width of the object may also increase (e.g., from 30 dp to 50 dp, if the responsive width is set at 50%). In turn, the height of the object may be set to 50 dp as well, since the aspect ratio of a square is 1:1. Consequently, the square object in portrait mode 343 may be enlarged in landscape mode 344. As another example, in the configuration 345 where the object’s size may be dictated by responsive scaling of its height 347, when the height of the display region decreases, (e.g., from 100 dp to 60 dp), the height of the object may also decrease (e.g., from 33 dp to 20 dp, if the responsive height is set at 33%). This in turn may cause the width of the object to be 20 dp in order to maintain the aspect ratio of 1:1. Consequently, the square object in portrait mode 348 may become smaller in landscape mode 349.

[0054] In particular embodiments, the object’s size may be dictated by responsive scaling of either height or width, in which case the object may scale conservatively. An example of this is shown in configuration 380, where sizing is based on both width and height 351. As shown in 352, the responsive width may be 50% and the responsive height may be 33%. If the width of the display region increases but its height remains the same, as shown in 353, the Editor may recognize that the object’s size may increase if responsive scaling is based on width, and that the object’s size may not change if responsive scaling is based on height. If the Editor scales conservatively, the smaller size may be adopted; on the other hand, if the Editor scales aggressively, the larger size may be adopted. As another example, if the width of the display region decreases while its height remains the same, as shown in 354, the Editor may recognize that the object’s size may decrease if responsive scaling is based on width, and that the object’s size may not change if responsive scaling is based on height. However, in this example the original size of the object may not fit in the new display region. This is why in particular embodiments it may be preferable to scale conservatively (i.e., adopting the smaller size). In an example where the display region’s height decreases and its width increases, as shown in 355, the Editor may compute the size and width of the object and compare them. For example, if the display region shown in 355 has a height of 60 dp and a width of 100 dp, the object’s height may be 20 dp (i.e., 33%.times.60 dp) and its width may be 50 dp (i.e., 50%.times.100 dp). In particular embodiments where the smaller size is adopted, the Editor may resize the object to have sides of 20 dp.

[0055] FIG. 3C illustrates example configuration options for an object that govern how the object may be rotated in an augmented-reality scene. In particular embodiments, the user may select a pivot point around which the object may rotate. In particular embodiments, the user interface for selecting the pivot point may be similar to that of an anchor selection interface, as previously discussed. For example, in configuration 360, the pivot point 361 is defined to be the bottom-left corner of the object. Thus, when the object 362 rotates -30.degree., the rotation pivots around the bottom-left corner of the object, as shown in 363. As another example, in configuration 365, the pivot point 366 is defined to be at the center of the object. Thus, when the object 367 rotates -30.degree., the rotation pivots around object’s center, as shown in 368. In particular embodiments, the designer may input a specific degree of rotation and/or use a drag-and-drop interface to visually rotate the object.

[0056] FIG. 3D illustrates example configuration options for an object that govern how the object may be scaled in an augmented-reality scene. In particular embodiments, the designer may specify a scaling factor to adjust the size of the object without changing its shape. In particular embodiments, the user may select a pivot or scaling point from which the scaling extends. In particular embodiments, the user interface for selecting the scaling point may be similar to that of an anchor selection interface, as previously discussed. For example, in configuration 370, the scaling point 371 is defined to be the bottom-left corner of the object. When the object 372 (showing the normal scale of the object) is scaled by a factor of 0.7, its size may be reduced, as shown in 373. Because the scaling point is defined to be the bottom-left corner in this case, the new object’s bottom-left corner did not change position; only the other three corners changed positions. As another example, in configuration 375, the scaling point 376 is defined to be the center of the object. When the object 377 (showing the normal scale of the object) is scaled by a factor of 1.2, its size may be enlarged, as shown in 378. Because the scaling point is at the center, the new object’s center remains in the same position.

[0057] FIG. 4 illustrates an example method 400 for specifying scaling configurations for an object using an augmented-reality design editor. The method may begin at step 410, where the editor may associate an image with an anchor positioned specified by a user. The anchor position may define a first relative point in the image and a second relative point in a first display region for displaying the image. In particular embodiments, the points in the image and display regions may correspond to the position defined by the anchor position. For example, if the anchor position is selected to be the bottom-left corner, the bottom-left corner of the image may be a first relative point and the bottom-left corner of the display region may be a second relative point. As another example, if the anchor position is selected to be the center, the center of the image may be a first relative point and the center of the display region may be a second relative point. In particular embodiments, the anchor position may be selected from a plurality of predetermined anchor positions, comprising a corner (e.g., bottom-left, bottom-right, top-left, top-right), a side (e.g., left, right, top, bottom), or a center.

[0058] At step 420, the image may be associated with a first position offset (e.g., in the x direction) and a second position offset (e.g., in the y direction). In particular embodiments, the first position offset may be used to define a first position of the image relative to the display region based on the first relative point in the image and the second relative point in the first display region. In particular embodiments, the first position offset may define a relative separation between the first relative point in the image and the second relative point in the first display region in an x-axis or a y-axis of a display plane of the first display region. For example, assuming the anchor position is defined to be the bottom-left corner and the bottom-left corner of the display region is positioned at coordinates (0, 0) in Cartesian space. If the position offsets for an object are (3, 5), the bottom-left corner of the object, when rendered, may have coordinates (3, 5). If instead the bottom-left corner of the display region is positioned at coordinates (5, 5), then the bottom-left corner of the object may instead have coordinates (8, 10). In particular embodiments, the position offsets (e.g., x and y offsets) may be individually set as a fixed offset (e.g., measured in a unit of length, such as pixels, density-independent pixels, inches, centimeters, etc.) or a responsive offset (e.g., specified as a proportion). For example, one of the offsets (e.g., the x-axis) may be fixed, and the other (e.g., y-axis) may be responsive. As another example, both offsets may be fixed or both may be responsive. In particular embodiments, the editor may initially receive a fixed positioned offset specified as a unit of length by the user, and upon receiving a user instruction to change the offset from being fixed to responsive, automatically convert it into a responsive offset based on a proportion of the fixed position offset to a dimension of the first display region. For example, if the fixed offset is 5 dp and the x-dimension of the display region is 100 dp, the fixed 5 dp offset may be converted into a 5/100 or 1/20 responsive offset. As another example, if a current responsive x-dimension offset is 1/100 and the x-dimension of the display region is 200 dp, the converted fixed offset may be 2 dp (based on the 1/100 responsive offset multiplied by the 200 dp dimension of the display region).

[0059] At step 430, a first dimension and a second dimension specified by the user may be associated with the image. For example, the first dimension and the second dimension may be the desired length and width of the image. In particular embodiments, the first and second dimensions may be individually set as being fixed or responsive. For example, one of the dimensions may be fixed (e.g., measured in units of length) and the other may be responsive (e.g., measured in proportion), or both may be fixed or responsive. In particular embodiments, the editor may initially receive a fixed dimension specified as a unit of length by the user, and upon receiving a user instruction to change the dimension from being fixed to responsive, automatically convert it into a responsive dimension based on a proportion of the fixed dimension to a dimension of the first display region. For example, if the x-dimension of the image is 50 dp and the x-dimension of the display region is 100 dp, the fixed 50 dp x-dimension may be converted into a 50/100 or 1/2 responsive dimension. As another example, if a current responsive x-dimension is 40/100 and the x-dimension of the display region is 200 dp, the converted fixed x-dimension may be 80 dp (based on the 40/100 responsive dimension multiplied by the 200 dp dimension of the display region). In particular embodiments, the aspect ratio of the image may be locked or unlocked in response to a selection by the user.

[0060] At step 440, the editor may associate the image with a scaling point and a scaling factor. For example, if the scaling point is defined to be the bottom-left corner of the image, then that point of the image before scaling may be in the same position as the point of the image after scaling. As another example, if the scaling point is defined to be the bottom side of the image, then the mid-point of the bottom side of the image before and after scaling may remain at the same position, regardless of how it is scaled.

[0061] At step 450, the editor may associate the image with a pivot point and a rotation measure (e.g., measured in degrees). For example, if the pivot point is defined to be the bottom-left corner of the image, then that point of the image prior to any rotation may be shared by the pivoted/rotated version of the image. In other words, the image is rotated relative to the pivot point.

[0062] At step 460, the editor may store information associated with the image, such as the associated anchor position, position offsets, sizing dimensions, scaling point, scaling factor, pivot point, rotation measure, and/or other associated information in one or more files.

[0063] At step 470, the stored files may be configured to generate an augmented-reality effect and cause the image to be displayed at a second position in a second display region (e.g., on an end-user device). For example, an augmented-reality rendering engine may access the file and be instructed to render an augmented-reality effect accordingly. In particular embodiments, the anchor position may define a relative point in this second display region, such as its bottom-left corner. In particular embodiments, the position offsets may be used to define the second position of the image relative to the second display region based on the first relative point in the image and the third relative point in the second display region. For example, continuing the example provided above with respect to step 420, if the anchor is defined to be the bottom-left corner and the position offsets are defined to be (3, 5), then the position of the image relative to the display region of the end-user device may be computed based on the bottom-left corner of the image and the bottom-left corner of the end-user’s display region. For example, if the end-user’s display region is positioned at (0, 0), then the bottom-left corner of the image may be positioned at (3, 5). If the display region is instead positioned at (2, 2), then the image may be positioned at (5, 7). If instead the x-dimension offset is a responsive proportion, such as 1/100, and the x-dimension of the end-user’s display region is 500 dp, the converted fixed offset may be 5 dp (based on the 1/100 responsive offset multiplied by the 500 dp dimension of the display region). In particular embodiments, the size of the image may be determined based on the first dimension, the second dimension, and whether the aspect ratio of the image if locked. In particular embodiments, the image may be scaled according to the scaling factor from the specified scaling point. In particular embodiments, the image may be rotated based on the rotation measure (e.g., in degrees) and relative to the pivot point.

[0064] Particular embodiments may repeat one or more steps of the method of FIG. 4, where appropriate. Although this disclosure describes and illustrates particular steps of the method of FIG. 4 as occurring in a particular order, this disclosure contemplates any suitable steps of the method of FIG. 4 occurring in any suitable order. Moreover, although this disclosure describes and illustrates an example method for specifying scaling configurations for an object using an augmented-reality design editor including the particular steps of the method of FIG. 4, this disclosure contemplates any suitable method for specifying scaling configurations for an object using an augmented-reality design editor, including any suitable steps, which may include all, some, or none of the steps of the method of FIG. 4, where appropriate. Furthermore, although this disclosure describes and illustrates particular components, devices, or systems carrying out particular steps of the method of FIG. 4, this disclosure contemplates any suitable combination of any suitable components, devices, or systems carrying out any suitable steps of the method of FIG. 4.

[0065] FIG. 5A illustrates an example of a conceptual relationship between a display region, a three-dimensional space displayed through the display region, and a viewer. In particular embodiments, the viewer may be represented by a camera 501. In particular embodiments, the camera 501 may be positioned at a particular distance from a display region or canvas 502. For example, the display region or canvas 502 may be a mobile device’s display screen or a portion thereof. In particular embodiments, a three-dimensional space may be viewable through the display region 502. For example, the three-dimensional space may be defined such that it comprises an object 503. The object 503 may be, e.g., a three-dimensional object (e.g., a cube, as illustrated), a plane, a line, smoke particles, rays of light, a person, a tree, or any other object. In particular embodiments, displaying a scene of the three-dimensional space may comprise projecting visible objects within the space onto the two-dimensional display region 502. As an example, portions of the cube 503 visible to the viewer 501, such as the surface facing the viewer 501, may be projected onto the display region 502 as a square 504. In particular embodiments, the Editor may present the augmented-reality design in the manner shown in FIG. 5A to simultaneously show the objects as they appear in three-dimensional space and on the two-dimensional canvas.

[0066] In particular embodiments, the Editor may provide a system for measuring and representing objects in augmented reality to address the challenges of having both two-dimensional (“2D”) and three-dimensional (“3D”) objects, real and virtual, together in a scene. In particular embodiments, different measuring systems may be used for 2D and 3D objects to address their unique needs. For example, 3D virtual objects may need to look as if they belong in a real-world scene, such as placing a 3D virtual hat on a real person’s head. Thus, in particular embodiments it may be useful to measure 3D objects in real-world units, such as in centimeters and/or inches. One potential advantage of this is that it allows designers to create three-dimensional objects according to real-world scales, since augmented-reality objects may often be displayed with real-world objects. In particular embodiments, 2D projections (e.g., 504) onto the display region 502 may be measured in pixels or density-independent pixels. Doing so may facilitate certain display calculations, including, e.g., rescaling the objects shown to accommodate different dimensions of the display region 502.

[0067] FIG. 5B illustrates an example user interface for concurrently showing how objects appear in three-dimensional space and in a two-dimensional display region. As discussed above, designing augmented-reality effects may involve defining objects in three-dimensional space and projecting the objects onto a display region. How an object appears in three-dimensional space may not necessarily achieve the desired effect once it is shown in the display region. Conversely, designing a three-dimensional effect based on how the effect appears in the two-dimensional display region may not provide designers with the appropriate perspective, especially in designs where objects interact with each other and/or with real-world objects in three-dimensional space. Thus, in particular embodiments, the Editor may provide a design interface that concurrently shows how an augmented-reality effect appears in three-dimensional space and two-dimensional space. In particular embodiments, the Editor 509 may provide a three-dimensional display region 510 for displaying objects in three-dimensional space. In particular embodiments, the three-dimensional display region 510 may display a three-dimensional grid to provide visual guidance on how objects in the scene are oriented. In particular embodiments, the Editor 509 may concurrently provide a two-dimensional display region 520 for displaying a scene of the three-dimensional space shown in the three-dimensional display region 510. The scene, for example, may be a viewable portion of the three-dimensional space as seen through a display screen or canvas. In particular embodiments, the two-dimensional display region 520 may be considered as a simulator view for showing how the effect would appear to an end user. In particular embodiments, the two-dimensional display region 520 may be shown as a screen of a mobile phone, laptop, tablet, or any other display device. In particular embodiments, the two-dimensional display region 520 may display a two-dimensional grid to provide visual guidance on object placement. In particular embodiments, as the designer alters a design (e.g., change the position, size, or orientation of an object) through the three-dimensional display region 510, the changes may be reflected in the other display region(s) in the appropriate view, such as the two-dimensional display region and/or the other three-dimensional display regions. In particular embodiments, the design may also be altered through the two-dimensional display region, and the changes may be reflected in the other three-dimensional display regions. This advantageously allows the designer to concurrently view and adjust augmented-reality effects in both three-dimensional and two-dimensional views.

……
……
……