在此页

• 句法
• 规范
• 浏览器兼容性
• 相关话题

XRSession 接口的 只读 environmentBlendMode property identifies if—and to  what degree—the computer-generated imagery is overlaid atop the real world. This is used to differentiate between fully-immersive VR sessions and AR sessions which render over a pass-through image of the real world, possibly partially transparently.

The value is a DOMString which contains one of the values defined by the XREnvironmentBlendMode enumerated type.

重要： environmentBlendMode 属于 WebXR Augmented Reality Module , which has not yet reached a stable state. You should use caution when using its features.

句法

blendMode = xrSession.environmentBlendMode;
					

值

A DOMString whose value is one of the strings found in the enumerated type XREnvironmentBlendMode , defining if—and if so, how—virtual, rendered content is overlaid atop the image of the real world.

Permitted values are:

opaque

The rendered image is drawn without allowing any pass-through imagery. This is primarily used by fully-immersive VR headsets, which totally obscure the surrounding environment, with none of the real world shown to the user at all. The alpha values specified in the 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

Primarily used by AR devices with transparent lenses which directly allow reality to pass through to the user's eyes, the 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.

In this mode, the 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 'XRSession.environmentBlendMode' in that specification.	工作草案	初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
environmentBlendMode	Chrome 79	Edge 79	Firefox 不支持 No	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 79	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 11.2

图例

完整支持

完整支持

不支持

不支持

元数据

• 最后修改： Oct 14, 2019

相关话题

1. WebXR 设备 API
2. XRSession
3. 特性

   1. environmentBlendMode
   2. inputSources
   3. renderState
   4. visibilityState
4. 方法

   1. cancelAnimationFrame()
   2. end()
   3. requestAnimationFrame()
   4. requestReferenceSpace()
   5. updateRenderState()
5. 事件

   1. selectend
   2. selectstart
   3. squeeze
   4. squeezeend
   5. squeezestart
6. 继承：

   1. EventTarget
7. Related pages for WebXR Device API

   1. Navigator.xr
   2. WebGLRenderingContext.makeXRCompatible()
   3. XR
   4. XRBoundedReferenceSpace
   5. XRFrame
   6. XRInputSource
   7. XRInputSourceArray
   8. XRInputSourceEvent
   9. XRInputSourcesChangeEvent
   10. XRPose
   11. XRReferenceSpace
   12. XRReferenceSpaceEvent
   13. XRRenderState
   14. XRRigidTransform
   15. XRSessionEvent
   16. XRSpace
   17. XRView
   18. XRViewerPose
   19. XRViewport
   20. XRWebGLLayer