API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 18th, 2019
99
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.73 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; //add
  163. var crateTexture;
  164.  
  165. //dodalem tekstury
  166. function initTextures() {
  167. moonTexture = gl.createTexture();
  168. moonTexture.image = new Image();
  169. moonTexture.image.onload = function () {
  170. handleLoadedTexture(moonTexture)
  171. }
  172. moonTexture.image.src = "earth.gif";
  173.  
  174. moonTexture1 = gl.createTexture();
  175. moonTexture1.image = new Image();
  176. moonTexture1.image.onload = function () {
  177. handleLoadedTexture(moonTexture1)
  178. }
  179. moonTexture1.image.src = "moon.gif";
  180.  
  181. crateTexture = gl.createTexture();
  182. crateTexture.image = new Image();
  183. crateTexture.image.onload = function () {
  184. handleLoadedTexture(crateTexture)
  185. }
  186. crateTexture.image.src = "sun.gif";
  187. }
  188.  
  189.  
  190. var mvMatrix = mat4.create();
  191. var mvMatrixStack = [];
  192. var pMatrix = mat4.create();
  193.  
  194. function mvPushMatrix() {
  195. var copy = mat4.create();
  196. mat4.set(mvMatrix, copy);
  197. mvMatrixStack.push(copy);
  198. }
  199.  
  200. function mvPopMatrix() {
  201. if (mvMatrixStack.length == 0) {
  202. throw "Invalid popMatrix!";
  203. }
  204. mvMatrix = mvMatrixStack.pop();
  205. }
  206.  
  207. function setMatrixUniforms() {
  208. gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
  209. gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
  210.  
  211. var normalMatrix = mat3.create();
  212. mat4.toInverseMat3(mvMatrix, normalMatrix);
  213. mat3.transpose(normalMatrix);
  214. gl.uniformMatrix3fv(shaderProgram.nMatrixUniform, false, normalMatrix);
  215. }
  216.  
  217.  
  218. function degToRad(degrees) {
  219. return degrees * Math.PI / 180;
  220. }
  221.  
  222.  
  223. var cubeVertexPositionBuffer;
  224. var cubeVertexNormalBuffer;
  225. var cubeVertexTextureCoordBuffer;
  226. var cubeVertexIndexBuffer;
  227.  
  228. var moonVertexPositionBuffer;
  229. var moonVertexNormalBuffer;
  230. var moonVertexTextureCoordBuffer;
  231. var moonVertexIndexBuffer;
  232.  
  233. //dodalem sun
  234. var sunVertexPositionBuffer;
  235. var sunVertexNormalBuffer;
  236. var sunVertexTextureCoordBuffer;
  237. var sunVertexIndexBuffer;
  238.  
  239.  
  240. function initBuffers() {
  241. cubeVertexPositionBuffer = gl.createBuffer();
  242. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
  243. vertices = [
  244. // Front face
  245. -1.0, -1.0, 1.0,
  246. 1.0, -1.0, 1.0,
  247. 1.0, 1.0, 1.0,
  248. -1.0, 1.0, 1.0,
  249.  
  250. // Back face
  251. -1.0, -1.0, -1.0,
  252. -1.0, 1.0, -1.0,
  253. 1.0, 1.0, -1.0,
  254. 1.0, -1.0, -1.0,
  255.  
  256. // Top face
  257. -1.0, 1.0, -1.0,
  258. -1.0, 1.0, 1.0,
  259. 1.0, 1.0, 1.0,
  260. 1.0, 1.0, -1.0,
  261.  
  262. // Bottom face
  263. -1.0, -1.0, -1.0,
  264. 1.0, -1.0, -1.0,
  265. 1.0, -1.0, 1.0,
  266. -1.0, -1.0, 1.0,
  267.  
  268. // Right face
  269. 1.0, -1.0, -1.0,
  270. 1.0, 1.0, -1.0,
  271. 1.0, 1.0, 1.0,
  272. 1.0, -1.0, 1.0,
  273.  
  274. // Left face
  275. -1.0, -1.0, -1.0,
  276. -1.0, -1.0, 1.0,
  277. -1.0, 1.0, 1.0,
  278. -1.0, 1.0, -1.0
  279. ];
  280. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  281. cubeVertexPositionBuffer.itemSize = 3;
  282. cubeVertexPositionBuffer.numItems = 24;
  283.  
  284. cubeVertexNormalBuffer = gl.createBuffer();
  285. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
  286. var vertexNormals = [
  287. // Front face
  288. 0.0, 0.0, 1.0,
  289. 0.0, 0.0, 1.0,
  290. 0.0, 0.0, 1.0,
  291. 0.0, 0.0, 1.0,
  292.  
  293. // Back face
  294. 0.0, 0.0, -1.0,
  295. 0.0, 0.0, -1.0,
  296. 0.0, 0.0, -1.0,
  297. 0.0, 0.0, -1.0,
  298.  
  299. // Top face
  300. 0.0, 1.0, 0.0,
  301. 0.0, 1.0, 0.0,
  302. 0.0, 1.0, 0.0,
  303. 0.0, 1.0, 0.0,
  304.  
  305. // Bottom face
  306. 0.0, -1.0, 0.0,
  307. 0.0, -1.0, 0.0,
  308. 0.0, -1.0, 0.0,
  309. 0.0, -1.0, 0.0,
  310.  
  311. // Right face
  312. 1.0, 0.0, 0.0,
  313. 1.0, 0.0, 0.0,
  314. 1.0, 0.0, 0.0,
  315. 1.0, 0.0, 0.0,
  316.  
  317. // Left face
  318. -1.0, 0.0, 0.0,
  319. -1.0, 0.0, 0.0,
  320. -1.0, 0.0, 0.0,
  321. -1.0, 0.0, 0.0,
  322. ];
  323. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
  324. cubeVertexNormalBuffer.itemSize = 3;
  325. cubeVertexNormalBuffer.numItems = 24;
  326.  
  327. cubeVertexTextureCoordBuffer = gl.createBuffer();
  328. gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
  329. var textureCoords = [
  330. // Front face
  331. 0.0, 0.0,
  332. 1.0, 0.0,
  333. 1.0, 1.0,
  334. 0.0, 1.0,
  335.  
  336. // Back face
  337. 1.0, 0.0,
  338. 1.0, 1.0,
  339. 0.0, 1.0,
  340. 0.0, 0.0,
  341.  
  342. // Top face
  343. 0.0, 1.0,
  344. 0.0, 0.0,
  345. 1.0, 0.0,
  346. 1.0, 1.0,
  347.  
  348. // Bottom face
  349. 1.0, 1.0,
  350. 0.0, 1.0,
  351. 0.0, 0.0,
  352. 1.0, 0.0,
  353.  
  354. // Right face
  355. 1.0, 0.0,
  356. 1.0, 1.0,
  357. 0.0, 1.0,
  358. 0.0, 0.0,
  359.  
  360. // Left face
  361. 0.0, 0.0,
  362. 1.0, 0.0,
  363. 1.0, 1.0,
  364. 0.0, 1.0,
  365. ];
  366. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
  367. cubeVertexTextureCoordBuffer.itemSize = 2;
  368. cubeVertexTextureCoordBuffer.numItems = 24;
  369.  
  370. cubeVertexIndexBuffer = gl.createBuffer();
  371. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
  372. var cubeVertexIndices = [
  373. 0, 1, 2, 0, 2, 3, // Front face
  374. 4, 5, 6, 4, 6, 7, // Back face
  375. 8, 9, 10, 8, 10, 11, // Top face
  376. 12, 13, 14, 12, 14, 15, // Bottom face
  377. 16, 17, 18, 16, 18, 19, // Right face
  378. 20, 21, 22, 20, 22, 23 // Left face
  379. ];
  380. gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
  381. cubeVertexIndexBuffer.itemSize = 1;
  382. cubeVertexIndexBuffer.numItems = 36;
  383.  
  384.  
  385. var latitudeBands = 30;
  386. var longitudeBands = 30;
  387. var radius = 2;
  388.  
  389. var vertexPositionData = [];
  390. var normalData = [];
  391. var textureCoordData = [];
  392. for (var latNumber=0; latNumber <= latitudeBands; latNumber++) {
  393. var theta = latNumber * Math.PI / latitudeBands;
  394. var sinTheta = Math.sin(theta);
  395. var cosTheta = Math.cos(theta);
  396.  
  397. for (var longNumber=0; longNumber <= longitudeBands; longNumber++) {
  398. var phi = longNumber * 2 * Math.PI / longitudeBands;
  399. var sinPhi = Math.sin(phi);
  400. var cosPhi = Math.cos(phi);
  401.  
  402. var x = cosPhi * sinTheta;
  403. var y = cosTheta;
  404. var z = sinPhi * sinTheta;
  405. var u = 1 - (longNumber / longitudeBands);
  406. var v = 1 - (latNumber / latitudeBands);
  407.  
  408. normalData.push(x);
  409. normalData.push(y);
  410. normalData.push(z);
  411. textureCoordData.push(u);
  412. textureCoordData.push(v);
  413. vertexPositionData.push(radius * x);
  414. vertexPositionData.push(radius * y);
  415. vertexPositionData.push(radius * z);
  416. }
  417. }
  418.  
  419. var indexData = [];
  420. for (var latNumber=0; latNumber < latitudeBands; latNumber++) {
  421. for (var longNumber=0; longNumber < longitudeBands; longNumber++) {
  422. var first = (latNumber * (longitudeBands + 1)) + longNumber;
  423. var second = first + longitudeBands + 1;
  424. indexData.push(first);
  425. indexData.push(second);
  426. indexData.push(first + 1);
  427.  
  428. indexData.push(second);
  429. indexData.push(second + 1);
  430. indexData.push(first + 1);
  431. }
  432. }
  433.  
  434. moonVertexNormalBuffer = gl.createBuffer();
  435. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexNormalBuffer);
  436. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData), gl.STATIC_DRAW);
  437. moonVertexNormalBuffer.itemSize = 3;
  438. moonVertexNormalBuffer.numItems = normalData.length / 3;
  439.  
  440. moonVertexTextureCoordBuffer = gl.createBuffer();
  441. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexTextureCoordBuffer);
  442. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordData), gl.STATIC_DRAW);
  443. moonVertexTextureCoordBuffer.itemSize = 2;
  444. moonVertexTextureCoordBuffer.numItems = textureCoordData.length / 2;
  445.  
  446. moonVertexPositionBuffer = gl.createBuffer();
  447. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexPositionBuffer);
  448. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositionData), gl.STATIC_DRAW);
  449. moonVertexPositionBuffer.itemSize = 3;
  450. moonVertexPositionBuffer.numItems = vertexPositionData.length / 3;
  451.  
  452. moonVertexIndexBuffer = gl.createBuffer();
  453. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, moonVertexIndexBuffer);
  454. gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), gl.STREAM_DRAW);
  455. moonVertexIndexBuffer.itemSize = 1;
  456. moonVertexIndexBuffer.numItems = indexData.length;
  457.  
  458. //------------
  459.  
  460. sunVertexNormalBuffer = gl.createBuffer();
  461. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexNormalBuffer);
  462. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData), gl.STATIC_DRAW);
  463. sunVertexNormalBuffer.itemSize = 3;
  464. sunVertexNormalBuffer.numItems = normalData.length / 3;
  465.  
  466. sunVertexTextureCoordBuffer = gl.createBuffer();
  467. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexTextureCoordBuffer);
  468. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordData), gl.STATIC_DRAW);
  469. sunVertexTextureCoordBuffer.itemSize = 2;
  470. sunVertexTextureCoordBuffer.numItems = textureCoordData.length / 2;
  471.  
  472. sunVertexPositionBuffer = gl.createBuffer();
  473. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexPositionBuffer);
  474. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositionData), gl.STATIC_DRAW);
  475. sunVertexPositionBuffer.itemSize = 3;
  476. sunVertexPositionBuffer.numItems = vertexPositionData.length / 3;
  477.  
  478. sunVertexIndexBuffer = gl.createBuffer();
  479. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sunVertexIndexBuffer);
  480. gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), gl.STREAM_DRAW);
  481. sunVertexIndexBuffer.itemSize = 1;
  482. sunVertexIndexBuffer.numItems = indexData.length;
  483.  
  484. //---------------
  485. }
  486.  
  487.  
  488. var moonAngle = 180;
  489. var cubeAngle = 0;
  490.  
  491. function drawScene() {
  492. gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  493. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  494.  
  495. mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
  496.  
  497. var lighting = document.getElementById("lighting").checked;
  498. gl.uniform1i(shaderProgram.useLightingUniform, lighting);
  499. if (lighting) {
  500. gl.uniform3f(
  501. shaderProgram.ambientColorUniform,
  502. parseFloat(document.getElementById("ambientR").value),
  503. parseFloat(document.getElementById("ambientG").value),
  504. parseFloat(document.getElementById("ambientB").value)
  505. );
  506.  
  507. gl.uniform3f(
  508. shaderProgram.pointLightingLocationUniform,
  509. parseFloat(document.getElementById("lightPositionX").value),
  510. parseFloat(document.getElementById("lightPositionY").value),
  511. parseFloat(document.getElementById("lightPositionZ").value)
  512. );
  513.  
  514. gl.uniform3f(
  515. shaderProgram.pointLightingColorUniform,
  516. parseFloat(document.getElementById("pointR").value),
  517. parseFloat(document.getElementById("pointG").value),
  518. parseFloat(document.getElementById("pointB").value)
  519. );
  520. }
  521.  
  522. mat4.identity(mvMatrix);
  523. //odleglosc kamery
  524. mat4.translate(mvMatrix, [0, 0, -50]);
  525. //ruch ziemi
  526.  
  527.  
  528. mvPushMatrix();
  529. mat4.rotate(mvMatrix, degToRad(moonAngle), [1, 100, 0]);
  530. mat4.translate(mvMatrix, [15, 0, 0]); // odleglosc od slonca
  531. gl.activeTexture(gl.TEXTURE0);
  532. gl.bindTexture(gl.TEXTURE_2D, moonTexture);
  533. gl.uniform1i(shaderProgram.samplerUniform, 0);
  534.  
  535. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexPositionBuffer);
  536. gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, moonVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  537.  
  538. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexTextureCoordBuffer);
  539. gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, moonVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
  540.  
  541. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexNormalBuffer);
  542. gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, moonVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
  543.  
  544. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, moonVertexIndexBuffer);
  545. setMatrixUniforms();
  546. gl.drawElements(gl.TRIANGLES, moonVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  547.  
  548.  
  549. mvPushMatrix();
  550. mat4.rotate(mvMatrix, degToRad(moonAngle), [0, 100, 5]);
  551. mat4.translate(mvMatrix, [6, 0, 0]);
  552. mat4.scale(mvMatrix, [0.5, 0.5, 0.5]);
  553.  
  554. gl.activeTexture(gl.TEXTURE0);
  555. gl.bindTexture(gl.TEXTURE_2D, moonTexture1);
  556. gl.uniform1i(shaderProgram.samplerUniform, 0);
  557.  
  558. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexPositionBuffer);
  559. gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, sunVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  560.  
  561. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexTextureCoordBuffer);
  562. gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, sunVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
  563.  
  564. gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexNormalBuffer);
  565. gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, sunVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
  566.  
  567. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sunVertexIndexBuffer);
  568. setMatrixUniforms();
  569. gl.drawElements(gl.TRIANGLES, sunVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  570.  
  571.  
  572. mvPopMatrix();
  573. mvPopMatrix();
  574.  
  575. mvPushMatrix();
  576. mat4.translate(mvMatrix, [0, 0, 0]);
  577. mat4.scale(mvMatrix, [2, 2, 2]);
  578.  
  579. gl.activeTexture(gl.TEXTURE0);
  580. gl.bindTexture(gl.TEXTURE_2D, crateTexture);
  581. gl.uniform1i(shaderProgram.samplerUniform, 0);
  582.  
  583. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexPositionBuffer);
  584. gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, moonVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  585.  
  586. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexTextureCoordBuffer);
  587. gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, moonVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
  588.  
  589. gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexNormalBuffer);
  590. gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, moonVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
  591.  
  592. gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, moonVertexIndexBuffer);
  593. setMatrixUniforms();
  594. gl.drawElements(gl.TRIANGLES, moonVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  595.  
  596.  
  597.  
  598.  
  599.  
  600. mvPopMatrix();
  601. }
  602.  
  603.  
  604. var lastTime = 0;
  605.  
  606. function animate() {
  607. var timeNow = new Date().getTime();
  608. if (lastTime != 0) {
  609. var elapsed = timeNow - lastTime;
  610.  
  611. moonAngle += 0.05 * elapsed;
  612. cubeAngle += 0.05 * elapsed;
  613. }
  614. lastTime = timeNow;
  615. }
  616.  
  617.  
  618.  
  619. function tick() {
  620. requestAnimFrame(tick);
  621. drawScene();
  622. animate();
  623. }
  624.  
  625.  
  626. function webGLStart() {
  627. var canvas = document.getElementById("lesson12-canvas");
  628. initGL(canvas);
  629. initShaders();
  630. initBuffers();
  631. initTextures();
  632.  
  633. gl.clearColor(0.0, 0.0, 0.0, 1.0);
  634. gl.enable(gl.DEPTH_TEST);
  635.  
  636. tick();
  637. }
  638.  
  639. </script>
  640.  
  641.  
  642. </head>
  643.  
  644.  
  645. <body onload="webGLStart();">
  646. <a href="http://learningwebgl.com/blog/?p=1359">&lt;&lt; Back to Lesson 12</a><br>
  647.  
  648. <canvas id="lesson12-canvas" style="border: none;" width="500" height="500"></canvas>
  649. <br>
  650.  
  651. <input id="lighting" checked="checked" type="checkbox"> Use lighting<br>
  652. <br>
  653.  
  654. <h2>Point light:</h2>
  655.  
  656. <table style="border: 0; padding: 10px;">
  657. <tbody><tr>
  658. <td><b>Location:</b>
  659. </td><td>X: <input id="lightPositionX" value="0.0" type="text">
  660. </td><td>Y: <input id="lightPositionY" value="0.0" type="text">
  661. </td><td>Z: <input id="lightPositionZ" value="-20.0" type="text">
  662. </td></tr>
  663. <tr>
  664. <td><b>Colour:</b>
  665. </td><td>R: <input id="pointR" value="0.2" type="text">
  666. </td><td>G: <input id="pointG" value="0.8" type="text">
  667. </td><td>B: <input id="pointB" value="0.8" type="text">
  668. </td></tr>
  669. </tbody></table>
  670.  
  671. <h2>Ambient light:</h2>
  672.  
  673. <table style="border: 0; padding: 10px;">
  674. <tbody><tr>
  675. <td><b>Colour:</b>
  676. </td><td>R: <input id="ambientR" value="1" type="text">
  677. </td><td>G: <input id="ambientG" value="0" type="text">
  678. </td><td>B: <input id="ambientB" value="0" type="text">
  679. </td></tr>
  680. </tbody></table>
  681. <br>
  682.  
  683. Moon texture courtesy of <a href="http://maps.jpl.nasa.gov/">the Jet Propulsion Laboratory</a>.
  684. <br>
  685. <br>
  686.  
  687. <a href="http://learningwebgl.com/blog/?p=1359">&lt;&lt; Back to Lesson 12</a><br>
  688.  
  689.  
  690.  
  691. </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!