这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
VRFrameData
接口在
WebVR API
represents all the information needed to render a single frame of a VR scene; constructed by
VRDisplay.getFrameData()
.
VRFrameData.VRFrameData()
VRFrameData
对象实例。
VRFrameData.leftProjectionMatrix
只读
Float32Array
representing a 4x4 matrix that describes the projection to be used for the left eye’s rendering.
VRFrameData.leftViewMatrix
只读
Float32Array
representing a 4x4 matrix that describes the view transform to be used for the left eye’s rendering.
VRFrameData.pose
只读
VRPose
的
VRDisplay
在当前
VRFrameData.timestamp
.
VRFrameData.rightProjectionMatrix
只读
Float32Array
representing a 4x4 matrix that describes the projection to be used for the right eye’s rendering.
VRFrameData.rightViewMatrix
只读
Float32Array
representing a 4x4 matrix that describes the view transform to be used for the right eye’s rendering.
VRFrameData.timestamp
只读
A constantly increasing timestamp value representing the time a frame update occurred.
var frameData = new VRFrameData();
var vrDisplay;
navigator.getVRDisplays().then(function(displays) {
vrDisplay = displays[0];
console.log('Display found');
// Starting the presentation when the button is clicked: It can only be called in response to a user gesture
btn.addEventListener('click', function() {
vrDisplay.requestPresent([{ source: canvas }]).then(function() {
drawVRScene();
});
});
});
// WebVR: Draw the scene for the WebVR display.
function drawVRScene() {
// WebVR: Request the next frame of the animation
vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
// Populate frameData with the data of the next frame to display
vrDisplay.getFrameData(frameData);
// You can get the position, orientation, etc. of the display from the current frame's pose
// curFramePose is a VRPose object
var curFramePose = frameData.pose;
var curPos = curFramePose.position;
var curOrient = curFramePose.orientation;
// Clear the canvas before we start drawing on it.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// WebVR: Create the required projection and view matrix locations needed
// for passing into the uniformMatrix4fv methods below
var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
// WebVR: Render the left eye’s view to the left half of the canvas
gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
drawGeometry();
// WebVR: Render the right eye’s view to the right half of the canvas
gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
drawGeometry();
function drawGeometry() {
// draw the view for each eye
}
...
// WebVR: Indicate that we are ready to present the rendered frame to the VR display
vrDisplay.submitFrame();
}
注意 : You can see this complete code at raw-webgl-example .
| 规范 | 状态 | 注释 |
|---|---|---|
|
WebVR 1.1
The definition of 'VRDisplayEvent' in that specification. |
草案 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
VRFrameData
弃用
|
Chrome No | Edge ≤18 — 79 |
Firefox
55
|
IE No | Opera ? | Safari No | WebView Android No |
Chrome Android
56 — 80
Disabled
|
Firefox Android 55 | Opera Android ? | Safari iOS ? |
Samsung Internet Android
6.0
|
VRFrameData()
构造函数
弃用
|
Chrome No | Edge ≤18 — 79 |
Firefox
55
|
IE No | Opera ? | Safari No | WebView Android No |
Chrome Android
56 — 80
Disabled
|
Firefox Android 55 | Opera Android ? | Safari iOS ? |
Samsung Internet Android
6.0
|
leftProjectionMatrix
弃用
|
Chrome No | Edge 15 — 79 |
Firefox
55
|
IE No | Opera ? | Safari No | WebView Android No |
Chrome Android
56 — 80
Disabled
|
Firefox Android 55 | Opera Android ? | Safari iOS ? |
Samsung Internet Android
6.0
|
leftViewMatrix
弃用
|
Chrome No | Edge 15 — 79 |
Firefox
55
|
IE No | Opera ? | Safari No | WebView Android No |
Chrome Android
56 — 80
Disabled
|
Firefox Android 55 | Opera Android ? | Safari iOS ? |
Samsung Internet Android
6.0
|
pose
弃用
|
Chrome No | Edge 15 — 79 |
Firefox
55
|
IE No | Opera ? | Safari No | WebView Android No |
Chrome Android
56 — 80
Disabled
|
Firefox Android 55 | Opera Android ? | Safari iOS ? |
Samsung Internet Android
6.0
|
rightProjectionMatrix
弃用
|
Chrome No | Edge 15 — 79 |
Firefox
55
|
IE No | Opera ? | Safari No | WebView Android No |
Chrome Android
56 — 80
Disabled
|
Firefox Android 55 | Opera Android ? | Safari iOS ? |
Samsung Internet Android
6.0
|
rightViewMatrix
弃用
|
Chrome No | Edge 15 — 79 |
Firefox
55
|
IE No | Opera ? | Safari No | WebView Android No |
Chrome Android
56 — 80
Disabled
|
Firefox Android 55 | Opera Android ? | Safari iOS ? |
Samsung Internet Android
6.0
|
timestamp
弃用
|
Chrome No | Edge 15 — 79 |
Firefox
55
|
IE No | Opera ? | Safari No | WebView Android No |
Chrome Android
56 — 80
Disabled
|
Firefox Android 55 | Opera Android ? | Safari iOS ? |
Samsung Internet Android
6.0
|
完整支持
不支持
兼容性未知
实验。期望将来行为有所改变。
弃用。不要用于新网站。
见实现注意事项。
用户必须明确启用此特征。