Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > разработка игр, графический дизайн и моделирование > Gamedev - cоздание игр: Unity, OpenGL, DirectX
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 11.01.2022, 21:41   #81
Катя93
Пользователь
 
Регистрация: 11.01.2021
Сообщений: 48
По умолчанию

Можно так любую информацию загружать и получать прямые ссылке?

В интернете есть несколько сайтов где мне надо в комментариях задать вопрос, но без графического сопровождения вопрос будет не понятен. Поэтому нужно загрузить картинки. Вообщем jpg файл нужно показать пользователям.
Катя93 вне форума Ответить с цитированием
Старый 11.01.2022, 21:49   #82
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Цитата:
Сообщение от Катя93 Посмотреть сообщение
Можно так любую информацию загружать и получать прямые ссылке?
Я пробовал: gif-анимации, png, jpg, json, xml, txt. Например, на данном форуме есть ограничение на gif-анимации 117.2 Кб, а у меня получается 3-5 секунд анимации в ScreenToGif около 2 МБайт, а то и 5 МБайт, поэтому я использую Dropbox.
8Observer8 вне форума Ответить с цитированием
Старый 12.01.2022, 01:02   #83
Катя93
Пользователь
 
Регистрация: 11.01.2021
Сообщений: 48
По умолчанию

Удалось загрузить модель на codepen, но почему-то текстура не подгружается, дело в том что она находится внутри json. Вот здесь:
Цитата:
"materials":[{
"visible":true,
"shading":"lambert",
"mapDiffuse":"eva-texture.png",
"blending":"NormalBlending",
"mapDiffuseRepeat":[1,1],
"DbgColor":15658734,
"colorDiffuse":[1,1,1],
"mapDiffuseAnisotropy":1,
"depthWrite":true,
"DbgName":"Eva",
"transparent":false,
"mapDiffuseWrap":["RepeatWrapping","RepeatWrappin g"],
"DbgIndex":0,
"depthTest":true,
"wireframe":false,
"colorEmissive":[0,0,0],
"opacity":1
}]
Все файлы и json и png-текстуры загружены на dropbox. Пример вот ссылка.
https://codepen.io/Smith37/pen/jOGQEGv
Работает анимация проигрывается, а текстуры нет. Исходник не мой, взят он с этой статьи

https://unboring.net/workflows/animation.html.
Катя93 вне форума Ответить с цитированием
Старый 12.01.2022, 02:05   #84
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

В данном случае так текстура не будет найдена. Надо её отдельно грузить: https://codepen.io/8Observer8/pen/GRMwJOY
8Observer8 вне форума Ответить с цитированием
Старый 12.01.2022, 19:57   #85
Катя93
Пользователь
 
Регистрация: 11.01.2021
Сообщений: 48
По умолчанию

Все разобралась спасибо за помощь.
Катя93 вне форума Ответить с цитированием
Старый 09.03.2022, 01:37   #86
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Игровая демка "Сапёр" на чистом WebGL 1.0 и JavaScript портированная из туториала Unity 2D Minesweeper Tutorial от NoobTuts

01 - you win.png 02 - you lose.png

Для создания игровой демки использовались инструменты:
  • Легковесный бесплатный редактор кода VSCode, который занимает ~300 MB на жёстком диске
  • Легковесный бесплатный редактор растровой графики GIMP, который занимает ~1 GB на жёстком диске
  • Платный упаковщик тайлов Texture Packer Pro. Упаковывает тайлы в один png-файл. Генерируется json-файл, в котором хранятся параметры, например, имена тайлов и текстурные координаты прямоугольников в формате JSON
  • Библиотека glMatrix для линейной алгебры, то есть для создания матриц и векторов и математических операций с ними. Эта библиотека подключается одной строкой кода:
    Код HTML:
    <script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/gl-matrix-min.js"></script>
  • Библиотека Planck.js для создания обработчика нажатия мыши по ячейке поля. Planck.js - это порт физического движка Box2D. Эта библиотека позволяет очень просто обрабатывать клик по объекту без необходимости писать кучу if. В туториале на Unity тоже используется компонент "Box Collider 2D" для обработки нажатия мыши по ячейке поля. Я написал максимально близко к туториалу на Unity. Эта библиотека подключается одной строкой кода:
    Код HTML:
    <script src="https://cdn.jsdelivr.net/npm/planck-js@0.3.31/dist/planck.min.js"></script>

Используется рекурсивный алгоритм Заливка (Flood Fill), чтобы открыть пустые ячейки. Реализация алгоритма немного не доработана. На первом скриншоте показано, как есть, а на втором, как должно быть, то есть ячейка с двойкой должна была открыться:

01.png 02.png

Обработку клика по объекту я взял из этой записи блога: Handling Mouse Click in Box2D. На всякий случай скопирую всю запись блога, потому что ссылка может стать мёртвой, например, из-за того, что автор записи перестанет платить за хостинг:

Цитата:
Handling Mouse Click in Box2D

Often in a game you would want to know the b2Body on which the mouse click occurred .

The co-ordinates for the mouse click can be obtained as follows,
Код:
var mouseX, mouseY;
function handleMouseDown(e) { 
    mouseX = (e.clientX - canvas.offsetLeft) / SCALE;
    mouseY = (e.clientY - canvas.offsetTop) / SCALE;
    getBodyAtMouse();
}
The b2Body at the Mouse Click can be obtained as follows,
Код:
var selectedBody;
function getBodyAtMouse() {
 mousePVec = new b2Vec2(mouseX, mouseY);
    var aabb = new b2AABB();
    aabb.lowerBound.Set(mouseX - 0.001, mouseY - 0.001);
    aabb.upperBound.Set(mouseX + 0.001, mouseY + 0.001);
    selectedBody = null;
    world.QueryAABB(getBodyCB, aabb);
    if(selectedBody!= null && selectedBody.GetUserData() != null)
              console.log(selectedBody.GetUserData().name);
    return selectedBody;
}
b2AABB() returns an axis aligned bounding box defined by the upper and lower bounds. I have set the upper and lower bound of the box to the mouse click points. The AABB query returns all fixtures overlapping in the given the rectangular area, the callback function is called for each of the fixture in the bounding box. The callback is usually used to create a list of fixtures/body for further processing.

Код:
function getBodyCB(fixture) {
       if(fixture.GetShape().TestPoint(fixture.GetBody().GetTransform(), mousePVec)){
                  selectedBody = fixture.GetBody();
    }
}
Вложения
Тип файла: zip minesweeper-2d-noobtuts-port-planckjs-webgl-js.zip (43.5 Кб, 1 просмотров)
8Observer8 вне форума Ответить с цитированием
Старый 12.12.2022, 17:54   #87
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Пятиконечная звезда



assets/shaders/default.vert

Код:
attribute vec2 aPosition;
uniform mat4 uMvpMatrix;

void main() {
    gl_Position = uMvpMatrix * vec4(aPosition, 0.0, 1.0);
}
assets/shaders/default.frag

Код:
precision mediump float;
uniform vec3 uColor;

void main() {
    gl_FragColor = vec4(uColor, 1.0);
}
index.html

Код:
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>

<body>
    <canvas id="renderCanvas" width="300" height="300"></canvas>

    <script type="importmap">
        {
            "imports": {
                "gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3"
            }
        }
    </script>

    <script type="module">
        import { mat4, vec3 } from "gl-matrix";

        let gl, program;

        function initWebGLContext(canvasName) {
            const canvas = document.getElementById(canvasName);
            if (canvas === null) {
                console.log(`Failed to get a canvas element with the name "${canvasName}"`);
                return false;
            }
            gl = canvas.getContext("webgl", { alpha: false, premultipliedAlpha: false });
            return true;
        }

        async function createShaderProgram(path, vertShaderFileName, fragShaderFileName) {
            let response = await fetch(path + vertShaderFileName);
            const vertShaderSource = await response.text();
            response = await fetch(path + fragShaderFileName);
            const fragShaderSource = await response.text();

            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));
                return null;
            };

            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));
                return null;
            };

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

            return program;
        }

        async function init() {
            if (!initWebGLContext("renderCanvas")) return;

            gl.clearColor(0.8, 0.8, 0.95, 1);
            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

            program = await createShaderProgram("assets/shaders/",
                "default.vert", "default.frag");

            const vertPositions = [
                0, 0, // 0
                0.1123, 0.1545,
                0, 0.5,
                0, 0, // 1
                0, 0.5,
                -0.1123, 0.1545
            ];
            const vertPosBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertPosBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertPositions), gl.STATIC_DRAW);

            const aPositionLocation = gl.getAttribLocation(program, "aPosition");
            gl.vertexAttribPointer(aPositionLocation, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(aPositionLocation);

            const projMatrix = mat4.create();
            mat4.ortho(projMatrix, -50, 50, -50, 50, -10, 10);

            const viewMatrix = mat4.create();
            mat4.lookAt(viewMatrix, [0, 0, 10], [0, 0, 0], [0, 1, 0]);

            const projViewMatrix = mat4.create();
            mat4.mul(projViewMatrix, projMatrix, viewMatrix);

            const modelMatrix = mat4.create();
            const mvpMatrix = mat4.create();
            const uMvpMatrixLocation = gl.getUniformLocation(program, "uMvpMatrix");

            const uColorLocation = gl.getUniformLocation(program, "uColor");

            gl.clear(gl.COLOR_BUFFER_BIT);

            // Star
            const radStep = 2 * Math.PI / 5;
            for (let rad = 0; rad < 2 * Math.PI; rad += radStep) {
                mat4.fromTranslation(modelMatrix, [0, 0, 0]);
                mat4.rotateZ(modelMatrix, modelMatrix, rad);
                mat4.scale(modelMatrix, modelMatrix, [50, 50, 1]);
                mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
                gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
                gl.uniform3fv(uColorLocation, [0.5, 0, 0]);
                gl.drawArrays(gl.TRIANGLES, 0, 6);
            }
        }

        init();
    </script>
</body>

</html>
Изображения
Тип файла: png 207072313-a2d4fc3e-8afe-4abc-8240-14e79877663a.png (2.2 Кб, 31 просмотров)
8Observer8 вне форума Ответить с цитированием
Старый 03.03.2023, 20:12   #88
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Моё поясняющее видео к предыдущему сообщению, как рассчитать координаты точек звезды: https://www.youtube.com/watch?v=0fu4X8xbOuY
8Observer8 вне форума Ответить с цитированием
Старый 03.03.2023, 20:14   #89
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Некоторый прогресс в написании Супер Марио на WebGL. Тайлы и коллайдеры расставил в Tiled. Упаковал тайлы и спрайты в один текстурный атлас с помощью Free Texture Packer (сайт открывается с помощью VPN, например, с помощью плагина VeePN для браузера). Физика на OimoPhysics. Нарисовал с помощью чистого WebGL, а линейная алгебра на glMatrix

Демка в браузере
Изображения
Тип файла: jpg mario-2d-jumps-oimophysics-webgl-js.jpg (33.2 Кб, 0 просмотров)
8Observer8 вне форума Ответить с цитированием
Старый 29.05.2023, 07:44   #90
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Реализовал простейший мультиплеер, используя WebSockets (пакет https://www.npmjs.com/package/ws) и Node.js. Отправляю ввод с клавиатуры на сервер, который ретранслирует его на другие клиенты. Используется WebGL 1.0, glMatrix и OimoPhysics. Извлёк оригинальные модели, текстуры и анимации, используя RE1MV. Создал скелетную анимацию без скиннинга с помощью Blender Python API. Скиннинг дорог по ресурсам и не нужен для моделей этой игры, в которой все части анимационных моделей - это отдельные объекты.



В демках ниже экспортируются в WebGL все извлечённые анимации для Jill и Barry из формата .dae (COLLADA). Крутить камеру с зажатым колёсиком мыши. Приближать/отдалять камеру - вращением колёсика мыши. Двигать камеру - правой кнопкой мыши:

8Observer8 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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