Форум программистов, компьютерный форум, киберфорум
Webgl
Форум программистов и сисадминов Киберфорум > Блоги > webgl
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  
Старый
Запуск модели YOLO в браузере с ONNX, WebAssembly и Next.js
Запись от Reangularity размещена 21.10.2025 в 21:27 / Vue/React/Angular/Svelte notes
Показов 6839 Комментарии 0
Нажмите на изображение для увеличения Название: Запуск модели YOLO в браузере с ONNX, WebAssembly и Next.js.jpg Просмотров: 701 Размер: 116.2 Кб ID: 11322
Помню, как лет пять назад коллега спросил: можно ли запустить детекцию объектов прямо в браузере? Тогда я посмеялся - какой браузер, нужна серверная ферма с GPU. Сейчас же распознавание лиц в видеочате или детекция жестов работают локально, и никто уже не удивляется. WebAssembly перевернул представление о том, что может JavaScript. ONNX Runtime Web позволяет запускать модели машинного обучения с производительностью,...
Аватар для Reangularity
Старый
Основы WebGL. Раскрашивание вершин с помощью VBO
Запись от 8Observer8 размещена 05.07.2025 в 22:35 / Блог 8Observer8. Обновил(-а) 8Observer8 12.08.2025 в 13:49
Показов 11716 Комментарии 0
Метки javascript, webgl
Содержание блога

На русском





На английском





Исходники примера:
Старый
Проблемы с Kotlin и Wasm при создании игры
Запись от GameUnited размещена 03.07.2025 в 21:23 / The biggest game world
Показов 8325 Комментарии 0
Нажмите на изображение для увеличения Название: Проблемы с KotlinWasm при создании игры.jpg Просмотров: 647 Размер: 241.4 Кб ID: 10953
В современном мире разработки игр выбор технологии - это зачастую балансирование между удобством разработки, переносимостью и производительностью. Когда я решил создать свою первую веб-игру, мой выбор пал на Kotlin/Wasm и Compose Multiplatform - перспективные технологии, обещающие возможность писать код на любимом языке с запуском на любой платформе.

Kotlin/WebAssembly (или Kotlin/Wasm) - экспериментальная технология, компилирующая код на Kotlin в бинарный...
Аватар для GameUnited
Старый
Рейтинг: 5.00. Голосов: 2.
Содержание темы с примерами на WebGL
Запись от 8Observer8 размещена 01.07.2025 в 19:13 / Блог 8Observer8. Обновил(-а) 8Observer8 25.03.2026 в 02:50
Показов 10991 Комментарии 0
Метки javascript, webgl
Содержание блога
  1. Все примеры из книги Мацуды и Ли в песочнице JSFiddle
  2. Рисование точки заданного размера
  3. Передача координаты точки из главной программы в программу вертексного шейдера
  4. WebGL 1.0. Рисование точек в цикле по кругу по формулам
  5. WebGL 2.0. Рисование точек в цикле по кругу по формулам
  6. WebGL 1.0. Передача цвета точки из главной программы в программу фрагментного шейдера
  7. WebGL 1.0. Передача цвета точки из главной программы в программу фрагментного шейдера
  8. WebGL. 1.0. Рисование точки с применением буферного объекта (VBO - Vertex Buffer Object)
...
Старый
Рейтинг: 5.00. Голосов: 1.
Основы WebGL. Простой треугольник
Запись от 8Observer8 размещена 01.07.2025 в 19:03 / Блог 8Observer8. Обновил(-а) 8Observer8 12.08.2025 в 13:48
Показов 11213 Комментарии 0
Метки javascript, webgl
Содержание блога

Простой треугольник без трансформаций. Для трансформаций можно использовать glMatrix, как в примере: https://plnkr.co/edit/qT6ZTwvncLPRamK5?preview

На русском:





На английском:





Исходники примера:
Старый
Рейтинг: 5.00. Голосов: 2.
Демка от первого лица на WebGL для осмотра результата туториала: Blender: Interior Environments for Games by Alan Thorn
Запись от 8Observer8 размещена 21.05.2023 в 21:53 / Блог 8Observer8
Показов 1691 Комментарии 0
Метки blender, gamedev, webgl
Содержание блога

Сделал демку на WebGL 1.0 (OimoPhysics, glMatrix), в которой можно от первого лица перемещаться (WASD + мышь) и осматривать результат выполнения туториала "Blender: Interior Environments for Games by Alan Thorn"

На трубу надо было тоже запечь тень, а то она выделяется без тени, но в туториале так было. Позже запеку.
Старый
Рейтинг: 5.00. Голосов: 1.
Рисование домика в 2D с GUI на WebGL 1.0 (JavaScript, TypeScript) и OpenGL 2.1 (Python, C++, Qt, PyQt, PySide)
Запись от 8Observer8 размещена 05.02.2023 в 16:34 / Блог 8Observer8
Показов 2852 Комментарии 1
Содержание блога

Рисование домика в 2D с GUI на:
  • JavaScript, WebGL 1.0
  • TypeScript, WebGL 1.0
  • Python, PyQt6, OpenGL 2.1
  • Python, PySide6, OpenGL 2.1
  • C++, Qt6, OpenGL 2.1
и размышления по поводу инструментов программировани­­­­я рисования графики

Исходники на GitHub:
...
Старый
Рейтинг: 5.00. Голосов: 1.
Рисование коллайдеров типов Box и Sphere созданных с помощью физического движка Cannon-ES на WebGL и TypeScript
Запись от 8Observer8 размещена 05.08.2022 в 14:11 / Блог 8Observer8
Показов 1700 Комментарии 0
Метки typescript, webgl
Содержание блога

Класс CannonDebugger я взял из этого сообщения.

На Sandbox скройте и откройте предварительный просмотр, чтобы увидеть результат нажатием сочетаний клавиш: Ctrl+Shift+D

Инструкция по сборке:
  • Установить пакеты глобально: `npm i -g typescipt parcel browserify uglify-js http-server`
  • Установить пакеты локально: `npm i`
  • Запустить parcel для отладки
...
Старый
Рейтинг: 5.00. Голосов: 1.
Демка перемещения Jill с помощью физического движка Ammo.js (порт Bullet Physics)
Запись от 8Observer8 размещена 16.07.2022 в 14:42 / Блог 8Observer8
Показов 2882 Комментарии 0
Метки gamedev, webgl
Содержание блога

Демка перемещения Jill с помощью физического движка Ammo.js (порт Bullet Physics). Исходники контроллера управления от третьего лица в этой теме: Управление героем стрелками в 3D, вид от 3-го лица, на WebGL
Старый
Рейтинг: 5.00. Голосов: 2.
Игровая демка "Сапёр" на чистом WebGL 1.0 и JavaScript из туториала "Unity 2D Minesweeper Tutorial" от NoobTuts
Запись от 8Observer8 размещена 06.03.2022 в 11:49 / Блог 8Observer8
Показов 2655 Комментарии 0
Содержание блога

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

Название: 01 - you win.png Просмотров: 9585 Размер: 5.7 Кб Название: 02 - you lose.png Просмотров: 9501 Размер: 7.2 Кб

Для создания игровой демки использовались инструменты:
  • Легковесный бесплатный редактор кода VSCode, который
...
Старый
Рейтинг: 5.00. Голосов: 1.
Загрузка 3D-моделей из Blender из формата dae без текстур на WebGL 1.0. Физический движок Cannon.js для падения кубиков
Запись от 8Observer8 размещена 08.01.2022 в 18:14 / Блог 8Observer8
Показов 1532 Комментарии 0
Содержание блога

В примере загружаются стандартные объекты Blender из формата dae без текстур. Цвет каждого объекта задаётся в самой программе - цвет через uniform-переменную передаётся в фрагментный шейдер. Библиотека...
Старый
Рейтинг: 5.00. Голосов: 1.
Пример загрузки кубика из gltf 2.0 на JavaScript и WebGL
Запись от 8Observer8 размещена 14.12.2021 в 15:38 / Блог 8Observer8
Показов 1499 Комментарии 0
Метки gamedev, javascript, webgl
Содержание блога

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

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

PHP/HTML
1
2
3
4
5
6
7
8

<!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
...
Старый
Рейтинг: 5.00. Голосов: 1.
Спрайтовая анимация "Fang Idle" на WebGL 2.0 и JavaScript
Запись от 8Observer8 размещена 13.12.2021 в 13:00 / Блог 8Observer8
Показов 1672 Комментарии 0
Метки gamedev, javascript, webgl
Содержание блога

PHP/HTML
1
2
3
4
5
6
7

<!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,
...
Старый
Рейтинг: 5.00. Голосов: 2.
Спрайтовая анимация "Fang Idle" на WebGL 2.0 и TypeScript
Запись от 8Observer8 размещена 13.12.2021 в 12:52 / Блог 8Observer8
Показов 1288 Комментарии 0
Метки gamedev, typescript, webgl
Содержание блога

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

npm i -g typescript browserify uglify-js http-server
Зайти в папку с примером и установить локальные пакеты из package.json командой:

npm i
Ввести команду сборки:...
Старый
Рейтинг: 5.00. Голосов: 1.
Движение ромба зажатыми левой и правой кнопками мыши. WebGL 1.0, JavaScript ES5
Запись от 8Observer8 размещена 16.04.2020 в 17:22 / Блог 8Observer8
Показов 2370 Комментарии 0
Метки gamedev, javascript, webgl
Содержание блога

Cкачать исходники: move-rhombus-by-mouse-webgl10-es5.zip Запустить в песочнице по клику. Чтобы отображался русский шрифт нужно локальную версию запускать с локального HTTP сервера, а не двойным кликом по index.html

index.html

PHP/HTML
1
2
3
4
5
6

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Move Rhombus by Mouse. WebGL 1.0, JavaScript</title>
...
Старый
Рейтинг: 5.00. Голосов: 2.
Примеры с 2D/3D графикой на WebGPU/OpenGL/WebGL, C/C++, JavaScript/TypeScript, Python, C#/OpenTK
Запись от 8Observer8 размещена 29.02.2020 в 23:36 / Блог 8Observer8. Обновил(-а) 8Observer8 21.09.2026 в 05:11
Показов 22222 Комментарии 66
Содержание блога

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



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



Исходники:

Исходники версии...
Старый
Рейтинг: 5.00. Голосов: 2.
Вращающийся кубик на шейдерах c Diffuse и Ambient освещением на WebGL и TypeScript
Запись от 8Observer8 размещена 13.02.2020 в 22:55 / Блог 8Observer8
Показов 408 Комментарии 0
Метки typescript, webgl
Чуть позже, не успел.
Старый
Рейтинг: 5.00. Голосов: 1.
Понг на TypeScript и WebGL 1.0 из текстового туториала от NoobTuts
Запись от 8Observer8 размещена 15.12.2019 в 23:26 / Блог 8Observer8
Показов 1127 Комментарии 0
Метки gamedev, typescript, webgl
Я переписал Понг на TypeScript и WebGL 1.0 из текстового туториала от NoobTuts: https://noobtuts.com/cpp/2d-pong-game

Запустить в браузере Release версию: http://ivan8observer8.herokuap... -noobtuts/ Я использую бесплатный хостинг для Node.js/Express, поэтому иногда нужно подождать 10 секунд, чтобы разбудить сервер.

Скачать исходники: https://github.com/8Observer8/... typescript
На GitHub есть инструкция,...
Старый
Рейтинг: 5.00. Голосов: 1.
Заливаем холст заданным цветом на WebGL 1.0 и JavaScript.
Запись от 8Observer8 размещена 20.10.2019 в 14:50 / Блог 8Observer8
Показов 1369 Комментарии 0
Метки javascript, webgl
Это одно из самых коротких приложений на WebGL 1.0 и JavaScript, которое определяет цвет фона холста и закрашивает этим цветом холст. Вы можете запустить это приложение в песочнице (на Plunker'е), посмотреть результат, прочитать код, сделать Fork, что-то закодить, сохранить, послать ссылку друзьям: https://next.plnkr.co/edit/nGf... ml&preview А главное, что такое приложение будет кроссплатформенным, то есть оно...
Старый
Рейтинг: 5.00. Голосов: 2.
Пример для начинающих в компьютерной графике на WebGL и TypeScript
Запись от 8Observer8 размещена 07.10.2019 в 15:22 / Блог 8Observer8
Показов 2112 Комментарии 0
Метки typescript, webgl
Содержание блога

Написал пример для начинающих в WebGL на TypeScript. Пример рисует треугольник: https://plnkr.co/edit/PkqSZGwh... ?p=preview

Если есть желание изучать геометрию, линейную алгебру, компьютерную графику, то пожалуйста: делайте Fork, изменяйте, сохраняйте, показывайте своё творчество друзьям.

Отмечу,...
Старый
Рейтинг: 5.00. Голосов: 3.
Теперь мой движок умеет загружать 3D модели из .dae формата
Запись от 8Observer8 размещена 16.08.2019 в 10:00 / Блог 8Observer8
Показов 1759 Комментарии 0
Содержание блога

Свой графический и игровой движок пишу в двух версиях:
  • C#, OpenTK, OpenGL 3.1
  • TypeScript, WebGL

Я покрасил стандартный объект в Blender и экспортировал объект и материалы в .dae. Далее, распарсил XML c помощью языка xPath в C#/OpenTK и TypeScript/WebGL.

Можете запустить в браузере или скачать EXE
Старый
Рейтинг: 5.00. Голосов: 1.
Загрузка шрифта для моего игрового движка на WebGL и TypeScript
Запись от 8Observer8 размещена 15.08.2019 в 17:36 / Блог 8Observer8
Показов 1347 Комментарии 0
Метки typescript, webgl
Пишу игровой и графический движок на WebGL и TypeScript. Реализовал загрузку ресурсов: шейдеров, текстур, XML-данных о шрифте. На данном этапе выводится текст на определённом шрифте.

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

В этой книге Build your own 2D Game Engine есть пример в 5-й главе, как загружать и парсить шрифт из XML, который был получен с помощью программы Bitmap Font Generator из TrueType. Парсинг происходит с помощью языка запросов XPath.

Используются:
  • Редактор:
...
Старый
Рейтинг: 5.00. Голосов: 1.
Получение WebGL контекста на языке TypeScript в песочнице
Запись от 8Observer8 размещена 22.07.2019 в 13:27 / Блог 8Observer8
Показов 1314 Комментарии 0
Метки typescript, webgl
Я вам приготовил очень короткий пример в песочнице, где вы можете авторизоваться через GitHub одни нажатием кнопки "Войти через Github" в верхнем правом углу. После авторизации можно сделать копию примера, нажав кнопку Fork в левом верхнем углу. Теперь вы можете приступить к программированию на WebGL и...
Старый
Рейтинг: 5.00. Голосов: 1.
Руководство по Скайпу по TypeScript и WebGL
Запись от 8Observer8 размещена 22.07.2019 в 10:00 / Блог 8Observer8
Показов 916 Комментарии 4
Метки typescript, webgl
Я использую TypeScript c WebGL вместо JavaScript. Если не слышали, то почитайте в Википедии о TypeScript. Я использую сборку в AMD модули с RequireJS для отладки в VSCode. Для сборки в Release я использую Browserify и UglifyJS. Для написания Unit-тестов я использую Jasmine на TypeScript. Я могу руководить вами по Скайпу, чтобы научить...
Старый
Рейтинг: 5.00. Голосов: 1.
Кроссплатформен­ная змейка на WebGL и TypeScript
Запись от 8Observer8 размещена 07.07.2019 в 18:21 / Блог 8Observer8
Показов 1928 Комментарии 0
Метки gamedev, typescript, webgl
Содержание блога

Песочница: https://next.plnkr.co/edit/7gj... 4Y?preview

В песочнице можно поиграть, залогиниться через GitHub, сделать Fork (нажав кнопку "Fork), сделать свои изменения, сохранить, скопировать свою ссылку в комментарии. Можно вместе подумать, поэкспериментировать, что можно...
Старый
Рейтинг: 5.00. Голосов: 1.
Определение клика мыши по объекту на JavaScript, TypeScript, WebGL, C# и OpenGL 3.1
Запись от 8Observer8 размещена 14.06.2019 в 01:43 / Блог 8Observer8
Показов 4654 Комментарии 2
Содержание блога

Советую книгу на русском из первого сообщения темы: Небольшие примеры на WebGL. Лучше читать сразу на английском, он в книге довольно простой: WebGL Programming Guide. Matsuda & Lea. По предыдущим ссылкам можно скачать архив с примерами к книге и запустить примеры в песочнице JSFiddle (через VPN). В книге используется самописная библиотека для работы с векторами и матрицами. Лучше взять намного более продвинутую glMatrix, которая всю необходимую...
Старый
Рейтинг: 5.00. Голосов: 1.
Replacement of Canvas API with WebGL in the Snake Game
Запись от 8Observer8 размещена 08.02.2019 в 14:56 / Блог 8Observer8
Показов 2396 Комментарии 6
Метки canvas, webgl
Blog content

I just show how to rewrite drawRectangle(x, y, color, size) function from the instruction for drawing with WebGL instead of Canvas API.

Include gl-Matrix. If you will search: gl-matrix cdn you will find this: https://cdnjs.com/libraries/gl-matrix We need gl-Matrix for setting positions and sizes of squares. We will set coordinate cell and camera position using gl-Matrix functions: ortho and lootAt.

Let's include gl-Matrix, get WebGL context and...
Старый
Портирование примеров на C#/OpenGL/OpenTK с JS/WebGL из книги Коичи Мацуды и Роджера Ли
Запись от 8Observer8 размещена 10.03.2017 в 07:12 / Блог 8Observer8
Показов 1777 Комментарии 0
Метки c#, javascript, opengl, opentk, webgl
Содержание блога

Нахожусь в процессе портирования примеров на C#/OpenGL/OpenTK из книги: WebGL. Программирование трехмерной графики

К настоящему моменту портировал все примеры из второй и третьей главы: Ch02Ch03.rar

Оригинальные примеры можно скачать одним архивом с официального сайта: https://sites.google.com/site/webglbook/

Примеры этих глав перенёс на jsfiddle.net:...
Старый
Рейтинг: 5.00. Голосов: 1.
Книги по графике: HTML5 Canvas, WebGL, ThreeJS и Phaser
Запись от 8Observer8 размещена 13.09.2016 в 09:05 / Блог 8Observer8
Показов 18181 Комментарии 0
Содержание блога

На русском по WebGL:
  1. 2015 - WebGL. Программирование трехмерной графики - Коичи Мацуда, Роджер Ли -> описание -> исходники

На русском по Canvas
  1. 2016 - JavaScript для детей. Самоучитель по программированию -> описание

На английском по Canvas и WebGL:
  1. 2011 - 11 - Foundation HTML5 Animation with JavaScript - Billy Lamberta, Keith Peters -> description and source code
  2. 2012 - 05 - Core HTML5 Canvas Graphics, Animation, and Game Development
...
1 из 2 1 2 »
Новые блоги и статьи
Запустил конкурс "тем и промптов для текстовых квестов созданных почти чисто ИИ"
Adler 06.10.2026
Всем привет! За последние три-четыре дня я создал более 16 текстовых квестовых игр используя преимущественно по одному запросу к ИИ на игру. Мне так понравилось смотреть все ветки/ сцены во всех. . .
ИИ не может найти нужный язык в списке
Supersumestria 05.10.2026
Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .
Новая последняя моя музыка в SUNO
zorxor 05.10.2026
Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .
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, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru