Scribd Logo
Upload

Welcome to Scribd!

  • КГ ІО-11 Гук Дмитро КР1

    Uploaded by

    bobonan
    6 views8 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    6 views8 pages

    КГ ІО-11 Гук Дмитро КР1

    Uploaded by

    bobonan

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 8

    МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

    НАЦІОНАЛЬНИЙ ТЕХНІЧНИЙ УНІВЕРСИТЕТ УКРАЇНИ


    «КИЇВСЬКИЙ ПОЛІТЕХНІЧНИЙ ІНСТИТУТ
    імені ІГОРЯ СІКОРСЬКОГО»

    ЗВІТ
    КОНТРОЛЬНА РОБОТА №1

    Виконав: Перевірив:
    Студент групи ІО-11 доц. каф. ІПІ
    Гук Д. С. Родіонов П.Ю.

    Київ 2023
    Лістинг 1 – Програмний код сторінки у файлі HTML, index.html
    <!DOCTYPE html>

    <html>

    <head>

    <title>КР1 Гук Дмитро</title>

    <link rel="stylesheet" href="style.css">

    </head>

    <body>

    <canvas id="myCanvas" width="800" height="800"></canvas>

    <script src="glMatrix.js"></script>

    <script src="script.js"></script>

    </body>

    </html>
    Лістинг 2 – Програмний код шейдерних програми, script.js
    // Програми вершинного і фрагментного шейдера

    const vertexShaderSource = `

    attribute vec4 aPosition;

    attribute vec4 aColor;

    varying vec4 vColor;

    uniform mat4 uProjectionMatrix;

    uniform mat4 uModelViewMatrix;

    void main() {

    gl_Position = uProjectionMatrix * uModelViewMatrix * aPosition;

    vColor = aColor;

    `;

    const fragmentShaderSource = `

    precision mediump float;

    varying vec4 vColor;

    void main() {

    gl_FragColor = vColor;

    `;
    Лістинг 3 – Програмний код створення шейдерної програми, компіляції та
    лінкування шейдерів, script.js
    // Створення і кампілація шейдерів

    function createShader(gl, type, source) {

    const shader = gl.createShader(type);

    gl.shaderSource(shader, source);

    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

    console.error('An error occurred compiling the shaders: ' +


    gl.getShaderInfoLog(shader));

    gl.deleteShader(shader);

    return null;

    return shader;

    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);

    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER,


    fragmentShaderSource);

    // Створення і лінкування шейдерної програми

    const shaderProgram = gl.createProgram();

    gl.attachShader(shaderProgram, vertexShader);

    gl.attachShader(shaderProgram, fragmentShader);

    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

    console.error('Unable to initialize the shader program: ' +


    gl.getProgramInfoLog(shaderProgram));

    gl.useProgram(shaderProgram);
    Лістинг 4 – Масиви та буфери масивів, script.js
    // Створення і кампілація шейдерів

    function createShader(gl, type, source) {

    const shader = gl.createShader(type);

    gl.shaderSource(shader, source);

    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

    console.error('An error occurred compiling the shaders: ' +


    gl.getShaderInfoLog(shader));

    gl.deleteShader(shader);

    return null;

    return shader;

    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);

    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER,


    fragmentShaderSource);

    // Створення і лінкування шейдерної програми

    const shaderProgram = gl.createProgram();

    gl.attachShader(shaderProgram, vertexShader);

    gl.attachShader(shaderProgram, fragmentShader);

    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

    console.error('Unable to initialize the shader program: ' +


    gl.getProgramInfoLog(shaderProgram));

    gl.useProgram(shaderProgram);
    Лістинг 5 – посилання на атрибути, створення матриць та налаштування
    буферів, script.js
    // Посилання на атрибути aPosition та aColor у шейдері

    const positionAttribute = gl.getAttribLocation(shaderProgram, 'aPosition');

    const colorAttribute = gl.getAttribLocation(shaderProgram, 'aColor');

    // Матриці та посилання на них у шейдерній програмі

    const projectionMatrix = mat4.ortho(mat4.create(), -5, 5, -5, 5, -5, 5);

    const modelViewMatrix = mat4.create();

    const projectionMatrixLocation = gl.getUniformLocation(shaderProgram,


    'uProjectionMatrix');

    const modelViewMatrixLocation = gl.getUniformLocation(shaderProgram,


    'uModelViewMatrix');

    // Можливість читання атрибутів з масиву

    gl.enableVertexAttribArray(positionAttribute);

    gl.enableVertexAttribArray(colorAttribute);

    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    // Вказуємо, як розпізнавати дані вершин у буфері

    gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 4*(3+4), 0);

    gl.vertexAttribPointer(colorAttribute, 4, gl.FLOAT, false, 4*(3+4), 4*3);


    Лістинг 5 – Функція анімацію об’єкта, script.js
    // Змінні для обертання

    let angleX = 0;

    let angleY = 0;

    // Малювання кадру канвасу

    function drawScene() {

    angleX += 0.005;

    angleY += 0.005;

    gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    mat4.fromYRotation(modelViewMatrix, angleX);

    mat4.rotateX(modelViewMatrix, modelViewMatrix, angleY);

    gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);

    // Зображення граней куба

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

    gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

    requestAnimationFrame(drawScene);

    gl.clearColor(0.5, 0.5, 0.5, 1.0);

    // Сортування та тестування глибини Z-порядку

    gl.enable(gl.DEPTH_TEST);

    drawScene();
    Результати програми

    You might also like