Форум программистов, компьютерный форум, киберфорум
Webgl
Форум программистов и сисадминов Киберфорум > Блоги > webgl
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  
Старый
Запуск модели YOLO в браузере с ONNX, WebAssembly и Next.js
Запись от Reangularity размещена 21.10.2025 в 21:27 / Vue/React/Angular/Svelte notes
Показов 6729 Комментарии 0
Нажмите на изображение для увеличения Название: Запуск модели YOLO в браузере с ONNX, WebAssembly и Next.js.jpg Просмотров: 667 Размер: 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
Показов 11693 Комментарии 0
Метки javascript, webgl
Содержание блога

На русском





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





Исходники примера:
Старый
Проблемы с Kotlin и Wasm при создании игры
Запись от GameUnited размещена 03.07.2025 в 21:23 / The biggest game world
Показов 8234 Комментарии 0
Нажмите на изображение для увеличения Название: Проблемы с KotlinWasm при создании игры.jpg Просмотров: 628 Размер: 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
Показов 10941 Комментарии 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
Показов 11186 Комментарии 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
Показов 1667 Комментарии 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
Показов 2830 Комментарии 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
Показов 1670 Комментарии 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
Показов 2848 Комментарии 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
Показов 2628 Комментарии 0
Содержание блога

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

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

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

В примере загружаются стандартные объекты Blender из формата dae без текстур. Цвет каждого объекта задаётся в самой программе - цвет через uniform-переменную передаётся в фрагментный шейдер. Библиотека...
Старый
Рейтинг: 5.00. Голосов: 1.
Пример загрузки кубика из gltf 2.0 на JavaScript и WebGL
Запись от 8Observer8 размещена 14.12.2021 в 15:38 / Блог 8Observer8
Показов 1473 Комментарии 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
Показов 1652 Комментарии 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
Показов 1264 Комментарии 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
Показов 2353 Комментарии 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 Сегодня в 05:11
Показов 22115 Комментарии 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
Показов 398 Комментарии 0
Метки typescript, webgl
Чуть позже, не успел.
Старый
Рейтинг: 5.00. Голосов: 1.
Понг на TypeScript и WebGL 1.0 из текстового туториала от NoobTuts
Запись от 8Observer8 размещена 15.12.2019 в 23:26 / Блог 8Observer8
Показов 1115 Комментарии 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
Показов 1359 Комментарии 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
Показов 2105 Комментарии 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
Показов 1740 Комментарии 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
Показов 1331 Комментарии 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
Показов 1309 Комментарии 0
Метки typescript, webgl
Я вам приготовил очень короткий пример в песочнице, где вы можете авторизоваться через GitHub одни нажатием кнопки "Войти через Github" в верхнем правом углу. После авторизации можно сделать копию примера, нажав кнопку Fork в левом верхнем углу. Теперь вы можете приступить к программированию на WebGL и...
Старый
Рейтинг: 5.00. Голосов: 1.
Руководство по Скайпу по TypeScript и WebGL
Запись от 8Observer8 размещена 22.07.2019 в 10:00 / Блог 8Observer8
Показов 902 Комментарии 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
Показов 1904 Комментарии 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
Показов 4624 Комментарии 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
Показов 2369 Комментарии 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
Показов 1758 Комментарии 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
Показов 18161 Комментарии 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 »
Новые блоги и статьи
Мобильное приложение 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) активировать флаг. . .
Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм
anaschu 30.08.2026
Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .
Оттачиваю умение писать js программы.
russiannick 30.08.2026
Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .
мат медиц модель 30. презентация проекта
anaschu 27.08.2026
хоп хоп хоп хидахоп, а я кладую))
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru