API tools faq
paste
Advertisement
Guest User

Untitled

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