API tools faq
paste
Advertisement
Guest User

textury

a guest
Jan 20th, 2018
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!-- saved from url=(0082)https://sorbus.if.uj.edu.pl/~pbialas/3DComputerGraphics/Tutorial/WebGL/basics.html -->
  3. <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.  
  5. <title>Triangle</title>
  6.  
  7. <script type="text/javascript" src="gl-matrix-min.js"></script>
  8. <style>
  9. body {
  10. margin: 100px;
  11. }
  12. </style>
  13.  
  14. <script>
  15.  
  16. /*
  17. This functions check if the WebGL context gl
  18. did throw any error and if so displays it's number.
  19. Probably not neccessery as it's is dislayed in console anyway ...
  20. */
  21.  
  22. function checkError(gl, msg) {
  23. let info = gl.getError();
  24. if (info !== gl.NO_ERROR) {
  25. console.log("Error " + info + " : " + msg);
  26. }
  27. }
  28.  
  29. /*
  30. Tak samo jak powy¿sza, ale zamiast wypisywaæ
  31. komunikat na konsoli wyœwietla go w okienku
  32. dialogowym
  33. */
  34. function alertError(gl, msg) {
  35. let info = gl.getError();
  36. if (info !== gl.NO_ERROR) {
  37. alert("Error " + info + ": " + msg);
  38. }
  39. }
  40.  
  41. /*
  42. Tu nastêpuje seria pomocniczych funkcji, które
  43. u³atwiaj¹ napisanie programu WebGL. W ka¿dej z nich
  44. pierwszy parametr to WebGL context.
  45. */
  46.  
  47. /*
  48. Funkcja kompiluje kod zawarty w parametrze 'src'
  49. do³aczaj¹c go do shadera 'shader'. W przypadku b³êdów kompilacji
  50. wyœwietla stosowny komunikat na konsoli.
  51. */
  52.  
  53. function compileShader(gl, shader, src) {
  54.  
  55. gl.shaderSource(shader, src);
  56. gl.compileShader(shader);
  57.  
  58. //Check for compilation error and display them.
  59. if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  60. console.log(gl.getShaderInfoLog(shader));
  61. return null;
  62. }
  63. return shader;
  64. }
  65.  
  66. /*
  67. G³ówna funkcja tworz¹ca program cieniuj¹cy.
  68. ¯ród³a szaderów s¹ przekazywane za pomoca obiektu 'src'
  69. jako jego pola 'vertex' i 'fragment'.
  70. */
  71.  
  72. function makeProgram(gl, src) {
  73. let vshader = gl.createShader(gl.VERTEX_SHADER);
  74. let fshader = gl.createShader(gl.FRAGMENT_SHADER);
  75.  
  76. compileShader(gl, vshader, src.vertex);
  77. compileShader(gl, fshader, src.fragment);
  78.  
  79. let program = gl.createProgram();
  80.  
  81. gl.attachShader(program, vshader);
  82. gl.attachShader(program, fshader);
  83.  
  84. gl.linkProgram(program);
  85.  
  86. let info = gl.getProgramParameter(program, gl.LINK_STATUS);
  87. if (!info) {
  88. console.log("Could not link shaders\n" + info);
  89. }
  90.  
  91. return program;
  92. }
  93.  
  94. /*
  95. Function creating an ARRAY BUFFER and loading data into it.
  96. */
  97. function initBuffer(gl, data) {
  98.  
  99. let buffer = gl.createBuffer();
  100.  
  101. gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  102. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
  103. gl.bindBuffer(gl.ARRAY_BUFFER, null);
  104. return buffer;
  105. }
  106.  
  107. </script>
  108. </head>
  109.  
  110. <body onload="onLoad()">
  111. <canvas id="canvas" width="400px" height="400px" style="border: solid thin black;"></canvas>
  112.  
  113. <script>
  114.  
  115. /* Those two variables contain
  116. the source coe for both shaders.
  117. */
  118.  
  119. const vertex_src = `
  120. attribute vec4 aVertexPosition;
  121. attribute vec4 aVertexColor;
  122.  
  123. attribute vec2 a_texcoord; // TEXTURE
  124.  
  125. uniform mat4 uModelViewMatrix;
  126. uniform mat4 uProjectionMatrix;
  127.  
  128. varying lowp vec4 vColor;
  129. varying vec2 v_texcoord; // TEXTURE
  130.  
  131. void main() {
  132. vColor = aVertexColor;
  133. gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
  134. v_texcoord = a_texcoord; // TEXTURE
  135. }
  136. `;
  137.  
  138. const fragment_src = `
  139. precision mediump float; // TEXTURE
  140.  
  141. varying lowp vec4 vColor;
  142.  
  143. varying vec2 v_texcoord; // TEXTURE
  144.  
  145. // The texture.
  146. uniform sampler2D u_texture; // TEXTURE
  147.  
  148. void main() {
  149. //gl_FragColor = vColor;
  150. gl_FragColor = texture2D(u_texture, v_texcoord); // TEXTURE
  151. }
  152.  
  153. `;
  154.  
  155. const PyramidCoordinates = [
  156. 0.0,0.0,0.0,
  157. 0.0,1.0,0.0,
  158. 1.0,0.0,0.0,
  159. 1.0,0.0,0.0,
  160. 1.0,1.0,0.0,
  161. 0.0,1.0,0.0,
  162. 0.0,0.0,0.0,
  163. 1.0,0.0,0.0,
  164. 0.5,0.5,1.0,
  165. 0.0,0.0,0.0,
  166. 0.0,1.0,0.0,
  167. 0.5,0.5,1.0,
  168. 0.0,1.0,0.0,
  169. 1.0,1.0,0.0,
  170. 0.5,0.5,1.0,
  171. 1.0,1.0,0.0,
  172. 1.0,0.0,0.0,
  173. 0.5,0.5,1.0];
  174.  
  175.  
  176. const VertexColors = [
  177. 0.5, 0.0, 0.0,
  178. 0.5, 0.0, 0.0,
  179. 0.5, 0.0, 0.0,
  180. 0.5, 0.0, 0.0,
  181. 0.5, 0.0, 0.0,
  182. 0.5, 0.0, 0.0,
  183. 0.0, 1.0, 0.0,
  184. 0.0, 1.0, 0.0,
  185. 0.0, 1.0, 0.0,
  186. 0.0, 0.0, 1.0,
  187. 0.0, 0.0, 1.0,
  188. 0.0, 0.0, 1.0,
  189. 1.0, 0.0, 0.0,
  190. 1.0, 0.0, 0.0,
  191. 1.0, 0.0, 0.0,
  192. 0.0, 0.0, 0.0,
  193. 0.0, 0.0, 0.0,
  194. 0.0, 0.0, 0.0];
  195.  
  196. const textureCoordinates = [
  197. // Front
  198. 0.0, 0.0,
  199. 1.0, 0.0,
  200. 1.0, 1.0,
  201. 0.0, 1.0,
  202. // Back
  203. 0.0, 0.0,
  204. 1.0, 0.0,
  205. 1.0, 1.0,
  206. 0.0, 1.0,
  207. // Top
  208. 0.0, 0.0,
  209. 1.0, 0.0,
  210. 1.0, 1.0,
  211. 0.0, 1.0,
  212. // Bottom
  213. 0.0, 0.0,
  214. 1.0, 0.0,
  215. 1.0, 1.0,
  216. 0.0, 1.0,
  217. // Right
  218. 0.0, 0.0,
  219. 1.0, 0.0,
  220. 1.0, 1.0,
  221. 0.0, 1.0
  222. ];
  223.  
  224. function prepareTexture(gl,texcoordLocation) {
  225.  
  226. var buffer = gl.createBuffer();
  227. gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  228. gl.enableVertexAttribArray(texcoordLocation);
  229. gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0);
  230.  
  231. gl.bufferData(
  232. gl.ARRAY_BUFFER,
  233. new Float32Array(textureCoordinates),
  234. gl.STATIC_DRAW);
  235.  
  236. var texture = gl.createTexture();
  237. gl.bindTexture(gl.TEXTURE_2D, texture);
  238.  
  239. // Fill the texture with a 1x1 blue pixel.
  240. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
  241. new Uint8Array([0, 0, 255, 255]));
  242.  
  243. // Asynchronously load an image
  244. var image = new Image();
  245. image.src = "f-texture.png";
  246. image.addEventListener('load', function() {
  247. // Now that the image has loaded make copy it to the texture.
  248. gl.bindTexture(gl.TEXTURE_2D, texture);
  249. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,gl.UNSIGNED_BYTE, image);
  250. gl.generateMipmap(gl.TEXTURE_2D);
  251. //alert("Texture loaded");
  252. });
  253. }
  254.  
  255. function onLoad() {
  256.  
  257. let canvas = document.getElementById("canvas");
  258. if (!canvas) alert("cannot access canvas");
  259. let gl = canvas.getContext("webgl");
  260. if (!gl) alert("cannot get WebGL context");
  261.  
  262. gl.viewport(0, 0, canvas.width, canvas.height);
  263.  
  264. let program = makeProgram(gl, {vertex: vertex_src, fragment: fragment_src});
  265.  
  266. let colorBuffer = initBuffer(gl, VertexColors);
  267.  
  268. let triangleVertexBuffer = initBuffer(gl, PyramidCoordinates);
  269.  
  270. var texcoordLocation = gl.getAttribLocation(program, "a_texcoord"); //TEXTURE
  271.  
  272.  
  273. prepareTexture(gl, texcoordLocation); // TEXTURE
  274.  
  275. // Set's the background color
  276. gl.clearColor(0.75, 0.75, 0.75, 1.0);
  277. // Enables the depth test.
  278. gl.enable(gl.DEPTH_TEST);
  279.  
  280. //Clear canvas (fill with background color) and depth buffer.
  281. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  282.  
  283. gl.useProgram(program);
  284.  
  285. var start = null;
  286. function draw(timestamp)
  287. {
  288.  
  289. if (!start) start = timestamp;
  290. var progress = timestamp - start;
  291.  
  292. const fieldOfView = 45 * Math.PI / 180; // in radians
  293. const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  294. const zNear = 0.1;
  295. const zFar = 100.0;
  296.  
  297. const projectionMatrix = mat4.create();
  298. const viewMatrix = mat4.create();
  299.  
  300. // note: glmatrix.js always has the first argument
  301. // as the destination to receive the result.
  302. mat4.perspective(projectionMatrix,
  303. fieldOfView,
  304. aspect,
  305. zNear,
  306. zFar);
  307.  
  308. mat4.lookAt(viewMatrix, [30.0-progress/1000, 5.0, 5.0],[0.0-progress/1000, 1.0, 1.0], [0,0,1]);
  309.  
  310. gl.uniformMatrix4fv(
  311. gl.getUniformLocation(program, 'uProjectionMatrix'),
  312. false,
  313. projectionMatrix);
  314.  
  315. gl.uniformMatrix4fv(
  316. gl.getUniformLocation(program, 'uModelViewMatrix'),
  317. false,
  318. viewMatrix);
  319.  
  320. // draw 100 triangles
  321. for (var j = 0; j < 10; j++) {
  322.  
  323. for(var i = 0; i < 10; i++) {
  324.  
  325. let T = mat4.create();
  326. mat4.translate(T,T,[2*j,2*i,0])
  327. mat4.mul(T,viewMatrix,T)
  328.  
  329. gl.uniformMatrix4fv(gl.getUniformLocation(program,'uModelViewMatrix'), false , T);
  330.  
  331. drawPyramid(gl, program, triangleVertexBuffer, colorBuffer);
  332.  
  333. let R = mat4.create();
  334. let T2 = mat4.create();
  335.  
  336. mat4.rotate(R, R, Math.PI, [2,0,0]);
  337. mat4.mul(R, T, R)
  338. mat4.translate(T2,T2,[0,-2,0])
  339. mat4.mul(T2,T2,R)
  340.  
  341. gl.uniformMatrix4fv(gl.getUniformLocation(program,'uModelViewMatrix'), false , T2);
  342.  
  343. drawPyramid(gl, program, triangleVertexBuffer, colorBuffer);
  344. }
  345. }
  346.  
  347. if (progress < 10000) {
  348. window.requestAnimationFrame(draw);
  349. }
  350. }
  351.  
  352. window.requestAnimationFrame(draw);
  353.  
  354. gl.bindBuffer(gl.ARRAY_BUFFER, null);
  355. gl.disableVertexAttribArray(gl.getAttribLocation(program, 'aVertexPosition'));
  356. gl.disableVertexAttribArray(gl.getAttribLocation(program, 'aVertexColor'));
  357. }
  358.  
  359. function drawPyramid(gl, program, triangleVertexBuffer, colorBuffer) {
  360. gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
  361. gl.vertexAttribPointer(gl.getAttribLocation(program, 'aVertexPosition'), 3, gl.FLOAT, false, 0, 0);
  362. gl.enableVertexAttribArray(gl.getAttribLocation(program, 'aVertexPosition'));
  363.  
  364. gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  365. gl.vertexAttribPointer(gl.getAttribLocation(program, 'aVertexColor'), 3, gl.FLOAT, false, 0, 0);
  366. gl.enableVertexAttribArray(gl.getAttribLocation(program, 'aVertexColor'));
  367.  
  368. gl.drawArrays(gl.TRIANGLES, 0, 18);
  369. }
  370.  
  371. </script>
  372.  
  373. </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!