Небольшие примеры на WebGL

[Катя93]

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

В интернете есть несколько сайтов где мне надо в комментариях задать вопрос, но без графического сопровождения вопрос будет не понятен. Поэтому нужно загрузить картинки. Вообщем jpg файл нужно показать пользователям.

[8Observer8]

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

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

Я пробовал: gif-анимации, png, jpg, json, xml, txt. Например, на данном форуме есть ограничение на gif-анимации 117.2 Кб, а у меня получается 3-5 секунд анимации в ScreenToGif около 2 МБайт, а то и 5 МБайт, поэтому я использую Dropbox.

[Катя93]

Удалось загрузить модель на 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.

[8Observer8]

В данном случае так текстура не будет найдена. Надо её отдельно грузить: https://codepen.io/8Observer8/pen/GRMwJOY

[Катя93]

Все разобралась спасибо за помощь.

[8Observer8]

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

• Запустить игровую демку в браузере в один клик
• Исходники на GitHub
• Скачать архив с исходниками: minesweeper-2d-noobtuts-port-planckjs-webgl-js.zip (43.5 Кб)

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

Для создания игровой демки использовались инструменты:

• Легковесный бесплатный редактор кода VSCode, который занимает ~300 MB на жёстком диске
• Легковесный бесплатный редактор растровой графики GIMP, который занимает ~1 GB на жёстком диске
• Платный упаковщик тайлов Texture Packer Pro. Упаковывает тайлы в один png-файл. Генерируется json-файл, в котором хранятся параметры, например, имена тайлов и текстурные координаты прямоугольников в формате JSON
• Библиотека glMatrix для линейной алгебры, то есть для создания матриц и векторов и математических операций с ними. Эта библиотека подключается одной строкой кода:
  

  <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. Эта библиотека подключается одной строкой кода:
  

  <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();
    }

}

[8Observer8]

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

• Демка в песочнице: https://plnkr.co/edit/W49ndxcQemMgkAoP

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>

[8Observer8]

Моё поясняющее видео к предыдущему сообщению, как рассчитать координаты точек звезды: https://www.youtube.com/watch?v=0fu4X8xbOuY

[8Observer8]

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

Демка в браузере

[8Observer8]

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



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

• Демка для Jill
• Демка для Barry