change_size.html (5241B)
1 <!DOCTYPE html> 2 <meta charset='UTF-8'> 3 <!-- Viewport size change in WebGL and submit it to the VR device as a base64 image. 4 If this fails, something is seriously wrong. --> 5 <html class="reftest-wait"> 6 <head> 7 <script type='text/javascript' src='webgl-util.js'></script> 8 <script type='text/javascript' src="VRSimulationDriver.js"></script> 9 <script id="vs" type="x-shader/x-vertex"> 10 attribute vec2 aVertCoord; 11 12 void main(void) { 13 gl_Position = vec4(aVertCoord, 0.0, 1.0); 14 } 15 </script> 16 <script id="fs" type="x-shader/x-fragment"> 17 precision mediump float; 18 19 void main(void) { 20 gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 21 } 22 </script> 23 <script type='text/javascript'> 24 'use strict'; 25 26 var submitResult = null; 27 var vrDisplay = null; 28 var webglCanvas = null; 29 var gl = null; 30 var prog = null; 31 var img = null; 32 // The resolution is 540 : 300 (the ratio of 2160 * 1200, like Vive and Oculus) 33 const eyeWidth = 270; 34 const eyeHeight = 300; 35 36 function setStatus(text) { 37 var elem = document.getElementById('status'); 38 elem.innerHTML = text; 39 } 40 41 function initVRMock() { 42 VRServiceTest = navigator.requestVRServiceTest(); 43 if (!VRServiceTest) { 44 setStatus('VRServiceTest get failed.'); 45 return; 46 } 47 48 VRSimulationDriver.AttachWebVRDisplay().then(() => { 49 VRSimulationDriver.SetEyeResolution(eyeWidth, eyeHeight); 50 VRSimulationDriver.UpdateVRDisplay(); 51 }).then(() => { 52 // Looking for VR displays 53 if (navigator.getVRDisplays) { 54 submitResult = new VRSubmitFrameResult(); 55 navigator.getVRDisplays().then(function (displays) { 56 if (displays.length > 0) { 57 window.addEventListener('vrdisplaypresentchange', onVRPresentChange, false); 58 59 vrDisplay = displays[0]; 60 vrDisplay.requestPresent([{ source: webglCanvas }]); 61 vrDisplay.requestAnimationFrame(onAnimationFrame); 62 } 63 }); 64 } 65 }); 66 } 67 68 function onVRPresentChange() { 69 if (vrDisplay && vrDisplay.isPresenting) { 70 const leftEye = vrDisplay.getEyeParameters("left"); 71 const rightEye = vrDisplay.getEyeParameters("right"); 72 73 if (leftEye.renderWidth != rightEye.renderWidth || 74 leftEye.renderWidth != eyeWidth) { 75 setStatus('renderWidth is not equal to eyeWidth.'); 76 } 77 78 if (leftEye.renderHeight != rightEye.renderHeight || 79 leftEye.renderHeight != eyeHeight) { 80 setStatus('renderHeight is not equal to eyeHeight.'); 81 } 82 webglCanvas.width = leftEye.renderWidth * 2; 83 webglCanvas.height = leftEye.renderHeight; 84 } 85 } 86 87 function onAnimationFrame() { 88 if (!vrDisplay.isPresenting) { 89 return; 90 } 91 92 gl.clearColor(0.0, 1.0, 0.0, 1.0); 93 gl.clear(gl.COLOR_BUFFER_BIT); 94 95 // Presenting render a stereo view. 96 gl.viewport(0, 0, webglCanvas.width * 0.5, webglCanvas.height); 97 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 98 99 gl.viewport(webglCanvas.width * 0.5, 0, webglCanvas.width * 0.5, webglCanvas.height); 100 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 101 102 // Indicate VRDisplay we're done rendering. 103 vrDisplay.submitFrame(); 104 if (vrDisplay.getSubmitFrameResult(submitResult)) { 105 if (!img) { 106 img = document.createElement("img"); 107 img.onload = function(){ 108 // img width will not be eyeWidth * 2 (540), it would 109 // be 544. It is because D3D11 CopyResource changes 110 // the destination image size. 111 if ((img.height == eyeHeight)) { 112 webglCanvas.style.display = 'none'; 113 vrDisplay.exitPresent(); 114 setTimeout(testComplete, 0); 115 } 116 }; 117 img.src = submitResult.base64Image; 118 document.body.appendChild(img); 119 } else { 120 img.src = submitResult.base64Image; 121 } 122 } 123 vrDisplay.requestAnimationFrame(onAnimationFrame); 124 } 125 126 function runTest() { 127 webglCanvas = document.getElementById('canvas'); 128 gl = webglCanvas.getContext('webgl'); 129 if (!gl) { 130 setStatus('WebGL context creation failed.'); 131 return; 132 } 133 gl.disable(gl.DEPTH_TEST); 134 prog = WebGLUtil.createProgramByIds(gl, 'vs', 'fs'); 135 if (!prog) { 136 setStatus('Program linking failed.'); 137 return; 138 } 139 prog.aVertCoord = gl.getAttribLocation(prog, "aVertCoord"); 140 141 var vertCoordArr = new Float32Array([ 142 -0.5, -0.5, 143 0.5, -0.5, 144 -0.5, 0.5, 145 0.5, 0.5, 146 ]); 147 var vertCoordBuff = gl.createBuffer(); 148 gl.bindBuffer(gl.ARRAY_BUFFER, vertCoordBuff); 149 gl.bufferData(gl.ARRAY_BUFFER, vertCoordArr, gl.STATIC_DRAW); 150 gl.useProgram(prog); 151 gl.enableVertexAttribArray(prog.aVertCoord); 152 gl.vertexAttribPointer(prog.aVertCoord, 2, gl.FLOAT, false, 0, 0); 153 154 initVRMock(); 155 } 156 157 function testComplete() { 158 document.documentElement.removeAttribute("class"); 159 } 160 </script> 161 </head> 162 163 <body onload='runTest();'> 164 <canvas id='canvas' width='128' height='128'></canvas> 165 <div id='status'></div> 166 </body> 167 168 </html>