all there require files are given. ple ans me in 30 min if possible. please. you will get best rating for sure. please help with this question.

1/4 100% + 0 1. Basics of WebGL Program Structure (28 marks) [Refer to the WebGL program given in the Appendix and the following diagram to answer the following questions.] URI Browser Web Server Web Page HTML JS files JS Engine H CPU/GPU Tramebuffer Canvas a) (1 mark) The files "cube.html" and "cube.js" are a sample WebGL application program. Where are these files stored? b) (2 marks) Which part(s) of code will be running in CPU? Which part(s) of code will be running in GPU? c) (2 marks) What content does the section (lines 34 - 44) of the html file create? d) (1 mark) What does the code segment from lines 2 - 21 specity? e) (1 mark) What does the code segment from lines 22 - 29 specify? A) (1 mark) Which function in Java scripts is executed first after the html file is loaded into a web browser? g) (2 marks) Describe how the two shader programs are loaded into GPU? h) (1 mark) Which function(s) are responsible for creation of the model data of the cube? 1) (2 marks) What are the lengths of the model data, i.e points and colors 1. after they are created? 1) (3 marks) Write the numerical values in the first three locations of the points array k) (3 marks) How is the vertex data (i.e. the points array) transmitted from CPU to GPU? 1) (3 marks) If the "Rotate y" button is clicked from the web browser, which variable's value will be changed? What is the new value of this variable? m) (3 marks) How will the change made in the step (1) affect shader program running on GPU? n) (1 mark) What does the line 126 do? 0) (1 mark) If you would want to change the width and the height of the display to 1024 1024 rocnertively modifiche cade in the DACA Clinald b) (2 marks) which part(s) of code will be running in CPU? Which pari(s) of code will be running in GPU? c) (2 marks) What content does the section (lines 34 - 44) of the html file create? d) (1 mark) What does the code segment from lines 2-21 specify? e) (1 mark) What does the code segment from lines 22 - 29 specify? f) (1 mark) Which function in Java scripts is executed first after the html file is loaded into a web browser? g) (2 marks) Describe how the two shader programs are loaded into GPU? h) (1 mark) Which function(s) are responsible for creation of the model data of the cube? i) (2 marks) What are the lengths of the model data, i.e. points[] and colors[], after they are created? ) (3 marks) Write the numerical values in the first three locations of the points[] array. k) (3 marks) How is the vertex data (i.e. the points array) transmitted from CPU to GPU? 1) (3 marks) If the "Rotate y" button is clicked from the web browser, which variable's value will be changed? What is the new value of this variable? m) (3 marks) How will the change made in the step (1) affect shader program running on GPU? n) (1 mark) What does the line 126 do? o) (1 mark) If you would want to change the width and the height of the display to 1024 and 1024 respectively, modify the code in the necessary line(s). p) (1 mark) Explain the computation in lines 12 and 13. Appendix cube.html 1. 4. 5. 6. 22. 30. 31. 32 33 35 36. 37. button id-Button">Rotate 2 38. 39.
40. 41. 42. Oops ... your browser doesn't support the HTML5 canvas element 43. 44. 45. cube.js 46. 47 48 50. 51 52 var canvas; var gli var NumVertices 36: var points var colors - 01: var xAxis = 0; var yaxis = 1; var ZAxis - 2; var axis - 2 var theta - [0, 0, 0; var thetaloc 53 54. 55 56 57. window.onload = function init() 58 59. canvas - document.getElementById( "ol-canvas" ); 60 59. canvas document.getElementById( "gl-canvas" ); 60. 61. gl WebGLUtils.setupWebGL ( canvas); if (!gl ) ( alert( "WebGL isn't available" ); colorCube (); 62. 63. 64. gl.viewport ( 0, 0, canvas.width, canvas.height); gi.clearColor ( 1.0, 1.0, 1.0, 1.0); 65. gl.enable (gl.DEPTH_TEST); 66. 67. W 77 Load shaders and initialize attrIbute buffers 68. 69 70. var program - initshaders ( 91, "vertex-shader","fragment-shader" ); g.use Program program); 71. 72. 73. var Butter - gl.createBuffer) gl.bindBuffer( gl.ARRAY BUFFER, CBuffer ); gl.bufferData( 91. ARRAY_BUFFER, flatten (colors), gl.STATIC_DRAW ); var vColor - gl.getAttriblocation program, "vColor" ); gl.vertexattribPointer( vColor, 4, g1.FLOAT, false, 0, 0); gl.enableVertexAttribarray( vcolor) 75. 76 77. 78 var vBuffer - gl.createBuffer(); gl.bindBuffer gl.ARRAY_BUFFER, VBuffer): 79. gl.bufferData( g1. ARRAY_BUFFER, Elatten (points), gl.STATIC_DRAW ); 80. 81. 82. var v Position = gl.getAttribLocation program, "position" ); gl.vertexAttribPointer Position, 3, g1.FLOAT, false, 0, 0); gl.enableVertexAttribArray ( v Position); thetaloc - gl.getUniformLocation (program, "theta"); 83. 84. //event listeners for buttons 85. 86. 87. document.getElementById("xButton").onclick-function () { axis Axis 88. 89 90. 91. 92 document.getElementById("Button").onclick - function() axis - yaxis ) document.getElementById("button").onclick - function() axis - Axis 93 render() 94. 95. 1 96. function colorCube) 98 99. 100 quad 10.3.2) quad 2, 3, 7, 6) 98. 99. 100. 101. 102. 103. 104. ) quad ( 1, 0, 3, 2); quad ( 2, 3, 7, 6); quad( 3, 0, 4, 7); quad ( 6, 5, 1, 2); quad ( 4, 5, 6, 7); quad( 5, 4, 0, 1); 105. function quad (a, b, c, d) 106. 107. var vertices - vec3( -0.5, -0.5, 0.5 vec3(-0.5, 0.5, 0.5), vec31 0.5, 0.5) 0.5), vec3(0.5, -0.5, 0.5), vec3(-0.5, -0.5, -0.5); vec3(-0.5, 0.5, -0.5), vec3c0.5, 0.5, -0.5), vee3 0.5, -0.5, -0.5) 108 109 var vertexColors - (0.0, 0.0, 0.0, 1.0), 17 black [ 1.0, 0.0, 0.0, 1.0). // red 1.0, 1.0, 0.0, 1.0), 1/ yellow 10.0, 1.0, 0.0, 1.0). // green 10.0, 0.0, 1.0, 1.0.1, 77 blue 11.0, 0.0, 1.0, 1.0). // magenta 1 1.0, 1.0, 1.0, 1.0 1. // white 10.0, 1.0, 1.0, 1.01 110. // cyan 111. 112. 113. // We need to parition the quad into two triangles in order for // WebGL to be able to render it. In this case, we create two // triangles from the quad indices 114. V/vertex color assigned by the index of the vertex 115. 116. var indices ta, b, c, a, c, d li for (var i = 0; i