Небольшие примеры на WebGL - Gamedev - cоздание игр: Unity, OpenGL, DirectX - Страница 8

8Observer8 · 18.01.2021, 21:27

продолжение предыдущего сообщения

C++, Qt5, QPainter

Код:

#include <QtWidgets/QApplication>
#include <QtWidgets/QWidget>
#include <QtGui/QPainter>
#include <QtGui/QImage>
#include <QtCore/QTimer>
#include <QtCore/QElapsedTimer>
#include <QtCore/QDebug>

#define N_FRAMES 8

class Window : public QWidget
{
    Q_OBJECT
public:
    Window()
    {
        setWindowTitle("Qt C++");
        resize(512, 256);
        m_spriteSheet.load(":/Sprites/sprites-cat-running.png");
        int index = 0;
        for (int i = 0; i < 2; i++ )
        {
            for (int j = 0; j < 4; j++)
            {
                m_frames[index] = QPoint(j * m_sw, i * m_sh);
                qDebug() << m_frames[index];
                index++;
            }
        }
        connect(&m_timer, &QTimer::timeout, this, &Window::animationLoop);
        m_timer.start(1000.f/60.f);
        m_elapsedTimer.start();
    }
private:
    QTimer m_timer;
    QElapsedTimer m_elapsedTimer;
    float m_deltaTime;
    float m_animationTime = 0.f;
    const float m_animationSpeed = 100.f;
    QImage m_spriteSheet;
    QPoint m_frames[N_FRAMES];
    int m_frameIndex = 0;
    int m_x, m_y;
    const int m_sw = 512, m_sh = 256; // Source image width and height
private slots:
    void animationLoop()
    {
        m_deltaTime = m_elapsedTimer.elapsed();
        m_elapsedTimer.restart();

        m_animationTime += m_deltaTime;

        if (m_animationTime > m_animationSpeed)
        {
            m_animationTime = 0;
            m_x = m_frames[m_frameIndex].x();
            m_y = m_frames[m_frameIndex].y();
            m_frameIndex++;
            if (m_frameIndex >= N_FRAMES)
            {
                m_frameIndex = 0;
            }
        }

        update();
    }
private:
    void paintEvent(QPaintEvent *event)
    {
        Q_UNUSED(event);
        QPainter qp(this);
        qp.drawImage(0, 0, m_spriteSheet, m_x, m_y, m_sw, m_sh);
    }
};

#include "main.moc"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Window w;
    w.show();
    return a.exec();
}

8Observer8 · 25.02.2021, 00:45

Пока удалил. Рано опубликовал. Надо немного переделать.

8Observer8 · 04.12.2021, 16:21

Ракета в 2D на WebGL 1.0 и JavaScript

Я подготовил ракету на WebGL, которая готова к анимации. У ракеты есть общая модельная матрица, с помощью которой можно задать позицию, поворот и размер ракеты. Все части ракеты находятся в отдельных VBO. Части собираются в ракету с помощью модельных матриц. Центр координат находится в центре холста. Диапазон координат установлен по двум осям: [-150, 150]. Размер холста 300x300 пикселей. Pivot Point ракеты находится по внизу. Как упражнение для самостоятельной работы, предлагаю всем желающим дописать код и сделать анимацию полёта ракеты по окружности вокруг центра координат.

Например, так задаётся позиция ракеты внизу холста, размер ракеты равен 80% от размера в сборке, поворот равен 10 градусам:

Код:

        const rocketModelMatrix = glMatrix.mat4.create();
        glMatrix.mat4.translate(rocketModelMatrix, rocketModelMatrix, [0, -150, 0]);
        glMatrix.mat4.rotateZ(rocketModelMatrix, rocketModelMatrix, 10 * Math.PI / 180);
        glMatrix.mat4.scale(rocketModelMatrix, rocketModelMatrix, [0.8, 0.8, 1]);

Запустить демку в песочнице

9274baae-a08c-4e69-9c81-35e9b405d83a.png

index.html

Код:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Rocket's Animation. WebGL 1.0, JavaScript</title>
 
    <script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.3.0/gl-matrix-min.js"></script>
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="300"></canvas>
 
    <script>
        const gl = document.getElementById("renderCanvas").getContext("webgl");
 
        const vertShaderSrc =
            `attribute vec2 aPosition;
            uniform mat4 uMvpMatrix;
            void main()
            {
                gl_Position = uMvpMatrix * vec4(aPosition, 0.0, 1.0);
            }`;
 
        const fragShaderSrc =
            `precision mediump float;
            uniform vec3 uColor;
            void main()
            {
                gl_FragColor = vec4(uColor, 1.0);
            }`;
 
        const vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertShaderSrc);
        gl.compileShader(vShader);
        console.log(gl.getShaderInfoLog(vShader));
 
        const fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragShaderSrc);
        gl.compileShader(fShader);
        console.log(gl.getShaderInfoLog(fShader));
 
        const program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);
 
        const aPositionLocation = gl.getAttribLocation(program, "aPosition");
 
        const squarePositions = new Float32Array([
            -0.5, 0,
            0.5, 0,
            -0.5, 1,
            0.5, 1
        ]);
        const squareVBO = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, squareVBO);
        gl.bufferData(gl.ARRAY_BUFFER, squarePositions, gl.STATIC_DRAW);
 
        const topPositions = new Float32Array([
            -0.5, 0,
            0.5, 0,
            0, 1
        ]);
        const topVBO = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, topVBO);
        gl.bufferData(gl.ARRAY_BUFFER, topPositions, gl.STATIC_DRAW);
 
        const r = 0.5;
        let x, y, angle = 0;
        const amountOfDiskVertices = 10;
        const angleStep = 360 / amountOfDiskVertices;
        const diskPositions = [];
        diskPositions.push(0, 0);
        for (let i = 0; i <= amountOfDiskVertices; ++i)
        {
            x = r * Math.cos(angle * Math.PI / 180);
            y = r * Math.sin(angle * Math.PI / 180);
            diskPositions.push(x, y);
            angle += angleStep;
        }
        const diskVBO = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, diskVBO);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(diskPositions), gl.STATIC_DRAW);
 
        // Left tail
        const topTailPositions = new Float32Array([
            0, 0,
            0, 1,
            -1, 0
        ]);
        const topTailVBO = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, topTailVBO);
        gl.bufferData(gl.ARRAY_BUFFER, topTailPositions, gl.STATIC_DRAW);
 
        const projMatrix = glMatrix.mat4.create();
        glMatrix.mat4.ortho(projMatrix, -150, 150, -150, 150, 100, -100);
 
        const viewMatrix = glMatrix.mat4.create();
        glMatrix.mat4.lookAt(viewMatrix, [0, 0, 50], [0, 0, 0], [0, 1, 0]);
 
        const projViewMatrix = glMatrix.mat4.create();
        const mvpMatrix = glMatrix.mat4.create();
        const modelMatrix = glMatrix.mat4.create();
 
        const rocketModelMatrix = glMatrix.mat4.create();
        glMatrix.mat4.translate(rocketModelMatrix, rocketModelMatrix, [0, -150, 0]);
        glMatrix.mat4.rotateZ(rocketModelMatrix, rocketModelMatrix, 10 * Math.PI / 180);
        glMatrix.mat4.scale(rocketModelMatrix, rocketModelMatrix, [0.8, 0.8, 1]);
 
        glMatrix.mat4.mul(projViewMatrix, projMatrix, viewMatrix);
 
        const uMvpMatrixLocation = gl.getUniformLocation(program, "uMvpMatrix");
        const uColorLocation = gl.getUniformLocation(program, "uColor");
 
        const baseColor = [1, 1, 1];
        const redColor = [0.835, 0.235, 0.235];
        gl.clearColor(0.2, 0.85, 0.9, 1);
 
        animationLoop();
 
        function animationLoop()
        {
            requestAnimationFrame(animationLoop);
            draw();
        }
 
        function draw()
        {
            gl.clear(gl.COLOR_BUFFER_BIT);
            // Base
            drawElement(squareVBO, [0, 0, 0], [70, 170, 1], [1, 1, 1], 4, gl.TRIANGLE_STRIP);
            // Top
            drawElement(topVBO, [0, 170, 0], [70, 20, 1], redColor, 3, gl.TRIANGLES);
            // Illuminators
            drawElement(diskVBO, [0, 88, 0], [14, 14, 1], redColor, diskPositions.length / 2, gl.TRIANGLE_FAN);
            drawElement(diskVBO, [0, 53, 0], [14, 14, 1], redColor, diskPositions.length / 2, gl.TRIANGLE_FAN);
            drawElement(diskVBO, [0, 18, 0], [14, 14, 1], redColor, diskPositions.length / 2, gl.TRIANGLE_FAN);
            // Left Tail
            drawElement(topTailVBO, [-35, 40, 0], [40, 25, 1], redColor, 3, gl.TRIANGLES);
            drawElement(squareVBO, [-55, 0, 0], [40, 40, 1], redColor, 4, gl.TRIANGLE_STRIP);
            // Right Tail
            drawElement(topTailVBO, [35, 40, 0], [-40, 25, 1], redColor, 3, gl.TRIANGLES);
            drawElement(squareVBO, [55, 0, 0], [40, 40, 1], redColor, 4, gl.TRIANGLE_STRIP);
        }
 
        function drawElement(vbo, position, scale, color, amountOfVertices, mode)
        {
            glMatrix.mat4.identity(modelMatrix);
            glMatrix.mat4.translate(modelMatrix, modelMatrix, position);
            glMatrix.mat4.scale(modelMatrix, modelMatrix, scale);
            glMatrix.mat4.mul(modelMatrix, rocketModelMatrix, modelMatrix);
            glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
            gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
            gl.uniform3fv(uColorLocation, color);
            gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
            gl.vertexAttribPointer(aPositionLocation, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(aPositionLocation);
            gl.drawArrays(mode, 0, amountOfVertices);
        }
    </script>
</body>
 
</html>

8Observer8 · 15.12.2021, 01:12

Пример загрузки кубика из gltf 2.0 на JavaScript и WebGL

load-cube-from-gltf2-webgl-js.png

WebGL-демка в песочнице

Исходники: load-cube-from-gltf2-webgl-js.zip (4.1 Кб)

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading a cube from gltf 2.0. WebGL, JavaScript</title>
    <script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/gl-matrix-min.js"></script>
</head>

<body>
    <canvas id="renderCanvas" width="400" height="400"></canvas>
    <script>
        loadFile("assets/BoxBlender3.gltf", (content) =>
        {
            const gltf = JSON.parse(content);

            loadBin("assets/BoxBlender3.bin", (binData) =>
            {
                const canvas = document.getElementById("renderCanvas");
                const gl = canvas.getContext("webgl");

                gl.enable(gl.DEPTH_TEST);

                const vertShaderSource =
                    `attribute vec4 aPosition;
                    attribute vec4 aNormal;
                    uniform mat4 uMvpMatrix;
                    uniform mat4 uModelMatrix;
                    uniform mat4 uNormalMatrix;
                    varying vec3 vPosition;
                    varying vec3 vNormal;
                    void main()
                    {
                        gl_Position = uMvpMatrix * aPosition;
                        vPosition = vec3(uModelMatrix * aPosition);
                        vNormal = normalize(vec3(uNormalMatrix * aNormal));
                    }`;

                const fragShaderSource =
                    `precision mediump float;
                    const vec3 lightColor = vec3(1.0, 1.0, 1.0);
                    const vec3 ambientLight = vec3(0.2, 0.2, 0.2);
                    uniform vec3 uLightPosition;
                    varying vec3 vPosition;
                    varying vec3 vNormal;
                    void main()
                    {
                        vec4 color = vec4(0.5, 1.0, 0.5, 1.0);
                        vec3 normal = normalize(vNormal);
                        vec3 lightDirection = normalize(uLightPosition - vPosition);
                        float nDotL = max(dot(lightDirection, normal), 0.0);
                        vec3 diffuse = lightColor * color.rgb * nDotL;
                        vec3 ambient = ambientLight * color.rgb;
                        gl_FragColor = vec4(diffuse + ambient, color.a);
                    }`;

                const vShader = gl.createShader(gl.VERTEX_SHADER);
                gl.shaderSource(vShader, vertShaderSource);
                gl.compileShader(vShader);
                let ok = gl.getShaderParameter(vShader, gl.COMPILE_STATUS);
                if (!ok) { console.log("vert: " + gl.getShaderInfoLog(vShader)); };

                const fShader = gl.createShader(gl.FRAGMENT_SHADER);
                gl.shaderSource(fShader, fragShaderSource);
                gl.compileShader(fShader);
                ok = gl.getShaderParameter(vShader, gl.COMPILE_STATUS);
                if (!ok) { console.log("frag: " + gl.getShaderInfoLog(fShader)); };

                const program = gl.createProgram();
                gl.attachShader(program, vShader);
                gl.attachShader(program, fShader);
                gl.bindAttribLocation(program, 0, "aPosition");
                gl.bindAttribLocation(program, 1, "aNormal");
                gl.linkProgram(program);
                ok = gl.getProgramParameter(program, gl.LINK_STATUS);
                if (!ok) { console.log("link: " + gl.getProgramInfoLog(program)); };
                gl.useProgram(program);

                // Create a cube
                //    v6----- v5
                //   /|      /|
                //  v1------v0|
                //  | |     | |
                //  | |v7---|-|v4
                //  |/      |/
                //  v2------v3

                // const vertPositions = [
                //     0.5, 0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, // v0-v1-v2-v3 front
                //     0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, // v0-v3-v4-v5 right
                //     0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, // v0-v5-v6-v1 up
                //     -0.5, 0.5, 0.5, -0.5, 0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, // v1-v6-v7-v2 left
                //     -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, // v7-v4-v3-v2 down
                //     0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5 // v4-v7-v6-v5 back
                // ];
                const vertPosBuffer = gl.createBuffer();
                gl.bindBuffer(gl.ARRAY_BUFFER, vertPosBuffer);
                // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertPositions), gl.STATIC_DRAW);
                // const vertPosData = new Uint8Array(binData, 0, 288);
                const vertPosData = new Float32Array(binData, 0, 288 / Float32Array.BYTES_PER_ELEMENT);
                gl.bufferData(gl.ARRAY_BUFFER, vertPosData, gl.STATIC_DRAW);
                gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
                gl.enableVertexAttribArray(0);

                // const normals = [
                //     0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
                //     1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
                //     0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 up
                //     -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
                //     0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // v7-v4-v3-v2 down
                //     0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0 // v4-v7-v6-v5 back  
                // ];
                const normalBuffer = gl.createBuffer();
                gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
                // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
                // const normalData = new Uint8Array(binData, 288, 288);
                const normalData = new Float32Array(binData, 288, 288 / Float32Array.BYTES_PER_ELEMENT);
                gl.bufferData(gl.ARRAY_BUFFER, normalData, gl.STATIC_DRAW);
                gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
                gl.enableVertexAttribArray(1);

продолжение в следующем сообщении

8Observer8 · 15.12.2021, 01:13

начало в предыдущем сообщении

Код:

                // const indices = [
                //     0, 1, 2, 0, 2, 3,       // front
                //     4, 5, 6, 4, 6, 7,       // right
                //     8, 9, 10, 8, 10, 11,    // up
                //     12, 13, 14, 12, 14, 15, // left
                //     16, 17, 18, 16, 18, 19, // down
                //     20, 21, 22, 20, 22, 23  // back 
                // ];
                const indexBuffer = gl.createBuffer();
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
                // const indexData = new Uint8Array(binData, 576, 72);
                const indexData = new Uint16Array(binData, 576, 36);
                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);

                const projMatrix = glMatrix.mat4.create();
                glMatrix.mat4.perspective(projMatrix, 55 * Math.PI / 180, 1, 0.1, 500);
                const viewMatrix = glMatrix.mat4.create();
                glMatrix.mat4.lookAt(viewMatrix, [10, 15, 20], [0, 0, 0], [0, 1, 0]);
                const projViewMatrix = glMatrix.mat4.create();
                glMatrix.mat4.mul(projViewMatrix, projMatrix, viewMatrix);

                const modelMatrix = glMatrix.mat4.create();
                glMatrix.mat4.fromTranslation(modelMatrix, [0, 0, 0]);
                glMatrix.mat4.rotate(modelMatrix, modelMatrix, 0 * Math.PI / 180, [1, 0, 0]);
                glMatrix.mat4.scale(modelMatrix, modelMatrix, [5, 5, 5]);
                const mvpMatrix = glMatrix.mat4.create();
                glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
                const uMvpMatrixLocation = gl.getUniformLocation(program, "uMvpMatrix");
                gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
                const uModelMatrixLocation = gl.getUniformLocation(program, "uModelMatrix");
                gl.uniformMatrix4fv(uModelMatrixLocation, false, modelMatrix);

                const normalMatrix = glMatrix.mat4.create();
                glMatrix.mat4.invert(normalMatrix, modelMatrix);
                glMatrix.mat4.transpose(normalMatrix, normalMatrix);
                const uNormalMatrixLocation = gl.getUniformLocation(program, "uNormalMatrix");
                gl.uniformMatrix4fv(uNormalMatrixLocation, false, normalMatrix);

                const lightPosition = glMatrix.vec3.fromValues(7, 8, 9);
                const uLightPositionLocation = gl.getUniformLocation(program, "uLightPosition");
                gl.uniform3fv(uLightPositionLocation, lightPosition);

                gl.clearColor(0.2, 0.2, 0.2, 1);
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
                gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
            });
        });

        function loadFile(path, callback)
        {
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = () =>
            {
                if (xhr.readyState === 4 && xhr.status != 404)
                {
                    callback(xhr.responseText);
                }
            };
            xhr.open("GET", path, true);
            xhr.send();
        }

        function loadBin(path, callback)
        {
            const xhr = new XMLHttpRequest();

            xhr.onreadystatechange = () =>
            {
                if (xhr.readyState === 4 && xhr.status != 404)
                {
                    callback(xhr.response);
                }
            };

            xhr.open("GET", path, true);
            xhr.responseType = "arraybuffer";
            xhr.send();
        }
    </script>
</body>

</html>

BoxBlender3.gltf

Код:

{
    "asset" : {
        "generator" : "Khronos glTF Blender I/O v1.7.33",
        "version" : "2.0"
    },
    "scene" : 0,
    "scenes" : [
        {
            "name" : "Scene",
            "nodes" : [
                0
            ]
        }
    ],
    "nodes" : [
        {
            "mesh" : 0,
            "name" : "Cube"
        }
    ],
    "materials" : [
        {
            "doubleSided" : true,
            "name" : "Material",
            "pbrMetallicRoughness" : {
                "baseColorFactor" : [
                    0.800000011920929,
                    0.800000011920929,
                    0.800000011920929,
                    1
                ],
                "metallicFactor" : 0,
                "roughnessFactor" : 0.4000000059604645
            }
        }
    ],
    "meshes" : [
        {
            "name" : "Cube",
            "primitives" : [
                {
                    "attributes" : {
                        "POSITION" : 0,
                        "NORMAL" : 1
                    },
                    "indices" : 2,
                    "material" : 0
                }
            ]
        }
    ],
    "accessors" : [
        {
            "bufferView" : 0,
            "componentType" : 5126,
            "count" : 24,
            "max" : [
                1,
                1,
                1
            ],
            "min" : [
                -1,
                -1,
                -1
            ],
            "type" : "VEC3"
        },
        {
            "bufferView" : 1,
            "componentType" : 5126,
            "count" : 24,
            "type" : "VEC3"
        },
        {
            "bufferView" : 2,
            "componentType" : 5123,
            "count" : 36,
            "type" : "SCALAR"
        }
    ],
    "bufferViews" : [
        {
            "buffer" : 0,
            "byteLength" : 288,
            "byteOffset" : 0
        },
        {
            "buffer" : 0,
            "byteLength" : 288,
            "byteOffset" : 288
        },
        {
            "buffer" : 0,
            "byteLength" : 72,
            "byteOffset" : 576
        }
    ],
    "buffers" : [
        {
            "byteLength" : 648,
            "uri" : "BoxBlender3.bin"
        }
    ]
}

Катя93 · 08.01.2022, 21:48

Здравствуйте 8Observer8, меня интересует этот пример.
https://jsfiddle.net/8Observer8/pws1x7uv/, здесь вы используете, dropbox, где удалось получить прямую ссылку на object (https://dl.dropboxusercontent.com/s/...wys1k/cube.obj). Подскажите как правильно загрузить файл на dropbox и получить прямую ссылку на объект.

Вот пример части кода:

Код:

....

function main()
{
    // Retrieve <canvas> element
    var canvas = document.getElementById('webgl');

    // Get the rendering context for WebGL
    var gl = getWebGLContext(canvas);
    if (!gl)
    {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    // Get shader elements
    var vShaderElement = document.getElementById("VertexShader");
    var fShaderElement = document.getElementById("FragmentShader");
    if (vShaderElement == null)
    {
        console.log("Failed to get the vertex shader element");
        return;
    }
    if (fShaderElement == null)
    {
        console.log("Failed to get the fragment shader element");
        return;
    }

    // Get shader sources
    var vShaderSource = vShaderElement.firstChild.textContent;
    var fShaderSource = fShaderElement.firstChild.textContent;

    // Initialize shaders
    if (!initShaders(gl, vShaderSource, fShaderSource))
    {
        console.log('Failed to intialize shaders');
        return;
    }

    // Set the clear color and enable the depth test
    gl.clearColor(0.2, 0.2, 0.2, 1.0);
    gl.enable(gl.DEPTH_TEST);

    // Get the storage locations of attribute and uniform variables
    var program = gl.program;
    program.a_Position = gl.getAttribLocation(program, 'a_Position');
    program.a_Normal = gl.getAttribLocation(program, 'a_Normal');
    program.a_Color = gl.getAttribLocation(program, 'a_Color');
    program.u_MvpMatrix = gl.getUniformLocation(program, 'u_MvpMatrix');
    program.u_NormalMatrix = gl.getUniformLocation(program, 'u_NormalMatrix');

    if (program.a_Position < 0 || program.a_Normal < 0 || program.a_Color < 0 ||
        !program.u_MvpMatrix || !program.u_NormalMatrix)
    {
        console.log('Failed to get the storage locations of attribute or uniform variables');
        return;
    }

    // Prepare empty buffer objects for vertex coordinates, colors, and normals
    var model = initVertexBuffers(gl, program);
    if (!model)
    {
        console.log('Failed to set the vertex information');
        return;
    }

    // Calculate the view projection matrix
    var viewProjMatrix = new Matrix4();
    viewProjMatrix.setPerspective(30.0, canvas.width / canvas.height, 1.0, 5000.0);
    viewProjMatrix.lookAt(0.0, 500.0, 200.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

    // Start reading the OBJ file
    //readOBJFile('cube.obj', gl, model, 60, true);
    readOBJFile('https://dl.dropboxusercontent.com/s/wpnaqe0un2wys1k/cube.obj', gl, model, 60, true);

    var currentAngle = 0.0; // Current rotation angle [degree]
    var tick = function ()
    {   // Start drawing
        currentAngle = animate(currentAngle); // Update current rotation angle
        draw(gl, gl.program, currentAngle, viewProjMatrix, model);
        requestAnimationFrame(tick, canvas);
    };
    tick();
}

....

8Observer8 · 11.01.2022, 19:51

Катя, извините, что долго не отвечал. Почему-то уведомления об ответе в этой теме и о личном сообщении от форума пришли в спам на GMail.

Цитата:

Сообщение от Катя93

Подскажите как правильно загрузить файл на dropbox и получить прямую ссылку на объект.

Загружаете на Dropbox, как обычно. Копируете "share link" и модифицируете следующим образом:

Например, вы скопировали эту ссылку:

Код:

https://www.dropbox.com/s/wlvak215h0v75ug/correction.png?dl=0

Вместо "www" вы пишите "dl", а после "dropbox" добавляете "usercontent" и в конце ссылки удаляете "?dl=0". Получается прямая ссылка:

Код:

https://dl.dropboxusercontent.com/s/wlvak215h0v75ug/correction.png

Катя93 · 11.01.2022, 20:35

8Observer8, спасибо за помощь. Просто в интернете я не нашла информации как загрузить файл и получить к нему прямой доступ.

Катя93 · 11.01.2022, 21:09

Получилось ссылка вечно будет работать или потом она поменяется и станет не доступной?

Просто я загрузила один пример на codepen и там требуется подключение файла в исходниках json и мне нужно чтобы ссылка на dropbox постоянно была доступна.

Просто я уже пыталась создать ссылку на dropbox прямую но она потом поменялась и сейчас выдает 404 ошибку.

8Observer8 · 11.01.2022, 21:24

Цитата:

Сообщение от Катя93

Получилось ссылка вечно будет работать или потом она поменяется и станет не доступной?

Примеры из книги Мацуды и Ли я перенёс на JSFiddle летом 2017 года. Прошло 4 с половиной года, а ссылки на Dropbox всё работают. Я поискал, но не нашёл ограничений по работе ссылок по времени.

25.02.2021, 00:45	#72
8Observer8 Старожил Регистрация: 02.01.2011 Сообщений: 3,322	Пока удалил. Рано опубликовал. Надо немного переделать. Последний раз редактировалось 8Observer8; 25.02.2021 в 00:48.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
WebGL developer	Ojoteam	Фриланс	0	19.05.2017 12:37
Ищу моделера для браузерной WebGL игры	Kempston	Gamedev - cоздание игр: Unity, OpenGL, DirectX	0	31.03.2016 21:23
Пример использования Gera WebGL 3D Library	rekodDeveloper	JavaScript, Ajax	5	02.06.2015 16:05
Вопрос по Webgl	Halk_blr	Помощь студентам	0	23.02.2014 23:19
WebGl, использование Three.js оптимизировать и подправить код	dem66	JavaScript, Ajax	0	23.06.2012 20:14

11.01.2022, 20:35	#78
Катя93 Пользователь Регистрация: 11.01.2021 Сообщений: 48	8Observer8, спасибо за помощь. Просто в интернете я не нашла информации как загрузить файл и получить к нему прямой доступ.

11.01.2022, 21:09	#79
Катя93 Пользователь Регистрация: 11.01.2021 Сообщений: 48	Получилось ссылка вечно будет работать или потом она поменяется и станет не доступной? Просто я загрузила один пример на codepen и там требуется подключение файла в исходниках json и мне нужно чтобы ссылка на dropbox постоянно была доступна. Просто я уже пыталась создать ссылку на dropbox прямую но она потом поменялась и сейчас выдает 404 ошибку.