draw_rect.html (3940B)
1 <!DOCTYPE html> 2 <meta charset='UTF-8'> 3 <!-- Draw rect 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 33 function setStatus(text) { 34 var elem = document.getElementById('status'); 35 elem.innerHTML = text; 36 } 37 38 function initVRMock() { 39 VRServiceTest = navigator.requestVRServiceTest(); 40 if (!VRServiceTest) { 41 setStatus('VRServiceTest get failed.'); 42 return; 43 } 44 45 VRSimulationDriver.AttachWebVRDisplay().then(() => { 46 // Looking for VR displays 47 if (navigator.getVRDisplays) { 48 submitResult = new VRSubmitFrameResult(); 49 navigator.getVRDisplays().then(function (displays) { 50 if (displays.length > 0) { 51 vrDisplay = displays[0]; 52 vrDisplay.requestPresent([{ source: webglCanvas }]); 53 vrDisplay.requestAnimationFrame(onAnimationFrame); 54 } 55 }); 56 } 57 }); 58 } 59 60 function onAnimationFrame() { 61 if (!vrDisplay.isPresenting) { 62 return; 63 } 64 65 gl.clearColor(0.0, 1.0, 0.0, 1.0); 66 gl.clear(gl.COLOR_BUFFER_BIT); 67 68 // Presenting render a stereo view. 69 gl.viewport(0, 0, webglCanvas.width * 0.5, webglCanvas.height); 70 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 71 72 gl.viewport(webglCanvas.width * 0.5, 0, webglCanvas.width * 0.5, webglCanvas.height); 73 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 74 75 // Indicate VRDisplay we're done rendering. 76 vrDisplay.submitFrame(); 77 if (vrDisplay.getSubmitFrameResult(submitResult)) { 78 if (!img) { 79 img = document.createElement("img"); 80 img.onload = function(){ 81 webglCanvas.style.display = 'none'; 82 vrDisplay.exitPresent(); 83 setTimeout(testComplete, 0); 84 }; 85 img.src = submitResult.base64Image; 86 document.body.appendChild(img); 87 } else { 88 img.src = submitResult.base64Image; 89 } 90 } 91 vrDisplay.requestAnimationFrame(onAnimationFrame); 92 } 93 94 function runTest() { 95 webglCanvas = document.getElementById('canvas'); 96 gl = webglCanvas.getContext('webgl'); 97 if (!gl) { 98 setStatus('WebGL context creation failed.'); 99 return; 100 } 101 gl.disable(gl.DEPTH_TEST); 102 prog = WebGLUtil.createProgramByIds(gl, 'vs', 'fs'); 103 if (!prog) { 104 setStatus('Program linking failed.'); 105 return; 106 } 107 prog.aVertCoord = gl.getAttribLocation(prog, "aVertCoord"); 108 109 var vertCoordArr = new Float32Array([ 110 -0.5, -0.5, 111 0.5, -0.5, 112 -0.5, 0.5, 113 0.5, 0.5, 114 ]); 115 var vertCoordBuff = gl.createBuffer(); 116 gl.bindBuffer(gl.ARRAY_BUFFER, vertCoordBuff); 117 gl.bufferData(gl.ARRAY_BUFFER, vertCoordArr, gl.STATIC_DRAW); 118 gl.useProgram(prog); 119 gl.enableVertexAttribArray(prog.aVertCoord); 120 gl.vertexAttribPointer(prog.aVertCoord, 2, gl.FLOAT, false, 0, 0); 121 122 initVRMock(); 123 } 124 125 function testComplete() { 126 document.documentElement.removeAttribute("class"); 127 } 128 </script> 129 </head> 130 131 <body onload='runTest();'> 132 <canvas id='canvas' width='256' height='256'></canvas> 133 <div id='status'></div> 134 </body> 135 136 </html>