From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/vrdisplay/index.html | 129 +++++++++++++++++++++ .../api/vrdisplay/requestanimationframe/index.html | 122 +++++++++++++++++++ .../ru/web/api/vrdisplay/requestpresent/index.html | 112 ++++++++++++++++++ 3 files changed, 363 insertions(+) create mode 100644 files/ru/web/api/vrdisplay/index.html create mode 100644 files/ru/web/api/vrdisplay/requestanimationframe/index.html create mode 100644 files/ru/web/api/vrdisplay/requestpresent/index.html (limited to 'files/ru/web/api/vrdisplay') diff --git a/files/ru/web/api/vrdisplay/index.html b/files/ru/web/api/vrdisplay/index.html new file mode 100644 index 0000000000..9bec0eb481 --- /dev/null +++ b/files/ru/web/api/vrdisplay/index.html @@ -0,0 +1,129 @@ +--- +title: VRDisplay +slug: Web/API/VRDisplay +tags: + - API + - DOM + - Experimental + - Interface + - Media + - NeedsTranslation + - Reference + - TopicStub + - VR + - VRDisplay + - Virtual Reality + - WebVR +translation_of: Web/API/VRDisplay +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

The VRDisplay interface of the WebVR API represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.

+ +

An array of all connected VR Devices can be returned by invoking the {{domxref("Navigator.getVRDisplays()")}} method.

+ +

Properties

+ +
+
{{domxref("VRDisplay.capabilities")}} {{readonlyInline}}
+
Returns a {{domxref("VRDisplayCapabilities")}} object that indicates the various capabilities of the VRDisplay.
+
{{domxref("VRDisplay.depthFar")}}
+
Gets and sets the z-depth defining the far plane of the eye view frustum, i.e. the furthest viewable boundary of the scene.
+
{{domxref("VRDisplay.depthNear")}}
+
Gets and sets the z-depth defining the near plane of the eye view frustum, i.e. the nearest viewable boundary of the scene.
+
{{domxref("VRDisplay.displayId")}} {{readonlyInline}}
+
Returns an identifier for this particular VRDisplay, which is also used as an association point in the Gamepad API (see {{domxref("Gamepad.displayId")}}).
+
{{domxref("VRDisplay.displayName")}} {{readonlyInline}}
+
Returns a human-readable name to identify the VRDisplay.
+
{{domxref("VRDisplay.isConnected")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the VRDisplay is connected to the computer.
+
{{domxref("VRDisplay.isPresenting")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the VRDisplay is currently having content presented through it.
+
{{domxref("VRDisplay.stageParameters")}} {{readonlyInline}}
+
Returns a {{domxref("VRStageParameters")}} object containing room-scale parameters, if the VRDisplay is capable of supporting room-scale experiences.
+
+ +

Methods

+ +
+
{{domxref("VRDisplay.getEyeParameters()")}}
+
Returns the {{domxref("VREyeParameters")}} object containing the eye parameters for the specified eye.
+
{{domxref("VRDisplay.getFrameData()")}}
+
Accepts a {{domxref("VRFrameData")}} object and populates it with the information required to render the current frame.
+
{{domxref("VRDisplay.getLayers()")}}
+
Returns the layers currently being presented by the VRDisplay.
+
{{domxref("VRDisplay.resetPose()")}}
+
Resets the pose for this VRDisplay, treating its current {{domxref("VRPose.position")}} and {{domxref("VRPose.orientation")}} as the "origin/zero" values.
+
{{domxref("VRDisplay.cancelAnimationFrame()")}}
+
A special implementation of {{domxref("Window.cancelAnimationFrame")}} that allows callbacks registered with {{domxref("VRDisplay.requestAnimationFrame()")}} to be unregistered.
+
{{domxref("VRDisplay.requestAnimationFrame()")}}
+
A special implementation of {{domxref("Window.requestAnimationFrame")}} containing a callback function that will be called every time a new frame of the VRDisplay presentation is rendered.
+
{{domxref("VRDisplay.requestPresent()")}}
+
Starts the VRDisplay presenting a scene.
+
{{domxref("VRDisplay.exitPresent()")}}
+
Stops the VRDisplay presenting a scene.
+
{{domxref("VRDisplay.submitFrame()")}}
+
Captures the current state of the {{domxref("VRLayer")}} currently being presented and displays it on the VRDisplay.
+
+ +

Deprecated methods

+ +
+
{{domxref("VRDisplay.getPose()")}} {{deprecated_inline}}
+
Returns a {{domxref("VRPose")}} object defining the future predicted pose of the VRDisplay as it will be when the current frame is actually presented. This method is deprecated — instead, you should use {{domxref("VRDisplay.getFrameData()")}}, which also provides a {{domxref("VRPose")}} object.
+
+ +

Obsolete methods

+ +
+
{{domxref("VRDisplay.getImmediatePose()")}} {{obsolete_inline}}
+
Returns a {{domxref("VRPose")}} object defining the current pose of the VRDisplay, with no prediction applied. This is no longer needed, and has been removed from the spec.
+
{{domxref("VRDisplay.hardwareUnitId")}} {{obsolete_inline}}
+
Returns a {{domxref("DOMString")}} defining the shared ID of the display, and any other devices that are part of that hardware set (e.g. controllers). This is no longer needed, and has been removed from the spec. Displays now use {{domxref("VRDisplay.displayId")}}, and corresponsing controllers will now return the same ID under {{domxref("Gamepad.displayId")}}.
+
+ +

Examples

+ +
if(navigator.getVRDisplays) {
+  console.log('WebVR 1.1 supported');
+  // Then get the displays attached to the computer
+  navigator.getVRDisplays().then(function(displays) {
+    // If a display is available, use it to present the scene
+    if(displays.length > 0) {
+      vrDisplay = displays[0];
+      // Now we have our VRDisplay object and can do what we want with it
+    }
+  });
+}
+ +
+

Note: You can see this complete code at raw-webgl-example.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#interface-vrdisplay', 'VRDisplay')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRDisplay")}}

+ +

See also

+ + diff --git a/files/ru/web/api/vrdisplay/requestanimationframe/index.html b/files/ru/web/api/vrdisplay/requestanimationframe/index.html new file mode 100644 index 0000000000..51d83bcea3 --- /dev/null +++ b/files/ru/web/api/vrdisplay/requestanimationframe/index.html @@ -0,0 +1,122 @@ +--- +title: VRDisplay.requestAnimationFrame() +slug: Web/API/VRDisplay/requestAnimationFrame +translation_of: Web/API/VRDisplay/requestAnimationFrame +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

Метод requestAnimationFrame() интерфейса {{domxref("VRDisplay")}} является специфичной реализацией метода {{domxref("Window.requestAnimationFrame")}} и принимает в качестве аргумента функцию обратного вызова (callback-функция). Эта функция будет вызвана, когда объект типа VRDisplay будет готов отобразить новый кадр сцены:

+ + + +

Синтаксис

+ +
var handle = vrDisplayInstance.requestAnimationFrame(callback);
+
+ +

Параметры

+ +
+
callback
+
callback-функция, которая будет вызвана когда объект типа VRDisplay будет готов отобразить новый кадр сцены.
+
+ +

Возвращаемое значение

+ +

A long representing the handle of the requestAnimationFrame() call. This can then be passed to a {{domxref("VRDisplay.cancelAnimationFrame()")}} call to unregister the callback.

+ +

Examples

+ +
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
+  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();
+}
+ +
+

Note: You can see this complete code at raw-webgl-example.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#dom-vrdisplay-requestanimationframe', 'requestAnimationFrame()')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRDisplay.requestAnimationFrame")}}

+ +

See also

+ + diff --git a/files/ru/web/api/vrdisplay/requestpresent/index.html b/files/ru/web/api/vrdisplay/requestpresent/index.html new file mode 100644 index 0000000000..9537b94035 --- /dev/null +++ b/files/ru/web/api/vrdisplay/requestpresent/index.html @@ -0,0 +1,112 @@ +--- +title: VRDisplay.requestPresent() +slug: Web/API/VRDisplay/requestPresent +translation_of: Web/API/VRDisplay/requestPresent +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

Метод requestPresent() объекта реализующего интерфейс {{domxref("VRDisplay")}} отвечает за начало отображения сцены на VR устройстве, которое представлено этим объектом.

+ +

Синтаксис

+ +
vrDisplayInstance.requestPresent(layers).then(function() {
+  //Действия после начала отображения сцены
+});
+
+ +

Параметры

+ +
+
layers
+
Массив объектов типа {{domxref("VRLayerInit")}}, представляющих собой сцену, которую Вы хотите отобразить. На данный момент может быть минимум 0 элементов, максимум - 1.
+
+ +

Возвращаемое значение

+ +

Объект типа Promise, переходящий в состояние "выполнено" в момент начала отображения сцены. Существует ряд правил, касающийся перехода Promise в состояние "выполнено" и в состояние "отклонено":

+ +
+ +
+ +

Examples

+ +
if(navigator.getVRDisplays) {
+  console.log('WebVR 1.1 supported');
+  // Then get the displays attached to the computer
+  navigator.getVRDisplays().then(function(displays) {
+    // If a display is available, use it to present the scene
+    if(displays.length > 0) {
+      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() {
+        if(btn.textContent === 'Start VR display') {
+          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+            console.log('Presenting to WebVR display');
+
+            // Set the canvas size to the size of the vrDisplay viewport
+
+            var leftEye = vrDisplay.getEyeParameters('left');
+            var rightEye = vrDisplay.getEyeParameters('right');
+
+            canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+            canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
+
+            // stop the normal presentation, and start the vr presentation
+            window.cancelAnimationFrame(normalSceneFrame);
+            drawVRScene();
+
+            btn.textContent = 'Exit VR display';
+          });
+        } else {
+          vrDisplay.exitPresent();
+          console.log('Stopped presenting to WebVR display');
+
+          btn.textContent = 'Start VR display';
+
+          // Stop the VR presentation, and start the normal presentation
+          vrDisplay.cancelAnimationFrame(vrSceneFrame);
+          drawScene();
+        }
+      });
+    }
+  });
+}
+ +
+

Note: You can see this complete code at raw-webgl-example.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#dom-vrdisplay-requestpresent', 'requestPresent()')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.VRDisplay.requestPresent")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf