API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 18th, 2019
95
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.20 KB | None | 0 0
raw download clone embed print report
  1. <html><head>
  2. <title>Learning WebGL — lesson 6</title>
  3. <meta http-equiv="content-type" content="text/html; charset=windows-1252">
  4.  
  5. <script type="text/javascript" src="index_pliki/glMatrix-0.js"></script>
  6. <script type="text/javascript" src="index_pliki/webgl-utils.js"></script>
  7.  
  8. <script id="shader-fs" type="x-shader/x-fragment">
  9. precision mediump float;
  10.  
  11. varying vec2 vTextureCoord;
  12.  
  13. uniform sampler2D uSampler;
  14.  
  15. void main(void) {
  16. gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
  17. }
  18. </script>
  19.  
  20. <script id="shader-vs" type="x-shader/x-vertex">
  21. attribute vec3 aVertexPosition;
  22. attribute vec2 aTextureCoord;
  23.  
  24. uniform mat4 uMVMatrix;
  25. uniform mat4 uPMatrix;
  26.  
  27. varying vec2 vTextureCoord;
  28.  
  29.  
  30. void main(void) {
  31. gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
  32. vTextureCoord = aTextureCoord;
  33. }
  34. </script>
  35.  
  36.  
  37. <script type="text/javascript">
  38.  
  39. var gl;
  40.  
  41. function initGL(canvas) {
  42. try {
  43. gl = canvas.getContext("experimental-webgl");
  44. gl.viewportWidth = canvas.width;
  45. gl.viewportHeight = canvas.height;
  46. } catch (e) {
  47. }
  48. if (!gl) {
  49. alert("Could not initialise WebGL, sorry :-(");
  50. }
  51. }
  52.  
  53.  
  54. function getShader(gl, id) {
  55. var shaderScript = document.getElementById(id);
  56. if (!shaderScript) {
  57. return null;
  58. }
  59.  
  60. var str = "";
  61. var k = shaderScript.firstChild;
  62. while (k) {
  63. if (k.nodeType == 3) {
  64. str += k.textContent;
  65. }
  66. k = k.nextSibling;
  67. }
  68.  
  69. var shader;
  70. if (shaderScript.type == "x-shader/x-fragment") {
  71. shader = gl.createShader(gl.FRAGMENT_SHADER);
  72. } else if (shaderScript.type == "x-shader/x-vertex") {
  73. shader = gl.createShader(gl.VERTEX_SHADER);
  74. } else {
  75. return null;
  76. }
  77.  
  78. gl.shaderSource(shader, str);
  79. gl.compileShader(shader);
  80.  
  81. if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  82. alert(gl.getShaderInfoLog(shader));
  83. return null;
  84. }
  85.  
  86. return shader;
  87. }
  88.  
  89.  
  90. var shaderProgram;
  91.  
  92. function initShaders() {
  93. var fragmentShader = getShader(gl, "shader-fs");
  94. var vertexShader = getShader(gl, "shader-vs");
  95.  
  96. shaderProgram = gl.createProgram();
  97. gl.attachShader(shaderProgram, vertexShader);
  98. gl.attachShader(shaderProgram, fragmentShader);
  99. gl.linkProgram(shaderProgram);
  100.  
  101. if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  102. alert("Could not initialise shaders");
  103. }
  104.  
  105. gl.useProgram(shaderProgram);
  106.  
  107. shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  108. gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
  109.  
  110. shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
  111. gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
  112.  
  113. shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
  114. shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
  115. shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
  116. }
  117.  
  118.  
  119. function handleLoadedTexture(textures) {
  120. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  121.  
  122. gl.bindTexture(gl.TEXTURE_2D, textures[0]);
  123. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textures[0].image);
  124. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  125. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  126.  
  127. gl.bindTexture(gl.TEXTURE_2D, textures[1]);
  128. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textures[1].image);
  129. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  130. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  131.  
  132. gl.bindTexture(gl.TEXTURE_2D, textures[2]);
  133. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textures[2].image);
  134. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  135. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
  136. gl.generateMipmap(gl.TEXTURE_2D);
  137.  
  138. gl.bindTexture(gl.TEXTURE_2D, null);
  139. }
  140.  
  141.  
  142. var crateTextures = Array();
  143.  
  144. function initTexture() {
  145. var crateImage = new Image();
  146.  
  147. for (var i=0; i < 3; i++) {
  148. var texture = gl.createTexture();
  149. texture.image = crateImage;
  150. crateTextures.push(texture);
  151. }
  152.  
  153. crateImage.onload = function () {
  154. handleLoadedTexture(crateTextures)
  155. }
  156. crateImage.src = "crate.gif";
  157. }
  158.  
  159.  
  160. var mvMatrix = mat4.create();
  161. var mvMatrixStack = [];
  162. var pMatrix = mat4.create();
  163.  
  164. function mvPushMatrix() {
  165. var copy = mat4.create();
  166. mat4.set(mvMatrix, copy);
  167. mvMatrixStack.push(copy);
  168. }
  169.  
  170. function mvPopMatrix() {
  171. if (mvMatrixStack.length == 0) {
  172. throw "Invalid popMatrix!";
  173. }
  174. mvMatrix = mvMatrixStack.pop();
  175. }
  176.  
  177.  
  178. function setMatrixUniforms() {
  179. gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
  180. gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
  181. }
  182.  
  183.  
  184. function degToRad(degrees) {
  185. return degrees * Math.PI / 180;
  186. }
  187.  
  188.  
  189. var xRot = 0;
  190. var xSpeed = 0;
  191.  
  192. var yRot = 0;
  193. var ySpeed = 0;
  194.  
  195. var z = -5.0;
  196.  
  197. var filter = 0;
  198.  
  199.  
  200. var currentlyPressedKeys = {};
  201.  
  202. function handleKeyDown(event) {
  203. currentlyPressedKeys[event.keyCode] = true;
  204.  
  205. if (String.fromCharCode(event.keyCode) == "F") {
  206. filter += 1;
  207. if (filter == 3) {
  208. filter = 0;
  209. }
  210. }
  211. }
  212.  
  213.  
  214. function handleKeyUp(event) {
  215. currentlyPressedKeys[event.keyCode] = false;
  216. }
  217.  
  218.  
  219. function handleKeys() {
  220. if (currentlyPressedKeys[33]) {
  221. // Page Up
  222. z -= 0.05;
  223. }
  224. if (currentlyPressedKeys[34]) {
  225. // Page Down
  226. z += 0.05;
  227. }
  228. if (currentlyPressedKeys[37]) {
  229. // Left cursor key
  230. ySpeed -= 1;
  231. }
  232. if (currentlyPressedKeys[39]) {
  233. // Right cursor key
  234. ySpeed += 1;
  235. }
  236. if (currentlyPressedKeys[38]) {
  237. // Up cursor key
  238. xSpeed -= 1;
  239. }
  240. if (currentlyPressedKeys[40]) {
  241. // Down cursor key
  242. xSpeed += 1;
  243. }
  244. }
  245.  
  246.  
  247. var cubeVertexPositionBuffer;
  248. var cubeVertexTextureCoordBuffer;
  249. var cubeVertexIndexBuffer;
  250. function initBuffers() {
  251. cubeVertexPositionBuffer = gl.createBuffer();
  252. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
  253. vertices = [
  254.  
  255. // Front face
  256. -1.0, -1.0, 1.0,
  257. 1.0, -1.0, 1.0,
  258. 0.0, 1.0, 0.0,
  259.  
  260. // Back face
  261. -1.0, -1.0, -1.0,
  262. 0.0, 1.0, 0.0,
  263. 1.0, -1.0, -1.0,
  264.  
  265. // Bottom 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. // Right face
  272. 1.0, -1.0, -1.0,
  273. 0.0, 1.0, 0.0,
  274. 1.0, -1.0, 1.0,
  275.  
  276. // Left face
  277. -1.0, -1.0, -1.0,
  278. -1.0, -1.0, 1.0,
  279. 0.0, 1.0, 0.0,
  280.  
  281. ];
  282. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  283. cubeVertexPositionBuffer.itemSize = 3;
  284. cubeVertexPositionBuffer.numItems = 24;
  285.  
  286. cubeVertexTextureCoordBuffer = gl.createBuffer();
  287. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
  288. var textureCoords = [
  289. // Front face
  290. 0.0, 0.0,
  291. 1.0, 0.75,
  292. 0.0, 1.0,
  293.  
  294. // Back face
  295. 1.0, 0.0,
  296. 1.0, 1.0,
  297. 0.0, 1.0,
  298. 0.0, 0.0,
  299.  
  300. // Bottom face
  301. 1.0, 1.0,
  302. 0.0, 1.0,
  303. 0.0, 0.0,
  304. 1.0, 0.0,
  305.  
  306. // Right face
  307. 0.0, 0.0,
  308. 1.0, 0.75,
  309. 0.0, 1.0,
  310.  
  311. // Left face
  312. 0.0, 0.0,
  313. 1.0, 0.0,
  314. 1.0, 1.0,
  315. 0.0, 1.0,
  316. ];
  317. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
  318. cubeVertexTextureCoordBuffer.itemSize = 2;
  319. cubeVertexTextureCoordBuffer.numItems = 24;
  320.  
  321. cubeVertexIndexBuffer = gl.createBuffer();
  322. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
  323. var cubeVertexIndices = [
  324. 0, 1, 2, 0, 2, 3, // Front face
  325. 4, 5, 6, 4, 6, 7, // Back face
  326. 8, 9, 10, 8, 10, 11, // Top face
  327. 12, 13, 14, 12, 14, 15, // Bottom face
  328. 16, 17, 18, 16, 18, 19, // Right face
  329. 20, 21, 22, 20, 22, 23 // Left face
  330. ]
  331. gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
  332. cubeVertexIndexBuffer.itemSize = 1;
  333. cubeVertexIndexBuffer.numItems = 36;
  334. }
  335.  
  336.  
  337. function drawScene() {
  338. gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  339. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  340.  
  341. mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
  342.  
  343. mat4.identity(mvMatrix);
  344.  
  345. mat4.translate(mvMatrix, [0.0, 0.0, z]);
  346.  
  347. mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
  348. mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);
  349.  
  350. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
  351. gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  352.  
  353. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
  354. gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
  355.  
  356.  
  357. gl.activeTexture(gl.TEXTURE0);
  358. gl.bindTexture(gl.TEXTURE_2D, crateTextures[filter]);
  359. gl.uniform1i(shaderProgram.samplerUniform, 0);
  360.  
  361. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
  362. setMatrixUniforms();
  363. gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  364. }
  365.  
  366.  
  367. var lastTime = 0;
  368.  
  369. function animate() {
  370. var timeNow = new Date().getTime();
  371. if (lastTime != 0) {
  372. var elapsed = timeNow - lastTime;
  373.  
  374. xRot += (xSpeed * elapsed) / 1000.0;
  375. yRot += (ySpeed * elapsed) / 1000.0;
  376. }
  377. lastTime = timeNow;
  378. }
  379.  
  380.  
  381. function tick() {
  382. requestAnimFrame(tick);
  383. handleKeys();
  384. drawScene();
  385. animate();
  386. }
  387.  
  388.  
  389.  
  390. function webGLStart() {
  391. var canvas = document.getElementById("lesson06-canvas");
  392. initGL(canvas);
  393. initShaders();
  394. initBuffers();
  395. initTexture();
  396.  
  397. gl.clearColor(0.0, 0.0, 0.0, 1.0);
  398. gl.enable(gl.DEPTH_TEST);
  399.  
  400. document.onkeydown = handleKeyDown;
  401. document.onkeyup = handleKeyUp;
  402.  
  403. tick();
  404. }
  405.  
  406. </script>
  407.  
  408.  
  409. </head>
  410.  
  411.  
  412. <body onload="webGLStart();">
  413. <a href="http://learningwebgl.com/blog/?p=571">&lt;&lt; Back to Lesson 6</a><br>
  414.  
  415. <canvas id="lesson06-canvas" style="border: none;" width="500" height="500"></canvas>
  416.  
  417. <h2>Controls:</h2>
  418.  
  419. <ul>
  420. <li><code>Page Up</code>/<code>Page Down</code> to zoom out/in
  421. </li><li>Cursor keys: make the cube rotate (the longer you hold down a cursor key, the more it accelerates)
  422. </li><li><code>F</code> to toggle through three different kinds of texture filters
  423. </li></ul>
  424.  
  425. <br>
  426. <a href="http://learningwebgl.com/blog/?p=571">&lt;&lt; Back to Lesson 6</a><br>
  427.  
  428.  
  429.  
  430. </body></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!