API tools faq
paste
Advertisement
fevzi02

9lab КГ

fevzi02
Feb 1st, 2022
1,617
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.26 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3.  
  4.   <head>
  5.      <meta charset="UTF-8">
  6.      <title>lab_9</title>
  7.   </head>
  8.  
  9.   <body>
  10.       <canvas width = "600" height = "600" id = "canvas"></canvas>
  11.       <style>
  12.           body {
  13.                 background: #365291 }
  14.  
  15.           canvas {
  16.                display: block;
  17.                margin: auto auto;
  18.                border: 10px solid #04112F; }
  19.       </style>
  20.       <script>
  21.          let canvas = document.getElementById("canvas");
  22.          let gl = canvas.getContext("experimental-webgl");
  23.  
  24.          let vertices = [
  25.                          // Задняя сторона
  26.                         -1.5, -1, -1.5, //PN-n
  27.                         -1,    1, -1,   //PV-n
  28.                          1,    1, -1,   //LV-n
  29.                          1.5, -1, -1.5, //LN-n
  30.  
  31.                           // Передняя сторона
  32.                          -1.5, -1,  1.5, //LN-n
  33.                          -1,    1,  1,   //LV-n
  34.                           1,    1,  1,   //PV-n
  35.                           1.5, -1,  1.5, //PN-n
  36.  
  37.                            // Левая сторона
  38.                           -1.5, -1,  1.5, //PN-n
  39.                           -1.5, -1, -1.5, //LN-n
  40.                           -1,    1, -1,   //LV-n
  41.                           -1,    1,  1,   //PV-n
  42.  
  43.                            // Правая сторона
  44.                           1.5, -1,  1.5, //LN-n
  45.                           1.5, -1, -1.5, //PN-n
  46.                           1,    1, -1,   //PV-n
  47.                           1,    1,  1,   //LV-n
  48.  
  49.                            // Нижняя сторона
  50.                           -1.5, -1, -1.5, //LN-n
  51.                           -1.5, -1,  1.5, //LV-n
  52.                            1.5, -1,  1.5, //PV-n
  53.                            1.5, -1, -1.5, //PN-n
  54.  
  55.                            // Cредняя сторона
  56.                            -1, 1, -1, //LN-s
  57.                            -1, 1,  1, //LV-s
  58.                             1, 1,  1, //PV-s
  59.                             1, 1, -1, //PN-s
  60.  
  61.                             // Задняя сторона
  62.                             -1, 1, -1,   //PN-v
  63.                             -1, 3, -1.5, //PV-v
  64.                              1, 3, -1.5, //LV-v
  65.                              1, 1, -1,   //LN-v
  66.                              ];
  67.  
  68.  
  69.          let colors = [
  70.                           1, 0,  0,   1, 0, 0,    1, 0, 0,    1,  0, 0, // зад-n
  71.                           0, 0,  1,   0, 0, 1,    0, 0, 1,    0,  0, 1, //перед
  72.                           0, 0,  1,   1, 0, 0,    1, 0, 0,    0,  0, 1, //лево
  73.                           0, 0,  1,   1, 0, 0,    1, 0, 0,    0,  0, 1, //право
  74.                           1, 0,  0,   0, 0, 1,    0, 0, 1,    1,  0, 0, //низ
  75.                           0, 0, 2,    0, 0, 2,    0, 2, 0,    10, 0, 0, //верх
  76.                           1, 0, 0,    1, 1, 0,    1, 1, 0,    1,  0, 0, // зад-v
  77.                           ];
  78.  
  79.          let indices = [
  80.              0,  1,  2,    0,  2,  3,
  81.              4,  5,  6,    4,  6,  7,
  82.              8,  9,  10,   8,  10, 11,
  83.              12, 13, 14,   12, 14, 15,
  84.              16, 17, 18,   16, 18, 19,
  85.              20, 21, 22,   20, 22, 23,
  86.              24, 25, 26,   24, 26, 27,
  87.          ];
  88.  
  89.          let vertex_buffer = gl.createBuffer();
  90.          gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
  91.          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  92.  
  93.          let color_buffer = gl.createBuffer();
  94.          gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
  95.          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
  96.  
  97.          let index_buffer = gl.createBuffer();
  98.          gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
  99.          gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices),  gl.STATIC_DRAW);
  100.  
  101.          var vertCode =
  102.              "attribute vec3 position;" +
  103.              "uniform mat4 Pmatrix;"    +
  104.              "uniform mat4 Vmatrix;"    +
  105.              "uniform mat4 Mmatrix;"    +
  106.              "attribute vec3 color;"    +
  107.              "varying vec3 vColor;"     +
  108.              "void main(void) { "       +
  109.              "gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);" +
  110.              "vColor = color;"          +
  111.              "}";
  112.  
  113.          var fragCode =
  114.              "precision mediump float;" +
  115.              "varying vec3 vColor;"     +
  116.              "void main(void) {"        +
  117.              "gl_FragColor = vec4(vColor, 1.);" +
  118.              "}";
  119.  
  120.          var vertShader = gl.createShader(gl.VERTEX_SHADER);
  121.          gl.shaderSource(vertShader, vertCode);
  122.          gl.compileShader(vertShader);
  123.  
  124.          var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
  125.          gl.shaderSource(fragShader, fragCode);
  126.          gl.compileShader(fragShader);
  127.  
  128.          var shaderprogram = gl.createProgram();
  129.          gl.attachShader(shaderprogram, vertShader);
  130.          gl.attachShader(shaderprogram, fragShader);
  131.          gl.linkProgram(shaderprogram);
  132.  
  133.          let _Pmatrix = gl.getUniformLocation(shaderprogram, "Pmatrix");
  134.          let _Vmatrix = gl.getUniformLocation(shaderprogram, "Vmatrix");
  135.          let _Mmatrix = gl.getUniformLocation(shaderprogram, "Mmatrix");
  136.  
  137.          gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
  138.          let _position = gl.getAttribLocation(shaderprogram, "position");
  139.          gl.vertexAttribPointer(_position, 3, gl.FLOAT, false, 0, 0);
  140.          gl.enableVertexAttribArray(_position);
  141.  
  142.          gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
  143.          let _color = gl.getAttribLocation(shaderprogram, "color");
  144.          gl.vertexAttribPointer(_color, 3, gl.FLOAT, false, 0, 0);
  145.          gl.enableVertexAttribArray(_color);
  146.  
  147.          gl.useProgram(shaderprogram);
  148.  
  149.          // Матрица
  150.          let draw_matrix = (angle, a, zMin, zMax) => {
  151.              let ang = Math.tan((angle * 0.5 * Math.PI) / 180);
  152.              return [
  153.                      0.5 / ang,   0,                0,                                    0,
  154.                      0,           (0.5 * a) / ang,  0,                                    0,
  155.                      0,           0,                -(zMax + zMin) / (zMax - zMin),      -1,
  156.                      0,           0,                (-2 * zMax * zMin) / (zMax - zMin),   0, ];
  157.          };
  158.  
  159.          let proj_matrix = draw_matrix(40, canvas.width / canvas.height, 1, 100);
  160.  
  161.          let mo_matrix = [1, 0, 0, 0,
  162.                           0, 1, 0, 0,
  163.                           0, 0, 1, 0,
  164.                           0, 0, 0, 1];
  165.  
  166.          let view_matrix = [1, 0, 0, 0,
  167.                             0, 1, 0, 0,
  168.                             0, 0, 1, 0,
  169.                             0, 0, 0, 1];
  170.  
  171.          view_matrix[14] = view_matrix[14] - 6;
  172.  
  173.          // -----------------------------------
  174.          let drag = false;
  175.          let old_x, old_y;
  176.          let dX = 0,
  177.            dY = 0;
  178.  
  179.          canvas.addEventListener(
  180.            "mousedown",
  181.            (mouseDown = (e) => {
  182.              drag = true;
  183.              (old_x = e.pageX), (old_y = e.pageY);
  184.              e.preventDefault();
  185.              return false;
  186.            })
  187.          );
  188.          canvas.addEventListener(
  189.            "mouseup",
  190.            (mouseUp = (e) => {
  191.              drag = false;
  192.            })
  193.          );
  194.          canvas.addEventListener(
  195.            "mousemove",
  196.            (mouseMove = (e) => {
  197.              if (!drag) return false;
  198.              (dX = ((e.pageX - old_x) * 2 * Math.PI) / canvas.width),
  199.                (dY = ((e.pageY - old_y) * 2 * Math.PI) / canvas.height);
  200.              THETA += dX;
  201.              PHI += dY;
  202.              (old_x = e.pageX), (old_y = e.pageY);
  203.            })
  204.          );
  205.  
  206.          // Поворот
  207.          let rotateX = (m, angle) => {
  208.              var c = Math.cos(angle);
  209.              var s = Math.sin(angle);
  210.              var mv1 = m[1],
  211.                  mv5 = m[5],
  212.                  mv9 = m[9];
  213.  
  214.              m[1]  = m[1] * c - m[2]  * s;
  215.              m[5]  = m[5] * c - m[6]  * s;
  216.              m[9]  = m[9] * c - m[10] * s;
  217.  
  218.              m[2]  = m[2]  * c + mv1 * s;
  219.              m[6]  = m[6]  * c + mv5 * s;
  220.              m[10] = m[10] * c + mv9 * s;
  221.          };
  222.  
  223.          let rotateY = (m, angle) => {
  224.              var c = Math.cos(angle);
  225.              var s = Math.sin(angle);
  226.              var  mv0 = m[0],
  227.                   mv4 = m[4],
  228.                   mv8 = m[8];
  229.  
  230.              m[0] = c * m[0] + s * m[2];
  231.              m[4] = c * m[4] + s * m[6];
  232.              m[8] = c * m[8] + s * m[10];
  233.  
  234.              m[2]  = c * m[2]  - s * mv0;
  235.              m[6]  = c * m[6]  - s * mv4;
  236.              m[10] = c * m[10] - s * mv8;
  237.          };
  238.  
  239.          // Отрисовка
  240.          let THETA = 0;
  241.          let PHI   = 0;
  242.  
  243.          let animate = () => {
  244.              (mo_matrix[0]  = 1),
  245.              (mo_matrix[1]  = 0),
  246.              (mo_matrix[2]  = 0),
  247.              (mo_matrix[3]  = 0),
  248.              (mo_matrix[4]  = 0),
  249.              (mo_matrix[5]  = 1),
  250.              (mo_matrix[6]  = 0),
  251.              (mo_matrix[7]  = 0),
  252.              (mo_matrix[8]  = 0),
  253.              (mo_matrix[9]  = 0),
  254.              (mo_matrix[10] = 1),
  255.              (mo_matrix[11] = 0),
  256.              (mo_matrix[12] = 0),
  257.              (mo_matrix[13] = 0),
  258.              (mo_matrix[14] = 0),
  259.              (mo_matrix[15] = 1);
  260.  
  261.              rotateY(mo_matrix, THETA);
  262.              rotateX(mo_matrix, PHI);
  263.  
  264.              gl.enable(gl.DEPTH_TEST);
  265.  
  266.              gl.clearColor(0.5, 0.5, 0.5, 0.9);
  267.              gl.clearDepth(1.0);
  268.              gl.viewport(0.0, 0.0, canvas.width, canvas.height);
  269.              gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  270.  
  271.              gl.uniformMatrix4fv(_Pmatrix, false, proj_matrix);
  272.              gl.uniformMatrix4fv(_Vmatrix, false, view_matrix);
  273.              gl.uniformMatrix4fv(_Mmatrix, false, mo_matrix);
  274.  
  275.              gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
  276.              gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
  277.  
  278.              window.requestAnimationFrame(animate);
  279.          };
  280.  
  281.          //Запуск---------------------------------------------------------------
  282.          animate();
  283.      </script>
  284.   </body>
  285. </html>
  286.  
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!