The WebXR API's enumerated type
XREnvironmentBlendMode
defines strings used to identify if and how to blend the rendered virtual content with the real world. Its values are used by the
XRSession
接口的
environmentBlendMode
特性。
opaque
XRSession
's
renderState
property's
baseLayer
field are ignored since the alpha values for the rendered imagery are all treated as being 1.0 (fully opaque).
additive
additive
blending mode is designed to be used in a situation in which the device has no control over the background and its brightness, since that isn't being digitally controlled. All the device can do is add more light to the image; it can't make things get darker. Therefore, black is rendered as fully transparent, and there's no way to make a pixel fully opaque. As with the
opaque
setting, alpha values specified are ignored and treated as if they were 1.0.
alpha-blend
Used by headsets or goggles which use cameras to capture the real world and display it digitally on the screen or screens used to render the content for the user to see, this offers a way to create an AR presentation using a VR device. Alpha blending can also be used by non-wearable devices that provide AR modes, such as phones or tablets using cameras to capture the real world for use in AR apps. Since the real world is being digitally presented, the brightness of each pixel can be controlled, whether it's reality or the rendered XR image, the user's environment can be blended with the virtual environment with each pixel having its color and brightness precisely controlled.
XRSession
's
renderState.baseLayer
property provides relative weights of the artificial layer during the compositing process. Pixels whose alpha value is 1.0 are rendered fully opaque, totally obscuring the real world, while pixels with an alpha of 1.0 are totally transparent, leaving the surrounding environment to pass through.
| 规范 | 状态 | 注释 |
|---|---|---|
|
WebXR Augmented Reality Module
The definition of 'XREnvironmentBlendMode' in that specification. |
编者草案 | 初始定义。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
XREnvironmentBlendMode
|
Chrome 79 | Edge 79 | Firefox No | IE No | Opera No | Safari No | WebView Android 79 | Chrome Android 79 | Firefox Android No | Opera Android No | Safari iOS No | Samsung Internet Android 11.2 |
additive
|
Chrome 79 | Edge 79 | Firefox No | IE No | Opera No | Safari No | WebView Android 79 | Chrome Android 79 | Firefox Android No | Opera Android No | Safari iOS No | Samsung Internet Android 11.2 |
alpha-blend
|
Chrome 79 | Edge 79 | Firefox No | IE No | Opera No | Safari No | WebView Android 79 | Chrome Android 79 | Firefox Android No | Opera Android No | Safari iOS No | Samsung Internet Android 11.2 |
opaque
|
Chrome 79 | Edge 79 | Firefox No | IE No | Opera No | Safari No | WebView Android 79 | Chrome Android 79 | Firefox Android No | Opera Android No | Safari iOS No | Samsung Internet Android 11.2 |
完整支持
不支持
实验。期望将来行为有所改变。
XREnvironmentBlendMode
Navigator.xr
WebGLRenderingContext.makeXRCompatible()
XR
XRBoundedReferenceSpace
XRFrame
XRInputSource
XRInputSourceArray
XRInputSourceEvent
XRInputSourcesChangeEvent
XRPose
XRReferenceSpace
XRReferenceSpaceEvent
XRRenderState
XRRigidTransform
XRSession
XRSessionEvent
XRSpace
XRView
XRViewerPose
XRViewport
XRWebGLLayer