Facebook Patent | Dynamic Arrangement of Elements in Three-Dimensional Space

Patent: Dynamic Arrangement of Elements in Three-Dimensional Space

Publication Number: 20190043258

Publication Date: 2019-02-07

Applicants: Facebook

Abstract

In one embodiment, a method includes determining one or more three-dimensional (3D) objects defined in 3D space for display. The one or more 3D objects may be projected into corresponding one or more two-dimensional (2D) objects defined in 2D space. Run-time layout characteristics of the one or more 2D objects may be defined using a layout module. The run-time layout characteristics defined by the layout module may be send to a 3D rendering engine. The 3D rendering engine may render a display containing the one or more 3D objects using the run-time layout characteristics of the one or more 2D objects defined by the layout module.

Background

Cascading style sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language, such as Hyper Text Markup Language (HTML), Extensible HTML (XHTML), Extensible Markup Language (XML), etc. CSS describes how elements should be rendered on a display screen, on paper, in speech, or on other media. Most often CSS is used to set the visual style of web pages and user interfaces written in various markup languages. It is a technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. CSS has a layout mode called a flexible box layout (or flexbox) designed for laying out complex applications and web pages. The flexible box layout of CSS has more flexibility for distributing space and aligning content in way that web applications and complex web pages often need. Content or layout of a social-networking website may be arranged using the flexible box layout.

A social-networking system, which may include a social-networking website, may enable its users (such as persons or organizations) to interact with it and with each other through it. The social-networking system may, with input from a user, create and store in the social-networking system a user profile associated with the user. The user profile may include demographic information, communication-channel information, and information on personal interests of the user. The social-networking system may also, with input from a user, create and store a record of relationships of the user with other users of the social-networking system, as well as provide services (e.g., wall posts, photo-sharing, event organization, messaging, games, or advertisements) to facilitate social interaction between or among users.

The social-networking system may send over one or more networks content or messages related to its services to a mobile or other computing device of a user. A user may also install software applications on a mobile or other computing device of the user for accessing a user profile of the user and other data within the social-networking system. The social-networking system may generate a personalized set of content objects to display to a user, such as a newsfeed of aggregated stories of other users connected to the user. One user may also send images and videos to other users of the social-networking system, such as those who are directly or indirectly connected to the user.

A mobile computing device–such as a smartphone, tablet computer, or laptop computer–may include functionality for determining its location, direction, or orientation, such as a GPS receiver, compass, gyroscope, or accelerometer. Such a device may also include functionality for wireless communication, such as BLUETOOTH communication, near-field communication (NFC), or infrared (IR) communication or communication with a wireless local area networks (WLANs) or cellular-telephone network. Such a device may also include one or more cameras, scanners, touch screens, microphones, or speakers. Mobile computing devices may also execute software applications, such as games, web browsers, or social-networking applications. With social-networking applications, users may connect, communicate, and share information with other users in their social networks.

Summary

Particular embodiments disclose a method for dynamically arranging a layout of a page comprising three-dimensional (3D) objects using a two-dimensional (2D) flexible box model (interchangeably referred to herein as a flexbox). A flexbox in particular embodiments may be a dynamic CSS layout model that provides for the arrangement of various objects or elements on a page (e.g., webpage) such that the objects behave predictably when the page layout must accommodate different screen sizes and different display devices. For example, when a page switches its orientation from a landscape to a portrait mode, then flexbox enables the boxes, spacings between the boxes, text, tabs, etc. in the page to automatically adjust according to the portrait mode (e.g., spacing between boxes reduced, boxes arranged column-wise instead of row-wise, objects stacked to each other, objects stretched to fit certain area, etc.). Particular embodiments enable 3D objects to be dynamically arranged using the flexible box model. This may especially be valuable within the virtual reality and augmented reality contexts where there may be various 3D objects.

In particular embodiments, the way the 3D objects leverage 2D flexbox is by representing 3D objects in 2D, such as by taking a cross-section or projection of the 3D objects into 2D space to generate corresponding 2D objects. Various projection techniques may be used to project 3D points to a 2D plane. Some of the standard projection techniques may include, for example, orthographic projection, perspective projection, etc. Once the corresponding 2D points or objects of the 3D objects are generated, they may be placed into the flexbox (e.g., the 2D representations of the 3D objects are put into flex containers). Using the flexbox, the layout of the various objects (2D representations of 3D objects) regarding how they should be presented (or where they need to be rendered) on a page can be defined. For example, length, width, size, X-Y coordinates, orientation, relative spacing, etc. can be defined for the generated 2D objects using the flexbox. The layout definitions can then be transferred to a rendering engine for it render the various objects (2D and 3D) on a page. The rendering engine may apply some transformation techniques on the 2D representations of the 3D objects to render them in their original state (e.g., replace the 2D object(s) with corresponding 3D representation(s) at the location defined by the flexbox). In some embodiments, every time there is a change in layout/orientation on a page, the rendering engine may call the flexbox, which provides the new position, size, coordinates, etc. information to the rendering engine for it to render an updated scene.

The embodiments disclosed herein are 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.