VRFrameData
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Интерфейс VRFrameData API WebVR представляет всю информацию, необходимую для визуализации одного кадра сцены Виртуальной реальности; сконструирован с помощью VRDisplay.getFrameData ()
.
Конструктор
VRFrameData.VRFrameData()
(en-US)-
Создаёт экземпляр объекта VRFrameData.
Свойства
VRFrameData.leftProjectionMatrix
(en-US) Только для чтения-
Параметр
Float32Array
(en-US), представляющий матрицу 4x4, которая описывает проекцию, которая будет использоваться для рендеринга левого глаза. VRFrameData.leftViewMatrix
(en-US) Только для чтения-
Параметр
Float32Array
(en-US), представляющий матрицу 4x4, которая описывает преобразование вида, которое будет использоваться для визуализации для левого глаза. VRFrameData.pose
(en-US) Только для чтения-
Параметр
VRPose
VRDisplay
в текущемVRFrameData.timestamp
(en-US). VRFrameData.rightProjectionMatrix
(en-US) Только для чтения-
Параметр
Float32Array
(en-US), представляющий матрицу 4x4, которая описывает проекцию, которая будет использоваться для рендеринга для правого глаза. VRFrameData.rightViewMatrix
(en-US) Только для чтения-
Float32Array
(en-US), представляющий матрицу 4x4, которая описывает преобразование вида, которое будет использоваться для визуализации для правого глаза. VRFrameData.timestamp
(en-US) Только для чтения-
Постоянно увеличивающееся значение отметки времени, представляющее время, когда произошло обновление кадра.
Примеры
const frameData = new VRFrameData();
let vrDisplay;
navigator.getVRDisplays().then((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", () => {
vrDisplay.requestPresent([{ source: canvas }]).then(() => {
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
const curFramePose = frameData.pose;
const curPos = curFramePose.position;
const 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
const projectionMatrixLocation = gl.getUniformLocation(
shaderProgram,
"projMatrix"
);
const 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();
}
Note: You can see this complete code at raw-webgl-example.
Спецификации
No specification found
No specification data found for api.VRFrameData
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Совместимость браузера
BCD tables only load in the browser
Дополнительно
- WebVR API homepage
- MozVr.com — демонстрационные материалы, материалы доступные для загрузки и другие ресурсы команды Mozilla VR team.