Примеры с 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
Метки .net, c, c#, c++, cmake, javascript, opengl, opentk, python, sdl, sdl3, typescript, webgl, webgpu, си
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Всего комментариев 66
Комментарии
-
Сферическая собака с вращением клавишами-стрелками и текстурированным полом на OpenGL1, GLUT и Python
Скрипт для 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
-
Эквалайзер на OpenGL1, FreeGLUT и C++
Исходники: equalizer-opengl1-freeglut-cpp.zip (607.4 Кб)
makefile
main.cppCode 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
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
-
Простые кирпичи на 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/) и скопируйте эту команду в терминал консоли для установки необходимых пакетов:
ИсходникиЗапись от 8Observer8 размещена 21.01.2023 в 14:53
-
Перевёл игру-платформер с самописной физикой от Olga28 на WebGL
Демка в браузере: https://8observer8.github.io/w... former-2d/ Управление: стрелки влево/вправо и стрелка вверх - прыжок.
Тема: https://www.cyberforum.ru/java... 75879.html
Запись от 8Observer8 размещена 09.02.2023 в 12:22
-
Расчёт точек пятиконечной звезды.
Демка в песочнице на WebGL и JavaScript: https://plnkr.co/edit/W49ndxcQemMgkAoP
Исходники на форуме
Сделал видео:
Запись от 8Observer8 размещена 09.02.2023 в 13:25
-
Запись от 8Observer8 размещена 12.02.2023 в 05:08
-
Запись от 8Observer8 размещена 12.02.2023 в 15:54
-
Запись от 8Observer8 размещена 13.02.2023 в 05:24
-
Запись от 8Observer8 размещена 13.02.2023 в 19:06
-
Некоторый прогресс в написании Супер Марио на WebGL. Тайлы и коллайдеры расставил в Tiled. Упаковал тайлы и спрайты в один текстурный атлас с помощью Free Texture Packer (сайт открывается с помощью VPN, например, с помощью плагина VeePN для браузера). Физика на OimoPhysics. Нарисовал с помощью чистого WebGL, а линейная алгебра на glMatrix
Демка в браузере
Запись от 8Observer8 размещена 03.03.2023 в 20:08
-
Запись от 8Observer8 размещена 27.03.2023 в 12:33
-
Добавил содержание в шапку темы: Небольшие примеры на WebGLЗапись от 8Observer8 размещена 13.05.2023 в 18:52
-
WebGL-демка вывода шрифтов английского, русского и китайского с обводкой и Distance Field (текст не пиксилируется при приближении камеры) на JS и Rollup. Шрифты конвертированы в Distance Field с помощью программы Hiero.
Демка в браузере
Запись от 8Observer8 размещена 23.06.2023 в 13:22
-
Пример бросания луча на WebGL 1.0 с помощью библиотеки физики box2d-core (https://lusito.github.io/box2d.ts/) на JavaScript
Пролетающий квадрат задевает луч и выводит сообщение в консоль. Реализовано рисование коллайдеров, используя штатные средства box2d-core.
Исходники:- PlayCode: https://playcode.io/1523196
- Plunker: https://plnkr.co/edit/Zwz0EcTnFOQazZgL?preview
- Исходники на GitHub этого примера с Rollup с инструкцией по установке и запуску: https://github.com/8Observer8/... e-webgl-js
Инструкция по запуску примера с помощью Rollup в Debug и Release режимах:
Установите глобально следующий пакеты командой:
Запустите http-server и во время запуска добавьте ключ -c-1, чтобы отключить кеширование ресурсов браузером:
Запуск отладочного режима Rollup. В этом режиме Rollup будет следить за файлами и как только вы сохраните файл от соберёт новый bundle, то есть все js-файлы в один файл и сохранит отладочную информацию, чтобы можно было отлаживать программу по шагам, например, в браузере:
Сборка в релиз, то есть в один файл без отладочной информации с сжатием файла с помощью пакета UglifyJS. Если вы запустили отладочный режим ранее, то остановите его командой Ctrl+C в CMD. Наберите команду для сборки проекта в Release:
После этой команды вы можете опубликовать содержимое папки "public" на каком-либо хостинге: Например, опубликовать на бесплатном хостинге GitHub Pages (без серверной части), либо на бесплатном Render (с серверной частью на Node.js, либо Python и т.д.). Либо можете добавить папку "public" в архив и перетащить этот архив на бесплатный хостинг https://www.netlify.com/Запись от 8Observer8 размещена 04.07.2023 в 11:54
-
Сделал отладочное рисование коллайдеров типа "Коробка" и "Круг" с помощью движка игровой физики Box2D-WASM и игрового движка Melon.js на JavaScript
Демка в браузере
Код на GitHub
Песочницы:
- Replit: https://replit.com/@8Observer8... njs-and-JS
- Plunker: https://plnkr.co/edit/FPE7qRMIWhAhK5M1?preview
- Glitch: https://glitch.com/edit/#!/sud... ing-marble
Запись от 8Observer8 размещена 21.07.2023 в 17:09
-
Запись от 8Observer8 размещена 30.03.2024 в 14:42
-
Запись от 8Observer8 размещена 30.03.2024 в 16:29
-
Видео для мотивации, что можно делать в 3D:
Запись от 8Observer8 размещена 26.12.2025 в 17:18
Обновил(-а) 8Observer8 26.12.2025 в 18:24 -
Рисование треугольника на OpenGL 1 в окне WinAPI на чистом Си от Андрей1926 с модификациями
Код находится в сообщении темы Не работает клик мыши Код прикреплён к сообщению. Проект можно сконфигурировать, скомпилировать, и запустить 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 в EXEBash 1 2 3
config-exe build-exe run-exe
Я добавил лишь использование ортогональной матрицы, чтобы координатная сетка была от [0, 512] по X и [0, 512] по Y. Ось Y смотрит вниз. Начало системы координат находится в левом верхнем углу экрана:
С учётом того, что размер окна 512x512 координаты клика мыши будут совпадать с координатной сетки 2D графики на OpenGL. В этом случае не нужно пересчитывать координаты клика мыши. Специально зафиксировал размер окна.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();
Запись от 8Observer8 размещена 22.03.2026 в 19:48
Обновил(-а) 8Observer8 22.03.2026 в 19:55 -
Перевод примера от Андрей1926 на OpenGL 3.3
Пример выводит вращающийся треугольник. Андрей1926 своей теме Не работает клик мыши использует OpenGL 1 и WinAPI. Перевёл на OpenGL 3.3 и оставил окно на WinAPI. Для работы с матрицами используется CGLM.
Исходники
Запись от 8Observer8 размещена 22.03.2026 в 22:44


