API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 23rd, 2018
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.12 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>WebGL Application</title>
  4. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  5.  
  6. <script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
  7. <script type="text/javascript" src="webgl-utils.js"></script>
  8.  
  9. <script id="shader-vs" type="x-shader/x-vertex">
  10. attribute vec3 aVertexPosition;
  11. //attribute vec4 aVertexColor;
  12. //attribute vec2 aTextCoords;
  13.  
  14. uniform mat4 uVMatrix;
  15. uniform mat4 uSMatrix;
  16. uniform mat4 uPMatrix;
  17.  
  18. varying vec4 curr_color;
  19. varying vec2 curr_textcoord;
  20.  
  21. void main(void) {
  22. gl_Position = uPMatrix * uVMatrix * uSMatrix * vec4(aVertexPosition, 1.0);
  23. //curr_color = aVertexColor;
  24. //curr_textcoord = aTextCoords;
  25. }
  26. </script>
  27.  
  28. <script id="shader-fs" type="x-shader/x-fragment">
  29. precision mediump float;
  30.  
  31. //uniform sampler2D texture;
  32. //varying vec2 curr_textcoord;
  33.  
  34. void main(void) {
  35. // gl_FragColor = texture2D(texture, curr_textcoord);
  36. gl_FragColor = vec4(0, 1, 0, 1);
  37. }
  38. </script>
  39.  
  40. <script type="text/javascript">
  41.  
  42. //VARIABLES DECARATION
  43.  
  44. var viewMatrix = mat4.create();//Camera
  45. var sceneMatrix = mat4.create();//situa los objetos de la geometria en la escena
  46. var pMatrix = mat4.create();
  47.  
  48. var mouseRotationMatrix = mat4.create();
  49. mat4.identity(mouseRotationMatrix);
  50.  
  51. var currently_pressed_keys = {};
  52.  
  53. var mouse_down_left = false;
  54. var mouse_down_wheel = false;
  55.  
  56. var lastMouseX;
  57. var lastMouseY;
  58.  
  59. var panX = 0;
  60. var panY = 0;
  61.  
  62. var fov = 45;
  63.  
  64. var gl;
  65. function initGL(canvas) {
  66. try {
  67. gl = canvas.getContext("experimental-webgl");
  68. gl.viewportWidth = canvas.width;
  69. gl.viewportHeight = canvas.height;
  70. } catch (e) {
  71. }
  72. if (!gl) {
  73. alert("Could not initialise WebGL, sorry :-(");
  74. }
  75. }
  76.  
  77. function getShader(gl, id) {
  78. var shaderScript = document.getElementById(id);
  79. if (!shaderScript) {
  80. return null;
  81. }
  82.  
  83. var str = "";
  84. var k = shaderScript.firstChild;
  85. while (k) {
  86. if (k.nodeType == 3) {
  87. str += k.textContent;
  88. }
  89. k = k.nextSibling;
  90. }
  91.  
  92. var shader;
  93. if (shaderScript.type == "x-shader/x-fragment") {
  94. shader = gl.createShader(gl.FRAGMENT_SHADER);
  95. } else if (shaderScript.type == "x-shader/x-vertex") {
  96. shader = gl.createShader(gl.VERTEX_SHADER);
  97. } else {
  98. return null;
  99. }
  100.  
  101. gl.shaderSource(shader, str);
  102. gl.compileShader(shader);
  103.  
  104. if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  105. alert(gl.getShaderInfoLog(shader));
  106. return null;
  107. }
  108.  
  109. return shader;
  110. }
  111.  
  112.  
  113. var shaderProgram;
  114.  
  115. function initShaders() {
  116. var fragmentShader = getShader(gl, "shader-fs");
  117. var vertexShader = getShader(gl, "shader-vs");
  118.  
  119. shaderProgram = gl.createProgram();
  120. gl.attachShader(shaderProgram, vertexShader);
  121. gl.attachShader(shaderProgram, fragmentShader);
  122. gl.linkProgram(shaderProgram);
  123.  
  124. if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  125. alert("Could not initialise shaders");
  126. }
  127.  
  128. gl.useProgram(shaderProgram);
  129.  
  130. shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  131. gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
  132.  
  133. shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
  134. gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
  135.  
  136. shaderProgram.vertexTexCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextCoords");
  137. gl.enableVertexAttribArray(shaderProgram.vertexTexCoordAttribute);
  138.  
  139. shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
  140. shaderProgram.vMatrixUniform = gl.getUniformLocation(shaderProgram, "uVMatrix");
  141. shaderProgram.sMatrixUniform = gl.getUniformLocation(shaderProgram, "uSMatrix");
  142. shaderProgram.textureUniform = gl.getUniformLocation(shaderProgram, "texture");
  143. }
  144.  
  145.  
  146.  
  147. function handleMouseDown(event)
  148. {
  149. lastMouseX = event.clientX;
  150. lastMouseY = event.clientY;
  151.  
  152. if(event.button == 0)
  153. {
  154. mouse_down_left = true;
  155. }
  156. else if (event.button == 1)
  157. {
  158. mouse_down_wheel = true;
  159. }
  160. }
  161.  
  162. function deg2Rad(value)
  163. {
  164. value *= (Math.PI / 180);
  165. return value;
  166. }
  167.  
  168. function handleMouseMove(event)
  169. {
  170. var newY = event.clientY;
  171. var newX = event.clientX;
  172.  
  173. var deltaX = newX - lastMouseX;
  174. var deltaY = newY - lastMouseY;
  175.  
  176. if(mouse_down_left)
  177. {
  178. var newRotationMatrix = mat4.create();
  179. mat4.identity(newRotationMatrix);
  180. mat4.rotate(newRotationMatrix, deg2Rad(deltaX / 10), [0, 1, 0]);
  181. mat4.rotate(newRotationMatrix, deg2Rad(deltaY / 10), [1, 0, 0]);
  182. mat4.multiply(newRotationMatrix, mouseRotationMatrix, mouseRotationMatrix);
  183.  
  184. lastMouseX = newX;
  185. lastMouseY = newY;
  186. }
  187. if(mouse_down_wheel)
  188. {
  189. panX = (deltaX) / 100;
  190. panY = (deltaY) / 100;
  191. }
  192. }
  193.  
  194. function handleMouseUp(event)
  195. {
  196. if(mouse_down_left)
  197. mouse_down_left = false;
  198. if(mouse_down_wheel)
  199. mouse_down_wheel = false;
  200. }
  201.  
  202. function handleKeyDown(event)
  203. {
  204. currently_pressed_keys[event.keyCode] = true;
  205. }
  206.  
  207. function handleKeyUp(event)
  208. {
  209. currently_pressed_keys[event.keyCode] = false;
  210. }
  211.  
  212. function sendMatricesToShader() {
  213. gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
  214. gl.uniformMatrix4fv(shaderProgram.vMatrixUniform, false, viewMatrix);
  215. gl.uniformMatrix4fv(shaderProgram.sMatrixUniform,false, sceneMatrix);
  216. }
  217.  
  218. //LOADSCENEONGPU
  219. var squareVertexPositionBuffer;
  220. var squareVertexColorBuffer;
  221.  
  222. var myTexture;
  223.  
  224. function loadTextureOnGPU()
  225. {
  226. myTexture = gl.createTexture();
  227. myTexture.image = new Image();
  228. myTexture.image.onload = function()
  229. {
  230. SetTextureParams(myTexture);
  231. }
  232.  
  233. myTexture.image.src = "marvel.png"
  234. }
  235.  
  236. function SetTextureParams(texture)
  237. {
  238. gl.bindTexture(gl.TEXTURE_2D, texture);
  239. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  240. gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
  241. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  242. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  243. gl.bindTexture(gl.TEXTURE_2D, null);
  244. }
  245.  
  246. function LoadModel()
  247. {
  248. var request = new XMLHttpRequest();
  249. request.open("GET", "Teapot.json");
  250. request.onreadystatechange = function()
  251. {
  252. if(request.readyState == 4){
  253. handleLoadedModel(JSON.parse(request.responseText));
  254. }
  255. }
  256. request.send();
  257. }
  258.  
  259. function loadSceneOnGPU() {
  260.  
  261. cubeVertexPositionBuffer = gl.createBuffer();
  262. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
  263.  
  264. var cube_vertices = [
  265. // Front face
  266. -1.0, -1.0, 1.0,
  267. 1.0, -1.0, 1.0,
  268. 1.0, 1.0, 1.0,
  269. -1.0, 1.0, 1.0,
  270.  
  271. // Back face
  272. -1.0, -1.0, -1.0,
  273. -1.0, 1.0, -1.0,
  274. 1.0, 1.0, -1.0,
  275. 1.0, -1.0, -1.0,
  276.  
  277. // Top face
  278. -1.0, 1.0, -1.0,
  279. -1.0, 1.0, 1.0,
  280. 1.0, 1.0, 1.0,
  281. 1.0, 1.0, -1.0,
  282.  
  283. // Bottom face
  284. -1.0, -1.0, -1.0,
  285. 1.0, -1.0, -1.0,
  286. 1.0, -1.0, 1.0,
  287. -1.0, -1.0, 1.0,
  288.  
  289. // Right face
  290. 1.0, -1.0, -1.0,
  291. 1.0, 1.0, -1.0,
  292. 1.0, 1.0, 1.0,
  293. 1.0, -1.0, 1.0,
  294.  
  295. // Left face
  296. -1.0, -1.0, -1.0,
  297. -1.0, -1.0, 1.0,
  298. -1.0, 1.0, 1.0,
  299. -1.0, 1.0, -1.0,
  300. ];
  301. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cube_vertices), gl.STATIC_DRAW);
  302.  
  303. cubeVertexPositionBuffer.itemSize = 3;
  304. cubeVertexPositionBuffer.numItems = 24;
  305.  
  306. cubeVertexIndexBuffer = gl.createBuffer();
  307. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
  308. var cube_indices = [
  309. 0, 1, 2, 0, 2, 3,
  310. 4, 5, 6, 4, 6, 7,
  311. 8, 9, 10, 8, 10, 11,
  312. 12, 13, 14, 12, 14, 15,
  313. 16, 17, 18, 16, 18, 19,
  314. 20, 21, 22, 20, 22, 23
  315.  
  316. ];
  317. gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cube_indices), gl.STATIC_DRAW);
  318.  
  319. cubeVertexIndexBuffer.itemSize = 1;
  320. cubeVertexIndexBuffer.numItems = 36;
  321.  
  322. squareVertexPositionBuffer = gl.createBuffer();
  323. gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
  324. var vertices = [
  325. 1.0, 1.0, 0.0,
  326. -1.0, 1.0, 0.0,
  327. 1.0,-1.0, 0.0,
  328. - 1.0, -1.0, 0.0
  329.  
  330. ];
  331. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  332. squareVertexPositionBuffer.itemSize = 3;
  333. squareVertexPositionBuffer.numItems = 4;//because we have a square
  334.  
  335. squareVertexColorBuffer = gl.createBuffer();
  336. gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
  337. var colors = [
  338. 1.0, 0.0, 0.0, 1.0,
  339. 1.0, 1.0, 0.0, 1.0,
  340. 1.0, 0.0, 1.0, 1.0,
  341. 1.0,1.0,0.0, 1.0
  342. ];
  343. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
  344. squareVertexColorBuffer.itemSize = 4;
  345. squareVertexColorBuffer.numItems = 4;//because we have a square
  346.  
  347. squareAlonsoBuffer = gl.createBuffer();
  348. gl.bindBuffer(gl.ARRAY_BUFFER, squareAlonsoBuffer);
  349. var texcoord = [
  350. 1.0, 0.5,
  351. 0.5, 0.5,
  352. 1, 0.0,
  353. 0.5, 0.0
  354. ];
  355.  
  356. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texcoord), gl.STATIC_DRAW);
  357. squareAlonsoBuffer.itemSize = 2;
  358. squareAlonsoBuffer.numItems = 4;
  359. }
  360.  
  361. var modelVertexPositionBuffer;
  362. var modelVertexNormalBuffer;
  363. var modelVertexTextureCoordBuffer;
  364. var modelVertexIndexBuffer;
  365.  
  366. function handleLoadedModel(modelData){
  367. modelVertexPositionBuffer = gl.createBuffer();
  368. gl.bindBuffer(gl.ARRAY_BUFFER,modelVertexPositionBuffer);
  369. gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(modelData.vertexPositions),gl.STATIC_DRAW);
  370. modelVertexPositionBuffer.itemSize = 3;
  371. modelVertexPositionBuffer.numItems = modelData.vertexPositions/3;
  372.  
  373. modelVertexNormalBuffer = gl.createBuffer();
  374. gl.bindBuffer(gl.ARRAY_BUFFER,modelVertexNormalBuffer);
  375. gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(modelData.vertexNormals),gl.STATIC_DRAW);
  376. modelVertexNormalBuffer.itemSize = 3;
  377. modelVertexNormalBuffer.numItems = modelData.vertexNormals.length/3;
  378.  
  379. modelVertexTextureCoordBuffer = gl.createBuffer();
  380. gl.bindBuffer(gl.ARRAY_BUFFER, modelVertexTextureCoordBuffer);
  381. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(modelData.vertexTextureCoords),gl.STATIC_DRAW);
  382. modelVertexTextureCoordBuffer.itemSize = 2;
  383. modelVertexTextureCoordBuffer.numItems = modelData.vertexTextureCoords.length/2;
  384.  
  385. modelVertexIndexBuffer = gl.createBuffer();
  386. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,modelVertexIndexBuffer);
  387. gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(modelData.indices),gl.STATIC_DRAW);
  388. modelVertexIndexBuffer.itemSize = 1;
  389. modelVertexIndexBuffer.numItems = modelData.indices.length;
  390. }
  391.  
  392. function drawScene()
  393. {
  394. gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  395. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  396. //Type of Camera(pMatrix)
  397. mat4.perspective(fov, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
  398. //Position and orientation of the camera(vMatrix)
  399. mat4.identity(viewMatrix);
  400. mat4.translate(viewMatrix, [0.0, 0.0, -10.0]);
  401.  
  402.  
  403. mat4.identity(sceneMatrix);
  404. mat4.translate(sceneMatrix, [panX, -panY, 0.0]);
  405. mat4.multiply(viewMatrix, mouseRotationMatrix);
  406.  
  407.  
  408. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
  409. gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  410.  
  411. //gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
  412. //gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
  413.  
  414. // gl.bindBuffer(gl.ARRAY_BUFFER, squareAlonsoBuffer);
  415. // gl.vertexAttribPointer(shaderProgram.vertexTexCoordAttribute, squareAlonsoBuffer.itemSize, gl.FLOAT, false, 0, 0);
  416.  
  417. //gl.activeTexture(gl.TEXTURE0);
  418. //gl.bindTexture(gl.TEXTURE_2D, myTexture);
  419. //gl.uniform1i(shaderProgram.textureUniform, 0);
  420.  
  421. sendMatricesToShader();
  422. //in the previous line we tell the vertexshader were in memory our vertices are
  423.  
  424. //console.log(cubeVertexIndexBuffer.numItems);
  425.  
  426. gl.drawElements(gl.TRIANGLE_STRIP, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  427.  
  428. //model draw
  429. if(modelVertexPositionBuffer)
  430. {
  431. mat4.identity(sceneMatrix);
  432. mat4.translate(sceneMatrix, [0.0, 0.0, -10]);
  433. mat4.scale(sceneMatrix,[0.5,0.5,0.5]);
  434.  
  435. gl.bindBuffer(gl.ARRAY_BUFFER, modelVertexPositionBuffer);
  436. gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,modelVertexPositionBuffer.itemSize,gl.FLOAT,false,0,0);
  437. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,modelVertexIndexBuffer),
  438. sendMatricesToShader();
  439. gl.drawElements(gl.TRIANGLES,modelVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT,0);
  440. }
  441. }
  442.  
  443. function handleKeys()
  444. {
  445. if(currently_pressed_keys[38])
  446. {
  447. if(fov > 15)
  448. fov -= 0.5;
  449. }
  450.  
  451. if(currently_pressed_keys[40])
  452. {
  453. if(fov < 65)
  454. fov += 0.5;
  455. }
  456.  
  457. if(currently_pressed_keys[82])
  458. {
  459. fov = 45;
  460. }
  461. }
  462.  
  463. function reDraw()
  464. {
  465. requestAnimationFrame(reDraw);
  466. handleKeys();
  467. drawScene();
  468. }
  469.  
  470. function webGLStart() {
  471. var canvas = document.getElementById("webGL-canvas");
  472. canvas.width = window.innerWidth;
  473. canvas.height = window.innerHeight;
  474.  
  475. document.onkeydown = handleKeyDown;
  476. document.onkeyup = handleKeyUp;
  477.  
  478. document.onmousedown = handleMouseDown;
  479. document.onmouseup = handleMouseUp;
  480. document.onmousemove = handleMouseMove;
  481.  
  482. initGL(canvas);
  483. initShaders();
  484. LoadModel();
  485. loadSceneOnGPU();
  486. loadTextureOnGPU();
  487.  
  488. gl.clearColor(0.0, 0.0, 0.0, 1.0);
  489. gl.enable(gl.DEPTH_TEST);
  490.  
  491. reDraw();
  492. }
  493.  
  494. </script>
  495.  
  496. </head>
  497.  
  498. <body onload="webGLStart();" onresize="webGLStart();">
  499. <canvas id="webGL-canvas" style="border: none; width:100%; height:100%; margin: 0 auto;"></canvas>
  500. </body>
  501.  
  502. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!