API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 20th, 2020
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.67 KB | None | 0 0
raw download clone embed print report
  1.  
  2. var html=null;
  3. var gl=null;
  4.  
  5.  
  6.  
  7. /* shaders */
  8. var vertexShader=null;
  9. var fragmentShader=null;
  10. /* shader program */
  11. var shaderProgram=null;
  12.  
  13. /* vertex attributes locations */
  14. var position=null;
  15. var plot=null;
  16. /* uniform variables locations */
  17.  
  18.  
  19.  
  20. /* input vertices of cube triangles */
  21.  
  22.  
  23. var arrayBuffer=null;
  24.  
  25. /* texture parameters */
  26. // var textureId=null;
  27. // var textureUnit=0; // default
  28.  
  29. var vertexShaderSource=`attribute vec3 aPosition;
  30. attribute vec3 aNormal;
  31. uniform mat4 projection;
  32. uniform mat4 rotation;
  33. uniform vec3 move;
  34. varying vec3 fragmentnormal;
  35. void main()
  36. {
  37. vec4 pos = rotation * vec4(aPosition, 1.0) + vec4(move, 0.0);
  38. vec4 normNorm=rotation*vec4(aNormal,1.0);
  39. fragmentnormal=vec3(normNorm[0],normNorm[1],normNorm[2]);
  40. gl_Position = projection * pos;
  41. }`
  42.  
  43. var fragmentShaderSource=`
  44. precision mediump float;
  45. varying vec3 fragmentnormal;
  46. void main()
  47. {
  48. vec3 lightD=vec3(-0.2,-1.0,-0.3);
  49. float ambientStrength = 0.1;
  50. vec3 ambient = ambientStrength * vec3(1.0,1.0,1.0);
  51. vec3 normal = normalize(fragmentnormal);
  52. if (gl_FrontFacing) {
  53. normal = -normal;
  54. }
  55. vec3 lightDir =normalize(-lightD);
  56. float diff = max(abs(dot(normal,lightDir)),0.0);
  57. vec3 diffuse= diff *vec3(1.0,1.0,1.0);
  58. vec3 result = (ambient+diffuse) * vec3(1.0,1.0,1.0);
  59. gl_FragColor = vec4(result, 1.0);
  60. }`
  61.  
  62. var sinxcosyBuffer=null;
  63. var rippleBuffer=null;
  64. var pyrammidBuffer=null;
  65. var stairsBuffer = null;
  66. var normalLocation=null;
  67. var makeShaderProgram= function(gl){
  68. /* Parameters:
  69. gl - WebGL context
  70. */
  71.  
  72. vertexShader = gl.createShader(gl.VERTEX_SHADER);
  73. gl.shaderSource(vertexShader, vertexShaderSource);
  74. gl.compileShader(vertexShader);
  75. if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
  76. console.log(gl.getShaderInfoLog(vertexShader));
  77. return null;
  78. }
  79.  
  80. fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  81. gl.shaderSource(fragmentShader, fragmentShaderSource);
  82. gl.compileShader(fragmentShader);
  83. if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
  84. console.log(gl.getShaderInfoLog(fragmentShader));
  85. return null;
  86. }
  87.  
  88. shaderProgram = gl.createProgram();
  89. gl.attachShader(shaderProgram, vertexShader);
  90. gl.attachShader(shaderProgram, fragmentShader);
  91. gl.linkProgram(shaderProgram);
  92. if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  93. console.log("Could not initialise shaders");
  94. return null;
  95. }
  96.  
  97. gl.useProgram(shaderProgram);
  98.  
  99. /* set vertex attributes locations */
  100. aPositionLocation=gl.getAttribLocation(shaderProgram, "aPosition");
  101. normalLocation=gl.getAttribLocation(shaderProgram,"aNormal");
  102.  
  103. // gl.bindAttribLocation(shaderProgram,"aNormal",2);
  104.  
  105. /* set uniform variables locations */
  106. projectionLocation=gl.getUniformLocation(shaderProgram, "projection");
  107. rotationLocation=gl.getUniformLocation(shaderProgram, "rotation");
  108. moveLocation=gl.getUniformLocation(shaderProgram, "move");
  109.  
  110. /* load data buffers */
  111. sinxcosyBuffer= gl.createBuffer();
  112. gl.bindBuffer(gl.ARRAY_BUFFER, sinxcosyBuffer );
  113. let sinxcosyArray=[]
  114. for (let i = -500; i < 500; i+=2) {
  115. for(let j=-500 ; j<500;j+=2)
  116. sinxcosyArray.push(i/100,j/100,Math.sin(i/100)*Math.cos(j/100));
  117. }
  118. let sinxcosyArray2=[]
  119. for(let i=0;i<sinxcosyArray.length;i+=3){
  120. if(i+1503<sinxcosyArray.length && (i + 3) % 500 != 0){
  121.  
  122. vx=sinxcosyArray[i+3]-sinxcosyArray[i];
  123. vy=sinxcosyArray[i+4]-sinxcosyArray[i+1];
  124. vz=sinxcosyArray[i+5]-sinxcosyArray[i+2];
  125. wx=sinxcosyArray[i+1500]-sinxcosyArray[i];
  126. wy=sinxcosyArray[i+1501]-sinxcosyArray[i+1];
  127. wz=sinxcosyArray[i+1502]-sinxcosyArray[i+2];
  128.  
  129. nx=(vy*wz)-(vz*wy);
  130. ny=(vz*wx)-(vx*wz);
  131. nz=(vx*wy)-(vy*wx);
  132.  
  133.  
  134. sinxcosyArray2.push(sinxcosyArray[i],sinxcosyArray[i+1],sinxcosyArray[i+2]);
  135. sinxcosyArray2.push(nx,ny,nz);
  136.  
  137. sinxcosyArray2.push(sinxcosyArray[i+3],sinxcosyArray[i+4],sinxcosyArray[i+5]);
  138. sinxcosyArray2.push(nx,ny,nz);
  139.  
  140. sinxcosyArray2.push(sinxcosyArray[i+1500],sinxcosyArray[i+1501],sinxcosyArray[i+1502])
  141. sinxcosyArray2.push(nx,ny,nz);
  142.  
  143. wx=sinxcosyArray[i+1503]-sinxcosyArray[i+1500];
  144. wy=sinxcosyArray[i+1504]-sinxcosyArray[i+1501];
  145. wz=sinxcosyArray[i+1505]-sinxcosyArray[i+1502];
  146. vx=sinxcosyArray[i+3]-sinxcosyArray[i+1500];
  147. vy=sinxcosyArray[i+4]-sinxcosyArray[i+1501];
  148. vz=sinxcosyArray[i+5]-sinxcosyArray[i+1502];
  149. nx=(vy*wz)-(vz*wy);
  150. ny=(vz*wx)-(vx*wz);
  151. nz=(vx*wy)-(vy*wx);
  152.  
  153. sinxcosyArray2.push(sinxcosyArray[i+1500],sinxcosyArray[i+1501],sinxcosyArray[i+1502])
  154. sinxcosyArray2.push(nx,ny,nz);
  155.  
  156. sinxcosyArray2.push(sinxcosyArray[i+1503],sinxcosyArray[i+1504],sinxcosyArray[i+1505])
  157. sinxcosyArray2.push(nx,ny,nz);
  158.  
  159. sinxcosyArray2.push(sinxcosyArray[i+3],sinxcosyArray[i+4],sinxcosyArray[i+5]);
  160. sinxcosyArray2.push(nx,ny,nz);
  161. }
  162.  
  163. }
  164. console.log(sinxcosyArray2.length)
  165. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(sinxcosyArray2) , gl.STATIC_DRAW );
  166. plot=sinxcosyBuffer
  167. rippleBuffer=gl.createBuffer();
  168. gl.bindBuffer(gl.ARRAY_BUFFER,rippleBuffer);
  169. let rippleArray=[];
  170. for (let i = -500; i < 500; i+=2) {
  171. for(let j=-500 ; j<500;j+=2)
  172. rippleArray.push(i/100,j/100, Math.sin(10*(i/100)*(i/100)+(j/100)*(j/100))/10 );
  173. }
  174. let rippleArray2=[];
  175. for(let i=0;i<rippleArray.length;i+=3){
  176. vx=rippleArray[i+3]-rippleArray[i];
  177. vy=rippleArray[i+4]-rippleArray[i+1];
  178. vz=rippleArray[i+5]-rippleArray[i+2];
  179. wx=rippleArray[i+1500]-rippleArray[i];
  180. wy=rippleArray[i+1501]-rippleArray[i+1];
  181. wz=rippleArray[i+1502]-rippleArray[i+2];
  182.  
  183. nx=(vy*wz)-(vz*wy);
  184. ny=(vz*wx)-(vx*wz);
  185. nz=(vx*wy)-(vy*wx);
  186.  
  187. rippleArray2.push(rippleArray[i],rippleArray[i+1],rippleArray[i+2]);
  188. rippleArray2.push(nx,ny,nz);
  189.  
  190. rippleArray2.push(rippleArray[i+3],rippleArray[i+4],rippleArray[i+5]);
  191. rippleArray2.push(nx,ny,nz);
  192.  
  193. rippleArray2.push(rippleArray[i+1500],rippleArray[i+1501],rippleArray[i+1502])
  194. rippleArray2.push(nx,ny,nz);
  195.  
  196. vx=rippleArray[i+1503]-rippleArray[i+1500];
  197. vy=rippleArray[i+1504]-rippleArray[i+1501];
  198. vz=rippleArray[i+1505]-rippleArray[i+1502];
  199. wx=rippleArray[i+3]-rippleArray[i+1503];
  200. wy=rippleArray[i+4]-rippleArray[i+1504];
  201. wz=rippleArray[i+5]-rippleArray[i+1505];
  202. nx=(vy*wz)-(vz*wy);
  203. ny=(vz*wx)-(vx*wz);
  204. nz=(vx*wy)-(vy*wx);
  205.  
  206. rippleArray2.push(rippleArray[i+1500],rippleArray[i+1501],rippleArray[i+1502])
  207. rippleArray2.push(nx,ny,nz);
  208.  
  209. rippleArray2.push(rippleArray[i+1503],rippleArray[i+1504],rippleArray[i+1505])
  210. rippleArray2.push(nx,ny,nz);
  211.  
  212. rippleArray2.push(rippleArray[i+3],rippleArray[i+4],rippleArray[i+5]);
  213. rippleArray2.push(nx,ny,nz);
  214. }
  215. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(rippleArray2) , gl.STATIC_DRAW );
  216. console.log(rippleArray2.length)
  217. pyrammidBuffer=gl.createBuffer();
  218. gl.bindBuffer(gl.ARRAY_BUFFER,pyrammidBuffer);
  219. let pyramidArray=[];
  220. for (let i = -500; i < 500; i+=2) {
  221. for(let j=-500 ; j<500;j+=2)
  222. pyramidArray.push(i/100,j/100, 1-Math.abs((i/100)+(j/100))-Math.abs((j/100)-(i/100)) );
  223. }
  224. let pyramidArray2=[];
  225. for(let i=0;i<pyramidArray.length;i+=3){
  226. vx=pyramidArray[i+3]-pyramidArray[i];
  227. vy=pyramidArray[i+4]-pyramidArray[i+1];
  228. vz=pyramidArray[i+5]-pyramidArray[i+2];
  229. wx=pyramidArray[i+1500]-pyramidArray[i];
  230. wy=pyramidArray[i+1501]-pyramidArray[i+1];
  231. wz=pyramidArray[i+1502]-pyramidArray[i+2];
  232.  
  233. nx=(vy*wz)-(vz*wy);
  234. ny=(vz*wx)-(vx*wz);
  235. nz=(vx*wy)-(vy*wx);
  236.  
  237. pyramidArray2.push(pyramidArray[i],pyramidArray[i+1],pyramidArray[i+2]);
  238. pyramidArray2.push(nx,ny,nz);
  239.  
  240. pyramidArray2.push(pyramidArray[i+3],pyramidArray[i+4],pyramidArray[i+5]);
  241. pyramidArray2.push(nx,ny,nz);
  242.  
  243. pyramidArray2.push(pyramidArray[i+1500],pyramidArray[i+1501],pyramidArray[i+1502])
  244. pyramidArray2.push(nx,ny,nz);
  245.  
  246. vx=pyramidArray[i+1503]-pyramidArray[i+1500];
  247. vy=pyramidArray[i+1504]-pyramidArray[i+1501];
  248. vz=pyramidArray[i+1505]-pyramidArray[i+1502];
  249. wx=pyramidArray[i+3]-pyramidArray[i+1503];
  250. wy=pyramidArray[i+4]-pyramidArray[i+1504];
  251. wz=pyramidArray[i+5]-pyramidArray[i+1505];
  252. nx=(vy*wz)-(vz*wy);
  253. ny=(vz*wx)-(vx*wz);
  254. nz=(vx*wy)-(vy*wx);
  255.  
  256. pyramidArray2.push(pyramidArray[i+1500],pyramidArray[i+1501],pyramidArray[i+1502])
  257. pyramidArray2.push(nx,ny,nz);
  258.  
  259. pyramidArray2.push(pyramidArray[i+3],pyramidArray[i+4],pyramidArray[i+5]);
  260. pyramidArray2.push(nx,ny,nz);
  261.  
  262. pyramidArray2.push(pyramidArray[i+1503],pyramidArray[i+1504],pyramidArray[i+1505])
  263. pyramidArray2.push(nx,ny,nz);
  264.  
  265. }
  266. console.log(pyramidArray2.length)
  267. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pyramidArray2) , gl.STATIC_DRAW );
  268.  
  269. // SUCCESS
  270. return shaderProgram;
  271. };
  272.  
  273. var drawBufferFace= function ( gl, rotation, move, projection, buffer ) {
  274. /* Parameters:
  275. gl - WebGL context
  276. view, projection - gl matrices 4x4 (column major)
  277. textureUnit - integer from [0 ... gl.MAX_TEXTURE_IMAGE_UNITS]
  278. */
  279. gl.depthFunc(gl.LESS);
  280.  
  281. gl.useProgram(shaderProgram);
  282.  
  283. gl.uniformMatrix4fv(rotationLocation, false, rotation);
  284. gl.uniform3fv(moveLocation, move );
  285. gl.uniformMatrix4fv(projectionLocation, false, projection);
  286.  
  287. gl.enableVertexAttribArray(aPositionLocation);
  288. gl.enableVertexAttribArray(normalLocation);
  289.  
  290. gl.bindBuffer(gl.ARRAY_BUFFER, plot);
  291. gl.vertexAttribPointer(aPositionLocation, 3, gl.FLOAT, false, 6 * Float32Array.BYTES_PER_ELEMENT, 0);
  292.  
  293. gl.vertexAttribPointer(normalLocation,3,gl.FLOAT,false,6*Float32Array.BYTES_PER_ELEMENT,3*Float32Array.BYTES_PER_ELEMENT);
  294. gl.drawArrays(gl.TRIANGLES, 0,8964036/6);
  295. }
  296.  
  297.  
  298.  
  299.  
  300. var cubeFace; // array of cube face direction constants
  301. var skyboxXYZ; // array of argument mappings for skybox functions
  302.  
  303.  
  304.  
  305. /** Model-view and projection matrices **/
  306.  
  307. const PROJECTION_Z_NEAR = 0.25;
  308. const PROJECTION_Z_FAR = 300;
  309. const PROJECTION_ZOOM_Y = 4.0;
  310.  
  311.  
  312. const identityMatrix4= [
  313. [ 1,0,0,0 ],
  314. [ 0,1,0,0 ],
  315. [ 0,0,1,0 ],
  316. [ 0,0,0,1 ],
  317. ];
  318.  
  319.  
  320. var rotationMatrix4= identityMatrix4;
  321.  
  322. var moveVector=[0,0,10];
  323.  
  324.  
  325.  
  326. var createProjectionMatrix4= function (gl, zNear, zFar, zoomY ) {
  327. /* arguments:
  328. gl - GL context
  329. zNear, zFar, zoomY - Y-frustum parameters
  330.  
  331. returns: 4x4 row-major order perspective matrix
  332. */
  333. var xx= zoomY*gl.viewportHeight/gl.viewportWidth;
  334. var yy= zoomY;
  335. var zz= (zFar+zNear)/(zFar-zNear);
  336. var zw= 1;
  337. var wz= -2*zFar*zNear/(zFar-zNear);
  338. return [
  339. [ xx, 0, 0, 0],
  340. [ 0, yy, 0, 0],
  341. [ 0, 0, zz, wz],
  342. [ 0, 0, zw, 0]
  343. ];
  344. }
  345.  
  346.  
  347.  
  348.  
  349. var glVector3 = function ( x,y,z ){
  350. return new Float32Array(x,y,z);
  351. };
  352.  
  353.  
  354. var glMatrix4 = function ( xx, yx, zx, wx,
  355. xy, yy, zy, wy,
  356. xz, yz, zz, wz,
  357. xw, yw, zw, ww )
  358. {
  359. // sequence of concatenated columns
  360. return new Float32Array( [ xx, xy, xz, xw,
  361. yx, yy, yz, yw,
  362. zx, zy, zz, zw,
  363. wx, wy, wz, ww ] );
  364. };
  365.  
  366. var glMatrix4FromMatrix= function( m ) {
  367. /* arguments:
  368. m - the 4x4 array with the matrix in row-major order
  369.  
  370. returns: sequence of elements in column-major order in Float32Array for GL
  371. */
  372. return glMatrix4(
  373. m[0][0], m[0][1], m[0][2], m[0][3],
  374. m[1][0], m[1][1], m[1][2], m[1][3],
  375. m[2][0], m[2][1], m[2][2], m[2][3],
  376. m[3][0], m[3][1], m[3][2], m[3][3]
  377. );
  378. };
  379.  
  380.  
  381. var scalarProduct4 = function( v,w ) {
  382. return v[0]*w[0]+v[1]*w[1]+v[2]*w[2]+v[3]*w[3];
  383. };
  384.  
  385. var matrix4Column = function( m, c ) {
  386. return [ m[0][c], m[1][c], m[2][c], m[3][c] ];
  387. };
  388.  
  389. var matrix4Product = function( m1, m2){
  390. var sp = scalarProduct4;
  391. var col = matrix4Column;
  392. return [
  393. [ sp(m1[0], col(m2, 0)) , sp(m1[0], col(m2, 1)), sp(m1[0], col(m2, 2)), sp(m1[0], col(m2, 3)) ],
  394. [ sp(m1[1], col(m2, 0)) , sp(m1[1], col(m2, 1)), sp(m1[1], col(m2, 2)), sp(m1[1], col(m2, 3)) ],
  395. [ sp(m1[2], col(m2, 0)) , sp(m1[2], col(m2, 1)), sp(m1[2], col(m2, 2)), sp(m1[1], col(m2, 3)) ],
  396. [ sp(m1[3], col(m2, 0)) , sp(m1[3], col(m2, 1)), sp(m1[3], col(m2, 2)), sp(m1[3], col(m2, 3)) ]
  397. ];
  398. };
  399.  
  400. var matrix4RotatedXZ= function(matrix, alpha ){
  401. var c = Math.cos( alpha );
  402. var s = Math.sin( alpha );
  403. var rot = [ [ c, 0, -s, 0 ],
  404. [ 0, 1, 0, 0 ],
  405. [ s, 0, c, 0 ],
  406. [ 0, 0, 0, 1 ]
  407. ];
  408.  
  409. return matrix4Product( rot, matrix );
  410. };
  411.  
  412. var matrix4RotatedYZ= function(matrix, alpha ){
  413. var c = Math.cos( alpha );
  414. var s = Math.sin( alpha );
  415. var rot = [ [ 1, 0, 0, 0 ],
  416. [ 0, c, -s, 0 ],
  417. [ 0, s, c, 0 ],
  418. [ 0, 0, 0, 1 ]
  419. ];
  420.  
  421. return matrix4Product( rot, matrix );
  422. };
  423.  
  424.  
  425.  
  426. /* redraw variables */
  427.  
  428. var boxFaceTextures=[];
  429.  
  430. var redraw=function(){
  431. var projectionMatrix=glMatrix4FromMatrix( createProjectionMatrix4(gl,
  432. PROJECTION_Z_NEAR,
  433. PROJECTION_Z_FAR,
  434. PROJECTION_ZOOM_Y )
  435. );
  436. var rotationMatrix=glMatrix4FromMatrix( rotationMatrix4 ); //tmp
  437.  
  438. gl.enable(gl.DEPTH_TEST);
  439.  
  440. gl.clearColor(0, 0, 0, 1.0);
  441. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  442.  
  443. drawBufferFace(gl,rotationMatrix,moveVector,projectionMatrix,sinxcosyBuffer);
  444. // drawBufferFace( gl, rotationMatrix, moveVector, projectionMatrix,
  445. // xPlusArrayBuffer, boxFaceTextures[0] , 1 )
  446.  
  447. }
  448.  
  449. onWindowResize = function () {
  450. var wth = parseInt(window.innerWidth)-10;
  451. var hth = parseInt(window.innerHeight)-10;
  452. canvasGL.setAttribute("width", ''+wth);
  453. canvasGL.setAttribute("height", ''+hth);
  454. gl.viewportWidth = wth;
  455. gl.viewportHeight = hth;
  456. gl.viewport(0,0,wth,hth);
  457. redraw();
  458. };
  459.  
  460. function onKeyDown(e){
  461. // var code=e.keyCode? e.keyCode : e.charCode;
  462. var code= e.which || e.keyCode;
  463. var alpha= Math.PI/32;
  464. switch(code)
  465. {
  466. case 38: // up
  467. case 73: // I
  468. rotationMatrix4=matrix4RotatedYZ(rotationMatrix4, alpha );
  469. break;
  470. case 40: // down
  471. case 75: // K
  472. rotationMatrix4=matrix4RotatedYZ(rotationMatrix4, -alpha );
  473. break;
  474. case 37: // left
  475. case 74:// J
  476. rotationMatrix4=matrix4RotatedXZ(rotationMatrix4, -alpha );
  477. break;
  478. case 39:// right
  479. case 76: // L
  480. rotationMatrix4=matrix4RotatedXZ(rotationMatrix4, alpha );
  481. break;
  482. case 70: // F
  483. moveVector[2]++;
  484. break;
  485. case 66: // B
  486. case 86: // V
  487. moveVector[2]--;
  488. break;
  489. case 32: // space
  490. rotationMatrix4= identityMatrix4;
  491. break;
  492. case 68:
  493. plot=sinxcosyBuffer
  494. break;
  495. case 83:
  496. plot=rippleBuffer;
  497. break;
  498. case 65:
  499. plot=pyrammidBuffer;
  500. break;
  501.  
  502. }
  503. redraw();
  504. }
  505.  
  506.  
  507.  
  508. window.onload= function(){
  509. html={};
  510. html.canvasGL=document.querySelector('#canvasGL');
  511. html.canvasTex=document.querySelector('#canvasTex');
  512. gl = canvasGL.getContext("webgl2");
  513.  
  514. makeShaderProgram(gl);
  515.  
  516. onWindowResize();
  517. window.onresize= onWindowResize;
  518. window.onkeydown= onKeyDown;
  519. }
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!