API tools faq
paste
fevzi02

9 лаба

fevzi02
Feb 3rd, 2022 (edited)
672
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 13.53 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 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
Public Pastes
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!