Advertisement
fevzi02

9lab КГ

Feb 1st, 2022
1,609
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.26 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>
  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