Patent Description:
3D building models and visualization tools can produce significant cost savings. Using accurate 3D models of properties, homeowners, for instance, can estimate and plan every project. With near real-time feedback, contractors could provide customers with instant quotes for remodeling projects. Interactive tools can enable users to view objects (e.g., buildings) under various conditions (e.g., at different times, under different weather conditions). Typically, a user captures images using a mobile camera, and subsequently uses a web browser to view the objects in the images under different conditions. Traditional web browsers use WebGL that incorporates a technique called rasterization to render images. However, rasterization does not deliver the same visual quality and realism as other advanced techniques like path tracing.

<NPL>, discloses a method of rendering photorealistic images in a web browser, the method performed in a computing device having a general purpose processor and a graphics processing unit GPU, the method comprising: obtaining an environment map that includes illumination values, positional vectors and transforms of a plurality of objects in an environment; computing textures for an input scene including by encoding, as part of the textures, an acceleration structure of the input scene; transmitting the textures to one or more shaders executing on a GPU; generating, on the GPU, samples of the input scene, by performing at least one path tracing algorithm in the one or more shaders according to the textures; lighting or illuminating, on the GPU, a respective sample of the input scene using the environment map, to obtain a lighted scene; tone mapping the lighted scene to obtain a tone-mapped scene; and drawing output on a canvas, in the web browser, based on the tone-mapped scene to render the input scene.

Path tracing is computationally intensive and current implementations do not provide interactive rendering on low-performance hardware.

Accordingly, there is a need for systems and methods that render photorealistic images in a web browser using path tracing. The techniques disclosed herein enable interactive path tracing on the web for static or dynamic scenes on low powered devices. Some implementations allow users to access photorealistic rendering in their browser by seamlessly switching between rasterization and path tracing. The proposed techniques can enhance user experience in a wide range of applications, such as e-commerce, product design, cultural heritage, and architecture visualizations.

Systems, methods, devices, and non-transitory computer readable storage media for rendering photorealistic images in a web browser are disclosed.

(A1) The invention is directed to a method of rendering photorealistic images in a web browser. The method is performed in a computing device having a general purpose processor and a graphics processing unit (GPU). The method includes obtaining an environment map, such as a high dynamic range image (HDRI), that includes illumination values, positional vectors and transforms of objects in an environment. The method also includes obtaining at least one image of an input scene. The method further includes computing textures for the input scene including by encoding, as part of the textures, an acceleration structure (for example, a bounding volume hierarchy (BVH)) of the input scene. The method also includes transmitting the textures to one or more shaders executing on a GPU. The method further includes generating, on the GPU, samples of the input scene, by performing a path tracing algorithm in the one or more shaders according to the textures, wherein the at least one path tracing algorithm includes multiple importance sampling using a cumulative distribution function of the environment map that weighs the contribution of the brightest portion of the environment map more heavily. The method also includes lighting or illuminating, on the GPU, a respective sample of the input scene using the environment map, to obtain a lighted scene. The method also includes tone mapping the lighted scene to obtain a tone-mapped scene, and drawing output on a canvas, in the web browser, based on the tone-mapped scene to render the input scene.

(A2) In some implementations of A1, the at least one image is obtained from a camera, such as an aerial or oblique view image capture platform.

(A3) In some implementations of A2, the camera is configured as a perspective camera that models a thin lens to produce a photorealistic depth-of-field effect of the input scene.

(A4) In some implementations of any of A1-A3, the method further includes obtaining sensor information corresponding to the instant when the input scene is captured, encoding the sensor information in the textures while computing the textures for the input scene, and utilizing the sensor information to light or illuminate the respective sample of the input scene.

(A5) In some implementations of any of A1-A4, the method further includes, prior to computing textures for the input scene, obtaining and substituting a 3D model for an object (e.g., a building) representing the at least one image in the input scene.

(A6) In some implementations of any of A1-A5, the method further includes obtaining a first image and a second image of the input scene, determining if a mesh in the input scene changed between the first image and the second image of the input scene, and, in accordance with a determination that a mesh in the input scene changed, regenerating the acceleration structure of the input scene using the second image.

(A7) In some implementations of any of A1-A6, the encoding of the acceleration structure is limited to static geometry based on size of the input scene and hardware capabilities of the general purpose processor. In some implementations, acceleration structures for dynamic objects are encoded. Encoding, in some implementations is a function of system resources to include network bandwidth and hardware capabilities.

(A8) In some implementations of any of A1-A7, generating the texture includes packing the acceleration structure (e.g., BVH) into an array and storing the array as a data texture for the one or more shaders to process. In some implementations, the one or more shaders traverse the acceleration structure (e.g., BVH) using a stack-based algorithm.

(A9) In some implementations, the lighting or illumination multiple importance samples the input scene using the cumulative distribution function of the environment map averaged with a bidirectional reflectance distribution function of a material of the input scene.

(A10) In some implementations of any of A1-A9, the method further includes selecting a material for the input scene including specifying a level of refraction for the material, and sending data corresponding to the material along with the texture to the one or more shaders executing on the GPU, thereby causing the one or more shaders to utilize the data corresponding to the material while generating samples of the input scene.

(A11) In some implementations of A10, the material is a surface material and is represented using property maps that include at least one of: diffuse maps that control reflective color of the material, normal maps that perturbs a normal vector to the surface, and roughness and metalness maps describing texture of the surface.

(A12) In some implementations of A10, the material is a surface material that is represented using an artist-tailored BRDF.

(A13) In some implementations of A12, the material is a glass material that realistically reflects and refracts light by biasing importance sampled rays based on indices of the material or the angle of incidence of a ray upon the material. For example, under the Fresnel equations, light is perceived as more reflective at grazing angles and these angles could be importance sampled in some implementations.

(A14) In some implementations of any of A1-A13, the at least one path tracing algorithm iteratively renders samples of the input scene.

(A15) In some implementations of A14, the method further includes, in accordance with a determination that a user has performed a predetermined action or the system resources has reached a predetermined threshold, causing the one or more shaders to pause the at least one path tracing algorithm.

(A16) In some implementations of A14, the at least one path tracing algorithm averages each generated sample with previously generated samples.

(A17) In some implementations of A14, the method further includes, in accordance with a determination that the scene has changed, causing the one or more shaders to pause the at least one path tracing algorithm.

(A18) In some implementations of A1-A17, the at least one path tracing algorithm is implemented in Web GL, and in preferred implementations on WebGL <NUM>, and the method further includes, causing the one or more shaders to rasterize a full-screen quad to the screen prior to executing the at least one path tracing algorithm, and using a fragment shader to execute the at least one path tracing algorithm for the full-screen quad to output one or more pixels to a framebuffer.

(A19) In some implementations of any of A1-A18, each sample is rendered to an internal buffer.

(A20) In some implementations of any of A1-A19, computing the textures for the input scene is performed on the general purpose processor and the computing device is a low-power device that does not have a high-speed Internet connection.

(A21) In some implementations of any of A1-A20, the method further includes predicting a cost of material required to build the objects in the environment according to the rendering.

The invention is also directed to a computer system according to claim <NUM> and a non-transitory computer readable storage medium according to claim <NUM>.

Like reference numerals refer to corresponding parts throughout the drawings.

Reference will now be made to various implementations, examples of which are illustrated in the accompanying drawings. In the following detailed description, numerous specific details are set forth in order to provide a thorough understanding of the invention and the described implementations. However, the invention may be practiced without these specific details. In other instances, well-known methods, procedures, components, and circuits have not been described in detail so as not to unnecessarily obscure aspects of the implementations.

Disclosed implementations enable rendering photorealistic images in a web browser. Systems and devices implementing the image rendering techniques in accordance with some implementations are illustrated in <FIG>.

<FIG> is a block diagram of a computer system <NUM> that enables rendering photorealistic images in a web browser in accordance with some implementations. In some implementations, the computer system <NUM> includes image capture modules <NUM>-<NUM>, <NUM>-<NUM>,. executed on image capturing devices <NUM>-<NUM>, <NUM>-<NUM>,. , image-related data sources 118a,. , 118n, an image preprocessing server system <NUM>, and a computing device <NUM>.

An image capturing module <NUM> communicates with the computing device <NUM> through one or more networks <NUM>. The image capturing module <NUM> provides image capture functionality (e.g., take photos of images) and communications with the computing device <NUM>. The image preprocessing server system <NUM> provides server-side functionality (e.g., preprocessing images, such as creating textures, storing environment maps and images and handling requests to transfer images) for any number of image capture modules <NUM> each residing on a respective image capture device <NUM>.

In some implementations, the image capture devices <NUM> are computing devices, such as desktops, laptops, and mobile devices, from which users <NUM> can capture images (e.g., take photos), discover, view, edit, and/or transfer images.

The computing device <NUM> connects to the image-related data sources <NUM> to obtain one or more images in response to a request to render an image on a web browser. In some implementations, the request is initiated by a user connected to the computing device <NUM> via one or more input devices (not shown), or by a user (e.g., the user <NUM>) uploading images via an image capture device (e.g., the device <NUM>). In some implementations, the request directs the image preprocessing server system <NUM> to preprocess the images received from the image capture device <NUM>, retrieve one or more additional related images from the image-related data sources <NUM>, and/or supply the preprocessed (or packaged) data to the computing device <NUM>.

The computer system <NUM> shown in <FIG> includes both a client-side portion (e.g., the image capture module <NUM> and modules on the computing device <NUM>) and a server-side portion (e.g., a module in the server system <NUM>). In some implementations, data preprocessing is implemented as a standalone application installed on the computing device <NUM> and/or the image capture device <NUM>. In addition, the division of functionality between the client and server portions can vary in different implementations. For example, in some implementations, the image capture module <NUM> is a thin-client that provides only image search requests and output processing functions, and delegates all other data processing functionality to a backend server (e.g., the server system <NUM>). In some implementations, the computing device <NUM> delegates image processing functions to the server system <NUM>.

The communication network(s) <NUM> can be any wired or wireless local area network (LAN) and/or wide area network (WAN), such as an intranet, an extranet, or the Internet. It is sufficient that the communication network <NUM> provides communication capability between the server system <NUM>, the image capture devices <NUM>, the image-related data sources <NUM>, and/or the computing device <NUM>.

In some implementations, the computing device <NUM> includes one or more processors <NUM>, one or more image related databases <NUM>, and a display <NUM>. Although not shown, in some implementations, the computing device <NUM> further includes one or more I/O interfaces that facilitate the processing of input and output associated with the image capture devices <NUM> and/or the server system <NUM>. One or more processors <NUM> obtain images and information related to images from image-related data sources <NUM> (e.g., in response to a request to render an image on a web browser), processes the images and related information, and stores the image references along with the information in the image related database <NUM>. The image-related database <NUM> stores various information, including but not limited to catalogs, images, image metadata, image information, geographic information, map information, among others. The image-related data <NUM> may also store a plurality of record entries relevant to the users associated with images. I/O interfaces facilitate communication with one or more image-related data sources <NUM> (e.g., image repositories, social services, and/or other cloud image repositories).

In some implementations, the computing device <NUM> connects to the image-related data sources <NUM> through I/O interfaces to obtain information, such as images stored on the image-related data source <NUM>. After obtaining the images along with the information associated with the images, the computing device <NUM> processes the data retrieved from the image-related data sources <NUM> to render one or more images on a web browser using the display <NUM>. The processed and/or the unprocessed information are stored in the image image-related data <NUM>. In various implementations, such information includes but not limited to images, image metadata, image information, geographic information, map information, among others. In some implementations, the database <NUM> may also store a plurality of record entries relevant to the users <NUM> associated with the images.

Examples of the image capture device <NUM> include, but are not limited to, a handheld computer, a wearable computing device, a personal digital assistant (PDA), a tablet computer, a laptop computer, a cellular telephone, a smart phone, an enhanced general packet radio service (EGPRS) mobile phone, a media player, a navigation device, a portable gaming device console, a tablet computer, a laptop computer, a desktop computer, or a combination of any two or more of these data processing devices or other data processing devices.

The image capture device <NUM> includes (e.g., is coupled to) a display and one or more input devices (e.g., a camera). In some implementations, the image capture device <NUM> receives inputs (e.g., images) from the one or more input devices and outputs data corresponding to the inputs to the display for display to the user <NUM>. The user <NUM> uses the image capture device <NUM> to transmit information (e.g., images) to the computing device <NUM>. In some implementations, the computing device <NUM> receives the information, processes the information, and sends processed information to the display <NUM> and/or the display of the image capture device <NUM> for display to the user <NUM>.

Examples of one or more networks <NUM> include local area networks (LAN) and wide area networks (WAN) such as the Internet. One or more networks <NUM> are, optionally, implemented using any known network protocol, including various wired or wireless protocols, such as Ethernet, Universal Serial Bus (USB), FIREWIRE, Global System for Mobile Communications (GSM), Enhanced Data GSM Environment (EDGE), code division multiple access (CDMA), time division multiple access (TDMA), Bluetooth, Wi-Fi, voice over Internet Protocol (VoIP), Wi-MAX, or any other suitable communication protocol.

The computing device <NUM> and/or the server system <NUM> are implemented on one or more standalone data processing apparatuses or a distributed network of computers. In some implementations, the computing device <NUM> and/or the server system <NUM> also employ various virtual devices and/or services of third party service providers (e.g., third-party cloud service providers) to provide the underlying computing resources and/or infrastructure resources.

<FIG> is a block diagram illustrating the computing device <NUM> in accordance with some implementations. The server system <NUM> may include one or more processing units (e.g., CPUs <NUM>-<NUM> and/or GPUs <NUM>-<NUM>), one or more network interfaces <NUM>, one or more memory units <NUM>, and one or more communication buses <NUM> for interconnecting these components (e.g. a chipset).

The memory <NUM> includes high-speed random access memory, such as DRAM, SRAM, DDR RAM, or other random access solid state memory devices; and, optionally, includes non-volatile memory, such as one or more magnetic disk storage devices, one or more optical disk storage devices, one or more flash memory devices, or one or more other non-volatile solid state storage devices. The memory <NUM>, optionally, includes one or more storage devices remotely located from one or more processing units <NUM>. The memory <NUM>, or alternatively the non-volatile memory within the memory <NUM>, includes a non-transitory computer readable storage medium. In some implementations, the memory <NUM>, or the non-transitory computer readable storage medium of the memory <NUM>, stores the following programs, modules, and data structures, or a subset or superset thereof:.

In some implementations, an image database management module <NUM> manages multiple image repositories, providing methods to access and modify image-related data <NUM> that can be stored in local folders, NAS or cloud-based storage systems. In some implementations, the image database management module <NUM> can even search offline repositories. In some implementations, offline requests are handled asynchronously, with large delays or hours or even days if the remote machine is not enabled. In some implementations, the image catalog module <NUM> manages permissions and secure access for a wide range of databases.

Each of the above identified elements may be stored in one or more of the previously mentioned memory devices, and corresponds to a set of instructions for performing a function described above. The above identified modules or programs (i.e., sets of instructions) need not be implemented as separate software programs, procedures, or modules, and thus various subsets of these modules may be combined or otherwise re-arranged in various implementations. In some implementations, memory <NUM>, optionally, stores a subset of the modules and data structures identified above. Furthermore, memory <NUM>, optionally, stores additional modules and data structures not described above.

<FIG> is a block diagram illustrating a representative image preprocessing server system <NUM> in accordance with some implementations. A server system <NUM>, typically, includes one or more processing units (e.g., CPUs and/or GPUs) <NUM>, one or more network interfaces <NUM>, memory <NUM>, optionally one or more sensors, and one or more communication buses <NUM> for interconnecting these components (sometimes called a chipset).

Memory <NUM> includes high-speed random access memory, such as DRAM, SRAM, DDR RAM, or other random access solid state memory devices; and, optionally, includes non-volatile memory, such as one or more magnetic disk storage devices, one or more optical disk storage devices, one or more flash memory devices, or one or more other non-volatile solid state storage devices. Memory <NUM>, optionally, includes one or more storage devices remotely located from one or more processing units <NUM>. Memory <NUM>, or alternatively the non-volatile memory within memory <NUM>, includes a non-transitory computer readable storage medium. In some implementations, memory <NUM>, or the non-transitory computer readable storage medium of memory <NUM>, stores the following programs, modules, and data structures, or a subset or superset thereof:.

<FIG> provide a flowchart of a method <NUM> for rendering photorealistic images in a web browser in accordance with some implementations. The method renders photorealistic images in a web browser. The method <NUM> is performed in a computing device (e.g., the device <NUM>) having a general purpose processor (e.g., the CPU(s) <NUM>-<NUM>) and a graphics processing unit (GPU) (e.g., the GPU(s) <NUM>-<NUM>).

The method <NUM> includes obtaining (<NUM>) an environment map (e.g., a high dynamic range image (HDRI)) that includes illumination values, positional vectors and transforms of an environment. For example, the computing device <NUM> uses the receiving module <NUM> to receive environment map(s) into or from the environment database <NUM>. Sometimes called a world map, an environment map is the depiction of the world as received from a camera, such as equilateral maps, high dynamic range images or <NUM> degree spherical maps used as light sources. In some implementations, it is the depiction of the world as tracked at a given moment. This includes various positional vectors and transforms of detected objects like point clouds, anchors, planes etc. In some implementations, the camera has the ability to serialize the world map to disk and reload it subsequently to recreate the world. This is useful for gaming applications, for example, if a user receives a phone call and has to background the app or in multiplayer game scenarios. Some implementations use the world map to detect and place custom anchors and planes for 3D modeling purposes. For example, the world map is used to change relative positions of occlusions to a building façade, walls, furniture, etc. Some implementations extend the map to also include lighting conditions and combine the map with the images to create a comprehensive snapshot of the world at the point the image was captured. In some implementations, the environment map is computed offline (e.g., by the preprocessing server system <NUM>). In some implementations, the environment map is computed based on an image captured by a user (e.g., the user <NUM>) of the camera (e.g., the image capture device <NUM>-<NUM>) who captures the scene.

The method <NUM> also includes obtaining (<NUM>) at least one image of an input scene. Sometimes a scene is referred to as an image. In some implementations, a scene refers to a static scene (a scene that does not change) as opposed to a dynamic scene. Referring to <FIG>, in some implementations, the at least one image are obtained (<NUM>) from a camera (e.g., the image capture device <NUM>-<NUM>). In some implementations, the camera's position can change with respect to the scene to capture a plurality of images of the scene. In some implementations, the camera is configured (<NUM>) as a perspective camera that models a thin lens to produce a photorealistic depth-of-field effect of the input scene. In some implementations, the opening of the lens is specified by a user - higher values result in less depth of field and more blurring for objects outside the focal point. Some implementations use a default value of the opening (e.g., <NUM>). In some implementations, a user specifies focus of the camera as a number (the distance to the focal point). Objects further away from this distance are likely to be out of focus. Some implementations use a default value (e.g., <NUM>) for the camera focus. In some implementations, the at least one image is derived from at least one aerial image or oblique capture.

Referring to <FIG>, in some implementations, the method <NUM> includes obtaining and substituting (<NUM>) a 3D model for an object (e.g., a building) of the input scene.

Referring back to <FIG>, the method <NUM> includes computing (<NUM>) textures for the input scene. This step includes encoding, as part of the textures, an acceleration structure. In some implementations, an acceleration structure is generated as a series of nodes comprising a bounding volume hierarchy (BVH) of the input scene (or triangle meshes of the input scene). In some implementations, the acceleration structure is an irregular grid.

Referring next to <FIG>, in some implementations, the method <NUM> includes obtaining (<NUM>) sensor information (e.g., relative position with respect to the scene, lighting, ambient and directional, color temperature) corresponding to the instant when the input scene is captured, encoding the sensor information in the textures while computing the textures for the input scene, and utilizing the sensor information to light or illuminate the respective sample of the input scene.

Referring next to <FIG>, in some implementations, the method <NUM> further includes obtaining (<NUM>) a first image and a second image of the input scene, and determining (<NUM>) if a mesh in the input scene changed between the first image and the second image of the input scene. For example, because the camera changed position, a mesh, material, or a geometry of the scene has changed relative to the camera's new orientation to the scene. In accordance with a determination that a mesh in the input scene changed, the method <NUM> includes regenerating (<NUM>) (e.g., re-computing or updating) the acceleration structure of the input scene using the second image. In some implementations, regenerating (<NUM>) comprises selecting and computing a new acceleration structure of the input scene.

Referring next to <FIG>, in some implementations, the encoding of the acceleration structure is limited to static geometry based on size of the input scene and hardware capabilities of the general purpose processor. Depending on the size of the input scene and the hardware capabilities, the acceleration structure can sometimes take over a second to construct. Some implementations restrict the acceleration structure construction to static geometry in order to achieve interactive framerates. In some implementations, frame rates above <NUM> fps are implemented for static scenes.

Referring next to <FIG>, in some implementations, generating (<NUM>) the texture includes packing the acceleration structure (e.g., a BVH) into an array and storing the array as a data texture for the one or more shaders (e.g., a fragment shader running on a GPU) to process.

Referring next to <FIG>, in some implementations, the method <NUM> further includes selecting (<NUM>) a material for the input scene including specifying a level of refraction for the material, and sending data corresponding to the material along with the texture to the one or more shaders executing on the GPU, thereby causing the one or more shaders to utilize the data corresponding to the material while generating samples of the input scene. For surface materials, some implementations support a standard Physically Based Rendering (PBR) workflow, including UV mapping. A standard PBR workflow model includes a roughness parameter and a metalness parameter, both of which can be adjusted or specified by a user. These two parameters are used by any PBR material.

For transparent materials such as glass, a traced ray will undergo reflection and refraction. The reflected portion is sampled in accordance with the Fresnel principle that grazing angles of light are perceived brighter, and importance sampling will bias these angles. Refracted portions will transmit into the material based on a refractive index value (for example, glass's index of refraction is approximately <NUM>) and out of the material in a similar fashion in accordance with Snell's law. Rays that transmit through a transparent material will therefore laterally shift in proportion to the thickness of the material. The severity of the shift will dictate which pixels of a surface along the path after transmission through the transparent material are illuminated by the refracted ray. In some implementations, where the input scene comprises a manmade structures with windows, the thickness of the windows is set at an industry standard (for example, most windows for residential uses are between <NUM> and <NUM> thick) with <NUM> as a default thickness. Some implementations use a thick glass or thin glass as the material (thus extending the standard workflow). Additionally, some implementations also support a shadow catcher material which only captures shadows, without casting its own light. In some implementations, materials in shadow portions (of an input scene) are assumed to not transmit indirect light. In some implementations, a shadow catcher material is used to blend model into background light.

A shadow catcher is a transparent material that only renders shadows cast onto it. Conventional renderers are limited in the ability to render a shadow catcher. For example, some renderers cannot render a shadow catcher that also contains global illumination. Some renderers cannot render a shadow catcher on a transparent material that displays the correct brightness of shadows. Some implementations address these issues by rendering a modified version of a realistic micro-facet material so that the end result contains correct shadows, global illumination, and reflections, all on an otherwise transparent surface. In some implementations, the shadow catcher is rendered as a modified version of a standard material that contains a diffuse and specular component. In some implementations, the material's albedo is computed dynamically by a color of the environment map behind the surface (e.g., position in the environment map where the camera is pointing at). In other words, the degree an intermediate object, such as a rendered object surface or a transparent material of the shadow catcher, reflects other colors can be dynamically calculated by determining the color of the environment map the camera observes which serves as a proxy for the light path parameters at that camera pose. Then the material is sampled via path tracing into the RGB channels of the light buffer.

Some implementations also render a sample of the material without shadows. For this sample, some implementations use a white albedo value. In some implementations, the unshadowed version is converted from colored to grayscale by computing its relative luminance. Then this grayscale light is multiplied into the alpha channel of the light buffer. The alpha channel starts each light path equal to <NUM> until the shadow catcher multiplies the unshadowed light into it. In some implementations, each sample rendered is accumulated and summed into the light buffer. This includes the alpha channel.

During a post-processing step, some implementations divide the RGB channels by the alpha channel. With the default alpha value of <NUM> per sample, this process produces the average light accumulation of the light buffer. But with the shadow catcher, this process produces the average light accumulation and divides the shadowed light by the unshadowed light. In this way, some implementations cancel out all contributions of light on the material and leave only the shadow contribution. In some implementations, subsequently, the color is rendered to a screen, and the end result is a transparent material that only displays shadows cast onto it.

Multiplying the alpha by the unshadowed light affects any light added from a previous bounce in the light path. To counteract this, when multiplying the alpha by the unshadowed light, some implementations also multiply the light of the existing path by the same amount. In the post-processing step, the division cancels out the multiplication for everything prior to the shadow catcher at this point in the path.

In some implementations, mesh vertices and material map (corresponding to the input scene) are stored in the data textures and transmitted to the shaders. In some implementations, the memory footprint for the texture data for a scene is within the GPU memory limits (e.g., within the VRAM limits). The typical memory requirements for real-time (or interactive) rendering of scenes are within the memory limitations of modern GPUs.

In some implementations, the material is a surface material and is represented (<NUM>) using property maps that include at least one of: diffuse maps that control reflective color of the material, normal maps that perturbs (sometimes referred to as modulating) a normal vector to the surface, and roughness and metalness maps describing texture of the surface. In some implementations, a normal vector represents a vector orthogonal to a mesh triangle, and the perturbing or modulation refers to an artificial way to vary its appearance relative to an adjacent triangle of the same material. For flat materials like aluminum, siding the normal vectors between adjacent triangles should be near-parallel and two adjacent mesh triangles should appear similar, but for materials that are rough (e.g., stucco), by perturbing triangle's normal vectors, additional roughness can be perceived, because the BRDF for that material will not produce substantially identical samples within a common region.

In some implementations, the material is a surface material that is represented (<NUM>) using an artist-tailored bidirectional reflectance distribution function (BRDF), such as Disney's Principled BRDF that adequately describes the majority of surfaces on earth while at the same time remaining consistent with PBR workflows in existing 3D software (e.g., Three.

In some implementations, the material is (<NUM>) a glass material that realistically reflects and refracts light. Some implementations model the glass to be perfectly smooth, which is not necessarily true of glass in real life. This assumption improves rendering performance and sufficiently applies to most real-world examples of glass. "Realistic" means it satisfies the Fresnel equation, which dictates that reflective surfaces, such as glass, are more reflective in grazing angles and more refractive otherwise.

Referring back to <FIG>, the method includes transmitting (<NUM>) the textures to one or more shaders executing on a GPU (or a co-processor distinct from the general purpose processor where the acceleration structure is computed).

The method also include generating (<NUM>), on the GPU, samples of the input scene, by performing at least one path tracing algorithm in the one or more shaders according to the textures. In some implementations, the method further includes storing the results of the at least one path tracing algorithm in an internal buffer.

The method also includes lighting and/or illuminating (<NUM>), on the GPU, a respective sample of those portions within an acceleration structure of the input scene using the environment map, to obtain a lighted scene. For example, the 3D scene is illuminated from all directions by the environment map placed on an infinitely-large sphere (warped) around the scene.

The method also includes tone mapping (<NUM>) the lighted scene to obtain a tone-mapped scene. Some implementations tone map the texture (e.g., a HDR texture) so that the lighted scene may be displayed on a monitor. Some implementations employ a variety of standard tone map operators input by a user. The method further includes drawing (<NUM>) output on a canvas, in the web browser, based on the tone-mapped scene to render the input scene (e.g., by copying the currently rendered scene from the internal buffer).

In some implementations, the one or more shaders traverse the BVH using a stack-based algorithm. Although there are several stackless BVH traversal algorithms that work well with the GPU, and even though such algorithms have smaller memory footprint, the traditional stack-based approach results in a simpler implementation. Moreover, any conventional (even low-powered device) that runs the ray-tracing algorithm typically has sufficient memory for a stack-based algorithm.

Referring next to <FIG>, in some implementations, the at least one path tracing algorithm iteratively (or progressively) renders (<NUM>) samples (or triangle meshes of the samples) of the input scene. Typically, more iterations or more samples generally results in higher quality images.

In some implementations, in accordance with a determination that a user has performed a predetermined action (e.g., when browser window is off focus or when a user clicks away from the browser window or switches to a different tab on the browser), the method includes causing (<NUM>) the one or more shaders to pause the at least one path tracing algorithm or restart the sampling loop. In some implementations, the shaders change from a first rendering resolution time (measured as million rays/second or Mray/s) to a second rendering resolution time when the user selects an active browsing pane other than the one rendering the object.

In some implementations, the at least one path tracing algorithm averages (<NUM>) each generated sample with previously generated samples.

In some implementations, the method further includes, in accordance with a determination that the scene (or a position of the camera) has changed, causing the (<NUM>) one or more shaders to pause the at least one path tracing algorithm (or restart the sampling loop).

Referring next to <FIG>, in accordance with the invention, the at least one path tracing algorithm uses (<NUM>) multiple importance sampling. The at least one path tracing algorithm is a cumulative distribution function of the environment map. In some implementations, the lighting or illumination multiple importance samples the input scene using the cumulative distribution function of the environment map averaged with a bidirectional reflectance distribution function of a material of the input scene. As a way of explanation, a single light ray incident upon real world objects will, in general, diffuse or scatter into a plurality of rays. Given the large number of rays that may be incident upon any one object, or in computer graphics the large number of rays that are incident upon a given pixel depicted in an object, the multiplied diffuse rays create millions of potential paths to trace for accurate rendering. In some situations, selecting those rays among the many for rendering via path tracing introduces large statistical variance to the rendered image. To reduce the interminable amount of time to calculate all possible rays, and choose those that minimize variance of appearance, importance sampling instead selects those rays more likely to have an effect on the overall appearance of a pixel. Some implementations importance sample the material according to the BRDF of the respective material, to optimize certain angles of incident light relative to the normal vector for a triangle. In accordance with the invention, the material is importance sampled for the cumulative distribution function (CDF) of the environmental map. Whereas other techniques in the art employ a probability distribution function to importance sample rays to a random light source (PDF), using a cumulative distribution function weighs the contribution of the brightest portion of the environment map more heavily. For outdoor scenes, where the brightest light source may be presumed to be sunlight, CDF utilization properly favors the primary light source without consideration to proximity or area projection proportion of illumination from other light sources.

Referring next to <FIG>, in some implementations, the at least one path tracing algorithm is implemented in Web GL, and in preferred implementations on WebGL <NUM>, and the method further includes, causing (<NUM>) the one or more shaders to rasterize a full-screen quad to the screen prior to executing the at least one path tracing algorithm, and using a fragment shader to execute the at least one path tracing algorithm for the full-screen quad to output one or more pixels to a framebuffer.

In some implementations, geometry buffers such as z-buffers for the input scene discard those rays that are occluded from the brightest light source and instead rely solely on BRDF importance sampling. Otherwise, multiple importance sampling averages the values of the bilinear rays (as determined among the BRDF and the CDF) to provide a combined resultant light intensity for that portion of the surface. It will be appreciated that importance sampling increases the rate at which variance decreases when rendering samples. This technique of multiple importance sampling enables some implementations to use environment maps with contrasted or highly varied sources of light, and effectively renders the scene in areas that are both in sunlight or in shadow.

As described above, in some implementations, each sample is rendered to an internal buffer. Subsequent operations store to and retrieve from the internal buffer. Some implementations store resulting render in a floating-point HDR texture in order to realistically represent the widely varying levels of reflected light present in a scene.

In some implementations, the method further includes predicting a cost of material required to build the plurality of objects in the environment according to the rendering (e.g., based on measurements, a predicted overall cost for the 3D structure for the conditions).

In some implementations, computing the textures for the input scene is performed on the general purpose processor, and the computing device is a low-power device that does not have a high-speed Internet connection (e.g., to perform the computations on a cloud infrastructure).

Some implementations render a photorealistic 3D model in a completely different display environment and a different point in time. Some implementations render such photorealistic images on a desktop browser. , while also providing nearly the same visual experience on a phone (for example, when a viewer chooses to view a building structure via its 3D model in lieu of the actual building). Some implementations make material predictions and provide additional measurement information based on the collected data (e.g., as part of a separate estimation order service or application).

<FIG> is a block diagram of a computing system <NUM> for accelerating rendering of graphical images using a GPU in accordance with some implementations. In some implementations, the computer system <NUM>, similar to the computer system <NUM> described above in reference to <FIG>, includes at least an image capture module <NUM>-<NUM> executed on an image capturing device <NUM>-<NUM>, and a computing device <NUM>.

The image capturing module <NUM>-<NUM> communicates with the computing device <NUM> through one or more networks <NUM>, as described above in reference to <FIG>. The image capturing module <NUM>-<NUM> provides image capture functionality (e.g., take photos of images, such as the image <NUM> with one or objects, such as the building <NUM>) and communications with the computing device <NUM>. In some implementations, although not shown, an image preprocessing server system <NUM> (as described above in reference to <FIG>) provides server-side functionality (e.g., preprocessing images, such as creating textures, storing environment maps and images and handling requests to transfer images) for the image capture module <NUM>-<NUM> residing on the image capture device <NUM>-<NUM>.

In some implementations, the image capture device <NUM>-<NUM> is a computing device, such as a desktop, laptop, a mobile device, and a camera, from which users <NUM> can capture images (e.g., take photos), discover, view, edit, and/or transfer images.

In some implementations, the computer system <NUM> shown in <FIG> includes both a client-side portion (e.g., the image capture module <NUM>-<NUM> and modules on the computing device <NUM>) and a server-side portion (e.g., a module in the server system <NUM>). In some implementations, data preprocessing is implemented as a standalone application installed on the computing device <NUM> and/or the image capture device <NUM>-<NUM>. In addition, the division of functionality between the client and server portions can vary in different implementations. For example, in some implementations, the image capture module <NUM>-<NUM> is a thin-client that provides only image search requests and output processing functions, and delegates all other data processing functionality to a backend server (e.g., the server system <NUM>). In some implementations, the computing device <NUM> delegates image processing functions to the server system <NUM>.

The communication network(s) <NUM> can be any wired or wireless local area network (LAN) and/or wide area network (WAN), such as an intranet, an extranet, or the Internet. It is sufficient that the communication network <NUM> provides communication capability between the server system <NUM>, one or more image capture devices (e.g., the device <NUM>-<NUM>), (optionally) image-related data sources, and/or the computing device <NUM>.

In some implementations, as described above in reference to <FIG>, the computing device <NUM> includes one or more processors <NUM> (e.g., the CPU <NUM>-<NUM> and the GPU <NUM>-<NUM>), one or more image related databases <NUM>, and a display <NUM>. Although not shown, in some implementations, the computing device <NUM> further includes one or more I/O interfaces that facilitate the processing of input and output associated with the image capture devices <NUM> and/or the server system <NUM>. One or more processors <NUM> obtain images and information related to images from image-related data sources <NUM> (e.g., in response to a request to render an image on a web browser), processes the images and related information, and stores the image references along with the information in the image related database <NUM>. The image-related database <NUM> stores various information, including but not limited to catalogs, images, image metadata, image information, geographic information, map information, among others. The image-related data <NUM> may also store a plurality of record entries relevant to the users associated with images. I/O interfaces facilitate communication with one or more image-related data sources <NUM> (e.g., image repositories, social services, and/or other cloud image repositories).

Examples of the image capture device <NUM>-<NUM> include, but are not limited to, a handheld computer, a wearable computing device, a personal digital assistant (PDA), a tablet computer, a laptop computer, a cellular telephone, a smart phone, an enhanced general packet radio service (EGPRS) mobile phone, a media player, a navigation device, a portable gaming device console, a tablet computer, a laptop computer, a desktop computer, or a combination of any two or more of these data processing devices or other data processing devices.

In some implementations, the image capture device <NUM>-<NUM> includes (e.g., is coupled to) a display and one or more input devices (e.g., a camera). In some implementations, the image capture device <NUM> receives inputs (e.g., the image <NUM>) from the one or more input devices and outputs data corresponding to the inputs to the display for display to the user <NUM>. The user <NUM> uses the image capture device <NUM> to transmit information (e.g., images) to the computing device <NUM>. In some implementations, the computing device <NUM> receives the information, processes the information, and sends processed information to the display <NUM> and/or the display of the image capture device <NUM> for display to the user <NUM>.

As described above in reference to <FIG>, in some implementations, the computing device <NUM> and/or the server system <NUM> are implemented on one or more standalone data processing apparatuses or a distributed network of computers. In some implementations, the computing device <NUM> and/or the server system <NUM> also employ various virtual devices and/or services of third party service providers (e.g., third-party cloud service providers) to provide the underlying computing resources and/or infrastructure resources.

In some implementations, as shown in <FIG>, the computing device <NUM>, extracts, using a CPU <NUM>-<NUM>, information <NUM> (e.g., triangle meshes) on one or more objects (e.g., the building <NUM>) in the input image <NUM> (sometimes called an input scene). The computing device <NUM> generates, using the CPU <NUM>-<NUM>, a bounding volume hierarchy (BVH) <NUM> based on the information <NUM>. For example, the BVH computing module <NUM>-<NUM> generates a hierarchy of bounding volumes after sub-dividing the input scene input into regions or bounding volumes and associating each triangle with a respective region. The computing device <NUM> also generates, using the CPU <NUM>-<NUM>, one or more texture related data (e.g., the data <NUM>-<NUM>), such as position vertices <NUM>, normal vectors <NUM>, and UV coordinates <NUM>, for the input scene. The computing device <NUM> subsequently generates, using the CPU <NUM>-<NUM>, a texture <NUM> (e.g., using the texture computing module <NUM>, <FIG>) for the input scene by packaging at least the BVH data <NUM>, the position vertices <NUM>, the normal vectors <NUM>, and the UV coordinates <NUM>, according to some implementations. The texture <NUM> is transmitted to the GPU <NUM>-<NUM> which extracts RGBA channels <NUM> from the texture <NUM>, and generates samples <NUM> for the input scene <NUM> according to the RGBA channels <NUM>, according to some implementations.

Some implementations store image-related data inside a data structure, such as a texture map, that can then be efficiently manipulated on the GPU. Some implementations store position vertices of every mesh, normal vectors of every mesh, UV coordinates of every mesh, and/or BVH data structure representing the input scene. Some implementations encode (or package) and upload (or transmit) information to the GPU as follows. Some implementations start with an <NUM>-dimensional array of size n, and create a floating point RGBA WebGL texture. The precision is set to either <NUM>-bits (gl. RGBA16F) or <NUM>-bits (gl. RGBA32F) depending on whether memory or precision is optimized. For example, this is a user-configurable parameter. Some implementations calculate the dimensions of the texture using a predetermined formula. For example, the width of the texture is computed as <NUM> ^ ( round( log2( sqrt( n / <NUM> ) ) ) ), and the height of the texture is computed as ceil( n / width ). In these calculations, round (rounding operation), log2 (logarithm to base-<NUM>), sqrt (square-root), and ceil (ceiling) are well-known mathematical operations. Some implementations package the position vertices, normal vectors, UV coordinates of every mesh, and the acceleration structure representing the scene, into this texture (an <NUM>-dimensional array, referred to as array in the following descriptions).

Some implementations decode the texture on the GPU by performing a sequence of operations as follows. Some implementations pick a position p (within the <NUM>-dimensional array, array) to decode the encoded array from, and compute two integers y = p >> round( log2( sqrt( n / <NUM>) ) ), and x = p - (y << round( log2( sqrt( n / <NUM> ) ) ) ). These operations are mathematically equivalent to the following, but the former equations take advantage of faster bit manipulation: y = p / <NUM> ^ ( round( log2( sqrt( n / <NUM> ) ) ) ), and x = p % <NUM> ^ ( round( log2( sqrt( n / <NUM> ) ) ) ). Some implementations fetch (or retrieve) the texel of the texture at position (x, y) and store the values to a four-element vector (sometimes called vec4). The RGBA channels of the four-element vector thus contains the following values from the original (<NUM>-dimensional) array: r = array[ p * <NUM> ], g = array[p * <NUM> + <NUM>], b = array[ p * <NUM> + <NUM> ], and a = array[ p * <NUM> + <NUM> ]. One or more shaders in the GPU perform path tracing on the input scene using the r, g, b, and a values. Thus, by packaging and transmitting the relevant data to the GPU in a texture, the data packaged is efficiently handled by one or more shaders on the GPU.

<FIG> provide a flowchart of a method <NUM> for accelerating rendering of graphical images using a GPU in accordance with some implementations. Referring to <FIG>, the method <NUM> includes obtaining (<NUM>) an input scene (e.g., the scene <NUM>) from a camera (e.g., the image capturing device <NUM>-<NUM>). The method also includes computing (<NUM>) a plurality of triangle meshes corresponding to the input scene (e.g., the information <NUM>, as described above in reference to <FIG>). The method also includes calculating (<NUM>) position vertices, normal vectors, and UV coordinates for each triangle mesh, and calculating a bounding volume hierarchy (BVH) of the input scene. The computing device computes (<NUM>) a texture map for the input scene by packaging at least texels encoding the position vertices, the normal vectors, the UV coordinates, and the BVH. The operations <NUM>-<NUM> are performed on a CPU (e.g., the CPU <NUM>-<NUM>) according to some implementations. The method includes transmitting (<NUM>) the texture map (e.g., the texture <NUM>) to the GPU (e.g., the GPU <NUM>-<NUM>). The method further includes decoding (<NUM>), by the GPU, the texture map to extract RGBA channels. The method includes generating (<NUM>), by the GPU, using one or more shaders, samples of the input scene, by performing a path tracing algorithm on the RGBA channels.

Referring next to <FIG>, in some implementations, the texture map (e.g., the texture <NUM>) is (<NUM>) a WebGL texture, and each texel (e.g., the BVH <NUM>) is a floating-point number. In some implementations, the method further includes determining (<NUM>) precision of the floating-point numbers depending on whether memory or precision is optimized. For example, <NUM>-bits (g1. RGBA16F format) is used when optimizing for memory, and <NUM>-bits (gl. RGBA32F) is used when optimizing for precision. Some implementations optimize for richness of image. For example, if memory is not a constraint then some implementations let the renderer run faster or longer to generate better image quality. And, if memory is a constraint (such as on WebGL, or low powered devices using WebGL), then some implementations throttle back the number of samples calculated per second, and/or the number of samples calculated per pixel.

Referring next to <FIG>, in some implementations, computing the texture map includes encoding (<NUM>) the texture map as an <NUM>-dimensional array, determining a size of the <NUM>-dimensional array, and determining dimensions of the texture map according to the size of the <NUM>-dimensional array and a predetermined mathematical formula.

Referring next to <FIG>, in some implementations, the texture map is (<NUM>) encoded as an <NUM>-dimensional array. The method includes decoding the texture map by performing a sequence of steps (<NUM>) for each position of a plurality of positions in the <NUM>-dimensional array. The sequence of steps includes computing (<NUM>) coordinates of a texel corresponding to the respective position, extracting (<NUM>) the texel from the <NUM>-dimensional array based on the coordinates, and extracting (<NUM>) RGBA channels by indexing the texel. In some implementations, the method includes storing (<NUM>) the texel to a vector register and extracting the RGBA channels by manipulating the vector register.

Thus, the techniques provided herein, in various implementations, enable users to start with an image captured using a camera and interact with a 3D model and measurements (or cost estimates) of objects in the image using an off-the-shelf web browser on a low-powered device regardless of speed of Internet connections.

Because path tracing is a progressive rendering technique, the more samples that are rendered, the less noise that is visible in the image. Whenever the camera moves, the rendering process is restarted, which in some instances, leads to a less real-time experience, since the user is required to wait for several samples to render before the image becomes sufficiently noise-free. Temporal de-noising gets around this issue. By storing image(s) from previous camera angles, some implementations re-use samples from the image(s) by determining location of the old samples in the new image, and subsequently adding the samples to the new image. This technique is called "re-projection" and is a common technique in temporal anti-aliasing.

<FIG> is a block diagram of a computer system <NUM> that performs temporal de-noising (sometimes called temporal noise reduction) for rendering images using path tracing, in accordance with some implementations. In some implementations, the computer system <NUM> includes image capture devices <NUM>, and a computing device <NUM>. In some implementations, operations described herein are performed by the temporal noise reduction module <NUM>-<NUM>.

An image capture device <NUM> communicates with the computing device <NUM> through one or more networks <NUM>. The image capture device <NUM> provides image capture functionality (e.g., take photos of images) and communications with the computing device <NUM>. In some implementations, the image capture device is connected to an image preprocessing server system (not shown) that provides server-side functionality (e.g., preprocessing images, such as creating textures, storing environment maps (or world maps) and images and handling requests to transfer images) for any number of image capture devices <NUM>.

In some implementations, the image capture device <NUM> is a computing device, such as desktops, laptops, and mobile devices, from which users <NUM> can capture images (e.g., take photos), discover, view, edit, and/or transfer images. In some implementations, the users <NUM> are robots or automation systems that are pre-programmed to capture In some implementations, the image capture device <NUM> is an augmented reality camera or a camera phone capable of performing the image capture.

Typically, a user <NUM> walks around a building structure (e.g., the house <NUM>), and takes pictures of the building <NUM> using the device <NUM> (e.g., an iPhone) at different poses (e.g., the poses <NUM>-<NUM>, <NUM>-<NUM>, and <NUM>-<NUM>). Each pose corresponds to a different perspective or a view of the building structure <NUM> and its surrounding environment, including one or more objects (e.g., a tree, a door, a window, a wall, a roof) around the building structure. The poses may or may not overlap. For example, in <FIG>, the poses <NUM>-<NUM> and <NUM>-<NUM> overlap, but the poses <NUM>-<NUM> and <NUM>-<NUM> do not overlap.

In some implementations, one or more samples from a prior pose are used to improve the rendering of an image captured at a subsequent pose. As described above, because path-tracing based rendering is a progressive technique, the quality of the image rendered improves over many samples. Temporal de-noising, reusing samples from a different frame (corresponding to a different pose) help improve the rendering.

At each pose, the device <NUM> obtains (<NUM>) images of the building <NUM> visible to the device <NUM> at the respective pose. For example, the device captures data <NUM>-<NUM> at the pose <NUM>-<NUM>, the device captures data <NUM>-<NUM> at the pose <NUM>-<NUM>, and the device captures data <NUM>-<NUM> at the pose <NUM>-<NUM>.

Although the description above refers to a single device <NUM> used to obtain (or generate) the data <NUM>, any number of devices <NUM> may be used to generate the data <NUM>. Similarly, any number of users <NUM> may operate the device <NUM> to produce the data <NUM>.

The data <NUM> is collectively a wide baseline image set, that is collected at sparse positions (or poses <NUM>) around the building structure <NUM>. In other words, the data collected may not be a continuous video of the building structure or its environment, but rather still images and/or related data with substantial rotation and/or translation between successive positions.

The computing device <NUM> obtains the data <NUM> via the network <NUM>. Based on the data received, the computing device <NUM> performs temporal noise reduction (<NUM>) of the rendered image based on prior samples.

Some implementations obtain an input scene (e.g., the building structure <NUM>), from a camera (e.g., the device <NUM>), and render (<NUM>) a new image of the input scene (e.g., image <NUM>) including separating the specular and diffuse light contributions to separate buffers (e.g., specular light buffer <NUM> and diffuse light buffer <NUM>). Some implementations obtain an old image corresponding to a prior pose of the camera. The new image and old image include RGBA channels with red, green, and blue (RGB) channels set to light contribution, and alpha channel set to <NUM>, for each pixel, collectively shown as RGBA channels <NUM>. Some implementations blend samples (<NUM>) of a new image with re-projected samples of the old image, based on the alpha channel corresponding to each pixel of the new image, using a long temporal filter <NUM> for specular light, and a short temporal filter <NUM> for the diffuse light, based on separate buffers for the two types of light contributions. Examples of temporal de-noising are further described below, according to some implementations.

The computer system <NUM> shown in <FIG> includes both a client-side portion (e.g., the image capture devices <NUM>) and a server-side portion (e.g., a module in the computing device <NUM>). In some implementations, data preprocessing is implemented as a standalone application installed on the computing device <NUM> and/or the image capture device <NUM>. In addition, the division of functionality between the client and server portions can vary in different implementations. For example, in some implementations, the image capture device <NUM> uses a thin-client module that provides only image search requests and output processing functions, and delegates all other data processing functionality to a backend server (e.g., the server system <NUM>). In some implementations, the computing device <NUM> delegates image processing functions to the image capture device <NUM>, or vice-versa.

The communication network(s) <NUM> can be any wired or wireless local area network (LAN) and/or wide area network (WAN), such as an intranet, an extranet, or the Internet. It is sufficient that the communication network <NUM> provides communication capability between the image capture devices <NUM>, the computing device <NUM>, and/or external servers (e.g., servers for image processing, not shown). Examples of one or more networks <NUM> include local area networks (LAN) and wide area networks (WAN) such as the Internet. One or more networks <NUM> are, optionally, implemented using any known network protocol, including various wired or wireless protocols, such as Ethernet, Universal Serial Bus (USB), FIREWIRE, Global System for Mobile Communications (GSM), Enhanced Data GSM Environment (EDGE), code division multiple access (CDMA), time division multiple access (TDMA), Bluetooth, Wi-Fi, voice over Internet Protocol (VoIP), Wi-MAX, or any other suitable communication protocol.

The computing device <NUM> and/or the image capture devices <NUM> are implemented on one or more standalone data processing apparatuses or a distributed network of computers. In some implementations, the computing device <NUM> and/or the image capturing devices <NUM> also employ various virtual devices and/or services of third party service providers (e.g., third-party cloud service providers) to provide the underlying computing resources and/or infrastructure resources.

Some implementations render a new image with one path-traced sample per pixel. The image contains floating-point RGBA channels with the RGB channels equal to the light contribution, and the alpha channel set to <NUM>.

In some implementations, the system (e.g., a separate shader pass) determines a surface position of each pixel and projects the position to the coordinates in the old image. Some implementations determine a mesh identifier of the surface at this coordinate. If the mesh identifier does not match for the old image and the new image, it means the surface on the new image is not visible in the old image, so no samples can be reused, and the system proceeds to the next step in the pipeline. If the identifiers match, the surface is visible between both images, so the system can reuse samples from the old image.

Some implementations re-use sample(s) by adding together the channels of both images. Since the alpha channel for each new image is equal to <NUM>, adding the channels accumulates light, and the number of samples accumulated is stored in the resulting alpha channel. Subsequently (e.g., during a post-processing step), some implementations divide the RGB channels by the alpha channel to get the average contribution of light for that pixel.

In some implementations, the old image is subsequently set to be the accumulated image (e.g., the old image plus the new image), for use in a next cycle.

In some implementations, if the camera stays still, the system starts using less and less re-projected samples over time, since direct samples are more accurate than re-projected samples.

In some implementations, when moving the camera, the new samples are blended with old samples with an exponential average, so old samples become less significant over time. However, when the camera stays still, some implementations blend remaining old samples (e.g., over <NUM> frames or so), using a linear sum, until only the accumulated samples from the current camera angle (i.e., samples that are not re-projected) remain.

Some implementations use short filters and/or long filters. In some implementations, the current image is blended with the accumulated image via exponential averaging using the equation: f_n(p) = α * s_n(p) + (<NUM> - α) * f_n-<NUM>(π(p)). In this equation, f_n is the new re-projected output, f_n-<NUM> is the previous re-projected output, s_n is the current <NUM> sample-per-pixel image, π is the re-projection operator, and is the blend factor, controlling the strength of the re-projection. A long filter means a lower (<NUM>), which in turn means more samples are blended from the accumulated image. With a long filter, it takes longer until the accumulated samples become insignificant (when compared to the new samples being rendered). A short filter, on the other hand, means a higher (<NUM>) meaning the accumulated samples carry less weight and are quicker to be overwritten by new samples being rendered.

Some implementations weigh the contribution of old image light and the new image light as follows. Some implementations store the number of samples rendered in the alpha channel for each pixel individually. Different pixels will have different numbers of samples rendered, according to when their coordinates are able to be reused from the previous image. Conventional path-tracing de-noising implementations don't use an alpha channel, so they're forced to use the same sample count for every pixel. With conventional systems, samples that are accumulated will factor only as much as new samples, leading to visual artifacts.

Specular reflections depend and change based on the angle of the camera. Reused samples from different camera angles are invalid for these types of reflections. During the ray tracing step, instead of combining all types of reflections into one light buffer, some implementations write specular light and diffuse light to separate buffers. During a re-projection step, some implementations blend new diffuse light with old diffuse light using a long temporal filter, since diffuse light is invariant of camera angle. Some implementations blend new specular light with a very short filter, so that light responds quickly to new camera angles. This effects strong de-noising for diffuse light, while also making the light more responsive to specular reflections.

<FIG> provide a flowchart of a method <NUM> for rendering images using path tracing, and performing temporal de-noising, in accordance with some implementations. In some implementations, the method <NUM> is performed by the temporal noise reduction module <NUM>-<NUM>.

The method includes obtaining (<NUM>) an input scene from a camera (e.g., a physical camera hardware in a smartphone, or a virtual camera, such as a software representation of a camera (view) in a 3D scene). In some implementations, this step includes initializing an input scene that includes meshes, lights, and cameras. The input scene is a virtual scene in this case. Rendering systems use a graph, usually called the scene graph, to represent the objects the renderer in question would "render" from a camera view (virtual camera). In some implementations, scenes include a 3D mesh of a property that is reconstructed from smartphone photos, lights (one ambient light, one directional light), a terrain mesh, a sky mesh. Some implementations initialize scenes with different configurations, including other objects (trees, interiors, etc.).

The method also includes rendering (<NUM>) a current frame of the input scene from a current pose, with one path-traced sample per pixel, including storing specular and diffuse light contributions to separate buffers. Some implementations use diffuse maps to identify specular and diffuse lights.

The method also includes obtaining (<NUM>) a prior frame corresponding to a prior pose of the camera. The current frame and the prior frame have at least one overlapping pixel and each of the current frame and prior frame image data includes RGBA channels with red, green, and blue (RGB) channels set to light contribution, and alpha channel set to <NUM>, for each pixel.

The method also includes re-projecting (<NUM>) samples from the prior grame into the current frame (sometimes referred to as blending the current frame with re-projected samples from the prior frame) based on the alpha channel corresponding to each overlapping pixel with the current frame, including (i) blending diffuse light of the current frame with diffuse light of at least the prior frame using a long temporal filter, and (ii) blending specular light of the current frame with specular light of at least the prior frame using a short temporal filter, based on the separate buffers for the specular and diffuse light. These steps assure that light responds quickly to new camera angles, and/or preserve the strong de-noising for diffuse light, while also making the light more responsive to specular reflections.

Referring next to <FIG>, in some implementations, re-projecting samples from the prior frame into the current frame includes, for each pixel (<NUM>) of the current frame: (i) determining (<NUM>) if a surface corresponding to the pixel is visible in the prior frame; and (ii) in accordance with a determination that the surface is visible in the prior frame, averaging (<NUM>) the RGB channels for the pixel with corresponding values from the re-projected samples.

Referring next to <FIG>, in some implementations, determining if the surface is visible includes: (i) calculating a surface position of the pixel; (ii) projecting the surface position to coordinates in the prior frame; (iii) determining if a first mesh identifier for the surface position at the coordinates for the prior frame matches a second mesh identifier for the current frame; and (iv) in accordance with a determination that the first mesh identifier and the second mesh identifier match, determining that the surface is visible in the prior frame.

Referring next to <FIG>, averaging the RGB channels includes: (i) adding (<NUM>) the RGBA channels for the pixel of the prior frame to the RGBA channels for the pixel of the current frame; and (ii) dividing (<NUM>) each of the RGB channels for the pixel of the current frame by value of the alpha channel for the pixel of the current frame.

Referring next to <FIG>, the method further includes: (i) detecting (<NUM>) if the camera has moved or is still; (ii) in response to detecting that the camera has moved, blending (<NUM>) the current frame with the re-projected samples from the prior frame using an exponential average; and (iii) in response to detecting that the camera is still, linearly blending (<NUM>) the current frame with the re-projected samples from the prior frame.

Referring back to <FIG>, the method also includes updating (<NUM>) the prior frame using the new image to obtain an updated prior frame, including storing number of samples rendered in the alpha channel for each pixel.

The method also includes repeating (<NUM>) obtaining a new input scene, rendering a new image, and blending the new image reusing samples from the updated prior frame.

Referring next to <FIG>, the method further includes: (i) detecting (<NUM>) if the camera is moving; and (ii) in response to detecting that the camera is moving, blurring (<NUM>) at least a portion of the new image. Blurring is the effect of not being able to re-project. In other words, the current pixel wasn't visible in the previous frame. Some implementations cast new rays to path trace. The averaging (across many frames) causes the blurring in such sections of the image.

Referring back to <FIG>, in some implementations, the method further includes repeating (<NUM>) obtaining a new input scene, rendering a current frame, and blending the current frame reusing samples.

As described above, some implementations separate diffuse and specular light buffers into their own buffers. This especially works well in instances where the scenes include two lights - an ambient light and a static directional light. These lights do not change during the execution of the program. This allows diffuse light to preserve strong de-noising by using a long temporal filter in the re-projection step (diffuse light is invariant of camera angle). On the other hand, new specular light is blended with a very short temporal filter so that light responds quickly to new camera angles.

From a user perspective, areas with less reflected light stay crisp and virtually noise-free. When the camera moves, some implementations trade the noise for blurriness. Blur and noise are undesired artifacts, but "blurring effects" are more visually pleasing than "noise.

In this way, some implementations use the alpha channel (in texture) to store the number of accumulated samples per pixel. Each pixel has a different number of accumulated (alpha) values over time. This information is used to improve real-time rendering of images. On the other hand, conventional systems use a single value to represent all pixels, and do not alleviate blurriness or ghosting. The techniques disclosed here are useful for rendering both static scenes and dynamic scenes.

Claim 1:
A method (<NUM>) of rendering photorealistic images in a web browser (<NUM>), the method performed in a computing device (<NUM>) having a general purpose processor (<NUM>-<NUM>) and a graphics processing unit GPU (<NUM>-<NUM>), the method comprising:
obtaining (<NUM>) an environment map that includes illumination values, positional vectors and transforms of a plurality of objects in an environment;
obtaining (<NUM>) at least one image of an input scene;
computing (<NUM>) textures for the input scene including by encoding, as part of the textures, an acceleration structure (<NUM>-<NUM>) of the input scene;
transmitting (<NUM>) the textures to one or more shaders executing on a GPU;
generating (<NUM>), on the GPU, samples of the input scene, by performing at least one path tracing algorithm in the one or more shaders according to the textures, wherein the at least one path tracing algorithm includes multiple importance sampling using a cumulative distribution function of the environment map that weighs the contribution of the brightest portion of the environment map more heavily;
lighting or illuminating (<NUM>), on the GPU, a respective sample of the input scene using the environment map, to obtain a lighted scene;
tone mapping (<NUM>) the lighted scene to obtain a tone-mapped scene; and
drawing (<NUM>) output on a canvas, in the web browser, based on the tone-mapped scene to render the input scene.