Форум программистов, компьютерный форум, киберфорум
8Observer8
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  

Примеры с 2D/3D графикой на WebGPU/OpenGL/WebGL, C/C++, JavaScript/TypeScript, Python, C#/OpenTK

Запись от 8Observer8 размещена 29.02.2020 в 23:36. Обновил(-а) 8Observer8 21.09.2026 в 05:11
Показов 22201 Комментарии 66

Содержание блога

Примеры на WebGPU и C/C++ со сборкой под Android, Windows, Wasm из одной кодовой базы с помощью CMake



Пример создания WebGPU контекста на C и C++ с окном на SDL3 для Windows (MinGW), Linux (GCC, WSL), Android (Clang) и WebAssembly (Clang, Emscripten) из одной кодовой базы на CMake



Исходники:

Исходники версии C/C++ Compat могут быть скомпилированы с помощью компиляторов gcc (C) и g++ (C++), но проект настроен на C++. На GitHub в README.md есть ссылки на пошаговое руководство по установке библиотек. Пример собирается в статические исполняемые файлы для Windows, Linux, Android и WebAssembly (Emscripten) из одной кодовой базы с помощью CMake. Все сборки запускаются на своих платформах. Сборки можно скачать на вкладке Releases (сборки есть только в версии на C). Сборка для Linux протестирована на Ubuntu 26 и Fedora 44 на WSL. Сборка для Linux настроена для сборки из под Ubuntu.

Вы можете установить Linux на Windows 10/11 простыми командами, например, Ubuntu и Fedora:

Bash
1
2
wsl --install -d Ubuntu
wsl --install -d FedoraLinux-44
Полный список доступных дистрибутивов можно вывести командой:

Bash
1
wsl --list --online
На данный момент выводится следующий список доступных дистрибутивов:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Ubuntu                          Ubuntu
Ubuntu-26.04                    Ubuntu 26.04 LTS
Ubuntu-24.04                    Ubuntu 24.04 LTS
Ubuntu-22.04                    Ubuntu 22.04 LTS
openSUSE-Tumbleweed             openSUSE Tumbleweed
openSUSE-Leap-16.0              openSUSE Leap 16.0
SUSE-Linux-Enterprise-15-SP7    SUSE Linux Enterprise 15 SP7
SUSE-Linux-Enterprise-16.0      SUSE Linux Enterprise 16.0
kali-linux                      Kali Linux Rolling
Debian                          Debian GNU/Linux
AlmaLinux-8                     AlmaLinux OS 8
AlmaLinux-9                     AlmaLinux OS 9
AlmaLinux-Kitten-10             AlmaLinux OS Kitten 10
AlmaLinux-10                    AlmaLinux OS 10
archlinux                       Arch Linux
FedoraLinux-44                  Fedora Linux 44
FedoraLinux-43                  Fedora Linux 43
eLxr                            eLxr 12.12.0.0 GNU/Linux
OracleLinux_7_9                 Oracle Linux 7.9
OracleLinux_8_10                Oracle Linux 8.10
OracleLinux_9_5                 Oracle Linux 9.5
SUSE-Linux-Enterprise-15-SP6    SUSE Linux Enterprise 15 SP6
Пошаговые туториалы: https://ivan-enzhaev.github.io/?lang=ru

Примеры на OpenGL со сборкой под Android, Windows, Wasm из одной кодовой базы с помощью CMake



Проигрывание анимации с помощью библиотеки ozz-animation



Запустить в браузере

Исходники



Переключение между анимациями с помощью библиотеки ozz-animation



Запустить в браузере

Исходники



Смешивание анимаций с помощью библиотеки ozz-animation



Запустить в браузере

Исходники



Перемещение с помощью библиотеки физики Box3D, переключение и смешивание анимаций с помощью библиотеки ozz-animation



Запустить в браузере в один клик (управление на WASD и клавиши-стрелки)

Исходники



Одна из лучших книг для начинающих: "WebGL. Программирование трехмерной графики". Она на WebGL на JavaScript, но подходит для понимания базового OpenGL на любых языках:
Простые игрушки:
Примеры на OpenGL и WebGL:
WebGL, JavaScript:
WebGL 1.0, TypeScript:
WebGL 2.0, TypeScript:
OpenGL1, Python:
Звуки:
SDL2, Python:
WinAPI, OpenGL 1, Си:
OpenGL1, C++:
OpenGL ES 2.0, C++:
OpenGL3, Python:
ImGUI, C++, Python:
Домик:
Qt6, C++, QPainter:
Шейдерный OpenGL2, C++:
Задел для игры Го на веб-сокетах

PyGame, PyBox2D:
QtSFML:
Python Blender API:
Для моего ноутбука Asus K53SV оптимальной версией Blender оказалась версия 2.67b:
C++, Qt, OpenGL:
Python, Qt, OpenGL (PyQt5 и PySide2):
JavaScript, Canvas API, C++, QPainter, Qt3D, SFML, FreeGLUT

WebGL, JavaScript ES5:
Canvas API, JavaScript ES5:
Canvas API, TypeScript
C++, Qt3D
C++, FreeGLUT, OpenGL
С++, SFML, SDL2, OpenGL:
Qt, C++, SFML




Мои примеры на сторонних ресурсах:


OpenAL:


Миниатюры

Название: 205941407-82cf7abd-916f-4323-bc17-7ce0e8e4c62d.png
Просмотров: 2819

Размер: 4.5 КбНазвание: 206231066-370b4911-bef8-4cc1-b6e9-9a8ffc6cdf3a.png
Просмотров: 2797

Размер: 3.8 КбНазвание: 206235214-8485b125-8a06-49b0-90a3-4421e86cae43.png
Просмотров: 2786

Размер: 7.3 КбНажмите на изображение для увеличения
Название: 206416446-4926cccf-a96a-4aea-9589-afa21d648ed8.png
Просмотров: 582
Размер:	15.8 Кб
ID:	7845Название: 206418855-06603c5c-6b5b-47c5-abaf-e498c8e3a696.png
Просмотров: 2777

Размер: 7.9 КбНазвание: 207072313-a2d4fc3e-8afe-4abc-8240-14e79877663a.png
Просмотров: 3170

Размер: 2.2 Кб
Вложения
Тип файла: zip hello-world-imgui-sdl2-cpp.zip (1.61 Мб, 299 просмотров)
Тип файла: zip cyrillic-imgui-sdl2-cpp.zip (2.25 Мб, 269 просмотров)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Всего комментариев 66
Комментарии
  1. Старый комментарий
    Сферическая собака с вращением клавишами-стрелками и текстурированным полом на OpenGL1, GLUT и Python

    pip install Pillow PyOpenGL


    Скрипт для Blender 2.67b, который выводит в консоль координаты и размеры сфер расставленных в Blender. В Blender'е должен быть создать пустой объект "Dog", а сферы должны быть дочерними объектами.

    dog.py

    Python
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    
    import bpy
     
    print("")
    print("")
    print("")
    objectName = "Dog"
    n = len(bpy.data.objects[objectName].children)
    print("#define AMOUNT_OF_SPHERES " + str(n))
    print("")
    print("")
    print("const float positions[][3] = {")
    for child in bpy.data.objects[objectName].children:
        loc = child.location
        x = round(loc.x, 4)
        y = round(loc.z, 4)
        z = -round(loc.y, 4)
        print("    { " + str(x) + ", " + str(y) + ", " + str(z) + " },")
    print("};")
     
    print("")
    print("const float scales[][3] = {")
    for child in bpy.data.objects[objectName].children:
        scale = child.scale
        x = round(scale.x, 4)
        y = round(scale.y, 4)
        z = round(scale.z, 4)
        print("    { " + str(x) + ", " + str(y) + ", " + str(z) + " },")
    print("};")
    Запись от 8Observer8 размещена 18.01.2023 в 16:43 8Observer8 на форуме
  2. Старый комментарий
    Эквалайзер на OpenGL1, FreeGLUT и C++

    Исходники: equalizer-opengl1-freeglut-cpp.zip (607.4 Кб)





    makefile

    Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    # Building Command: mingw32-make
    # Command to run: app
    # Key to hide console: -mwindows
     
    INC = -I"E:\Libs\freeglut-3.2.2-mingw-64-bit\include" \
          -I"E:\Libs\glu\include"
     
    LIB = -L"E:\Libs\freeglut-3.2.2-mingw-64-bit\lib"
     
    all: main.o
        g++ main.o $(LIB) -D FREEGLUT_STATIC -lfreeglut_static -lopengl32 \
        -lwinmm -lgdi32 -lglu32 -static-libgcc -Wl,-Bstatic -lstdc++ \
        -lwinpthread -o app.exe
     
    main.o: main.cpp
        g++ -c $(INC) main.cpp
    main.cpp

    C++
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    
    #define FREEGLUT_STATIC
    #include <GL/freeglut.h>
    #include <GL/glu.h>
    #include <iostream>
     
    int currentTime;
    int lastTime = 0;
    float dt, time = 0.f;
    const float delay = 0.1f;
     
    const int maxHight = 8.f;
    const int minHight = 1.f;
    int currentHight = minHight;
    int dir = 1;
     
    struct Color {
        Color(float r, float g, float b) {
            this->r = r;
            this->g = g;
            this->b = b;
        }
        float r, g, b;
    };
     
    void drawRect(float x, float y, float w, float h, Color color) {
        glPushMatrix();
        {
            glTranslatef(x, y, 0.f);
            glScalef(w, h, 1.f);
            glColor3f(color.r, color.g, color.b);
            glBegin(GL_QUADS);
            {
                glVertex2f(-0.5f, -0.5f);
                glVertex2f(-0.5f, 0.5f);
                glVertex2f(0.5f, 0.5f);
                glVertex2f(0.5f, -0.5f);
            }
            glEnd();
        }
        glPopMatrix();
    }
     
    void draw()
    {
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
        glMatrixMode(GL_MODELVIEW);
        glLoadIdentity();
     
        // Draw objects
        for (int i = 0; i < currentHight; ++i)
        {
            drawRect(20.f, i * 12.f + 10.f, 20.f, 10.f, Color(0.9f, 0.8f, 0.7f));
        }
     
        glutSwapBuffers();
    }
     
    void update(int)
    {
        currentTime = glutGet(GLUT_ELAPSED_TIME);
        dt = (currentTime - lastTime) / 1000.f;
        lastTime = currentTime;
     
        time += dt;
        if (time > delay) {
            time = 0.f;
            currentHight += dir;
            if (currentHight >= maxHight) {
                dir = -1;
            }
            if (currentHight <= minHight) {
                dir = 1;
            }
        }
     
        glutPostRedisplay();
        glutTimerFunc(16, update, 0);
    }
     
    void init()
    {
        glClearColor(0.2f, 0.2f, 0.2f, 1.f);
        glMatrixMode(GL_PROJECTION);
        glLoadIdentity();
        glOrtho(0.f, 100.f, 0.f, 100.f, 1.f, -1.f);
    }
     
    int main(int argc, char *argv[])
    {
        glutInit(&argc, argv);
        glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);
        glutInitWindowSize(350, 350);
        glutInitWindowPosition(100, 100);
        glutCreateWindow("OpenGL1, FreeGLUT, C++");
        glutDisplayFunc(draw);
        init();
        update(0);
        glutMainLoop();
        return 0;
    }
    Запись от 8Observer8 размещена 18.01.2023 в 17:08 8Observer8 на форуме
  3. Старый комментарий
    Простые кирпичи на OpenGL 2.1, PySDL и Python

    Немного переправил (заменил in/out на attribute/varying) пример с OpenGL3, PySDL2, Python на OpenGL 2.1, PySDL2, Python. Добавил сглаживание на будущее, но здесь оно не имеет значения:

    Python
    1
    
    SDL_GL_SetAttribute(SDL_GL_MULTISAMPLESAMPLES, 4)


    Для запуска примера скачайте и поставьте интерпретатор Python (https://www.python.org/downloads/) и скопируйте эту команду в терминал консоли для установки необходимых пакетов:

    pip install numpy PyOpenGL PySDL2 pysdl2-dll
    Исходники
    Запись от 8Observer8 размещена 21.01.2023 в 14:53 8Observer8 на форуме
  4. Старый комментарий
    Перевёл игру-платформер с самописной физикой от Olga28 на WebGL

    Демка в браузере: https://8observer8.github.io/w... former-2d/ Управление: стрелки влево/вправо и стрелка вверх - прыжок.

    Тема: https://www.cyberforum.ru/java... 75879.html

    Запись от 8Observer8 размещена 09.02.2023 в 12:22 8Observer8 на форуме
  5. Старый комментарий
    Расчёт точек пятиконечной звезды.

    Демка в песочнице на WebGL и JavaScript: https://plnkr.co/edit/W49ndxcQemMgkAoP
    Исходники на форуме

    Сделал видео:

    Запись от 8Observer8 размещена 09.02.2023 в 13:25 8Observer8 на форуме
  6. Старый комментарий
    Запись от 8Observer8 размещена 12.02.2023 в 05:08 8Observer8 на форуме
  7. Старый комментарий
    Запись от 8Observer8 размещена 12.02.2023 в 15:54 8Observer8 на форуме
  8. Старый комментарий
    Запись от 8Observer8 размещена 13.02.2023 в 05:24 8Observer8 на форуме
  9. Старый комментарий
    Запись от 8Observer8 размещена 13.02.2023 в 19:06 8Observer8 на форуме
  10. Старый комментарий
    Некоторый прогресс в написании Супер Марио на WebGL. Тайлы и коллайдеры расставил в Tiled. Упаковал тайлы и спрайты в один текстурный атлас с помощью Free Texture Packer (сайт открывается с помощью VPN, например, с помощью плагина VeePN для браузера). Физика на OimoPhysics. Нарисовал с помощью чистого WebGL, а линейная алгебра на glMatrix

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

    Запись от 8Observer8 размещена 03.03.2023 в 20:08 8Observer8 на форуме
  11. Старый комментарий
    Запись от 8Observer8 размещена 27.03.2023 в 12:33 8Observer8 на форуме
  12. Старый комментарий
    Добавил содержание в шапку темы: Небольшие примеры на WebGL
    Запись от 8Observer8 размещена 13.05.2023 в 18:52 8Observer8 на форуме
  13. Старый комментарий
    WebGL-демка вывода шрифтов английского, русского и китайского с обводкой и Distance Field (текст не пиксилируется при приближении камеры) на JS и Rollup. Шрифты конвертированы в Distance Field с помощью программы Hiero.

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

    Запись от 8Observer8 размещена 23.06.2023 в 13:22 8Observer8 на форуме
  14. Старый комментарий
    Пример бросания луча на WebGL 1.0 с помощью библиотеки физики box2d-core (https://lusito.github.io/box2d.ts/) на JavaScript

    Пролетающий квадрат задевает луч и выводит сообщение в консоль. Реализовано рисование коллайдеров, используя штатные средства box2d-core.



    Исходники:
    Инструкция по запуску примера с помощью Rollup в Debug и Release режимах:

    Установите глобально следующий пакеты командой:

    npm i -g http-server rollup uglify-js
    Запустите http-server и во время запуска добавьте ключ -c-1, чтобы отключить кеширование ресурсов браузером:

    http-server -c-1
    Запуск отладочного режима Rollup. В этом режиме Rollup будет следить за файлами и как только вы сохраните файл от соберёт новый bundle, то есть все js-файлы в один файл и сохранит отладочную информацию, чтобы можно было отлаживать программу по шагам, например, в браузере:

    npm run dev
    Сборка в релиз, то есть в один файл без отладочной информации с сжатием файла с помощью пакета UglifyJS. Если вы запустили отладочный режим ранее, то остановите его командой Ctrl+C в CMD. Наберите команду для сборки проекта в Release:

    npm run release
    После этой команды вы можете опубликовать содержимое папки "public" на каком-либо хостинге: Например, опубликовать на бесплатном хостинге GitHub Pages (без серверной части), либо на бесплатном Render (с серверной частью на Node.js, либо Python и т.д.). Либо можете добавить папку "public" в архив и перетащить этот архив на бесплатный хостинг https://www.netlify.com/
    Запись от 8Observer8 размещена 04.07.2023 в 11:54 8Observer8 на форуме
  15. Старый комментарий
    Сделал отладочное рисование коллайдеров типа "Коробка" и "Круг" с помощью движка игровой физики Box2D-WASM и игрового движка Melon.js на JavaScript

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

    Код на GitHub

    Песочницы:

    Запись от 8Observer8 размещена 21.07.2023 в 17:09 8Observer8 на форуме
  16. Старый комментарий
    Запись от 8Observer8 размещена 30.03.2024 в 14:42 8Observer8 на форуме
  17. Старый комментарий
    Запись от 8Observer8 размещена 30.03.2024 в 16:29 8Observer8 на форуме
  18. Старый комментарий
    Видео для мотивации, что можно делать в 3D:



    Запись от 8Observer8 размещена 26.12.2025 в 17:18 8Observer8 на форуме
    Обновил(-а) 8Observer8 26.12.2025 в 18:24
  19. Старый комментарий
    Рисование треугольника на OpenGL 1 в окне WinAPI на чистом Си от Андрей1926 с модификациями

    Код находится в сообщении темы Не работает клик мыши Код прикреплён к сообщению. Проект можно сконфигурировать, скомпилировать, и запустить EXE командами из консоли (это батники в папке проекта):

    Bash
    1
    2
    3
    
    config-exe
    build-exe
    run-exe
    Либо можно открыть проект в какой-нибудь IDE. Например, в Qt Creator: "File" > "Open File or Project..." и выбрать "CMakeLists.txt" из папки проекта. Установщик Qt Creator можно скачать отдельно от фреймворка Qt c GitHub: https://github.com/qt-creator/qt-creator/releases Для установки CMake и MinGW можете выполнить пошаговую инструкцию: Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE

    Я добавил лишь использование ортогональной матрицы, чтобы координатная сетка была от [0, 512] по X и [0, 512] по Y. Ось Y смотрит вниз. Начало системы координат находится в левом верхнем углу экрана:

    C
    1
    2
    3
    4
    5
    6
    7
    8
    
        glMatrixMode(GL_PROJECTION);
        glLoadIdentity();
        // glOrtho(left, right, bottom, top, near, far)
        glOrtho(0.0, 512.0, 512.0, 0.0, -1.0, 1.0);
        //      left,right, bottom,top, near, far
     
        glMatrixMode(GL_MODELVIEW);
        glLoadIdentity();
    С учётом того, что размер окна 512x512 координаты клика мыши будут совпадать с координатной сетки 2D графики на OpenGL. В этом случае не нужно пересчитывать координаты клика мыши. Специально зафиксировал размер окна.
    Запись от 8Observer8 размещена 22.03.2026 в 19:48 8Observer8 на форуме
    Обновил(-а) 8Observer8 22.03.2026 в 19:55
  20. Старый комментарий
    Перевод примера от Андрей1926 на OpenGL 3.3

    Пример выводит вращающийся треугольник. Андрей1926 своей теме Не работает клик мыши использует OpenGL 1 и WinAPI. Перевёл на OpenGL 3.3 и оставил окно на WinAPI. Для работы с матрицами используется CGLM.

    Исходники

    Запись от 8Observer8 размещена 22.03.2026 в 22:44 8Observer8 на форуме
 
Новые блоги и статьи
Nekobox - outbounds[0].transport: unknown transport type: raw
damix 01.10.2026
Фикс ошибки Правым кликом по серверу -> отладочная информация -> edit Заменить "net": "raw", на "net": "tcp", Нажать кнопку reload.
Программный домашний кинотеатр
russiannick 27.09.2026
Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого
zorxor 21.09.2026
Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .
Мобильное приложение ColorStep
pavlinmavlin 17.09.2026
Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .
Запрет дублирования строк в табличной части
Maks 13.09.2026
Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр.
Jin X 06.09.2026
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .
Программа опроса у.з. расходомера SLS-720F
Argus19 02.09.2026
Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0.
Maks 31.08.2026
При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru