Stereoscopic 3D webpage overlay
Systems and methods for displaying a stereoscopic three-dimensional (3D) webpage overlay. In some embodiments, user input may be received from a user input device and in response to determining that the user input device is not substantially concurrently interacting with the 3D content, interpret the user input based on a 2D mode of interaction. In addition, the user input may be interpreted based on a 3D mode of interaction in response to determining that the user input device is substantially concurrently interacting with the 3D content. The 2D mode of interaction corresponds to a first visual cursor, such as a mouse cursor, and the 3D mode of interaction corresponds to a second visual cursor, such as a virtual beam rendered to extend from a tip of the user input device.
1. A non-transitory computer readable memory medium storing programming instructions executable by a processor to:
render, on a surface of a display device, a webpage comprising at least two layers, wherein a first layer of the at least two layers is associated with multiple instances of three-dimensional (3D) content rendered on the surface of the display device, wherein the first layer comprises a WebGL canvas supporting the multiple instances of 3D content, wherein a second layer of the at least two layers is associated with two-dimensional (2D) content rendered on the surface of the display device, wherein the first and second layers are rendered on the surface of the display device in an overlapping manner and at substantially the same time, and wherein a mapping between layout position in pixels on the webpage and virtual 3D positions in a unit of length associated with the WebGL canvas enables positioning of the multiple instances of 3D content relative to the 2D content on the webpage within 2 pixels;
receive user input from a user input device;
in response to determining that the user input device is not interacting with the 3D content, interpret the user input based on a 2D mode of interaction; and
in response to determining that the user input device is interacting with the 3D content, interpret the user input based on a 3D mode of interaction.
2. The non-transitory computer readable memory medium of claim 1 ,
wherein the 2D mode of interaction corresponds to a first visual cursor, wherein the 3D mode of interaction corresponds to a second visual cursor.
3. The non-transitory computer readable memory medium of claim 2 ,
wherein the second visual cursor comprises a virtual beam rendered to extend from a tip of the user input device.
4. The non-transitory computer readable memory medium of claim 2 ,
wherein the first visual cursor comprises a mouse cursor.
5. The non-transitory computer readable memory medium claim 1 ,
wherein the program instructions are further executable to:
track position and orientation of the user input device relative to the surface of the display device; and
determine an intersection of a virtual beam extending from a tip of the user input device with the surface, wherein the intersection is based on the position and orientation of the user input device.
6. The non-transitory computer readable memory medium claim 5 ,
wherein to determine that the user input device is not interacting with the 3D content, the program instructions are further executable to:
determine that the user input device is directed at 2D content based on the determined intersection.
7. The non-transitory computer readable memory medium of claim 1 ,
wherein the first layer is rendered in front of the second layer.
8. The non-transitory computer readable memory medium of claim 1 ,
wherein layout of the first layer is specified in a unit of length, wherein layout of the second layer is specified in pixels, and wherein the program instructions are further executable to generate the mapping between the unit of length and pixels.
9. The non-transitory computer readable memory medium of claim 1 , wherein the mapping accounts for a scroll offset of the webpage via movement of a virtual camera, wherein the movement of the virtual camera corresponds to the scroll effect.
10. The non-transitory computer readable memory medium of claim 9 , wherein the scroll offset is specified in pixels and the movement of the virtual camera is specified in a unit of length comprising at least one of meters, centimeters, or inches.
11. A three-dimensional (3D) stereoscopic display system comprising:
at least one processor;
one or more displays, coupled to the at least one processor; and
a memory coupled to the at least one processor, wherein the memory has stored thereon instructions executable by the at least one processor to:
render, on a surface of at least one display of the one or more displays, a webpage comprising at least two layers, wherein a first layer of the at least two layers is associated with three-dimensional (3D) content rendered on the surface of the at least one display, wherein the first layer comprises a WebGL canvas, wherein a second layer of the at least two layers is associated with two-dimensional (2D) content rendered on the surface of the at least one display, wherein the first and second layers are rendered on the surface of the at least one display at substantially the same time, and wherein a mapping between layout position in pixels on the webpage and virtual 3D positions in a unit of length associated with the WebGL canvas enables positioning of the 3D content relative to the 2D content on the webpage within 2 pixels;
receive user input from a user input device;
in response to determining that the user input device is not interacting with the 3D content, interpret the user input based on a 2D mode of interaction; and
in response to determining that the user input device is interacting with the 3D content, interpret the user input based on a 3D mode of interaction.
12. The system of claim 11 ,
wherein the 2D mode of interaction corresponds to a first visual cursor, wherein the 3D mode of interaction corresponds to a second visual cursor.
13. The system of claim 12 ,
wherein the first visual cursor comprises a mouse cursor;
wherein the second visual cursor comprises a virtual beam rendered to extend from a tip of the user input device.
14. The system of claim 11 ,
wherein the program instructions are further executable to:
receive, from a tracking system in communication with the system, position and orientation of the user input device relative to the surface of the display device; and
determine an intersection of a virtual beam extending from a tip of the user input device with the surface, wherein the intersection is based on the position and orientation of the user input device.
15. The system of claim 14 ,
wherein to determine that the user input device is not interacting with the 3D content, the program instructions are further executable to:
determine that the user input device is directed at 2D content based on the determined intersection.
16. The system of claim 11 ,
wherein the first layer is rendered in front of the second layer.
17. The system of claim 11 ,
wherein layout of the first layer is specified in a unit of length, wherein layout of the second layer is specified in pixels, and wherein the program instructions are further executable to generate the mapping between the unit of length and pixels.
18. A method for displaying a stereoscopic three-dimensional (3D) webpage overlay, comprising:
rendering, on a surface of a display device, a webpage comprising at least two layers, wherein a first layer of the at least two layers is associated with three-dimensional (3D) content rendered on the surface of the display device, wherein the first layer comprises a WebGL canvas, wherein a second layer of the at least two layers is associated with two-dimensional (2D) content rendered on the surface of the display device, wherein the first and second layers are rendered on the surface of the display device at substantially the same time, wherein the first layer is rendered on top of the second layer, and wherein a mapping between layout position in pixels on the webpage and 3D positions in a unit of length associated with the WebGL canvas enables positioning of the 3D content relative to the 2D content on the webpage within 2 pixels;
receiving user input from a user input device;
in response to determining that the user input device is not interacting with the 3D content, interpreting the user input based on a 2D mode of interaction; and
in response to determining that the user input device is interacting with the 3D content, interpreting the user input based on a 3D mode of interaction.
19. The method of claim 18 ,
wherein the 2D mode of interaction corresponds to a first visual cursor, wherein the 3D mode of interaction corresponds to a second visual cursor.
20. The method of claim 19 ,
wherein the first visual cursor comprises a mouse cursor;
wherein the second visual cursor comprises a virtual beam rendered to extend from a tip of the user input device.