fevzi02

9 лаба

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