API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 18th, 2019
107
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.64 KB | None | 0 0
raw download clone embed print report
  1. <html><head>
  2. <title>Learning WebGL — lesson 12</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. varying vec3 vLightWeighting;
  13.  
  14. uniform sampler2D uSampler;
  15.  
  16. void main(void) {
  17. vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
  18. gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);
  19. }
  20. </script>
  21.  
  22. <script id="shader-vs" type="x-shader/x-vertex">
  23. attribute vec3 aVertexPosition;
  24. attribute vec3 aVertexNormal;
  25. attribute vec2 aTextureCoord;
  26.  
  27. uniform mat4 uMVMatrix;
  28. uniform mat4 uPMatrix;
  29. uniform mat3 uNMatrix;
  30.  
  31. uniform vec3 uAmbientColor;
  32.  
  33. uniform vec3 uPointLightingLocation;
  34. uniform vec3 uPointLightingColor;
  35.  
  36. uniform bool uUseLighting;
  37.  
  38. varying vec2 vTextureCoord;
  39. varying vec3 vLightWeighting;
  40.  
  41. void main(void) {
  42. vec4 mvPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
  43. gl_Position = uPMatrix * mvPosition;
  44. vTextureCoord = aTextureCoord;
  45.  
  46. if (!uUseLighting) {
  47. vLightWeighting = vec3(1.0, 1.0, 1.0);
  48. } else {
  49. vec3 lightDirection = normalize(uPointLightingLocation - mvPosition.xyz);
  50.  
  51. vec3 transformedNormal = uNMatrix * aVertexNormal;
  52. float directionalLightWeighting = max(dot(transformedNormal, lightDirection), 0.0);
  53. vLightWeighting = uAmbientColor + uPointLightingColor * directionalLightWeighting;
  54. }
  55. }
  56. </script>
  57.  
  58.  
  59. <script type="text/javascript">
  60.  
  61. var gl;
  62.  
  63. function initGL(canvas) {
  64. try {
  65. gl = canvas.getContext("experimental-webgl");
  66. gl.viewportWidth = canvas.width;
  67. gl.viewportHeight = canvas.height;
  68. } catch (e) {
  69. }
  70. if (!gl) {
  71. alert("Could not initialise WebGL, sorry :-(");
  72. }
  73. }
  74.  
  75.  
  76. function getShader(gl, id) {
  77. var shaderScript = document.getElementById(id);
  78. if (!shaderScript) {
  79. return null;
  80. }
  81.  
  82. var str = "";
  83. var k = shaderScript.firstChild;
  84. while (k) {
  85. if (k.nodeType == 3) {
  86. str += k.textContent;
  87. }
  88. k = k.nextSibling;
  89. }
  90.  
  91. var shader;
  92. if (shaderScript.type == "x-shader/x-fragment") {
  93. shader = gl.createShader(gl.FRAGMENT_SHADER);
  94. } else if (shaderScript.type == "x-shader/x-vertex") {
  95. shader = gl.createShader(gl.VERTEX_SHADER);
  96. } else {
  97. return null;
  98. }
  99.  
  100. gl.shaderSource(shader, str);
  101. gl.compileShader(shader);
  102.  
  103. if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  104. alert(gl.getShaderInfoLog(shader));
  105. return null;
  106. }
  107.  
  108. return shader;
  109. }
  110.  
  111.  
  112. var shaderProgram;
  113.  
  114. function initShaders() {
  115. var fragmentShader = getShader(gl, "shader-fs");
  116. var vertexShader = getShader(gl, "shader-vs");
  117.  
  118. shaderProgram = gl.createProgram();
  119. gl.attachShader(shaderProgram, vertexShader);
  120. gl.attachShader(shaderProgram, fragmentShader);
  121. gl.linkProgram(shaderProgram);
  122.  
  123. if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  124. alert("Could not initialise shaders");
  125. }
  126.  
  127. gl.useProgram(shaderProgram);
  128.  
  129. shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  130. gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
  131.  
  132. shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
  133. gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
  134.  
  135. shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
  136. gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);
  137.  
  138. shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
  139. shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
  140. shaderProgram.nMatrixUniform = gl.getUniformLocation(shaderProgram, "uNMatrix");
  141. shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
  142. shaderProgram.useLightingUniform = gl.getUniformLocation(shaderProgram, "uUseLighting");
  143. shaderProgram.ambientColorUniform = gl.getUniformLocation(shaderProgram, "uAmbientColor");
  144. shaderProgram.pointLightingLocationUniform = gl.getUniformLocation(shaderProgram, "uPointLightingLocation");
  145. shaderProgram.pointLightingColorUniform = gl.getUniformLocation(shaderProgram, "uPointLightingColor");
  146. }
  147.  
  148.  
  149. function handleLoadedTexture(texture) {
  150. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  151. gl.bindTexture(gl.TEXTURE_2D, texture);
  152. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
  153. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  154. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
  155. gl.generateMipmap(gl.TEXTURE_2D);
  156.  
  157. gl.bindTexture(gl.TEXTURE_2D, null);
  158. }
  159.  
  160.  
  161. var moonTexture;
  162. var moonTexture1;
  163. var crateTexture;
  164.  
  165. function initTextures() {
  166. moonTexture = gl.createTexture();
  167. moonTexture.image = new Image();
  168. moonTexture.image.onload = function () {
  169. handleLoadedTexture(moonTexture)
  170. }
  171. moonTexture.image.src = "earth.gif";
  172.  
  173. moonTexture1 = gl.createTexture();
  174. moonTexture1.image = new Image();
  175. moonTexture1.image.onload = function () {
  176. handleLoadedTexture(moonTexture1)
  177. }
  178. moonTexture1.image.src = "moon.gif";
  179.  
  180. crateTexture = gl.createTexture();
  181. crateTexture.image = new Image();
  182. crateTexture.image.onload = function () {
  183. handleLoadedTexture(crateTexture)
  184. }
  185. crateTexture.image.src = "sun.gif";
  186. }
  187.  
  188.  
  189. var mvMatrix = mat4.create();
  190. var mvMatrixStack = [];
  191. var pMatrix = mat4.create();
  192.  
  193. function mvPushMatrix() {
  194. var copy = mat4.create();
  195. mat4.set(mvMatrix, copy);
  196. mvMatrixStack.push(copy);
  197. }
  198.  
  199. function mvPopMatrix() {
  200. if (mvMatrixStack.length == 0) {
  201. throw "Invalid popMatrix!";
  202. }
  203. mvMatrix = mvMatrixStack.pop();
  204. }
  205.  
  206. function setMatrixUniforms() {
  207. gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
  208. gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
  209.  
  210. var normalMatrix = mat3.create();
  211. mat4.toInverseMat3(mvMatrix, normalMatrix);
  212. mat3.transpose(normalMatrix);
  213. gl.uniformMatrix3fv(shaderProgram.nMatrixUniform, false, normalMatrix);
  214. }
  215.  
  216.  
  217. function degToRad(degrees) {
  218. return degrees * Math.PI / 180;
  219. }
  220.  
  221.  
  222. var cubeVertexPositionBuffer;
  223. var cubeVertexNormalBuffer;
  224. var cubeVertexTextureCoordBuffer;
  225. var cubeVertexIndexBuffer;
  226.  
  227. var moonVertexPositionBuffer;
  228. var moonVertexNormalBuffer;
  229. var moonVertexTextureCoordBuffer;
  230. var moonVertexIndexBuffer;
  231.  
  232. var sunVertexPositionBuffer;
  233. var sunVertexNormalBuffer;
  234. var sunVertexTextureCoordBuffer;
  235. var sunVertexIndexBuffer;
  236.  
  237.  
  238. function initBuffers() {
  239. cubeVertexPositionBuffer = gl.createBuffer();
  240. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
  241. vertices = [
  242. // Front face
  243. -1.0, -1.0, 1.0,
  244. 1.0, -1.0, 1.0,
  245. 1.0, 1.0, 1.0,
  246. -1.0, 1.0, 1.0,
  247.  
  248. // Back face
  249. -1.0, -1.0, -1.0,
  250. -1.0, 1.0, -1.0,
  251. 1.0, 1.0, -1.0,
  252. 1.0, -1.0, -1.0,
  253.  
  254. // Top face
  255. -1.0, 1.0, -1.0,
  256. -1.0, 1.0, 1.0,
  257. 1.0, 1.0, 1.0,
  258. 1.0, 1.0, -1.0,
  259.  
  260. // Bottom face
  261. -1.0, -1.0, -1.0,
  262. 1.0, -1.0, -1.0,
  263. 1.0, -1.0, 1.0,
  264. -1.0, -1.0, 1.0,
  265.  
  266. // Right face
  267. 1.0, -1.0, -1.0,
  268. 1.0, 1.0, -1.0,
  269. 1.0, 1.0, 1.0,
  270. 1.0, -1.0, 1.0,
  271.  
  272. // Left face
  273. -1.0, -1.0, -1.0,
  274. -1.0, -1.0, 1.0,
  275. -1.0, 1.0, 1.0,
  276. -1.0, 1.0, -1.0
  277. ];
  278. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  279. cubeVertexPositionBuffer.itemSize = 3;
  280. cubeVertexPositionBuffer.numItems = 24;
  281.  
  282. cubeVertexNormalBuffer = gl.createBuffer();
  283. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
  284. var vertexNormals = [
  285. // Front face
  286. 0.0, 0.0, 1.0,
  287. 0.0, 0.0, 1.0,
  288. 0.0, 0.0, 1.0,
  289. 0.0, 0.0, 1.0,
  290.  
  291. // Back face
  292. 0.0, 0.0, -1.0,
  293. 0.0, 0.0, -1.0,
  294. 0.0, 0.0, -1.0,
  295. 0.0, 0.0, -1.0,
  296.  
  297. // Top face
  298. 0.0, 1.0, 0.0,
  299. 0.0, 1.0, 0.0,
  300. 0.0, 1.0, 0.0,
  301. 0.0, 1.0, 0.0,
  302.  
  303. // Bottom face
  304. 0.0, -1.0, 0.0,
  305. 0.0, -1.0, 0.0,
  306. 0.0, -1.0, 0.0,
  307. 0.0, -1.0, 0.0,
  308.  
  309. // Right face
  310. 1.0, 0.0, 0.0,
  311. 1.0, 0.0, 0.0,
  312. 1.0, 0.0, 0.0,
  313. 1.0, 0.0, 0.0,
  314.  
  315. // Left face
  316. -1.0, 0.0, 0.0,
  317. -1.0, 0.0, 0.0,
  318. -1.0, 0.0, 0.0,
  319. -1.0, 0.0, 0.0,
  320. ];
  321. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
  322. cubeVertexNormalBuffer.itemSize = 3;
  323. cubeVertexNormalBuffer.numItems = 24;
  324.  
  325. cubeVertexTextureCoordBuffer = gl.createBuffer();
  326. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
  327. var textureCoords = [
  328. // Front face
  329. 0.0, 0.0,
  330. 1.0, 0.0,
  331. 1.0, 1.0,
  332. 0.0, 1.0,
  333.  
  334. // Back face
  335. 1.0, 0.0,
  336. 1.0, 1.0,
  337. 0.0, 1.0,
  338. 0.0, 0.0,
  339.  
  340. // Top face
  341. 0.0, 1.0,
  342. 0.0, 0.0,
  343. 1.0, 0.0,
  344. 1.0, 1.0,
  345.  
  346. // Bottom face
  347. 1.0, 1.0,
  348. 0.0, 1.0,
  349. 0.0, 0.0,
  350. 1.0, 0.0,
  351.  
  352. // Right face
  353. 1.0, 0.0,
  354. 1.0, 1.0,
  355. 0.0, 1.0,
  356. 0.0, 0.0,
  357.  
  358. // Left face
  359. 0.0, 0.0,
  360. 1.0, 0.0,
  361. 1.0, 1.0,
  362. 0.0, 1.0,
  363. ];
  364. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
  365. cubeVertexTextureCoordBuffer.itemSize = 2;
  366. cubeVertexTextureCoordBuffer.numItems = 24;
  367.  
  368. cubeVertexIndexBuffer = gl.createBuffer();
  369. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
  370. var cubeVertexIndices = [
  371. 0, 1, 2, 0, 2, 3, // Front face
  372. 4, 5, 6, 4, 6, 7, // Back face
  373. 8, 9, 10, 8, 10, 11, // Top face
  374. 12, 13, 14, 12, 14, 15, // Bottom face
  375. 16, 17, 18, 16, 18, 19, // Right face
  376. 20, 21, 22, 20, 22, 23 // Left face
  377. ];
  378. gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
  379. cubeVertexIndexBuffer.itemSize = 1;
  380. cubeVertexIndexBuffer.numItems = 36;
  381.  
  382.  
  383. var latitudeBands = 30;
  384. var longitudeBands = 30;
  385. var radius = 2;
  386.  
  387. var vertexPositionData = [];
  388. var normalData = [];
  389. var textureCoordData = [];
  390. for (var latNumber=0; latNumber <= latitudeBands; latNumber++) {
  391. var theta = latNumber * Math.PI / latitudeBands;
  392. var sinTheta = Math.sin(theta);
  393. var cosTheta = Math.cos(theta);
  394.  
  395. for (var longNumber=0; longNumber <= longitudeBands; longNumber++) {
  396. var phi = longNumber * 2 * Math.PI / longitudeBands;
  397. var sinPhi = Math.sin(phi);
  398. var cosPhi = Math.cos(phi);
  399.  
  400. var x = cosPhi * sinTheta;
  401. var y = cosTheta;
  402. var z = sinPhi * sinTheta;
  403. var u = 1 - (longNumber / longitudeBands);
  404. var v = 1 - (latNumber / latitudeBands);
  405.  
  406. normalData.push(x);
  407. normalData.push(y);
  408. normalData.push(z);
  409. textureCoordData.push(u);
  410. textureCoordData.push(v);
  411. vertexPositionData.push(radius * x);
  412. vertexPositionData.push(radius * y);
  413. vertexPositionData.push(radius * z);
  414. }
  415. }
  416.  
  417. var indexData = [];
  418. for (var latNumber=0; latNumber < latitudeBands; latNumber++) {
  419. for (var longNumber=0; longNumber < longitudeBands; longNumber++) {
  420. var first = (latNumber * (longitudeBands + 1)) + longNumber;
  421. var second = first + longitudeBands + 1;
  422. indexData.push(first);
  423. indexData.push(second);
  424. indexData.push(first + 1);
  425.  
  426. indexData.push(second);
  427. indexData.push(second + 1);
  428. indexData.push(first + 1);
  429. }
  430. }
  431.  
  432. moonVertexNormalBuffer = gl.createBuffer();
  433. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexNormalBuffer);
  434. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData), gl.STATIC_DRAW);
  435. moonVertexNormalBuffer.itemSize = 3;
  436. moonVertexNormalBuffer.numItems = normalData.length / 3;
  437.  
  438. moonVertexTextureCoordBuffer = gl.createBuffer();
  439. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexTextureCoordBuffer);
  440. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordData), gl.STATIC_DRAW);
  441. moonVertexTextureCoordBuffer.itemSize = 2;
  442. moonVertexTextureCoordBuffer.numItems = textureCoordData.length / 2;
  443.  
  444. moonVertexPositionBuffer = gl.createBuffer();
  445. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexPositionBuffer);
  446. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositionData), gl.STATIC_DRAW);
  447. moonVertexPositionBuffer.itemSize = 3;
  448. moonVertexPositionBuffer.numItems = vertexPositionData.length / 3;
  449.  
  450. moonVertexIndexBuffer = gl.createBuffer();
  451. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, moonVertexIndexBuffer);
  452. gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), gl.STREAM_DRAW);
  453. moonVertexIndexBuffer.itemSize = 1;
  454. moonVertexIndexBuffer.numItems = indexData.length;
  455.  
  456. //------------
  457.  
  458. sunVertexNormalBuffer = gl.createBuffer();
  459. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexNormalBuffer);
  460. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData), gl.STATIC_DRAW);
  461. sunVertexNormalBuffer.itemSize = 3;
  462. sunVertexNormalBuffer.numItems = normalData.length / 3;
  463.  
  464. sunVertexTextureCoordBuffer = gl.createBuffer();
  465. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexTextureCoordBuffer);
  466. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordData), gl.STATIC_DRAW);
  467. sunVertexTextureCoordBuffer.itemSize = 2;
  468. sunVertexTextureCoordBuffer.numItems = textureCoordData.length / 2;
  469.  
  470. sunVertexPositionBuffer = gl.createBuffer();
  471. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexPositionBuffer);
  472. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositionData), gl.STATIC_DRAW);
  473. sunVertexPositionBuffer.itemSize = 3;
  474. sunVertexPositionBuffer.numItems = vertexPositionData.length / 3;
  475.  
  476. sunVertexIndexBuffer = gl.createBuffer();
  477. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sunVertexIndexBuffer);
  478. gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), gl.STREAM_DRAW);
  479. sunVertexIndexBuffer.itemSize = 1;
  480. sunVertexIndexBuffer.numItems = indexData.length;
  481.  
  482. //---------------
  483. }
  484.  
  485.  
  486. var moonAngle = 80;
  487. var cubeAngle = 0;
  488.  
  489. function drawScene() {
  490. gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  491. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  492.  
  493. mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
  494.  
  495. var lighting = document.getElementById("lighting").checked;
  496. gl.uniform1i(shaderProgram.useLightingUniform, lighting);
  497. if (lighting) {
  498. gl.uniform3f(
  499. shaderProgram.ambientColorUniform,
  500. parseFloat(document.getElementById("ambientR").value),
  501. parseFloat(document.getElementById("ambientG").value),
  502. parseFloat(document.getElementById("ambientB").value)
  503. );
  504.  
  505. gl.uniform3f(
  506. shaderProgram.pointLightingLocationUniform,
  507. parseFloat(document.getElementById("lightPositionX").value),
  508. parseFloat(document.getElementById("lightPositionY").value),
  509. parseFloat(document.getElementById("lightPositionZ").value)
  510. );
  511.  
  512. gl.uniform3f(
  513. shaderProgram.pointLightingColorUniform,
  514. parseFloat(document.getElementById("pointR").value),
  515. parseFloat(document.getElementById("pointG").value),
  516. parseFloat(document.getElementById("pointB").value)
  517. );
  518. }
  519.  
  520. mat4.identity(mvMatrix);
  521.  
  522. mat4.translate(mvMatrix, [0, 0, -50]);
  523.  
  524. mvPushMatrix();
  525. mat4.rotate(mvMatrix, degToRad(moonAngle), [1, 5, 0]);
  526. mat4.translate(mvMatrix, [10, 0, 0]);
  527. gl.activeTexture(gl.TEXTURE0);
  528. gl.bindTexture(gl.TEXTURE_2D, moonTexture);
  529. gl.uniform1i(shaderProgram.samplerUniform, 0);
  530.  
  531. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexPositionBuffer);
  532. gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, moonVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  533.  
  534. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexTextureCoordBuffer);
  535. gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, moonVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
  536.  
  537. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexNormalBuffer);
  538. gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, moonVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
  539.  
  540. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, moonVertexIndexBuffer);
  541. setMatrixUniforms();
  542. gl.drawElements(gl.TRIANGLES, moonVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  543. mvPushMatrix();
  544. mat4.rotate(mvMatrix, degToRad(moonAngle), [0, 1, 0]);
  545. mat4.translate(mvMatrix, [6, 0, 0]);
  546. mat4.scale([3, 0, 0], 0.1);
  547. gl.activeTexture(gl.TEXTURE0);
  548. gl.bindTexture(gl.TEXTURE_2D, moonTexture1);
  549. gl.uniform1i(shaderProgram.samplerUniform, 0);
  550.  
  551. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexPositionBuffer);
  552. gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, sunVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  553.  
  554. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexTextureCoordBuffer);
  555. gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, sunVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
  556.  
  557. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexNormalBuffer);
  558. gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, sunVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
  559.  
  560. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sunVertexIndexBuffer);
  561. setMatrixUniforms();
  562. gl.drawElements(gl.TRIANGLES, sunVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  563.  
  564.  
  565. mvPopMatrix();
  566. mvPopMatrix();
  567.  
  568. mvPushMatrix();
  569. mat4.rotate(mvMatrix, degToRad(cubeAngle), [10, 1, 0]);
  570. mat4.translate(mvMatrix, [0, 0, 0]);
  571. gl.activeTexture(gl.TEXTURE0);
  572. gl.bindTexture(gl.TEXTURE_2D, crateTexture);
  573. gl.uniform1i(shaderProgram.samplerUniform, 0);
  574.  
  575. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexPositionBuffer);
  576. gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, moonVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  577.  
  578. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexTextureCoordBuffer);
  579. gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, moonVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
  580.  
  581. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexNormalBuffer);
  582. gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, moonVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
  583.  
  584. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, moonVertexIndexBuffer);
  585. setMatrixUniforms();
  586. gl.drawElements(gl.TRIANGLES, moonVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  587.  
  588.  
  589.  
  590.  
  591.  
  592. mvPopMatrix();
  593. }
  594.  
  595.  
  596. var lastTime = 0;
  597.  
  598. function animate() {
  599. var timeNow = new Date().getTime();
  600. if (lastTime != 0) {
  601. var elapsed = timeNow - lastTime;
  602.  
  603. moonAngle += 0.05 * elapsed;
  604. cubeAngle += 0.05 * elapsed;
  605. }
  606. lastTime = timeNow;
  607. }
  608.  
  609.  
  610.  
  611. function tick() {
  612. requestAnimFrame(tick);
  613. drawScene();
  614. animate();
  615. }
  616.  
  617.  
  618. function webGLStart() {
  619. var canvas = document.getElementById("lesson12-canvas");
  620. initGL(canvas);
  621. initShaders();
  622. initBuffers();
  623. initTextures();
  624.  
  625. gl.clearColor(0.0, 0.0, 0.0, 1.0);
  626. gl.enable(gl.DEPTH_TEST);
  627.  
  628. tick();
  629. }
  630.  
  631. </script>
  632.  
  633.  
  634. </head>
  635.  
  636.  
  637. <body onload="webGLStart();">
  638. <a href="http://learningwebgl.com/blog/?p=1359">&lt;&lt; Back to Lesson 12</a><br>
  639.  
  640. <canvas id="lesson12-canvas" style="border: none;" width="500" height="500"></canvas>
  641. <br>
  642.  
  643. <input id="lighting" checked="checked" type="checkbox"> Use lighting<br>
  644. <br>
  645.  
  646. <h2>Point light:</h2>
  647.  
  648. <table style="border: 0; padding: 10px;">
  649. <tbody><tr>
  650. <td><b>Location:</b>
  651. </td><td>X: <input id="lightPositionX" value="0.0" type="text">
  652. </td><td>Y: <input id="lightPositionY" value="0.0" type="text">
  653. </td><td>Z: <input id="lightPositionZ" value="-20.0" type="text">
  654. </td></tr>
  655. <tr>
  656. <td><b>Colour:</b>
  657. </td><td>R: <input id="pointR" value="0.2" type="text">
  658. </td><td>G: <input id="pointG" value="0.8" type="text">
  659. </td><td>B: <input id="pointB" value="0.8" type="text">
  660. </td></tr>
  661. </tbody></table>
  662.  
  663. <h2>Ambient light:</h2>
  664.  
  665. <table style="border: 0; padding: 10px;">
  666. <tbody><tr>
  667. <td><b>Colour:</b>
  668. </td><td>R: <input id="ambientR" value="0" type="text">
  669. </td><td>G: <input id="ambientG" value="1" type="text">
  670. </td><td>B: <input id="ambientB" value="1" type="text">
  671. </td></tr>
  672. </tbody></table>
  673. <br>
  674.  
  675. Moon texture courtesy of <a href="http://maps.jpl.nasa.gov/">the Jet Propulsion Laboratory</a>.
  676. <br>
  677. <br>
  678.  
  679. <a href="http://learningwebgl.com/blog/?p=1359">&lt;&lt; Back to Lesson 12</a><br>
  680.  
  681.  
  682.  
  683. </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!