The goal of the Stereo 3D Web is to provide stereo rendering of 3D objects on the Web. Even though stereo 3D devices are widely available and the number of stereo 3D contents increases, no web standards support them yet. The Stereo 3D Web is introduced to fill the gap.
This section introduces the 'perspective-baseline' property that extends CSS 3D Transforms [[!CSS3-3D-TRANSFORMS]].
The property specifies a perspective baseline, the distance between two perspective origins for stereo rendering.
perspective-baseline' property
| key | description |
|---|---|
| Name | perspective-baseline |
| Value | none|<length> |
| Initial | none |
| Applies to | transformable elements |
| Inherited | no |
| Percentages | N/A |
| Media | visual |
| Computed value | Absolute length or "none" |
If the value is 'none',
no stereo rendering is applied. Length must be positive.
perspective-baseline' may internally affect the 'perspective matrix' computed by 'perspective' and 'perspective-origin', as described in [[!CSS3-3D-TRANSFORMS]].
The 'perspective-baseline' should be applied to render stereo views and details are implementation dependent.
perspective-baseline: 140px;
This section introduces stereo properties that specify formats of stereo 3D content.
stereo-content' property
The 'stereo-content' property specifies whether an image (or a video) styled by this property is stereo 3D content.
| key | description |
|---|---|
| Name | stereo-content |
| Value | stereo | none |
| Initial | none |
| Applies to | img and video elements |
| Inherited | no |
| Percentages | N/A |
| Media | visual |
| Computed value | 'stereo' or 'none' |
// The image (or video) styled by below is stereo 3D content.stereo-content: "stereo"; // The image (or video) styled by below is not stereo 3D content.stereo-content: "none";
When the value of 'stereo-content' property is 'none', other stereo properties should be ignored.
stereo-render-option' property
The 'stereo-render-option' property specifies how to render the given content.
As stereo 3D content consists of two views, authors need to specify how to render it.
The default value of this property is "stereo" and this property is valid only when the "stereo-content" property is set to "stereo".
| key | description |
|---|---|
| Name | stereo-render-option |
| Value | stereo | right | left |
| Initial | stereo |
| Applies to | img and video elements |
| Inherited | no |
| Percentages | N/A |
| Media | visual |
| Computed value | 'stereo', 'right', 'left' or 'center' |
// Should be rendered in stereo 3D.stereo-render-option: "stereo"; // Should use only the left view of given 3D content.stereo-render-option: "left";
When the value is 'left', only left view of 3D content is rendered.
stereo-size-type' property
The "stereo-size-type" property specifies whether each single image or frame of stereo 3D content is compressed horizontally (or vertically, according to the 'stereo-order-type') to half.
| key | description |
|---|---|
| Name | stereo-size-type |
| Value | full | half |
| Initial | full |
| Applies to | img and video elements |
| Inherited | no |
| Percentages | N/A |
| Media | visual |
| Computed value | 'full' or 'half' |
// The 3D content has the full length of the original image.stereo-size-type: "full"; // The 3D content has the half length of the original image.stereo-size-type: "half";
stereo-order-type' property
The "stereo-order-type" property specifies the order of left and right image of 3D content.
The value 'lr' means left image comes first.
| key | description |
|---|---|
| Name | stereo-order-type |
| Value | lr | rl |
| Initial | "lr" |
| Applies to | img and video elements |
| Inherited | no |
| Percentages | N/A |
| Media | visual |
| Computed value | 'lr' or 'rl' |
// The 3D content has the left view on the left.
stereo-order-type: "lr";
stereo-format' property
The "stereo-format" property specifies how stereo pairs of 3D content are arranged.
The pairs can be arranged by side by side (left and right), top and bottom, or interlaced.
| key | description |
|---|---|
| Name | stereo-format |
| Value | top-bottom | side-by-side | interlaced |
| Initial | top-bottom |
| Applies to | img and video elements |
| Inherited | no |
| Percentages | N/A |
| Media | visual |
| Computed value | 'top-bottom', 'side-by-side' or 'interlaced' |
// The 3D content is top-bottom format..
stereo-format: "top-bottom";
stereo' shorthand property
The 'stereo' property is a shorthand property to set 'stereo-content', 'stereo-render-option', 'stereo-size-type', 'stereo-order-type', and 'stereo-format' all at one.
<style>
.stereo1 {
stereo-content: "stereo";
stereo-rendering-option: "stereo";
stereo-size-type: "full";
stereo-order-type: "lr";
stereo-format: "side-by-side";
}
// below is equivalent to the above
.stereo2 {
stereo: "stereo" "stereo" "full" "lr" "side-by-side";
}
</style>
<img class="stereo1" src="1.jps">
<img class="stereo2" src="1.jps">
As not all displays support stereo 3D, it is desirable to have a way to use alternate 2D content. The Reponsive Image Community Group proposes HTML Responsive Images Extension that enables different sources of images based on browser and display characteristices.
Below is an example using source elements to specify different sources of images.
<picture alt="">
<source media="(display-stereo: stereo)" srcset="stereo.jps">
<source media="(display-stereo: none)" srcset="mono.jpg">
<source srcset="default.jpg">
<img src="default.jpg">
</picture>
Below is an example using source elements to specify different sources of videos.
<video controls autoplay>
<source src='stereo.mp4' type='video/mp4; codecs="av1.42E01E, mp4a.40.2"' stereo='stereo'>
<source src='mono.mp4' type='video/mp4; codecs="av1.42E01E, mp4a.40.2"'>
...
</video>
Below is an example using srcset attribute to specify different sources of images.
<img src="mono.jpg"
srcset="stereo.jpg stereo">
This section introduces a new media type '3d-display' into Media Query. Authors can develop responsive web pages for users with 3D displays by using media queries that enables different style sheets for different media types.
@media 3d-display {
body {
background-image: url('bg.jps');
background-stereo: "stereo"; // new property needed?
}
}
This section introduces a device API to check whether the display is stereo-3D capable and whether it is in the 3D mode. An API to set the 3D display into the 3D mode is also defined.
As stereo rendering requires a 3D display, web browsers need to know whether a 3D display is available and whether its 3D mode is enabled. Based on the information, web pages consisting of 3D objects could be rendered in stereo 3D. In some cases, web browsers may want to change the 3D mode with user permission to enable the 3D capability of the display.
Authors may want 3D Graphics embedded on the Web, such as WebGL, 3D SVG, etc., to be rendered in Stereo 3D. Since the perspective of the 3D Graphics and that of the web page including it may be different, it is desirable to have a method to align them.